mosaicpro
2 7
  • 2 Overview
    • Analytics
    • Users
  • 2 Media
    • Video Gallery
    • Photo Gallery
  • Email
    • Inbox
    • Compose
  • Learning
    • Courses Home
    • Courses Listing
    • Course Page
  • Support
    • 45 Tickets
    • Overview page
    • Post page
    • Knowledge Base
    • 7 Questions
    • Answers
  • Medical
    • Overview
    • 2 Patients
    • Appointments
    • Memos
    • Metrics
  • Maps
    • Google Maps
    • Vector Maps
  • Content
    • News
    • FAQ
    • Search
  • Financial
    • Invoice
    • Finances
    • Bookings
  • eCommerce
    • Products
    • Edit product
  • Manage
    • Employees
  • Surveys
  • Events
  • Elements
    • UI Elements
    • Icons
    • Typography
    • Calendar
    • Tabs
    • 3 Tables
      • Tables
      • Responsive
      • Pricing Tables
    • 4 Forms
      • Form Wizards
      • Form Elements
      • Form Validator
      • File Managers
    • Sliders
    • Charts
    • Grid
    • Notifications
    • Modals
    • Thumbnails
    • Carousels
    • Image Crop
    • Twitter API
    • Infinite Scroll
  • Account
    • Profile / CV
    • My Account
    • Login
    • Signup
  • Error
  • 7 Submenus
    • Active
    • Menu item
    • Menu item
    • 30 2nd level
      • Menu item
      • Menu item
      • Menu item
  • 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
  • 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

Vector maps

  • Markers on the world map
  • GDP by country
  • USA unemployment
  • Regions selection
  • France elections
  • Random colors
  • Map of the mall
  • Reverse projection
  • newFull 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.3-rc2 / changelog