CODEWITHSUNDEEP
jqueryjvectormap
SamotnyPocitac
SamotnyPocitac

Reputation: 402

jVectorMap markers and the map

Is it possible to have different map with markers then the white map?

http://jvectormap.com/examples/markers-world/

so far I was able to use only the white map but I would like to use the blue map for example.

$(function(){
  $('#world-map-markers').vectorMap({
    map: 'world_mill_en',
    scaleColors: ['#C8EEFF', '#0071A4'],
    normalizeFunction: 'polynomial',
    hoverOpacity: 0.7,
    hoverColor: false,
    markerStyle: {
      initial: {
        fill: '#F8E23B',
        stroke: '#383f47'
      }
    },
    backgroundColor: '#383f47',
    markers: [      
      {latLng: [0.33, 6.73], name: 'São Tomé and Príncipe'}
    ]
  });
});

Upvotes: 0

Views: 3239

Answers (1)

Mike Vranckx
Mike Vranckx

Reputation: 5577

Yes, sure! You need to pass a regionStyle object when initializing the jVectorMap.

regionStyle: {
    initial: {
        fill: 'blue',
        "fill-opacity": 1,
        stroke: 'none',
        "stroke-width": 0,
        "stroke-opacity": 1
    },
    hover: { // other style when hovering a region
        "fill-opacity": 0.8
    },
    selected: { // other style when a region is selected
        fill: 'yellow'
    },
    selectedHover: {} // other styles when hovering a selected region
},

Here is an example with a blue map: http://jsfiddle.net/9Vyv6/2/

Upvotes: 1

Related Questions