• 7Overview
    Overview
    • Analytics
    • Users
    • Medical
    • Financial
    • Learning
  • 2Media
    Media
    • Video Gallery
    • Photo Gallery
  • Email
    Email
    • Inbox
    • Compose
  • Learning
    Learning
    • Courses Home
    • Courses Listing
    • Course Page
  • Support
    Support
    • 45Tickets
    • Overview page
    • Post page
    • Knowledge Base
    • 7Questions
    • Answers
  • Medical
    Medical App
    • Overview
    • 2 Patients
    • Appointments
    • Memos
    • Metrics
  • Maps
    Maps
    • Google Maps
    • Vector Maps
  • Content
    Content
    • News
    • FAQ
    • Search
  • Financial
    Financial
    • Invoice
    • Finances
    • Bookings
  • eCommerce
    eCommerce
    • Products
    • Edit product
  • Manage
    Management
    • Employees
  • Surveys
  • Events
  • Elements
    Components
    • UI Elements
    • Icons
    • Typography
    • Calendar
    • Tabs
    • 3Tables
      • Tables
      • Responsive
      • Pricing Tables
    • 4Forms
      • Form Wizards
      • Form Elements
      • Form Validator
      • File Managers
    • Sliders
    • Charts
    • Grid
    • Notifications
    • Modals
    • Thumbnails
    • Carousels
    • Image Crop
    • Twitter API
    • Infinite Scroll
  • Account
    Account
    • Profile / CV
    • My Account
    • Login
    • Signup
  • Error
  • Components
    • UI Elements
    • Icons
    • Typography
    • Tabs
    • Sliders
    • Charts
    • Grid
    • Notifications
    • Modals
    • Thumbnails
    • Carousels
    • Image Cropping
    • Twitter API
    • Infinite Scroll
  • Forms
    • Form Wizards
    • Form Elements
    • Form Validator
    • File Managers
  • Tables
    • Tables
    • Tables Responsive
    • Pricing Tables
  • Gallery
    • Video Gallery
    • Photo Gallery
    • style-default
    • alizarin-crimson
    • green-army
      • brown
      • purple-gray
      • blue-gray
      • purple-wine
      • black-and-white
      • amazon
      • amber
      • android-green
      • antique-brass
      • antique-bronze
      • artichoke
      • atomic-tangerine
      • bazaar
      • bistre-brown
      • bittersweet
      • blueberry
      • bud-green
      • burnt-sienna
  • 5
    • 50x50
      5 min
      Adrian D.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    • 50x50
      2 days
      Jane B.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    • 50x50
      3 days
      Andrew M.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    • View all messages
  • Bill Jonson
    • Account
    • Messages
    • Settings
    • Logout

Vector maps

  • Markers on the world map
  • GDP by country
  • USA unemployment
  • Regions selection
  • France elections
  • Random colors
  • Map of the mall
  • Reverse projection
  • new Full screen vector map

Markers on the world map

Gross domestic product (GDP) by country

USA unemployment

Data for 2009

The following example demonstrates the visualization of unemployment statistics in the USA by states and metropolitan areas in a 5-years time-period. The step-by-step process of creation of such a map is described in the tutorial. The code in Ruby used to convert data could be found in this repository.

Regions selection

The following example demonstrates the feature of jVectorMap that allows selection of regions and/or markers by user or programmatically. Specific styles could be assigned for the selected items. User selection is saved between page reloads in the local storage.

French presidential election, 2007

Nicolas Sarkozy Segolene Royal

French presidential election, 2012

Francois Hollande Nicolas Sarkozy

Generate random colors

The following example demonstrates how to set colors directly for the map. The map is painted to the random colors upon loading. You can click "Update colors" to generate new colors for the map.

Map of the mall

Example of custom map created from SVG using converter available here. Please note that if you use map generated from SVG you need to position markers by pixel coordinates, not by latitude and longitude as in case of map generated from GIS data.

Reverse projection

This example demonstrates the ability to convert pixel coordinates on map to the repsective latitude and longitude coordinates. Click on the map adds marker to the clicked point, click on the added marker removes it.

© 2012 - 2014 - MosaicPro - All Rights Reserved. Purchase BUSINESS on ThemeForest - Current version: v1.0.2 / changelog