Skip to content

Instantly share code, notes, and snippets.

@xEviL
Last active December 26, 2023 04:58
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save xEviL/0c4f628645c6c21c8b3a to your computer and use it in GitHub Desktop.
GeoJSON with Leaflet + D3 using L.D3SvgOverlay

GeoJSON with Leaflet + D3 using L.D3SvgOverlay

Countries on the map rendered from geojson.

Plugin github: Leaflet.D3SvgOverlay

GeoJSON for the countries of the world: world.geo.json

Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<html>
<head>
<title>GeoJSON with Leaflet + D3 using L.D3SvgOverlay</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<link href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css'
rel='stylesheet' type='text/css'/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
<body>
<div id="map-canvas"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.min.js"></script>
<script src="L.D3SvgOverlay.min.js"></script>
<script>
var map = L.map("map-canvas", {center: [46.81509864599243, 8.3221435546875], zoom: 2});
var tiles = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
});
tiles.addTo(map);
var countries = [];
var countriesOverlay = L.d3SvgOverlay(function(sel, proj) {
var upd = sel.selectAll('path').data(countries);
upd.enter()
.append('path')
.attr('d', proj.pathFromGeojson)
.attr('stroke', 'black')
.attr('fill', function(){ return d3.hsl(Math.random() * 360, 0.9, 0.5) })
.attr('fill-opacity', '0.5');
upd.attr('stroke-width', 1 / proj.scale);
});
L.control.layers({"Geo Tiles": tiles}, {"Countries": countriesOverlay}).addTo(map);
d3.json("countries.geo.json", function(data) { countries = data.features; countriesOverlay.addTo(map) });
</script>
</body>
</html>
/**
* Copyright 2015 Teralytics AG
*
* @author Kirill Zhuravlev <kirill.zhuravlev@teralytics.ch>
*
*/
(function(factory){if(typeof define==="function"&&define.amd){define(["leaflet","d3"],factory)}else if(typeof module==="object"&&module.exports){module.exports=factory(require("leaflet","d3"))}else{factory(L,d3)}})(function(L,d3){if(typeof d3=="undefined"){throw"D3 SVG Overlay for Leaflet requires D3 library loaded first"}if(typeof L=="undefined"){throw"D3 SVG Overlay for Leaflet requires Leaflet library loaded first"}if(L.version>="1.0"){d3.select("head").append("style").attr("type","text/css").text("g.d3-overlay *{pointer-events:visiblePainted;}")}L.D3SvgOverlay=(L.version<"1.0"?L.Class:L.Layer).extend({includes:L.version<"1.0"?L.Mixin.Events:[],_undef:function(a){return typeof a=="undefined"},_options:function(options){if(this._undef(options)){return this.options}options.zoomHide=this._undef(options.zoomHide)?false:options.zoomHide;options.zoomDraw=this._undef(options.zoomDraw)?true:options.zoomDraw;return this.options=options},_disableLeafletRounding:function(){this._leaflet_round=L.Point.prototype._round;L.Point.prototype._round=function(){return this}},_enableLeafletRounding:function(){L.Point.prototype._round=this._leaflet_round},draw:function(){this._disableLeafletRounding();this._drawCallback(this.selection,this.projection,this.map.getZoom());this._enableLeafletRounding()},initialize:function(drawCallback,options){this._options(options||{});this._drawCallback=drawCallback},_zoomChange:function(evt){this._disableLeafletRounding();var newZoom=this._undef(evt.zoom)?this.map._zoom:evt.zoom;this._zoomDiff=newZoom-this._zoom;this._scale=Math.pow(2,this._zoomDiff);this.projection.scale=this._scale;this._shift=this.map.latLngToLayerPoint(this._wgsOrigin)._subtract(this._wgsInitialShift.multiplyBy(this._scale));var shift=["translate(",this._shift.x,",",this._shift.y,") "];var scale=["scale(",this._scale,",",this._scale,") "];this._rootGroup.attr("transform",shift.concat(scale).join(""));if(this.options.zoomDraw){this.draw()}this._enableLeafletRounding()},onAdd:function(map){this.map=map;var _layer=this;if(L.version<"1.0"){map._initPathRoot();this._svg=d3.select(map._panes.overlayPane).select("svg");this._rootGroup=this._svg.append("g")}else{this._svg=L.svg();map.addLayer(this._svg);this._rootGroup=d3.select(this._svg._rootGroup).classed("d3-overlay",true)}this._rootGroup.classed("leaflet-zoom-hide",this.options.zoomHide);this.selection=this._rootGroup;this._pixelOrigin=map.getPixelOrigin();this._wgsOrigin=L.latLng([0,0]);this._wgsInitialShift=this.map.latLngToLayerPoint(this._wgsOrigin);this._zoom=this.map.getZoom();this._shift=L.point(0,0);this._scale=1;this.projection={latLngToLayerPoint:function(latLng,zoom){zoom=_layer._undef(zoom)?_layer._zoom:zoom;var projectedPoint=_layer.map.project(L.latLng(latLng),zoom)._round();return projectedPoint._subtract(_layer._pixelOrigin)},layerPointToLatLng:function(point,zoom){zoom=_layer._undef(zoom)?_layer._zoom:zoom;var projectedPoint=L.point(point).add(_layer._pixelOrigin);return _layer.map.unproject(projectedPoint,zoom)},unitsPerMeter:256*Math.pow(2,_layer._zoom)/40075017,map:_layer.map,layer:_layer,scale:1};this.projection._projectPoint=function(x,y){var point=_layer.projection.latLngToLayerPoint(new L.LatLng(y,x));this.stream.point(point.x,point.y)};this.projection.pathFromGeojson=d3.geo.path().projection(d3.geo.transform({point:this.projection._projectPoint}));this.projection.latLngToLayerFloatPoint=this.projection.latLngToLayerPoint;this.projection.getZoom=this.map.getZoom.bind(this.map);this.projection.getBounds=this.map.getBounds.bind(this.map);this.selection=this._rootGroup;if(L.version<"1.0")map.on("viewreset",this._zoomChange,this);this.draw()},getEvents:function(){return{zoomend:this._zoomChange}},onRemove:function(map){if(L.version<"1.0"){map.off("viewreset",this._zoomChange,this);this._rootGroup.remove()}else{this._svg.remove()}},addTo:function(map){map.addLayer(this);return this}});L.D3SvgOverlay.version="2.1";L.d3SvgOverlay=function(drawCallback,options){return new L.D3SvgOverlay(drawCallback,options)}});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment