This example shows how to overlay a custom clipped tile layer on top of a Mapbox-gl map. Currently it is not possible to do an arbitrary clip of a mapbox-gl layer, so I'm using d3.geo.tile to overlay raster tiles and clip them using svg clip-paths.
Built with blockbuilder.org
forked from mbostock's block: Clipped Map Tiles
forked from enjalot's block: Mapbox -> d3 projection
| 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}; |
| <!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="d3.geo.tile.min.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.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: [-96, 38.3], | |
| zoom: 3, | |
| }) | |
| //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 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 / Math.PI * Math.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 d3 projection | |
| var d3Projection = getD3(); | |
| var tile = d3.geo.tile() | |
| .scale(d3Projection.scale() * 2 * Math.PI) | |
| .translate(d3Projection([0, 0])) | |
| .zoomDelta((window.devicePixelRatio || 1) - .5); | |
| // we want to render the same point | |
| var point = [-96, 38.3] | |
| var mapboxCircle = svg.append("circle").classed("mapbox", true) | |
| var d3Circle = svg.append("circle").classed("d3", true) | |
| var path = d3.geo.path() | |
| .projection(d3Projection) | |
| var clipped = svg.append("g") | |
| .attr("clip-path", "url(#clip)") | |
| d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json", function(error, topology) { | |
| if (error) throw error; | |
| var defs = svg.append("defs"); | |
| defs.append("path") | |
| .attr("id", "land") | |
| .datum(topojson.feature(topology, topology.objects.land)) | |
| .attr("d", path); | |
| defs.append("clipPath") | |
| .attr("id", "clip") | |
| .append("use") | |
| .attr("xlink:href", "#land"); | |
| render(); | |
| }) | |
| function render() { | |
| var bbox = document.body.getBoundingClientRect(); | |
| // we update our calculated projections whenever the underlying map changes | |
| // due to zoom and pan | |
| d3Projection = getD3(); | |
| // update our tile generator | |
| tile.scale(d3Projection.scale() * 2 * Math.PI) | |
| .translate(d3Projection([0, 0])) | |
| .size([bbox.width, bbox.height]) | |
| path.projection(d3Projection) | |
| d3.select("#land").attr("d", path) | |
| mapboxCircle.attr({ | |
| cx: mapboxProjection(point)[0], | |
| cy: mapboxProjection(point)[1], | |
| r: 15// * currentScale | |
| }) | |
| d3Circle.attr({ | |
| cx: d3Projection(point)[0], | |
| cy: d3Projection(point)[1], | |
| r: 25// * currentScale | |
| }) | |
| var tiles = tile(); | |
| var tiled = clipped.selectAll("image") | |
| .data(tiles, function(d) { return d[2] + "/" + d[0] + "/" + d[1] }) | |
| tiled.exit().remove(); | |
| tiled.enter().append("image") | |
| .attr("xlink:href", function(d) { | |
| var random = ["a", "b", "c", "d"][Math.random() * 4 | 0]; | |
| return "http://" + "a" + ".tiles.mapbox.com/v3/mapbox.natural-earth-2/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; | |
| }) | |
| tiled | |
| .attr("width", Math.round(tiles.scale)) | |
| .attr("height", Math.round(tiles.scale)) | |
| .attr("x", function(d) { return Math.round((d[0] + tiles.translate[0]) * tiles.scale); }) | |
| .attr("y", function(d) { return Math.round((d[1] + tiles.translate[1]) * tiles.scale); }); | |
| } | |
| // 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> |
