Buildings and canals.
Using OSM extracts and the city's government shapefiles.
license: mit | |
border: none | |
height: 690 |
Buildings and canals.
Using OSM extracts and the city's government shapefiles.
<!DOCTYPE html> | |
<meta charset="utf-8" /> | |
<body> | |
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<script src="https://d3js.org/topojson.v1.min.js"></script> | |
<script src="https://unpkg.com/[email protected]/rbush.js"></script> | |
<script src="https://unpkg.com/[email protected]/spam.min.js"></script> | |
<script type='text/javascript'> | |
d3.json("roads.json", function(error, roads) { | |
d3.json("canals.json", function(error, canals) { | |
topojson.presimplify(roads); | |
topojson.presimplify(canals); | |
var map = new StaticCanvasMap({ | |
element: "body", | |
data: [ | |
{ | |
features: topojson.feature(roads, roads.objects["roads"]), | |
static: { | |
paintfeature: function(parameters, d) { | |
parameters.context.lineWidth = 1; | |
parameters.context.strokeStyle = "rgb(175, 141, 195)"; | |
parameters.context.stroke(); | |
} | |
} | |
}, | |
{ | |
features: topojson.feature(canals, canals.objects["canals"]), | |
static: { | |
paintfeature: function(parameters, d) { | |
parameters.context.lineWidth = 0.5; | |
parameters.context.strokeStyle = "rgb(0, 116, 217)"; | |
parameters.context.stroke(); | |
} | |
} | |
} | |
] | |
}); | |
map.init(); | |
}); | |
}); | |
</script> |