This example shows how to convert from a Mapbox-gl map projection to a d3.geo Mercator projection. This allows you to take full advantage of all the d3.geo based functions and examples while also leveraging the power and ease-of-use of mapbox-gl
Much credit goes to @vicapow who developed viewport-mercator-project where he figured out the necessary calculations to make this work.
Built with blockbuilder.org
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script src="viewport.js"></script> | |
| <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.css' rel='stylesheet' /> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| #map { | |
| position:absolute; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| svg { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| } | |
| circle.mapbox { | |
| stroke: #111; | |
| fill-opacity: 0.1; | |
| } | |
| circle.vp { | |
| fill-opacity: 0.1; | |
| stroke: #111; | |
| } | |
| circle.d3 { | |
| fill-opacity: 0.1; | |
| stroke-width: 3; | |
| stroke: orange; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <svg id="overlay2"></svg> | |
| <script> | |
| mapboxgl.accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiJjaWhtdmxhNTIwb25zdHBsejk0NGdhODJhIn0.2-F2hS_oTZenAWc0BMf_uw' | |
| //Setup mapbox-gl map | |
| var map = new mapboxgl.Map({ | |
| container: 'map', // container id | |
| style: "mapbox://styles/mapbox/light-v9", | |
| center: [-0.1,51.5119112], | |
| zoom: 11.5, | |
| }) | |
| //map.scrollZoom.disable() | |
| map.addControl(new mapboxgl.Navigation()); | |
| // Setup our svg layer that we can manipulate with d3 | |
| var container = map.getCanvasContainer() | |
| var svg = d3.select(container).append("svg") | |
| // we can project a lonlat coordinate pair using mapbox's built in projection function | |
| function mapboxProjection(lonlat) { | |
| var p = map.project(new mapboxgl.LngLat(lonlat[0], lonlat[1])) | |
| return [p.x, p.y]; | |
| } | |
| // we can use viewport-mercator-project to get projection and unprojection functions | |
| function getVP() { | |
| var bbox = document.body.getBoundingClientRect(); | |
| var center = map.getCenter(); | |
| var zoom = map.getZoom(); | |
| var vp = ViewportMercator({ | |
| longitude: center.lng, | |
| latitude: center.lat, | |
| zoom: zoom, | |
| width: bbox.width, | |
| height: bbox.height, | |
| }) | |
| return vp; | |
| } | |
| // we calculate the scale given mapbox state (derived from viewport-mercator-project's code) | |
| // to define a d3 projection | |
| function getD3() { | |
| var bbox = document.body.getBoundingClientRect(); | |
| var center = map.getCenter(); | |
| var zoom = map.getZoom(); | |
| // 512 is hardcoded tile size, might need to be 256 or changed to suit your map config | |
| var scale = (512) * 0.5 / PI * pow(2, zoom); | |
| var d3projection = d3.geo.mercator() | |
| .center([center.lng, center.lat]) | |
| .translate([bbox.width/2, bbox.height/2]) | |
| .scale(scale); | |
| return d3projection; | |
| } | |
| // calculate the original viewport-mercator-project projection | |
| var vp = getVP(); | |
| // calculate the original d3 projection | |
| var d3Projection = getD3() | |
| // we want to render the same point | |
| var point = [-0.1,51.5119112] | |
| var mapboxCircle = svg.append("circle").classed("mapbox", true) | |
| var vpCircle = svg.append("circle").classed("vp", true) | |
| var d3Circle = svg.append("circle").classed("d3", true) | |
| // you can use any of these projections to create a d3.geo.path | |
| // function for rendering lines and polygons | |
| /* | |
| var path = d3.geo.path() | |
| .projection(mapboxProjection) | |
| */ | |
| /* | |
| var path = d3.geo.path() | |
| .projection(d3Projection) | |
| */ | |
| function render() { | |
| // we update our calculated projections whenever the underlying map changes | |
| // due to zoom and pan | |
| vp = getVP(); | |
| d3Projection = getD3(); | |
| mapboxCircle.attr({ | |
| cx: mapboxProjection(point)[0], | |
| cy: mapboxProjection(point)[1], | |
| r: 15// * currentScale | |
| }) | |
| vpCircle.attr({ | |
| cx: vp.project(point)[0], | |
| cy: vp.project(point)[1], | |
| r: 20// * currentScale | |
| }) | |
| d3Circle.attr({ | |
| cx: d3Projection(point)[0], | |
| cy: d3Projection(point)[1], | |
| r: 25// * currentScale | |
| }) | |
| } | |
| // re-render our visualization whenever the view changes | |
| map.on("viewreset", function() { | |
| render() | |
| }) | |
| map.on("move", function() { | |
| render() | |
| }) | |
| // render our initial visualization | |
| render() | |
| </script> | |
| </body> |
| // Copyright (c) 2015 Uber Technologies, Inc. | |
| // Permission is hereby granted, free of charge, to any person obtaining a copy | |
| // of this software and associated documentation files (the "Software"), to deal | |
| // in the Software without restriction, including without limitation the rights | |
| // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |
| // copies of the Software, and to permit persons to whom the Software is | |
| // furnished to do so, subject to the following conditions: | |
| // The above copyright notice and this permission notice shall be included in | |
| // all copies or substantial portions of the Software. | |
| // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |
| // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |
| // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | |
| // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |
| // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | |
| // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | |
| // THE SOFTWARE. | |
| var PI = Math.PI; | |
| var pow = Math.pow; | |
| var tan = Math.tan; | |
| var log = Math.log; | |
| var atan = Math.atan; | |
| var exp = Math.exp; | |
| var DEGREES_TO_RADIANS = PI / 180; | |
| var RADIANS_TO_DEGREES = 180 / PI; | |
| function radians(value) { | |
| return value * DEGREES_TO_RADIANS; | |
| } | |
| function degrees(value) { | |
| return value * RADIANS_TO_DEGREES; | |
| } | |
| // see: https://en.wikipedia.org/wiki/Web_Mercator | |
| function ViewportMercator(opts) { | |
| var scale = (opts.tileSize || 512) * 0.5 / PI * pow(2, opts.zoom); | |
| var lamda = radians(opts.longitude); | |
| var phi = radians(opts.latitude); | |
| var x = scale * (lamda + PI); | |
| var y = scale * (PI - log(tan(PI * 0.25 + phi * 0.5))); | |
| var offsetX = opts.width * 0.5 - x; | |
| var offsetY = opts.height * 0.5 - y; | |
| function project(lnglat2) { | |
| var lamda2 = lnglat2[0] * DEGREES_TO_RADIANS; | |
| var phi2 = lnglat2[1] * DEGREES_TO_RADIANS; | |
| var x2 = scale * (lamda2 + PI); | |
| var y2 = scale * (PI - log(tan(PI * 0.25 + phi2 * 0.5))); | |
| return [x2 + offsetX, y2 + offsetY]; | |
| } | |
| function unproject(xy) { | |
| var x2 = xy[0] - offsetX; | |
| var y2 = xy[1] - offsetY; | |
| var lamda2 = x2 / scale - PI; | |
| var phi2 = 2 * (atan(exp(PI - y2 / scale)) - PI * 0.25); | |
| return [degrees(lamda2), degrees(phi2)]; | |
| } | |
| function contains(lnglat2) { | |
| var xy = project(lnglat2); | |
| var x = xy[0]; | |
| var y = xy[1]; | |
| return ( | |
| x >= 0 && x <= opts.width && | |
| y >= 0 && y <= opts.height | |
| ); | |
| } | |
| return { | |
| project: project, | |
| unproject: unproject, | |
| contains: contains, | |
| scale: function() { return scale }, | |
| translate: function() { return [offsetX, offsetY]} | |
| }; | |
| } |
