jvectormap - How to incorporate county data

Question

I have already done the following...

I downloaded the .svg for colorado's counties

Then opened the .svg with notepad/notepad++ etc. and pasted everything to this site that converts it into a jvectormap.

Now that I have done that I am wondering how I incorporate the counties into my map of the united states. An example of this can be found here: http://jvectormap.com/examples/drill-down/ When you click on one of the states it zooms in and displays the counties.

Currently this is what I have:

<!DOCTYPE html>
<html>
<head>
  <title>jVectorMap demo</title>
  <link rel="stylesheet" href="jquery-jvectormap-2.0.1.css" type="text/css" media="screen"/>
  <script src="jquery.js"></script>
  <script src="jquery-jvectormap-2.0.1.min.js"></script>
  <script src="jquery-jvectormap-us-aea-en.js"></script>
  <script src="co-counties.js"></script>
</head>
<body>
  <div id="map" style="width: 600px; height: 400px"></div>
  <script>
    $(function(){
  new jvm.MultiMap({
    container: $('#map'),
    maxLevel: 1,
    main: {
      map: 'us_aea_en'
    },
    mapUrlByCode: function(code, multiMap){
      return '/js/us-counties/jquery-jvectormap-data-'+
             code.toLowerCase()+'-'+
             multiMap.defaultProjection+'-en.js';
    }
    });
    });
  </script>
</body>
</html>

It zooms in on a state when you click it but now I need it to transition into the county view.

Also, my Colorado counties jvectormap is currently named 'co-counties.js'

Any help at all would be greatly appreciated!

thanks!

Answer 1

I fixed this problem for all states by downloading the full project for jvectormap - http://jvectormap.com/download/

and under /tests/assets/us the author includes all the js files needed. Just copy them over to your project and use:

new jvm.MultiMap({
  container: $('.jvectormap-container'),
  maxLevel: 1,
  main: {
    map: 'us_lcc_en'
  },
  mapUrlByCode: function(code, multiMap){
    return '../js/counties/jquery-jvectormap-data-'+
           code.toLowerCase()+'-'+
           multiMap.defaultProjection+'-en.js';
  }
});

and it will load each of the county maps on demand

jvectormap - How to incorporate county data

Question

1 answers

solution1
0 ACCPTED 2015-04-07 17:07:00

jvectormap - How to incorporate county data

Question

1 answers

solution1 0 ACCPTED 2015-04-07 17:07:00

solution1
0 ACCPTED 2015-04-07 17:07:00