Created
August 3, 2013 15:00
-
-
Save voronoipotato/6146736 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .axis line { | |
| fill: none; | |
| stroke: #ddd; | |
| } | |
| body { | |
| margin: 0; | |
| } | |
| path { | |
| fill: none; | |
| stroke: #000; | |
| stroke-linejoin: round; | |
| stroke-linecap: round; | |
| } | |
| .major_road { stroke: #776; } | |
| .minor_road { stroke: #ccb; } | |
| .highway { stroke: #7de; stroke-width: 1.5px; } | |
| .rail { stroke: #f39; } | |
| .buildings path { stroke: none; fill: black; } | |
| </style> | |
| <body oncontextmenu="return false"> | |
| <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="640px" height="480px" id="svg2985" version="1.1" inkscape:version="0.48.4 r9939" sodipodi:docname="lazua.svg"> <g id="layer1" inkscape:label="Layer 1" inkscape:groupmode="layer" style="display:inline"> | |
| <path sodipodi:type="star" style="fill:#ff8080" id="path3487" sodipodi:sides="5" sodipodi:cx="123.91489" sodipodi:cy="214.09929" sodipodi:r1="128.25575" sodipodi:r2="64.127876" sodipodi:arg1="1.0666304" sodipodi:arg2="1.6949489" inkscape:flatsided="false" inkscape:rounded="0" inkscape:randomized="0" d="m 185.87233,326.39717 -69.89865,-48.6636 -79.714518,29.9927 24.681959,-81.51544 -53.1578958,-66.54476 85.1529378,-1.71572 46.861137,-71.119624 27.94545,80.455074 82.11967,22.59041 -67.8817,51.43969 z" inkscape:transform-center-x="-3.8375987" inkscape:transform-center-y="-5.506652" transform="matrix(0.7819173,0,0,0.73565773,104.80869,39.566394)"/> | |
| <path sodipodi:type="star" style="fill:#ffb380" id="path3489" sodipodi:sides="5" sodipodi:cx="121.33333" sodipodi:cy="217.97163" sodipodi:r1="152.69444" sodipodi:r2="76.347221" sodipodi:arg1="1.2704329" sodipodi:arg2="1.8987514" inkscape:flatsided="false" inkscape:rounded="0" inkscape:randomized="0" d="M 166.51063,363.8298 96.741295,290.24978 -3.4254739,306.01046 44.993372,216.9184 -0.94915691,126.52445 98.744673,145.04255 170.5174,73.415347 l 13.19533,100.536873 90.30051,46.12589 -91.53867,43.61711 z" inkscape:transform-center-x="-11.110852" inkscape:transform-center-y="0.48175936" transform="matrix(0.79587476,0,0,0.74010234,60.612831,49.445035)"/> | |
| <g transform="matrix(3.9431816,0,0,5.0449109,-330.82672,-617.18607)" style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#241c1c;fill-opacity:1;stroke:none;font-family:Bauhaus 93;-inkscape-font-specification:Bauhaus 93" id="flowRoot3491"> | |
| <path d="m 123.78125,143.32801 0,24.375 c 0,1.01562 0.29948,1.875 0.89844,2.57812 0.67708,0.78125 1.61457,1.17188 2.8125,1.17188 l 12.46093,0 c 0.39061,0 0.70311,-0.11719 0.9375,-0.35157 0.20832,-0.20833 0.31248,-0.45573 0.3125,-0.74218 -2e-5,-0.3125 -0.10418,-0.57292 -0.3125,-0.78125 -0.23439,-0.20834 -0.54689,-0.3125 -0.9375,-0.3125 l -12.03124,0 c -0.57293,0 -1.01564,-0.18229 -1.32813,-0.54688 -0.26042,-0.3125 -0.39063,-0.70312 -0.39062,-1.17187 l 0,-24.21875 c -1e-5,-0.41664 -0.13022,-0.74216 -0.39063,-0.97657 -0.23438,-0.2083 -0.50782,-0.31247 -0.82031,-0.3125 -0.33855,3e-5 -0.62501,0.1042 -0.85938,0.3125 -0.23438,0.23441 -0.35156,0.55993 -0.35156,0.97657 z" style="font-variant:normal;font-stretch:normal;fill:#241c1c;font-family:Gulim;-inkscape-font-specification:Gulim" id="path3006"/> | |
| <path d="m 158.39062,166.41394 c -0.59897,1.06772 -1.47136,1.90105 -2.61718,2.5 -1.27606,0.67709 -2.81251,1.01563 -4.60938,1.01563 -1.58855,0 -2.76042,-0.33854 -3.51562,-1.01563 -0.72917,-0.62499 -1.09376,-1.57551 -1.09375,-2.85156 -1e-5,-1.32812 0.39062,-2.33072 1.17187,-3.00781 0.80729,-0.72916 2.18749,-1.22395 4.14063,-1.48438 1.95311,-0.2604 3.48957,-0.55988 4.60937,-0.89843 0.91145,-0.28645 1.54947,-0.58593 1.91406,-0.89844 z m -5.35156,-16.5625 c -2.18751,2e-5 -3.94532,0.4818 -5.27344,1.44532 -1.35417,1.01564 -2.1875,2.52605 -2.5,4.53125 -0.0781,0.39064 0,0.70314 0.23438,0.9375 0.20833,0.23439 0.46875,0.36459 0.78125,0.39062 0.33854,0.0261 0.62499,-0.0521 0.85937,-0.23437 0.28646,-0.18228 0.45573,-0.4427 0.50782,-0.78125 0.1302,-1.30207 0.58593,-2.29165 1.36718,-2.96875 0.88541,-0.78124 2.21354,-1.17186 3.98438,-1.17188 1.8229,2e-5 3.19009,0.33856 4.10156,1.01563 0.85936,0.65106 1.28905,1.6146 1.28906,2.89062 -1e-5,1.11981 -0.39064,1.88804 -1.17187,2.30469 -0.80731,0.44272 -2.60418,0.85939 -5.39063,1.25 -3.15104,0.39063 -5.32552,1.26303 -6.52343,2.61719 -0.8073,0.9375 -1.21094,2.26563 -1.21094,3.98437 0,1.90105 0.58593,3.3724 1.75781,4.41406 1.19791,1.09375 2.96875,1.64063 5.3125,1.64063 1.71874,0 3.2552,-0.29948 4.60938,-0.89844 0.98957,-0.44271 1.87498,-1.04166 2.65625,-1.79687 -2e-5,0.80729 0.23436,1.3802 0.70312,1.71875 0.5729,0.36458 1.60155,0.54687 3.08594,0.54687 0.36456,0 0.65102,-0.11719 0.85937,-0.35156 0.18228,-0.20833 0.27342,-0.45573 0.27344,-0.74219 -0.0261,-0.3125 -0.13023,-0.57291 -0.3125,-0.78125 -0.20835,-0.20833 -0.46877,-0.3125 -0.78125,-0.3125 -0.46877,0 -0.83335,-0.13021 -1.09375,-0.39062 -0.23439,-0.23438 -0.35158,-0.57292 -0.35156,-1.01563 l 0,-12.38281 c -2e-5,-2.05728 -0.75523,-3.58071 -2.26563,-4.57031 -1.32814,-0.85936 -3.16407,-1.28905 -5.50781,-1.28907 z" style="font-variant:normal;font-stretch:normal;fill:#241c1c;font-family:Gulim;-inkscape-font-specification:Gulim" id="path3008"/> | |
| <path d="m 167.02344,152.66394 11.40625,0 -12.34375,15.66407 c -0.625,0.65104 -0.78125,1.32812 -0.46875,2.03125 0.3125,0.72916 0.97656,1.09375 1.99218,1.09375 l 13.55469,0 c 0.36457,0 0.65103,-0.11719 0.85938,-0.35157 0.20831,-0.20833 0.31248,-0.45573 0.3125,-0.74218 -2e-5,-0.3125 -0.10419,-0.57292 -0.3125,-0.78125 -0.20835,-0.20834 -0.49481,-0.3125 -0.85938,-0.3125 l -12.57812,0 12.65625,-15.9375 c 0.59894,-0.67707 0.74217,-1.31509 0.42968,-1.91407 -0.31251,-0.59893 -1.00262,-0.89841 -2.07031,-0.89843 l -12.61719,0 c -0.67708,2e-5 -1.01562,0.35158 -1.01562,1.05468 0,0.72919 0.35156,1.09377 1.05469,1.09375 z" style="font-variant:normal;font-stretch:normal;fill:#241c1c;font-family:Gulim;-inkscape-font-specification:Gulim" id="path3010"/> | |
| <path d="m 203.625,170.55457 0,-19.53125 c -2e-5,-0.44269 -0.13023,-0.78123 -0.39063,-1.01563 -0.23439,-0.23435 -0.52085,-0.35154 -0.85937,-0.35156 -0.33856,2e-5 -0.62502,0.11721 -0.85938,0.35156 -0.23439,0.2344 -0.35157,0.57294 -0.35156,1.01563 l 0,14.80469 c -0.96356,1.30208 -2.01824,2.29167 -3.16406,2.96875 -1.19793,0.75521 -2.46095,1.13281 -3.78906,1.13281 -1.30209,0 -2.33074,-0.41667 -3.08594,-1.25 -0.70313,-0.75521 -1.05469,-1.66666 -1.05469,-2.73438 l 0,-14.92187 c 0,-0.44269 -0.13021,-0.78123 -0.39062,-1.01563 -0.23438,-0.23435 -0.50782,-0.35154 -0.82032,-0.35156 -0.33854,2e-5 -0.625,0.11721 -0.85937,0.35156 -0.23438,0.2344 -0.35157,0.57294 -0.35156,1.01563 l 0,14.92187 c -1e-5,1.64063 0.54687,3.04688 1.64062,4.21875 1.22395,1.30209 2.86458,1.95313 4.92188,1.95313 1.48436,0 2.85155,-0.33854 4.10156,-1.01563 1.06769,-0.54687 2.01821,-1.30208 2.85156,-2.26562 l 0,1.71875 c -1e-5,0.36458 0.11717,0.66406 0.35156,0.89844 0.23436,0.20833 0.52082,0.3125 0.85938,0.3125 0.33852,0 0.62498,-0.10417 0.85937,-0.3125 0.2604,-0.23438 0.39061,-0.53386 0.39063,-0.89844 z" style="font-variant:normal;font-stretch:normal;fill:#241c1c;font-family:Gulim;-inkscape-font-specification:Gulim" id="path3012"/> | |
| <path d="m 223.70312,166.41394 c -0.59897,1.06772 -1.47136,1.90105 -2.61718,2.5 -1.27606,0.67709 -2.81251,1.01563 -4.60938,1.01563 -1.58855,0 -2.76042,-0.33854 -3.51562,-1.01563 -0.72917,-0.62499 -1.09376,-1.57551 -1.09375,-2.85156 -1e-5,-1.32812 0.39062,-2.33072 1.17187,-3.00781 0.80729,-0.72916 2.18749,-1.22395 4.14063,-1.48438 1.95311,-0.2604 3.48957,-0.55988 4.60937,-0.89843 0.91145,-0.28645 1.54947,-0.58593 1.91406,-0.89844 z m -5.35156,-16.5625 c -2.18751,2e-5 -3.94532,0.4818 -5.27344,1.44532 -1.35417,1.01564 -2.1875,2.52605 -2.5,4.53125 -0.0781,0.39064 0,0.70314 0.23438,0.9375 0.20833,0.23439 0.46875,0.36459 0.78125,0.39062 0.33854,0.0261 0.62499,-0.0521 0.85937,-0.23437 0.28646,-0.18228 0.45573,-0.4427 0.50782,-0.78125 0.1302,-1.30207 0.58593,-2.29165 1.36718,-2.96875 0.88541,-0.78124 2.21354,-1.17186 3.98438,-1.17188 1.8229,2e-5 3.19009,0.33856 4.10156,1.01563 0.85936,0.65106 1.28905,1.6146 1.28906,2.89062 -1e-5,1.11981 -0.39064,1.88804 -1.17187,2.30469 -0.80731,0.44272 -2.60418,0.85939 -5.39063,1.25 -3.15104,0.39063 -5.32552,1.26303 -6.52343,2.61719 -0.8073,0.9375 -1.21094,2.26563 -1.21094,3.98437 0,1.90105 0.58593,3.3724 1.75781,4.41406 1.19791,1.09375 2.96875,1.64063 5.3125,1.64063 1.71874,0 3.2552,-0.29948 4.60938,-0.89844 0.98957,-0.44271 1.87498,-1.04166 2.65625,-1.79687 -2e-5,0.80729 0.23436,1.3802 0.70312,1.71875 0.5729,0.36458 1.60155,0.54687 3.08594,0.54687 0.36456,0 0.65102,-0.11719 0.85937,-0.35156 0.18228,-0.20833 0.27342,-0.45573 0.27344,-0.74219 -0.0261,-0.3125 -0.13023,-0.57291 -0.3125,-0.78125 -0.20835,-0.20833 -0.46877,-0.3125 -0.78125,-0.3125 -0.46877,0 -0.83335,-0.13021 -1.09375,-0.39062 -0.23439,-0.23438 -0.35158,-0.57292 -0.35156,-1.01563 l 0,-12.38281 c -2e-5,-2.05728 -0.75523,-3.58071 -2.26563,-4.57031 -1.32814,-0.85936 -3.16407,-1.28905 -5.50781,-1.28907 z" style="font-variant:normal;font-stretch:normal;fill:#241c1c;font-family:Gulim;-inkscape-font-specification:Gulim" id="path3014"/> | |
| </g> | |
| <path sodipodi:type="arc" style="fill:#ffcc00" id="path3507" sodipodi:cx="425.63477" sodipodi:cy="286.06027" sodipodi:rx="27.429079" sodipodi:ry="27.429079" d="m 453.06384,286.06027 a 27.429079,27.429079 0 1 1 -54.85815,0 27.429079,27.429079 0 1 1 54.85815,0 z" transform="matrix(0.28235296,0,0,0.28235296,0.50872217,84.925054)"/> | |
| <path sodipodi:type="arc" style="fill:#ffcc00" id="path3507-1" sodipodi:cx="425.63477" sodipodi:cy="286.06027" sodipodi:rx="27.429079" sodipodi:ry="27.429079" d="m 453.06384,286.06027 a 27.429079,27.429079 0 1 1 -54.85815,0 27.429079,27.429079 0 1 1 54.85815,0 z" transform="matrix(0.28235296,0,0,0.28235296,-15.626039,112.03146)"/> | |
| <path sodipodi:type="arc" style="fill:#ffcc00" id="path3507-7" sodipodi:cx="425.63477" sodipodi:cy="286.06027" sodipodi:rx="27.429079" sodipodi:ry="27.429079" d="m 453.06384,286.06027 a 27.429079,27.429079 0 1 1 -54.85815,0 27.429079,27.429079 0 1 1 54.85815,0 z" transform="matrix(0.28235296,0,0,0.28235296,16.64346,112.03145)"/> | |
| </g> | |
| </svg> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/d3.geo.tile.v0.min.js"></script> | |
| <script> | |
| var margin = {top: -5, right: -5, bottom: -5, left: -5}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var zoom = d3.behavior.zoom() | |
| .scaleExtent([1, 10]) | |
| .on("zoom", zoomed); | |
| var tiler = d3.geo.tile() | |
| .size([width, height]); | |
| var projection = d3.geo.mercator() | |
| .center([-122.41, 37.79]) | |
| .scale((1 << 23) / 2 / Math.PI) | |
| .translate([width / 2, height / 2]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.right + ")") | |
| .call(zoom) | |
| .on("mousedown", mousedowned, true); // capture, so before zoom | |
| var rect = svg.append("rect") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .style("fill", "white") | |
| .style("pointer-events", "all"); | |
| var container = svg.append("g"); | |
| d3.xml("tuto3.svg", "image/svg+xml") | |
| container.call(renderTiles, "highroad"); | |
| function zoomed() { | |
| container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); | |
| } | |
| function mousedowned() { | |
| if (d3.event.button) { | |
| rect.transition().style("fill", "red").transition().style("fill", "white"); | |
| d3.event.stopPropagation(); | |
| d3.event.preventDefault(); | |
| } | |
| } | |
| function renderTiles(svg, type) { | |
| svg.append("g") | |
| .attr("class", type) | |
| .selectAll("g") | |
| .data(tiler | |
| .scale(projection.scale() * 2 * Math.PI) | |
| .translate(projection([0, 0]))) | |
| .enter().append("g") | |
| .each(function(d) { | |
| var g = d3.select(this); | |
| d3.json("http://" + ["a", "b", "c"][(d[0] * 31 + d[1]) % 3] + ".tile.openstreetmap.us/vectiles-" + type + "/" + d[2] + "/" + d[0] + "/" + d[1] + ".json", function(error, json) { | |
| g.selectAll("path") | |
| .data(json.features.sort(function(a, b) { return a.properties.sort_key - b.properties.sort_key; })) | |
| .enter().append("path") | |
| .attr("class", function(d) { return d.properties.kind; }) | |
| .attr("d", path); | |
| }); | |
| }); | |
| } | |
| </script> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment