How do a create and display data on a custom map

bknott · July 21, 2017, 4:29am

Looking for resources on mapping from Canvas. The Canvas part should be fairly straight forward. My questions is really how I can create a custom map and then project data onto the map.

I understand that there are standard maps with states post codes etc, but I looking at mapping a mine site, so there are no current maps available.

Brian

aeremenko · July 21, 2017, 4:37am

What about Google Maps or OpenStreetmap? You can always create your own map with D3 by drawing polygons or using image tiles.

bknott · July 21, 2017, 4:44am

Looking at the Google API at the moment. Would be great to get something that will work offline as well.

aeremenko · July 21, 2017, 5:04am

gist.github.com

https://gist.github.com/mbostock/4132797

.block

license: gpl-3.0
redirect: https://observablehq.com/@d3/zoomable-map-tiles

README.md

A demo of the [d3.geo.tile](https://github.com/d3/d3-plugins/tree/master/geo/tile) plugin, which determines which 256x256 tiles are visible in the viewport based on a scale and translate. This demo combines the tile plugin with [d3.behavior.zoom](https://github.com/mbostock/d3/wiki/Zoom-Behavior) for panning and zooming, resulting in a a simple slippy map. Based partly on [an example](http://bl.ocks.org/3943330) by [Tom MacWright](http://macwright.org/).

Tiles copyright [OpenStreetMap contributors](https://www.openstreetmap.org/copyright).

d3.geo.tile.min.js

d3.geo.tile=function(){function t(){var t=Math.max(Math.log(n)/Math.LN2-8,0),h=Math.round(t+e),o=Math.pow(2,t-h+8),u=[(r[0]-n/2)/o,(r[1]-n/2)/o],l=[],c=d3.range(Math.max(0,Math.floor(-u[0])),Math.max(0,Math.ceil(a[0]/o-u[0]))),M=d3.range(Math.max(0,Math.floor(-u[1])),Math.max(0,Math.ceil(a[1]/o-u[1])));return M.forEach(function(t){c.forEach(function(a){l.push([a,t,h])})}),l.translate=u,l.scale=o,l}var a=[960,500],n=256,r=[a[0]/2,a[1]/2],e=0;return t.size=function(n){return arguments.length?(a=n,t):a},t.scale=function(a){return arguments.length?(n=a,t):n},t.translate=function(a){return arguments.length?(r=a,t):r},t.zoomDelta=function(a){return arguments.length?(e=+a,t):e},t};

There are more than three files. show original

bknott · July 21, 2017, 5:34am

Thanks Andrey. Will have a good look at it. Hoping to get something up for the conference.

Vincent · July 25, 2017, 2:26am

Hi @bknott

I just posted an example of Google map with Canvas:

Cheers,