D3 Examples - Retina canvas map

xxxxxxxxxx
 
<!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>
​
    