Search code examples
javascriptjqueryjvectormap

jvectormap merge two maps

I'm trying to merge two jvectormaps: italy-regions and italy-provinces, i would like to achieve something similar to the drill-down example or even just have the map diveded both in regions and provinces.
I think i cannot use multimap like in the demo because italy-provinces map is just one script with all the provinces inside, so the main function for retrieve the map of each region is useless:

mapUrlByCode: function(code, multiMap){
  return '/js/us-counties/jquery-jvectormap-data-'+
         code.toLowerCase()+'-'+
         multiMap.defaultProjection+'-en.js';
}

In this pen i've reproduced something similar to what i'm trying to achieve.
Obviously this solution is really bad, because i'm using two maps and once i click in a random region of the first map the second map will not zoom, so the two maps looks not synchronized. Someone know or can suggest a way to achieve what i need?

Solution

  • Luckily, the great jVectorMap also supports focus on more than one region, so what you need is just to create the association among regions and provinces and invoke that functions twice.

    I revorked a bit your code to be in some way more "explicit" about Provinces and Regions:

    HTML:

    <div id="map-provinces"></div> 
<div id="map-regions"></div>

    CSS:

    #map-provinces{
  height:500px;
  width: 500px;
  left:-500px;
  opacity:0.5;
}
#map-regions{
  top: 8px; /* Body margin wasn't set correctly in the CodePen */ 
  position : absolute;
  height:500px;
  width: 500px;
  opacity:0.5;
}

    Here is how i do it with the Region of Sicily, up to you to complete this example with the whole list of Province codes:

    var provinces ={"IT-82": ["TP","PA","AG","CL","EN","ME","CT","RG","SR"]};

$('#map-provinces').vectorMap({
   map: 'it_mill'
});
$('#map-regions').vectorMap({
  map: 'it_regions_mill',
  backgroundColor : 'white',
  zoomOnScroll : false,
  zoomMin : 0,
  zoomMax :220,
  regionStyle :{
    initial: {
        fill: 'blue',
        "fill-opacity": 1,
        stroke: 'none',
        "stroke-width": 0,
        "stroke-opacity": 1
    },
    hover: {
      "fill-opacity": 1,
      cursor: 'pointer'
    },
    selected: {
      fill: 'blue',
      "fill-opacity": 1,
    },
    selectedHover: {
      "fill-opacity": 1,
      cursor: 'pointer'
    }
  },
  onRegionClick: function(e,  code,  isSelected,  selectedRegions){
    var codes = [];
    provinces[code].forEach(function(province) {
      codes.push("IT-"+province);
    });
    $('#map-regions').vectorMap('get','mapObject').setFocus({region: code});
    $('#map-provinces').vectorMap('get', 'mapObject').setFocus({regions: codes});
  }
});

    Whit that in mind, you can easily implement the drill-down sample provided on the jVectorMap website, and have both maps correctly aligned after the zoom on region click, like in this picture below, where both overlapped maps are displayed, like you did it in your CodePen:

    Sicily Provinces