Swiss cities (red) and towns (blue) on the map. Circle size shows population magnitude difference.
Plugin github: Leaflet.D3SvgOverlay
Data can be extracted from osm2pgsql imported database for Switzerland using:
COPY
(SELECT place,name,population,ST_X(way) lng, ST_Y(way) lat
FROM planet_osm_point WHERE place IN ('city','town'))
TO '/tmp/swiss-cities.csv' CSV HEADERDataset: © OpenStreetMap contributors
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>L.D3SvgOverlay: Leaflet + D3, simple example</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.3/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.3/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:8}); | |
| L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg', { | |
| attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> ' | |
| +'— Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', | |
| subdomains: '1234' | |
| }).addTo(map); | |
| var cities = []; | |
| var citiesOverlay = L.d3SvgOverlay(function(sel,proj){ | |
| var minLogPop = Math.log2(d3.min(cities,function(d){return d.population;})); | |
| var citiesUpd = sel.selectAll('circle').data(cities); | |
| citiesUpd.enter() | |
| .append('circle') | |
| .attr('r', proj.unitsPerMeter * 500) | |
| .attr('cx',function(d){return proj.latLngToLayerPoint(d.latLng).x;}) | |
| .attr('cy',function(d){return proj.latLngToLayerPoint(d.latLng).y;}) | |
| .attr('stroke','black') | |
| .attr('stroke-width',1) | |
| .attr('fill',function(d){return (d.place == 'city') ? "red" : "blue";}); | |
| }); | |
| d3.csv("swiss-cities.csv",function(data){ | |
| cities = data.map(function(d){ | |
| d.latLng = [+d.lat,+d.lng]; | |
| d.population = (d.population == '') ? 2000 : +d.population; //NAs | |
| return d; | |
| }); | |
| citiesOverlay.addTo(map); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
| /** | |
| * Copyright 2015 Teralytics AG | |
| * | |
| * @author Kirill Zhuravlev <[email protected]> | |
| * | |
| */ | |
| 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.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)}; |
| place | name | population | lng | lat | |
|---|---|---|---|---|---|
| town | Meyrin | 22431 | 6.0817791 | 46.2328413 | |
| town | Vernier | 34835 | 6.0832507 | 46.2143981 | |
| town | Onex | 18074 | 6.1001121 | 46.1836887 | |
| town | Plan-les-Ouates | 10325 | 6.117887 | 46.1683113 | |
| town | Lancy | 29550 | 6.1224047 | 46.1839156 | |
| town | Le Grand-Saconnex | 12048 | 6.126532 | 46.2363321 | |
| town | Carouge | 20944 | 6.1396839 | 46.1846691 | |
| city | Genève | 195177 | 6.1466014 | 46.2017559 | |
| town | Versoix | 13190 | 6.168958 | 46.2767572 | |
| town | Veyrier | 10852 | 6.1803922 | 46.1685738 | |
| town | Chêne-Bougeries | 10642 | 6.1854072 | 46.1963639 | |
| town | Thônex | 13843 | 6.19807 | 46.1884469 | |
| town | Nyon | 19016 | 6.2403073 | 46.3820535 | |
| town | Gland | 6.2675845 | 46.4212913 | ||
| town | Morges | 6.498317 | 46.5093268 | ||
| town | Ecublens | 10227 | 6.5620735 | 46.5261672 | |
| town | Renens | 18406 | 6.593655 | 46.535299 | |
| town | Prilly | 10955 | 6.6113784 | 46.5374332 | |
| city | Lausanne | 132626 | 6.6327025 | 46.5218269 | |
| town | Yverdon-les-Bains | 28377 | 6.6409158 | 46.7785711 | |
| town | Pully | 16034 | 6.6640273 | 46.5087682 | |
| town | Le Locle | 10529 | 6.745454 | 47.0555907 | |
| town | La Chaux-de-Fonds | 37016 | 6.838226 | 47.111833 | |
| town | Vevey | 18854 | 6.8424643 | 46.4630554 | |
| town | La Tour-de-Peilz | 10974 | 6.8599382 | 46.4548415 | |
| town | Montreux | 25440 | 6.9129921 | 46.4310831 | |
| town | Neuchâtel | 33641 | 6.9292641 | 46.9895828 | |
| town | Monthey | 13933 | 6.9537826 | 46.2554573 | |
| town | Bulle | 20824 | 7.0593812 | 46.6146237 | |
| town | Martigny | 14361 | 7.0727354 | 46.103115 | |
| town | Villars-sur-Glâne | 12057 | 7.1252018 | 46.7932418 | |
| town | Fribourg | 36633 | 7.1512891 | 46.8030044 | |
| town | Biel/Bienne | 52351 | 7.2585667 | 47.1420451 | |
| town | Lyss | 14080 | 7.305262 | 47.0721368 | |
| town | Delémont | 11809 | 7.354039 | 47.3619609 | |
| town | Sion | 32797 | 7.3588795 | 46.2311749 | |
| town | Grenchen | 16401 | 7.3965792 | 47.1968713 | |
| town | Köniz | 37782 | 7.4130582 | 46.9222385 | |
| city | Bern | 127515 | 7.4514512 | 46.9482713 | |
| town | Ittigen | 10991 | 7.4815213 | 46.9790726 | |
| town | Muri bei Bern | 12571 | 7.4870909 | 46.9290477 | |
| town | Ostermundigen | 16185 | 7.4911242 | 46.9582779 | |
| town | Bolligen | 7.4983298 | 46.9755611 | ||
| town | Sierre | 16332 | 7.5323195 | 46.2922522 | |
| town | Solothurn | 16599 | 7.5384045 | 47.2081355 | |
| town | Allschwil | 18131 | 7.541198 | 47.548185 | |
| town | Oberwil | 10775 | 7.548069 | 47.513088 | |
| town | Münsingen | 10937 | 7.5631943 | 46.8739775 | |
| town | Binningen | 14905 | 7.570077 | 47.53656 | |
| city | Basel | 173960 | 7.5878261 | 47.5581077 | |
| town | Reinach | 18839 | 7.5910891 | 47.4935369 | |
| town | Münchenstein | 11702 | 7.6210463 | 47.5185286 | |
| town | Burgdorf | 14714 | 7.6231592 | 47.058688 | |
| town | Thun | 42735 | 7.628086 | 46.7582827 | |
| town | Birsfelden | 10277 | 7.6304739 | 47.5542152 | |
| town | Riehen | 20970 | 7.6346404 | 47.5750216 | |
| town | Steffisburg | 14349 | 7.6354195 | 46.7774738 | |
| town | Muttenz | 16654 | 7.6477401 | 47.525113 | |
| town | Spiez | 12027 | 7.6774655 | 46.6919473 | |
| town | Pratteln | 14904 | 7.6944741 | 47.5192013 | |
| town | Herzogenbuchsee | 5338 | 7.7057052 | 47.1881314 | |
| town | Liestal | 13708 | 7.7347783 | 47.4839723 | |
| town | Sumiswald | 5307 | 7.7449828 | 47.0285646 | |
| town | Langenthal | 14078 | 7.7888427 | 47.2115846 | |
| town | Rheinfelden | 10673 | 7.7922905 | 47.5543859 | |
| town | Visp | 7281 | 7.8811918 | 46.2913113 | |
| town | Olten | 17280 | 7.9053185 | 47.3507365 | |
| town | Oftringen | 10305 | 7.92099 | 47.3126595 | |
| town | Zofingen | 9432 | 7.9458259 | 47.288491 | |
| town | Bad Säckingen | 16706 | 7.9495387 | 47.5525538 | |
| town | Brig | 12823 | 7.9879473 | 46.3163457 | |
| town | Aarau | 20130 | 8.0444448 | 47.3927146 | |
| town | Laufenburg | 2096 | 8.0601696 | 47.5604617 | |
| town | Lenzburg | 8.1828505 | 47.3872367 | ||
| town | Brugg | 9143 | 8.2085662 | 47.4824633 | |
| town | Sarnen | 9959 | 8.2461492 | 46.8956729 | |
| town | Mellingen | 4239 | 8.274659 | 47.4195131 | |
| town | Wohlen | 14259 | 8.2786906 | 47.3504945 | |
| town | Kriens | 25932 | 8.2791767 | 47.0350948 | |
| town | Emmen | 28926 | 8.2839456 | 47.0752429 | |
| town | Luzern | 79478 | 8.3054682 | 47.0505452 | |
| town | Baden | 18523 | 8.3086822 | 47.4736827 | |
| town | Horw | 12648 | 8.3107797 | 47.0185008 | |
| town | Wettingen | 17870 | 8.3220846 | 47.4678661 | |
| town | Bremgarten | 5338 | 8.3376446 | 47.3539569 | |
| town | Ebikon | 11322 | 8.338521 | 47.0812067 | |
| town | Stans | 8112 | 8.3661026 | 46.9570611 | |
| town | Dietikon | 23578 | 8.4020894 | 47.4068827 | |
| town | Rotkreuz | 10000 | 8.4308106 | 47.1407748 | |
| town | Küssnacht | 10704 | 8.4386308 | 47.08385 | |
| town | Schlieren | 13356 | 8.4444861 | 47.3965147 | |
| town | Affoltern am Albis | 11063 | 8.4521518 | 47.2782467 | |
| town | Cham | 14600 | 8.4619478 | 47.1831744 | |
| town | Regensdorf | 15500 | 8.4686942 | 47.4316696 | |
| town | Zug | 27537 | 8.5194365 | 47.1715809 | |
| town | Arth | 10794 | 8.5238673 | 47.0644551 | |
| town | Adliswil | 15822 | 8.5251438 | 47.3115332 | |
| town | Baar | 21586 | 8.5255644 | 47.1948417 | |
| town | Oberarth | 8.5371458 | 47.0542976 | ||
| city | Zürich | 402275 | 8.5404434 | 47.3685586 | |
| town | Bülach | 17478 | 8.5417838 | 47.5201795 | |
| town | Goldau | 5437 | 8.5507758 | 47.051219 | |
| town | Thalwil | 15805 | 8.5632796 | 47.2946577 | |
| town | Glattbrugg | 8.5647892 | 47.4326312 | ||
| town | Opfikon | 15582 | 8.5779983 | 47.4322671 | |
| town | Küsnacht | 12484 | 8.5808208 | 47.3179942 | |
| town | Kloten | 17190 | 8.5878284 | 47.4574142 | |
| town | Wallisellen | 11939 | 8.5919985 | 47.4166195 | |
| town | Zollikon | 11662 | 8.5949727 | 47.3408663 | |
| town | Horgen | 18935 | 8.5976831 | 47.260692 | |
| town | Dübendorf | 22216 | 8.6183023 | 47.3968244 | |
| town | Neuhausen am Rheinfall | 10220 | 8.6197347 | 47.6811644 | |
| town | Brüttisellen | 8.6307734 | 47.4242579 | ||
| town | Schaffhausen | 35413 | 8.634513 | 47.6960491 | |
| town | Meilen | 12539 | 8.6425901 | 47.2694197 | |
| town | Schwyz | 14663 | 8.6535598 | 47.0211848 | |
| town | Wädenswil | 20828 | 8.6701981 | 47.2278836 | |
| town | Effretikon | 8.6869714 | 47.4283137 | ||
| town | Volketswil | 14070 | 8.6908127 | 47.3893142 | |
| town | Richterswil | 12534 | 8.7017051 | 47.2091079 | |
| town | Uster | 32285 | 8.7179221 | 47.3512065 | |
| town | Illnau | 8.7255432 | 47.4088363 | ||
| city | Winterthur | 104468 | 8.7291495 | 47.4991692 | |
| town | Stäfa | 11567 | 8.7348747 | 47.2413349 | |
| town | Einsiedeln | 12622 | 8.7500299 | 47.1286095 | |
| town | Pfäffikon | 7042 | 8.7826669 | 47.2022565 | |
| town | Locarno | 15671 | 8.7954217 | 46.1695112 | |
| town | Wetzikon | 18129 | 8.7998807 | 47.3225107 | |
| town | Rapperswil | 26354 | 8.8245459 | 47.2269198 | |
| town | Jona | 26177 | 8.837658 | 47.2299661 | |
| town | Rüti | 10804 | 8.8527389 | 47.2580331 | |
| town | Frauenfeld | 24119 | 8.8963993 | 47.556228 | |
| town | Gravesano | 8.9160782 | 46.0416675 | ||
| town | Lugano | 58658 | 8.9520281 | 46.0050102 | |
| town | Mendrisio | 12129 | 8.9873461 | 45.8709902 | |
| town | Bellinzona | 17962 | 9.0204562 | 46.1918617 | |
| town | Wil | 16392 | 9.0423202 | 47.4654409 | |
| town | Glarus | 12312 | 9.0674041 | 47.0422116 | |
| town | Wattwil | 8265 | 9.0871047 | 47.300445 | |
| town | Weinfelden | 10066 | 9.1097539 | 47.5669187 | |
| town | Uzwil | 4465 | 9.1333201 | 47.4370506 | |
| town | Kreuzlingen | 20520 | 9.1725561 | 47.6464245 | |
| town | Münsterlingen | 2599 | 9.2329998 | 47.631287 | |
| town | Gossau | 17827 | 9.249359 | 47.4155906 | |
| town | Herisau | 15222 | 9.2787571 | 47.38555 | |
| town | Amriswil | 11357 | 9.2981219 | 47.5500227 | |
| town | Engelburg | 9.3424302 | 47.4444491 | ||
| town | St. Gallen | 74111 | 9.3765878 | 47.4250593 | |
| town | Romanshorn | 9076 | 9.3776036 | 47.5654452 | |
| town | Appenzell | 5751 | 9.4097975 | 47.3295714 | |
| town | Arbon | 12906 | 9.4304026 | 47.5149257 | |
| town | Buchs | 10399 | 9.4764086 | 47.1627634 | |
| town | Chur | 34087 | 9.5254066 | 46.855515 | |
| town | Altstätten | 8324 | 9.5412765 | 47.3783471 | |
| town | Davos | 11156 | 9.8237266 | 46.7961744 |