Skip to content

Instantly share code, notes, and snippets.

@hugolpz

hugolpz/README.md

Last active August 23, 2017 04:24
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save hugolpz/560f56d2cd1899b0982f to your computer and use it in GitHub Desktop.
Save hugolpz/560f56d2cd1899b0982f to your computer and use it in GitHub Desktop.
Download ZIP
Elegant map
Raw
README.md

D3js try for elegant map out of OSM data.

Raw
index.html
<!DOCTYPE html>
<head>
<style>
.landuse {
fill: #efefef;
}
.roads {
fill: none;
stroke: #777;
stroke-width: 0.3px;
}
.roads_residential {
fill: none;
stroke: #fff;
stroke-width: 0.3px;
}
.roads_primary {
fill: none;
stroke: #555;
stroke-width: 0.35px;
}
.roads_trunk {
fill: none;
stroke: #3b3b3b;
stroke-width: 0.4px;
}
.water {
fill: steelblue;
fill-opacity: 0.3;
}
span:before { }
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
</head>
<body>
<script>
var width = 960,
height = 700;
var CSS = [
{ "x": 30 , "y": 700-180, "class": "land_use"},
{ "x": 30 , "y": 700-150, "class": "roads"},
{ "x": 30 , "y": 700-120, "class": "roads_residential"},
{ "x": 30 , "y": 700-90, "class": "roads_primary"},
{ "x": 30 , "y": 700-60, "class": "roads_trunk"},
{ "x": 30 , "y": 700-30, "class": "water"}
];
var projection = d3.geo.mercator()
.translate([600, height/2])
.center([0.0, 51.4971])
.scale(150000);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var svg_g = svg.append("g");
d3.json('london.topo.json', function(err, data) {
svg_g.append("path")
.datum(topojson.object(data, data.objects.landuse))
.attr("class", "landuse")
.attr("d", path);
svg_g.append("path")
.datum(topojson.object(data, data.objects.roads))
.attr("class", "roads")
.attr("d", path);
svg_g.append("path")
.datum(topojson.object(data, data.objects.roads_residential))
.attr("class", "roads_residential")
.attr("d", path);
svg_g.append("path")
.datum(topojson.object(data, data.objects.roads_primary))
.attr("class", "roads_primary")
.attr("d", path);
svg_g.append("path")
.attr("class", "roads_trunk")
.datum(topojson.object(data, data.objects.roads_truck))
.attr("d", path);
svg_g
.append("path")
.datum(topojson.object(data, data.objects.waterway))
.attr("class", "water")
.attr("d", path);
svg_g.append("g")
.attr("groupmode","layer")
.attr({'id':'legend','label':'Legend'})
.selectAll("rect")
.data(CSS)
.enter()
.append("rect")
.attr("width", 20)
.attr("height", 10)
.attr("x", function (d) { return d.x; })
.attr("y", function (d) { return d.y; })
.attr("class", function (d) { return d.class; });
});
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
london.topo.json
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment