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.D3SvgLeaflet.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',function(d){return Math.log2(d.population) - minLogPop + 2;}) | |
| .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 2014 Teralytics AG | |
| * | |
| * @author Kirill Zhuravlev <[email protected]> | |
| * | |
| */ | |
| if("undefined"==typeof d3)throw"D3 SVG Overlay for Leaflet requires D3 library loaded first";if("undefined"==typeof L)throw"D3 SVG Overlay for Leaflet requires Leaflet library loaded first";d3.select("head").append("style").attr("type","text/css").text("svg.d3-overlay{pointer-events:none;position:absolute;}svg.d3-overlay>g.origin *{pointer-events:visiblePainted;}"),L.D3SvgOverlay=L.Class.extend({includes:L.Mixin.Events,options:function(t){return t===void 0?this._options:(t.zoomAnimate=t.zoomAnimate===void 0?!0:t.zoomAnimate,t.zoomHide=t.zoomHide===void 0?!t.zoomAnimate:t.zoomHide,t.zoomDraw=t.zoomDraw===void 0?!0:t.zoomDraw,t.jsAnimation=t.jsAnimation||!1,this._options=t)},draw:function(){this._drawCallback(this.selection,this.projection,this.map.getZoom())},initialize:function(t,i){this.options(i||{}),this._drawCallback=t},updSvg:function(){var t=this.map.getSize(),i=this.map.getPixelBounds(),s=this.map.getPixelOrigin();this._svg.attr("width",3*t.x).attr("height",3*t.y).attr("viewBox",[0,0,3*t.x,3*t.y].join(" ")).style("left",i.min.x-s.x-t.x+"px").style("top",i.min.y-s.y-t.y+"px"),this._svg.select("g.origin").attr("transform",["translate(",t.x-(i.min.x-s.x),",",t.y-(i.min.y-s.y),")"].join(""))},_zoomCalc:function(t){var i=t.zoom||this.map._zoom;this._zoomDiff=i-this._zoom,this._scale=Math.pow(2,this._zoomDiff),this._shift=this.map._latLngToNewLayerPoint(this._origin,i,t.center||this.map._initialCenter)},_zoomStart:function(){!this.translateAnim||this.translateAnim.remove(),!this.scaleAnim||this.scaleAnim.remove()},_zoomAnimate:function(){L.Browser.ie||this._options.jsAnimation?(this._gTranslate.transition().duration(250).attr("transform","translate("+this._shift.x+","+this._shift.y+")").ease(d3.ease("cubic-out")),this._gScale.transition().duration(250).attr("transform","scale("+this._scale+")").ease(d3.ease("cubic-out"))):(this.translateAnim=this._svg.append("animateTransform").attr("xlink:href",this._gTranslateXRef).attr("attributeName","transform").attr("attributeType","XML").attr("type","translate").attr("to",this._shift.x+","+this._shift.y).attr("dur","0.25s").attr("calcMode","spline").attr("keyTimes","0; 1").attr("keySplines","0 0 0.25 1").attr("begin","indefinite").attr("fill","freeze"),this.scaleAnim=this._svg.append("animateTransform").attr("xlink:href",this._gScaleXRef).attr("attributeName","transform").attr("attributeType","XML").attr("type","scale").attr("to",this._scale+","+this._scale).attr("dur","0.25s").attr("calcMode","spline").attr("keyTimes","0; 1").attr("keySplines","0 0 0.25 1").attr("begin","indefinite").attr("fill","freeze"),this.translateAnim.node().beginElement(),this.scaleAnim.node().beginElement())},_zoomEnd:function(){this._gTranslate.attr("transform","translate("+this._shift.x+","+this._shift.y+")"),this._gScale.attr("transform","scale("+this._scale+","+this._scale+")"),!this.translateAnim||this.translateAnim.remove(),!this.scaleAnim||this.scaleAnim.remove(),this._options.zoomDraw&&this.draw()},_zoomChange:function(){this._gTranslate.attr("transform","translate("+this._shift.x+","+this._shift.y+")"),this._gScale.attr("transform","scale("+this._scale+","+this._scale+")"),this._options.zoomDraw&&this.draw()},onAdd:function(t){this.map=t,this._zoomAnimated=this._options.zoomAnimate&&t._zoomAnimated;var i=this;this._svg=d3.select(t._panes.overlayPane).append("svg").classed({"d3-overlay":!0,"leaflet-zoom-hide":this._options.zoomHide}),this._gOrigin=this._svg.append("g").classed("origin",!0),this.map.on("moveend",this.updSvg,this),this._origin=this.map.layerPointToLatLng([0,0]),this._zoom=this.map.getZoom(),this._shift=L.point(0,0),this._scale=1,this.projection={latLngToLayerPoint:function(t,s){s=s||i._zoom;var a=i.map.project(L.latLng(t),s),e=i.map.project(i._origin,s);return a._subtract(e)},layerPointToLatLng:function(t,s){s=s||i._zoom;var a=i.map.project(i._origin,s);return i.map.unproject(t.add(a),s)},unitsPerMeter:256*Math.pow(2,i._zoom)/40075017,map:i.map,layer:i},this.projection.latLngToLayerFloatPoint=this.projection.latLngToLayerPoint,this.projection.getZoom=this.map.getZoom.bind(this.map),this.projection.getBounds=this.map.getBounds.bind(this.map);var s="id"+Math.random().toString(26).slice(2,7);this._gTranslateXRef="#"+s,this._gTranslate=this._gOrigin.append("g").classed("translate-anim",!0).attr("transform","translate(0,0)").attr("id",s),s="id"+Math.random().toString(26).slice(2,7),this._gScaleXRef="#"+s,this.selection=this._gScale=this._gTranslate.append("g").classed("scale-anim",!0).attr("transform","scale(1,1)").attr("id",s),this._zoomAnimated?(this.map.on("zoomanim",this._zoomCalc,this),this.map.on("zoomstart",this._zoomStart,this),this.map.on("zoomanim",this._zoomAnimate,this),this.map.on("zoomend",this._zoomEnd,this)):(this.map.on("viewreset",this._zoomCalc,this),this.map.on("viewreset",this._zoomChange,this)),this.updSvg(),this.draw()},onRemove:function(){this._svg.remove(),this.map.off(this._options.updateOn,this.draw,this),this.map.off("moveend",this.updSvg,this),this._zoomAnimated?(this.map.off("zoomanim",this._zoomCalc,this),this.map.off("zoomstart",this._zoomStart,this),this.map.off("zoomanim",this._zoomAnimate,this),this.map.off("zoomend",this._zoomEnd,this)):(this.map.off("viewreset",this._zoomCalc,this),this.map.off("viewreset",this._zoomChange,this))},addTo:function(t){return t.addLayer(this),this}}),L.D3SvgOverlay.version="2.0",L.d3SvgOverlay=function(t,i){return new L.D3SvgOverlay(t,i)}; |
| 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 |