CODEWITHSUNDEEP
javascriptd3.js
Mithlesh kumar
Mithlesh kumar

Reputation: 23

Datamaps are showing small size map of India

Hi I am trying to create a map with datamap and d3 js. But its showing map in reverse and very small in size. How can I resolve this. Sharing the JS fiddle for the same.

    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
    <script src="https://raw.githubusercontent.com/markmarkoh/datamaps/master/dist/datamaps.ind.js"></script>
    <div id="container" style="position: relative; width: 500px; height: 300px;"></div>

var map = new Datamap({
  element: document.getElementById('container'),
  scope: 'ind'
});

https://jsfiddle.net/bxp9e9j1/

Upvotes: 1

Views: 1190

Answers (1)

Klaujesi
Klaujesi

Reputation: 1836

You need to tell where is the center and the projection. Add this to your code:

  setProjection: function(element) {
    var projection = d3.geo.equirectangular()
      .center([80, 25])
      .scale(600)
      .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
    var path = d3.geo.path()
      .projection(projection);
    return {path: path, projection: projection};
  }

Center of India: 20.5937° N, 78.9629° E

Complete code:

var map = new Datamap({
  element: document.getElementById('container'),
  scope: 'ind',
  setProjection: function(element) {
    var projection = d3.geo.equirectangular()
      .center([80, 25])
      .scale(600)
      .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
    var path = d3.geo.path()
      .projection(projection);

    return {path: path, projection: projection};
  }
});

Tip: you can change Projection type to: Mercator

projection: 'mercator',

that give you a flat map intead of rounded globe type.

Hope this help

Upvotes: 4

Related Questions