Skip to content

Instantly share code, notes, and snippets.

@gmaclennan

gmaclennan/README.md

Last active May 26, 2017 17:57
Show Gist options
  • Save gmaclennan/a40d2ca4821433ecfee56afd7d40b63a to your computer and use it in GitHub Desktop.
Save gmaclennan/a40d2ca4821433ecfee56afd7d40b63a to your computer and use it in GitHub Desktop.
Download ZIP
Map Pan & Zoom & Fit
Raw
README.md

This is similar to Map Pan & Zoom IV but with unprojected raw GeoJSON, which is scaled to fit the canvas.

Display the source blob
Display the rendered blob
Raw
ecuador-simplified.geojson
{"type":"FeatureCollection","features":[
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-75.1949591,-0.9703774],[-75.31374869999999,-0.9844516],[-75.3842387,-0.9337766000000001],[-75.5591595,-1.5629567],[-75.58499370000001,-1.5496183],[-76.04435640000001,-2.1249381],[-76.63270769999998,-2.5911365],[-77.843934,-3.0003731],[-77.94802300000002,-3.0699622],[-78.01077199999999,-3.190622],[-78.0649089,-3.227391800000001],[-78.0918123,-3.2163597999999998],[-78.1086744,-3.2788065],[-78.1978091,-3.362668099999999],[-78.1467532,-3.4626950999999995],[-78.18707909999999,-3.5000790999999998],[-78.23145460000002,-3.5027627],[-78.24672570000001,-3.3985822999999997],[-78.3498312,-3.3679335000000004],[-78.3932175,-3.6771800000000003],[-78.4234366,-3.6932023],[-78.40936690000001,-3.7823911000000003],[-78.465873,-3.8275332000000004],[-78.4888261,-3.9338212],[-78.52450490000001,-3.937264],[-78.5657129,-3.9919627999999996],[-78.56768860000001,-4.0451],[-78.53722540000003,-4.0615879999999995],[-78.58115440000002,-4.134865199999999],[-78.598544,-4.257924099999999],[-78.652273,-4.3325127],[-78.63409370000001,-4.4151641],[-78.60026320000001,-4.425148],[-78.66112340000002,-4.530081],[-78.65581889999999,-4.584882599999999],[-78.85593659999999,-4.666990199999999],[-78.91486090000002,-4.7800799000000005],[-78.8928577,-4.8978991999999995],[-78.9726162,-4.8942091],[-79.0154047,-5.0159313999999995],[-79.07588589999999,-4.9697548],[-79.2669501,-4.966255100000001],[-79.42126280000001,-4.7940795],[-79.4879731,-4.6272914],[-79.487787,-4.5303125],[-79.5621082,-4.515554099999999],[-79.62907879999997,-4.4391053000000005],[-79.81284579999999,-4.4920129],[-79.8706445,-4.4133106],[-79.99168720000002,-4.3809403],[-80.06127660000001,-4.3107529],[-80.1354032,-4.2854506],[-80.17687009999997,-4.2937346],[-80.19513809999998,-4.3504229],[-80.3292559,-4.465321],[-80.3883544,-4.486128400000001],[-80.4490787,-4.4482430000000015],[-80.4459623,-4.367830499999998],[-80.30639479999999,-4.199934699999999],[-80.4501831,-4.209630000000001],[-80.44682390000003,-4.121701],[-80.4671751,-4.127626799999999],[-80.4819351,-4.054915399999999],[-80.44592260000002,-3.9972052],[-80.3980504,-3.9807789],[-80.27269279999999,-4.0080333],[-80.23498390000002,-3.9483705000000002],[-80.12640449999999,-3.8953050999999994],[-80.19278079999998,-3.7751071],[-80.18679639999999,-3.6315533999999996],[-80.21504560000001,-3.5024875],[-80.24562820000001,-3.4874020999999997],[-80.2328952,-3.4212002],[-80.30693529999999,-3.3934697],[-81.3455128,-3.3921249999999996],[-81.2123816,-2.1855755],[-81.2710186,-1.1949420000000002],[-80.2185923,0.9348240000000001],[-79.55844929999999,1.4695809999999998],[-78.868686,1.4695809999999998],[-78.66347169999999,1.319855],[-78.6191758,1.2485142999999999],[-78.5514024,1.2491143999999998],[-78.51577129999998,1.1874041999999998],[-78.43208440000001,1.1898101],[-78.42963350000001,1.1399244999999998],[-78.31058279999999,1.1911457],[-78.28221640000001,1.1114247999999998],[-78.2510703,1.0995053],[-78.28182990000002,1.0558521],[-78.2063962,1.0021940999999999],[-78.18487219999999,0.9371786000000001],[-78.11176809999999,0.9322482000000001],[-77.96065540000002,0.8234348],[-77.86715550000001,0.8014344],[-77.71349620000001,0.8508247000000001],[-77.66470199999999,0.8177383],[-77.6978979,0.7415743],[-77.6661125,0.7051875],[-77.5598354,0.6502763],[-77.47983219999999,0.6561814000000001],[-77.52646060000001,0.4012425],[-77.4307827,0.4387374],[-77.38905849999999,0.38764240000000005],[-77.28757990000001,0.3632213],[-77.16603079999999,0.3895241000000001],[-77.1133084,0.3723299000000001],[-77.07610879999999,0.2843009000000001],[-77.0066915,0.2943488000000001],[-76.9857177,0.266003],[-76.93326730000001,0.2767642],[-76.84563460000001,0.23896080000000003],[-76.797537,0.264371],[-76.75607099999999,0.24824220000000005],[-76.73294990000001,0.28861850000000006],[-76.62559049999999,0.26191220000000004],[-76.5863416,0.2186597],[-76.53283499999999,0.2586516],[-76.41269940000002,0.2406535],[-76.41136110000001,0.3796163000000001],[-76.3398407,0.3829866000000001],[-76.31261860000001,0.4348266000000001],[-76.26913330000001,0.43292920000000007],[-76.2264369,0.3768298000000001],[-76.15849179999998,0.38825210000000004],[-76.10839429999999,0.31365240000000005],[-76.0567243,0.33322150000000006],[-75.9980938,0.28919870000000003],[-75.9823949,0.25631820000000005],[-76.0054298,0.24792540000000005],[-75.95922060000002,0.23829400000000003],[-75.8977658,0.16224840000000004],[-75.9027286,0.13679560000000002],[-75.84987229999999,0.1277446],[-75.80661360000002,0.0508404],[-75.6333616,0.047092600000000005],[-75.5819089,0.014276600000000002],[-75.5745275,-0.026578900000000006],[-75.5300515,-0.018885000000000002],[-75.428461,-0.0864881],[-75.2575001,-0.11563320000000002],[-75.2889043,-0.15348950000000003],[-75.40350930000001,-0.16975900000000002],[-75.5157142,-0.11402490000000001],[-75.61486540000001,-0.11324590000000001],[-75.60218449999999,-0.1900395],[-75.5357642,-0.18674730000000003],[-75.3878493,-0.43411600000000006],[-75.32478499999999,-0.4526099],[-75.3126508,-0.4945791],[-75.22761770000001,-0.5502079],[-75.2229845,-0.6282619],[-75.27231029999999,-0.6619472000000002],[-75.24913600000001,-0.6952471],[-75.27608679999999,-0.7314649],[-75.221241,-0.8691668],[-75.23351480000001,-0.9338322],[-75.1949591,-0.9703774]]]},"properties":{"flag":"http://upload.wikimedia.org/wikipedia/commons/e/e8/Flag_of_Ecuador.svg","name":"Ecuador","name:am":"ኤኳዶር","name:an":"Ecuador","name:ar":"الإكوادور","name:ay":"Ikwadur","name:az":"Ekvador","name:ba":"Эквадор","name:be":"Эквадор","name:bg":"Еквадор","name:bn":"ইকুয়েডর","name:bo":"ཨེ་ཁོའོ་ཌོར།","name:br":"Ecuador","name:bs":"Ekvador","name:ca":"Equador","name:ce":"Эквадор","name:cs":"Ekvádor","name:cv":"Эквадор","name:cy":"Ecuador","name:da":"Ecuador","name:de":"Ecuador","name:dv":"އިކުއެޑޯރު","name:ee":"Ecuador","name:el":"Ισημερινός (χώρα)","name:en":"Ecuador","name:eo":"Ekvadoro","name:es":"Ecuador","name:et":"Ecuador","name:eu":"Ekuador","name:fa":"اکوادور","name:fi":"Ecuador","name:fo":"Ekvador","name:fr":"Équateur","name:fy":"Ekwador","name:ga":"Eacuadór","name:gd":"Eacuador","name:gl":"Ecuador","name:gn":"Ekuator","name:gu":"ઈક્વેડોર","name:gv":"Ecuador","name:he":"אקוודור","name:hi":"ईक्वाडोर","name:hr":"Ekvador","name:ht":"Ekwatè","name:hu":"Ecuador","name:hy":"Էկվադոր","name:ia":"Ecuador","name:id":"Ekuador","name:ie":"Ecuador","name:io":"Equador","name:is":"Ekvador","name:it":"Ecuador","name:ja":"エクアドル","name:jv":"Ekuador","name:ka":"ეკვადორი","name:ki":"Ecuador","name:kk":"Эквадор","name:kl":"Ecuador","name:kn":"ಎಕ್ವಡಾರ್","name:ko":"에콰도르","name:ku":"Ekuador","name:kw":"Pow Ekwadorel","name:la":"Aequatoria","name:lb":"Ecuador","name:li":"Ecuador","name:ln":"Republíki ya Ekwatéli","name:lt":"Ekvadoras","name:lv":"Ekvadora","name:mi":"Ekuatoa","name:mk":"Еквадор","name:ml":"ഇക്വഡോർ","name:mn":"Эквадор","name:mr":"इक्वेडोर","name:ms":"Ecuador","name:mt":"Ekwador","name:my":"အီကွေဒေါနိုင်ငံ","name:na":"Ekwador","name:ne":"इक्वेडर","name:nl":"Equador","name:nn":"Ecuador","name:no":"Ecuador","name:nv":"Kéyah Nahasdzáán Ałníiʼgi Siʼánígíí","name:oc":"Eqüator","name:or":"ଏକ୍ଵାଡୋର","name:os":"Эквадор","name:pa":"ਏਕੁਆਦੋਰ","name:pl":"Ekwador","name:ps":"اېکوادور","name:pt":"Equador","name:qu":"Ikwadur","name:rm":"Ecuador","name:ro":"Ecuador","name:ru":"Эквадор","name:rw":"Ekwadoro","name:sa":"एक्वाडोर","name:se":"Ecuador","name:sh":"Ekvador","name:sk":"Ekvádor","name:sl":"Ekvador","name:so":"Ikwadoor","name:sq":"Ekuadori","name:sr":"Еквадор","name:su":"Ékuador","name:sv":"Ecuador","name:sw":"Ekuador","name:ta":"எக்குவடோர்","name:te":"ఈక్వడార్","name:tg":"Экуадор","name:th":"ประเทศเอกวาดอร์","name:tl":"Ecuador","name:tr":"Ekvador","name:tt":"Эквадор","name:ug":"ئېكۋادور","name:uk":"Еквадор","name:ur":"ایکواڈور","name:uz":"Ekvador","name:vi":"Ecuador","name:vo":"Lekvadorän","name:wo":"Ekwadoor","name:yi":"עקוואדאר","name:yo":"Ẹ̀kùàdọ̀r","name:zh":"厄瓜多尔","boundary":"administrative","name:als":"Ecuador","name:ang":"Ecuador","name:arz":"اكوادور","name:ast":"Ecuador","name:bcl":"Ekwador","name:bpy":"ইকুয়াডর","name:ceb":"Ecuador","name:ckb":"ئێکوادۆر","name:crh":"Ekvador","name:diq":"Ekwador","name:dsb":"Ekuador","name:ext":"Equadol","name:frp":"Èquator","name:frr":"Ekwadoor","name:gag":"Ekvador","name:hif":"Ecuador","name:hsb":"Ekwador","name:ilo":"Ecuador","name:jbo":"ekuador","name:lad":"Ekvador","name:lij":"Ecuadòr","name:lmo":"Ecuador","name:ltg":"Ekvadors","name:mhr":"Эквадор","name:mrj":"Эквадор","name:mwl":"Eiquador","name:mzn":"اکوادر","name:nah":"Ecuador","name:nds":"Ecuador","name:nov":"Equador","name:pag":"Equador","name:pam":"Ecuador","name:pap":"Ecuador","name:pih":"Ekwador","name:pms":"Ecuador","name:pnb":"ایکویڈار","name:rmy":"Ekuador","name:rue":"Еквадор","name:sah":"Экуадор","name:scn":"Ecuador","name:sco":"Ecuador","name:szl":"Ekwadůr","name:tet":"Ekuadór","name:tzl":"Ecuadour","name:vec":"Ecuador","name:war":"Ecuador","name:wuu":"厄瓜多尔","name:xal":"Эквадормудин Орн","name:zea":"Ecuador","timezone":"America/Guayaquil","wikidata":"Q736","ISO3166-1":"EC","wikipedia":"es:Ecuador","admin_level":"2","border_type":"nation","name:simple":"Ecuador","name:zh-yue":"厄瓜多爾","name:bat-smg":"Ekvaduors","name:fiu-vro":"Ecuador","name:roa-rup":"Ecuador","name:be-tarask":"Эквадор","is_in:continent":"South America","name:zh-min-nan":"Ecuador","ISO3166-1:alpha2":"EC","ISO3166-1:alpha3":"ECU","ISO3166-1:numeric":"218"},"id":108089}
]}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var width = 960,
height = 500
var zoom = d3.zoom()
.scaleExtent([1, 100])
.on('zoom', zoomed)
var canvas = d3.select("body").append("canvas")
.attr("width", width)
.attr("height", height)
var context = canvas.node().getContext("2d")
context.lineJoin = "round"
context.lineCap = "round"
context.lineWidth = 0.5
var mercator = d3.geoMercator()
var transform = d3.geoIdentity()
var path = d3.geoPath()
.projection({stream: function(s) { return mercator.stream(transform.stream(s)) }})
.context(context)
var render = function () {}
d3.json('ecuador-simplified.geojson', onLoad)
function onLoad (err, geojson) {
if (err) throw err
mercator
.scale(1)
.translate([0, 0])
var b = path.bounds(geojson),
dx = b[1][0] - b[0][0],
dy = b[1][1] - b[0][1],
x = (b[0][0] + b[1][0]) / 2,
y = (b[0][1] + b[1][1]) / 2,
s = .95 / Math.max(dx / width, dy / height),
t = [width / 2 - s * x, height / 2 - s * y]
mercator
.scale(s)
.translate(t)
render = function() {
context.fillStyle = "#fff", context.fillRect(0, 0, width, height);
context.beginPath(), path(geojson), context.strokeStyle = "#000", context.stroke()
}
canvas.call(zoom)
render()
}
function zoomed () {
var t = d3.event.transform
transform
.translate([t.x, t.y])
.scale(t.k)
render()
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment