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]}
};
}