Skip to content

Instantly share code, notes, and snippets.

@LuisSevillano
Last active February 19, 2017 16:45
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save LuisSevillano/9ad9c025a1fd9e82df64203bb8969c3d to your computer and use it in GitHub Desktop.
Retina canvas map
border: none
height: 400
<!DOCTYPE html>
<div class="map">
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
var canvas = d3.select(".map").append("canvas");
context = canvas.node().getContext("2d"),
path = d3.geoPath().projection(null).context(context);
context.lineJoin = 'round';
context.lineCap = 'round';
var width = 960,
height = 600;
canvas
.attr("width", width)
.attr("height", 600)
.style("width", width + "px")
.style("height", 600 + "px")
// ajustes necesarios para ofrecer una mayor
// definición en nuestro mapa canvas
if (window.devicePixelRatio > 1) {
var devicePixelRatio = window.devicePixelRatio || 1;
var backingStoreRatio = context.webkitBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
var ratio = devicePixelRatio / backingStoreRatio;
canvas
.attr('width', width * ratio)
.attr('height', height * ratio)
.style('width', width + 'px')
.style('height', height + 'px');
context.scale(ratio, ratio);
}
var color = d3.scaleThreshold()
.domain([12, 13.6, 15.3, 16.5, 17, 17.3])
.range(["#feedde","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#8c2d04"]);
d3.queue()
.defer(d3.json, "map.json")
.await(ready);
// hemos creado un objeto gracias al cual podremos
// asignar unas propiedades de estilo en el caso de que
// la entidad a representar sea un bosque o una zona residencial
var landuseClasses = {
forest : {
fill: '#B2DF8A',
stroke: '#33a02c'
},
residential : {
fill: '#87a5a6',
stroke: '#3e979c'
}
}
// mismo concepto para carreteras
// todas tendrán el mismo color pero no así el mismo grosor
var roadsWidthClasses = {
primary : 0.8,
secondary: 0.4,
tertiary : 0.2,
path : 0.1
}
function ready(error, map) {
if (error) throw error;
var landuse = topojson.feature(map, map.objects.landuse).features
var municipalities = topojson.feature(map, map.objects.municipalities).features
var roads = topojson.feature(map, map.objects.roads).features
context.lineWidth = .3;
// landuse
for (var i = 0; i < landuse.length; i++) {
var fclass = landuse[i].properties.fclass;
context.strokeStyle = landuseClasses[fclass].stroke;
context.fillStyle = landuseClasses[fclass].fill;
context.beginPath()
path(landuse[i]);
context.fill()
context.stroke()
}
//municipios
for (var i = 0; i < municipalities.length; i++) {
context.fillStyle = color(municipalities[i].properties.csv_desemp)
context.beginPath()
path(municipalities[i]);
context.globalAlpha = 0.3;
context.fill()
//context.stroke()
}
context.globalAlpha = 1;
// roads
for (var i = 0; i < roads.length; i++) {
var fclass = roads[i].properties.fclass;
context.strokeStyle = 'rgba(32, 32, 32,.2)';
context.lineWidth = roadsWidthClasses[fclass];
context.beginPath()
path(roads[i]);
//context.fill()
context.stroke()
}
context.strokeStyle = "black"
context.setLineDash([1,3])
context.lineWidth = .2;
path(topojson.feature(map, map.objects.municipalities));
context.stroke()
context.setLineDash([0])
//island border
context.strokeStyle = "rgb(0, 0, 0)";
context.lineWidth = 0.3;
context.beginPath()
path(topojson.feature(map, map.objects.island));
context.stroke()
};
</script>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment