zoomable map

_.md

[ Launch: zoomable map ] 5095947 by enjalot

config.json

{"description":"zoomable map","endpoint":"","display":"svg","public":true,"require":[{"name":"topojson","url":"http://d3js.org/topojson.v0.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"santafe.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/ySWotQQ.png"}

inlet.js

var theProvince = tributary.santafe;
var departments = topojson.object(theProvince, theProvince.objects.departments);
var svg = d3.select("svg");
var width = tributary.sw;
var height = tributary.sh;

// The projection
var projection = d3.geo.mercator()
        .scale(14000)
        .center([-60.951,-31.2])
        .translate([width / 2, height / 2]);

// The path
var path = d3.geo.path()
        .projection(projection);

// Zoom behavior
var zoom = d3.behavior.zoom()
  .translate(projection.translate())
  .scaleExtent([height, Infinity])
  .scale(projection.scale())
  .on("zoom", function() {
      projection.translate(d3.event.translate).scale(d3.event.scale)
      map.selectAll("path.zoomable").attr("d", path);
    
      map.selectAll(".place").attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; });
  });


// The map
var map = svg.append("g")
        .classed("provinceMap", true)
        .call(zoom);

map.append("rect")
  .attr("class", "background")
  .attr("width", width)
  .attr("height", height);

// Departments
map.selectAll(".department")
  .data(departments.geometries)
  .enter().append("path")
  .classed("department", true)
  .classed("zoomable", true)
  .attr("d", path);

// Places
map.selectAll(".place-label")
  .data(topojson.object(theProvince, theProvince.objects.maternidades).geometries)
  .enter().append("path")
  .classed("place", true)
  .attr("d", d3.svg.symbol().type("cross"))
  .attr("transform", function(d) { return "translate(" + projection(d.coordinates.reverse()) + ")"; });

santafe.json

style.css

 .background {
        fill: none;
        pointer-events: all;
    }
 
    .department {
        fill: #aaa;
        stroke: #fff;
        stroke-width: 1.5px;
    }