2016-05-11

Embedding TopoJSON on a Google Maps with D3.js

Dùng topojson của D3 chuyển về GeoJSON và thêm Data Layer như bình thường.

Format Data Layer theo như tài liệu của Google Map. Dùng function chuyển từ latLng của Google Maps sang page position để dùng cho tooltip chẳng hạn

function latLngToPoint(latLng) {

 var projection = map.getProjection();
 var bounds = map.getBounds();
 var topRight = projection
  .fromLatLngToPoint(bounds.getNorthEast());
 var bottomLeft = projection
  .fromLatLngToPoint(bounds.getSouthWest());

 var scale = Math.pow(2, map.getZoom());
 var worldPoint = projection
  .fromLatLngToPoint(latLng);

 return {
  x: (worldPoint.x - bottomLeft.x) * scale,
  y: (worldPoint.y - topRight.y) * scale
 };
}


JSFiddle

No comments:

Post a Comment