d3-slippy: Constraining Zoom/Pan

readme.md

A basic example of d3-slippy to create easy tile maps without needing to interact with tile units (or zoom units).

The tiles are from ESRI, their ocean basemap : © Esri - Source: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri

d3-slippy.js

// Andrew Reid 2018
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3 = global.d3 || {}),global.d3));
}(this, function (exports) { 'use strict';
	
	
function geoTile() {
	// Basic Constants
	const tau = Math.PI * 2;
	var lim = 85.05113;
	var tileSize = 256;

	// Map Properties:
	var w = 960;
	var h = 500;
	
	// Projection Values:
	var pk = w/tau; // projection scale k
	var pc = [0,0]  // projection geographic center
	var pr = 0      // central longitude for rotation.

	// Zoom Transform Values:
	var tk = 1;	// zoom transform scale k
	var tx = w/2; // zoom transform translate x
	var ty = h/2; // zoom transform translate y
	
	// Offsets for projections where the north west limit is no in the top left.
	var ox = function() { return 0 };
	var oy = function() { return 0 }; 	
		
	// The Projection:
	var p = d3.geoMercator()
	  .scale(pk)
      .center(pc);

	// Tile wrapping and zoom limits:
	var z0 = 4;
	var z1 = 13;
	var extent = function() { return {left:-179.99999,top:lim,right:179.9999,bottom:-lim}; };
	var wrap = true;
	
	// Tile ordering
	var xyz = true;
	
	// Tile source & attribution
	var source = function(d) {
		return "http://" + "abc"[d.y % 3] + ".tile.openstreetmap.org/" + d.z + "/" + d.x + "/" + d.y + ".png"; 
	}
	var a = "Tiles © OpenStreetMap contributors";
	// Tile ordering:
	geoTile.xyz = function(_) {
		return arguments.length ? (xyz = _, geoTile): xyz;
	}
		  
	function geoTile(_) {
		return p(_);
	}
	
	// General Methods
	geoTile.width = function(_) {
		return arguments.length ? (w = _, geoTile) : w;
	}
	geoTile.height = function(_) {
		return arguments.length ? (h = _, geoTile) : h;
	}
	geoTile.size = function(_) {
		if(arguments.length) {
			(_ instanceof d3.selection) ? (w = _.attr("width"), h = _.attr("height"), tx = w/2, ty = h/2) : (w = _[0], h = _[1]);
			return geoTile;
		}
		else return [w,h]
	}
	geoTile.source = function(_) {
		return arguments.length ? (source = _, geoTile) : source;
	}
	geoTile.projection = function() {
		return p;
	}
	geoTile.attribution = function(_) {
		return arguments.length ? (a = _, geoTile) : a;
	}
	geoTile.wrap = function(_) {
		return arguments.length ? (wrap = _, geoTile) : wrap;
	}

	
	// Projection methods:
	geoTile.invert = function(_) {
		return p.invert(_);
	}
	geoTile.center = function(_) {
		// Need to account for any rotation (divergence from d3.geoProjection typical behavior //
		var rotate = d3.geoRotation(p.rotate())
		if(arguments.length) {
			pc = rotate(_); p.center(pc); return geoTile;
		}
		else {
			return rotate.invert(pc); 
		}
		//return arguments.length ? (/*_[0] -= p.rotate()[0], _[1] -= p.rotate()[1], */ pc = _, p.center(pc), geoTile): pc;
	}	
	geoTile.scale = function(_) {
		return arguments.length ? (pk = _, p.scale(pk), geoTile) : pk;
	}	
	geoTile.rotate = function(_) {
		return arguments.length ? (pr = _, p.rotate([pr,0]), geoTile) : pr;
	}
	geoTile.fit = function(_) {
		return arguments.length ? (p.fitSize([w,h],_),tx = p.translate()[0],ty = p.translate()[1],pk = p.scale(), geoTile) : "n/a";
	}
	geoTile.fitMargin = function(m,f) {
		return arguments.length > 1 ? (p.fitExtent([[m,m],[w-m,h-m]],f), tx = p.translate()[0],ty = p.translate()[1],pk = p.scale(), geoTile) : "n/a";
	}
	geoTile.offset = function(_) {
		return arguments.length ? (ox = _[0], oy = _[1], geoTile): [ox,oy];
	}	
		
		
	// Zoom Methods:
	geoTile.zoomScale = function(_) {
		return arguments.length ? (tk = _, p.scale(pk*tk), geoTile) : tk;
	}
	geoTile.zoomTranslate = function(_) {	
		return arguments.length ? (tx = _[0], ty = _[1], p.translate([tx, ty]), geoTile): [tx,ty] 
	}
	geoTile.zoomIdentity = function() {
		return d3.zoomIdentity.translate(tx,ty).scale(tk).translate(0,0);
	}
	geoTile.zoomTransform = function(t) {
		tx = t.x, ty = t.y, tk = t.k; p.translate([tx,ty]); p.scale(pk*tk); return geoTile;
	}
	
	// Get scale factor for tile depth:
	geoTile.tileDepth = function(z) {
		if(arguments.length) {
			return Math.pow(Math.E, ((z + 8) * Math.LN2)) / pk / tau;
		}	
		else {
			var size = pk * tk * tau;
			var z = Math.max(Math.log(size) / Math.LN2 - 8, 0);
			return Math.round(z);
		}
	}
	
	// Set tile depth:
	geoTile.setTileDepth = function(_) {
		pk *= geoTile.tileDepth(_); p.scale(pk); return geoTile;
	}
	
	// Set/get tile size:
	geoTile.tileSize = function(_) {
		return arguments.length ? (tileSize = _, geoTile) : tileSize;
	}
		

	// Zoom extent methods:
	geoTile.zoomScaleExtent = function(_) {
		if (arguments.length) {
			z0 = _[0];
			z1 = _[1];		
			return geoTile;
		}
		else {
			var size = pk * tk * tau;
			var z = Math.max(Math.log(size) / Math.LN2 - 8, 0);
			var max = Math.pow(2,z1)/Math.pow(2,z);
			var min = Math.pow(2,z0)/Math.pow(2,z);
			return [min,max];
		}
	}
	geoTile.zoomTranslateExtent = function(_) {
		var e = extent();
		if (arguments.length) {
			e.left = _[0][0];
			e.top = _[0][1];
			e.right = _[1][0];
			e.bottom = _[1][1];			
			return geoTile;
		}
		else {
			var x0 = p([e.left-pr,e.top])[0] - tx;
			var y0 = p([e.left-pr,e.top])[1] - ty;
			var x1 = p([e.right-pr,e.bottom])[0] - tx;
			var y1 = p([e.right-pr,e.bottom])[1] - ty;
			return [[x0,y0],[x1,y1]];
		}
	}
	geoTile.zoomTranslateConstrain = function() {
		var e = extent();
		e.left = p.invert([0,0])[0];
		e.top = p.invert([0,0])[1];
		e.right = p.invert([w,h])[0];
		e.bottom = p.invert([w,h])[1];
		
		var x0 = p([e.left-pr,e.top])[0] - tx;
		var y0 = p([e.left-pr,e.top])[1] - ty;
		var x1 = p([e.right-pr,e.bottom])[0] - tx;
		var y1 = p([e.right-pr,e.bottom])[1] - ty;
		return [[x0,y0],[x1,y1]];				
	}

	// Tile Methods:	
	// Calculate Tiles:
	geoTile.tiles = function() {
		var size = pk * tk * tau;
		var z = Math.max(Math.log(size) / Math.LN2 - Math.log(tileSize)/Math.log(2), 0); // tile depth 
		var s = Math.pow(2, z - Math.round(z) + 8);

		var y0 = p([-180,lim])[1] - oy.call(this,w,h) * tk * pk/w*tau;
		var x0 = p([-180,lim])[0] - ox.call(this,w,h) * tk * pk/w*tau;
		
		var set = [];
		var cStart = wrap ? Math.floor((0 - x0) / s) : Math.max(0, Math.floor((0 - x0) / s));
		var cEnd = Math.max(0, Math.ceil((w - x0) / s));
		var rStart = Math.max(0,Math.floor((0 - y0) / s));
		var rEnd = Math.max(0, Math.ceil((h - y0) / s));
		
		for(var i = cStart; i < cEnd; i++) {
			for(var j = rStart; j < rEnd; j++) {
				var x = i;
				if (wrap) {
					var k = Math.pow(2,Math.round(z));
					x = (i+k)%k;
				}
				set.push({x:x,y:j,z:Math.round(z),tx:i,ty:j, id:i+"-"+j+"-"+z}) 
			}
		}
		
		if(!xyz) {
			set.forEach(function(d) {
				d.y = (Math.pow(2, d.z) - d.y - 1)
			})
		}		
		
		set.translate = [x0 / s, y0 / s];
		set.scale = s;

		return set;
	}
	// Assign Tiles to a Selection:
	geoTile.tile = function(g) {
		var set = geoTile.tiles();
		var images = g.attr("transform", stringify(set.scale, set.translate))
			.selectAll("image")
			.data(set, function(d) { return d.id; })
			
		images.exit().remove();
		images.enter().append("image").merge(images)
			.attr("xlink:href", source )
			.attr("x", function(d) { return d.tx * tileSize; })
			.attr("y", function(d) { return d.ty * tileSize; })
			.attr("width", tileSize)
			.attr("height", tileSize);	
	}
	
	// Draw on a canvas:
	geoTile.canvas = function(context) {
		var set = geoTile.tiles();
		var k = set.scale / tileSize, r = set.scale % 1 ? Number : Math.round;
		var ox = r(set.translate[0] * set.scale);
		var oy = r(set.translate[1] * set.scale);
		set.forEach(function(d) {
			var tile = new Image();
			tile.src = source(d); // can also be a remote URL e.g. http://
			tile.onload = function() {
				context.drawImage(tile,d.tx*tileSize*k+ox,d.ty*tileSize*k+oy,tileSize*k,tileSize*k);
			};
		})
	}		
	
	// Helper stringify	
	function stringify(scale, translate) {
		var k = scale / tileSize, r = scale % 1 ? Number : Math.round;
		return "translate(" + r(translate[0] * scale) + "," + r(translate[1] * scale) + ") scale(" + k + ")";
	}
	
	geoTile.tileSet = function(_) {
		if(arguments.length) {
			a = _.attribution ? _.attribution : "Unknown";
			p = _.projection ? _.projection.scale(960/tau).translate([0,0]) : d3.geoMercator().scale(960/tau).translate([0,0]);
			source = _.source ? _.source : (console.log("no source provided, using osm"), a = "Tiles © OpenStreetMap contributors", function(d) { return "http://" + "abc"[d.y % 3] + ".tile.openstreetmap.org/" + d.z + "/" + d.x + "/" + d.y + ".png";  })
			lim = _.limit ? _.limit : 85.05113;
			tileSize = _.tileSize ? _.tileSize : 256;
			ox = _.offsetX ? _.offsetX : function() { return 0 };
			oy = _.offsetY ? _.offsetY : function() { return  0 };
			z0 = _.minDepth ? _.minDepth : 1;
			z1 = _.maxDepth ? _.maxDepth : 13;
			wrap = _.wrap ? _.wrap : false;
			xyz = _.xyz ? _.xyz : true; // tile ordering
		}
		return geoTile;		
	}
  return geoTile;

}


		
var tileSets = {
  CartoDB_Positron : {
    type:"tileset",
    attribution: "© OpenStreetMap © CartoDB",
    source: function(d) { return "https://cartodb-basemaps-b.global.ssl.fastly.net/light_all/"+d.z+"/"+d.x+"/"+d.y+".png"; }
  },
  CartoDB_PositronNoLabels : {
    type:"tileset",
    attribution: "© OpenStreetMap © CartoDB",
    source: function(d) { return "https://cartodb-basemaps-b.global.ssl.fastly.net/light_nolabels/"+d.z+"/"+d.x+"/"+d.y+".png"; }
  },
  CartoDB_PositronOnlyLabels : {
    type: "tileset",
    attribution: "© OpenStreetMap © CartoDB",
    source: function(d) { return "https://cartodb-basemaps-b.global.ssl.fastly.net/light_only_labels/"+d.z+"/"+d.x+"/"+d.y+".png"; }
  },
  CartoDB_DarkMatter : {
    type: "tileset",
    attribution: "© OpenStreetMap © CartoDB",
    source: function(d) { return "https://cartodb-basemaps-b.global.ssl.fastly.net/dark_all/"+d.z+"/"+d.x+"/"+d.y+".png"; }
  },
  CartoDB_DarkMatterNoLabels : {
    type: "tileset", 
    attribution: "© OpenStreetMap © CartoDB",
    source: function(d) {return "https://cartodb-basemaps-b.global.ssl.fastly.net/dark_nolabels/"+d.z+"/"+d.x+"/"+d.y+".png"; }
  },
  CartoDB_DarkMatterOnlyLabels : {
    type: "tileset",
	attribution: "© OpenStreetMap © CartoDB",
	source: function(d) { return "https://cartodb-basemaps-b.global.ssl.fastly.net/dark_only_labels/"+d.z+"/"+d.x+"/"+d.y+".png"; }
  },
  CartoDB_Voyager : {
    type: "tileset",
    attribution: "© OpenStreetMap © CartoDB",
    source: function(d) { return "https://cartodb-basemaps-b.global.ssl.fastly.net/rastertiles/voyager/"+d.z+"/"+d.x+"/"+d.y+".png";}
  },
  ESRI_WorldTerrain : {
    type: "tilset",
    attribution: "Tiles © Esri - Source: USGS, Esri, TANA, DeLorme, and NPS",
    source: function(d) { return "https://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png";}
  },
  ESRI_WorldShadedRelief : {
    type: "tileset",
    attribution: "Tiles © Esri - Source: Esri",
    source: function(d) {return "https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png"; }			
  },
  ESRI_WorldPhysical : {
    type:"tileset",
	attribution: "Tiles © Esri - Source: US National Park Service",
	source: function(d) { return "https://server.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png"; }			
  },
  ESRI_WorldStreetMap : {
    type:"tileset",
	attribution:"Tiles © Esri - Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom",
	source: function(d) { return "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png"; }	
  },
  ESRI_WorldTopoMap : {
	type: "tileset",
    attribution: "Tiles © Esri - Source: Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community",
    source: function(d) { return "https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png"; }			
  },
  ESRI_WorldImagery : {
    type:"tileset",
    attribution: "Tiles © Esri - Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community",
    source : function(d) {	return "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png";	}		
  },
  ESRI_OceanBasemap : {
    type: "tileset",
	attribution:"Tiles © Esri - Source: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri",
	source: function(d) { return "https://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png"; }		
  },
  ESRI_NGWorld : {
    type: "tileset",
    attribution: "Tiles © Esri - Source:  National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC",
    source : function(d) { return "https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png"; }		
  },
  ESRI_Gray : {
    type: "tileset",
	attribution: "Tiles © Esri - Source:  Esri, DeLorme, NAVTEQ",
    source : function(d) { return "https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png"; }			
  },
  OSM_Topo : {
    type: "tileset",
    attribution: "Tiles © OpenStreetMap contributors",
    source: function(d) { return "https://tile.opentopomap.org/"+d.z+"/"+d.x+"/"+d.y+".png"; }
  },
  OSM: {
    type:"tileset",
    attribution: "Tiles © OpenStreetMap contributors",
    source: function(d) { return "https://" + "abc"[d.y % 3] + ".tile.openstreetmap.org/" + d.z + "/" + d.x + "/" + d.y + ".png"; }		
  },
  Stamen_Toner : {
    type: "tileset",
    attribution: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.",
    source: function(d) { return "https://stamen-tiles.a.ssl.fastly.net/toner/" + d.z + "/" + d.x + "/" + d.y + ".png"; }			
  },
  Stamen_TonerBackground : {
    type:"tileset",
    attribution: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.",
    source: function(d) { return "https://stamen-tiles.a.ssl.fastly.net/toner-background/" + d.z + "/" + d.x + "/" + d.y + ".png"; }			
  },
  Stamen_TonerLines : {
    type:"tileset",
    attribution:"Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.",
    source: function(d) { return "https://stamen-tiles.a.ssl.fastly.net/toner-lines/" + d.z + "/" + d.x + "/" + d.y + ".png"; }			
  },
  Stamen_TonerLite : {
    type:"tileset",
    attribution: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.",
    source: function(d) { return "https://stamen-tiles.a.ssl.fastly.net/toner-lite/" + d.z + "/" + d.x + "/" + d.y + ".png"; }			
  },
  Stamen_Terrain : {
    type:"tileset",
    attribution: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.",
    source: function(d) { return "https://stamen-tiles.a.ssl.fastly.net/terrain/" + d.z + "/" + d.x + "/" + d.y + ".png"; }			
  },
  Stamen_TerrainBackground : {
    type:"tileset",
    attribution: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.",
    source: function(d) {	return "https://stamen-tiles.a.ssl.fastly.net/terrain-background/" + d.z + "/" + d.x + "/" + d.y + ".png"; }			
  },
  Stamen_TerrainLines : {
    type:"tileset",
	attribution: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.",
	source: function(d) { return "https://stamen-tiles.a.ssl.fastly.net/terrain-lines/" + d.z + "/" + d.x + "/" + d.y + ".png"; }			
  },
  Stamen_Watercolor: {
    type:"tileset",
    attribution:"Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.",
    source: function(d) {return "https://stamen-tiles.a.ssl.fastly.net/watercolor/" + d.z + "/" + d.x + "/" + d.y + ".png"; }			
  }
}


  // Tilesets:
  exports.tileSet = tileSets;
  exports.geoSlippy = geoTile;

  Object.defineProperty(exports, '__esModule', { value: true });

}));

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3-slippy.js"></script> 
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>

var geojson = {"type":"FeatureCollection", "features": [
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-56.906191175381274,-30.10857466118087],[-56.86942067590032,-30.103209938639615],[-56.831051459050634,-30.102234534541207],[-56.79534677114884,-30.12369342470622],[-56.77669506851358,-30.151004739461698],[-56.767102764301164,-30.161246482495002],[-56.70475278692042,-30.198311838234574],[-56.67384425112484,-30.211479793563107],[-56.65679126585832,-30.221233834547206],[-56.641869903750106,-30.233914087826534],[-56.632810505327264,-30.247569745204274],[-56.62908016480021,-30.267565529221674],[-56.63227759953768,-30.27829497430418],[-56.63121178795853,-30.284635100943845],[-56.615224614271156,-30.293413737829535],[-56.605099404269154,-30.29585224807556],[-56.595507100056736,-30.295364546026356],[-56.58591479584431,-30.296339950124764],[-56.57525668005273,-30.302680076764428],[-56.56939471636736,-30.308044799305684],[-56.560868223734104,-30.32072505258501],[-56.523564818463576,-30.35730270627538],[-56.511307985303254,-30.366081343161067],[-56.49478790582631,-30.3792492984896],[-56.441497326868415,-30.4089991234911],[-56.424444341601884,-30.423630184967248],[-56.40046358107083,-30.458744732510002],[-56.386075124752196,-30.475814304232173],[-56.37275248001273,-30.48605604726548],[-56.32638967631936,-30.508490341528905],[-56.26777003946567,-30.55092041980973],[-56.235262786301355,-30.56555148128588],[-56.21501236629735,-30.58213335095885],[-56.18357092471219,-30.614321686206374],[-56.17770896102682,-30.625538833338084],[-56.17504443207893,-30.636268278420594],[-56.170781185762294,-30.645534617355487],[-56.15959016418114,-30.65382555219197],[-56.140405555756296,-30.66455499727448],[-56.13187906312303,-30.671870528012555],[-56.12495128785851,-30.680161462849036],[-56.09191112890461,-30.736247198507602],[-56.0769897667964,-30.752341366131365],[-56.01144235467819,-30.798185358756626],[-55.99545518099082,-30.82598437556131],[-55.98906031151587,-30.855734200562807],[-55.99385646362208,-30.88548402556431],[-56.01144235467819,-30.912795340319782],[-56.01570560099482,-30.9342542304848],[-56.0162385067844,-31.000094007127466],[-56.02263337625934,-31.04545029770352],[-56.022100470469766,-31.06690918786854],[-56.01677141257397,-31.07422471860661],[-56.01144235467819,-31.08202795139389],[-56.00984363730945,-31.08202795139389],[-55.985329970988815,-31.078614037049455],[-55.919249653081025,-31.082515653443096],[-55.88834111728544,-31.07715093090184],[-55.86436035675439,-31.076663228852638],[-55.85476805254197,-31.074712420655818],[-55.84677446569829,-31.069347698114562],[-55.84197831359207,-31.06398297557331],[-55.83824797306502,-31.05813055098285],[-55.832386009379654,-31.051790424343185],[-55.778029618842595,-31.02057749319407],[-55.76364116252397,-31.008384941963946],[-55.755647575680285,-30.99277847638939],[-55.7449894598887,-30.958639332945047],[-55.731666815149225,-30.945471377616514],[-55.71248220672439,-30.943520569419693],[-55.688501446193335,-30.947909887862536],[-55.665586497241435,-30.949372994010155],[-55.652796758291544,-30.93913125097685],[-55.65119804092281,-30.920110871057858],[-55.65439547566028,-30.87865619687544],[-55.64959932355407,-30.861098923104063],[-55.634145055656276,-30.847443265726323],[-55.61282882407312,-30.843541649332685],[-55.59204549827954,-30.848418669824735],[-55.56380149143185,-30.876217686629413],[-55.527563897740485,-30.894750364499203],[-55.51104381826354,-30.905967511630916],[-55.4891946808908,-30.929864912041957],[-55.44283187719743,-30.965467161633914],[-55.36875797244595,-31.037159362867037],[-55.35383661033774,-31.05617974278603],[-55.34850755244195,-31.072761612458997],[-55.344777211914895,-31.108363862050957],[-55.33784943665037,-31.12543343377313],[-55.327191320858795,-31.135187474757227],[-55.293618256115316,-31.153720152627013],[-55.28242723453416,-31.168838916152367],[-55.2685716840051,-31.21078129238399],[-55.260045191371844,-31.22882626820457],[-55.24459092347405,-31.244432733779128],[-55.227537938207526,-31.253699072714024],[-55.188102909778685,-31.266379325993352],[-55.16945120714342,-31.276621069026653],[-55.12202259187089,-31.313686424766228],[-55.10230507765647,-31.324415869848735],[-55.087383715548256,-31.326854380094762],[-55.07406107080878,-31.320514253455098],[-55.06127133185889,-31.304907787880538],[-55.042086723434046,-31.272719452633016],[-55.02929698448415,-31.268817836239375],[-55.01171109342805,-31.287838216158367],[-54.99519101395109,-31.311735616569408],[-54.9696115360513,-31.340997739521704],[-54.94083462341404,-31.365870544031154],[-54.90033378340604,-31.381964711654916],[-54.88754404445614,-31.39318185878663],[-54.87635302287499,-31.406349814115163],[-54.86356328392509,-31.417566961246877],[-54.84970773339604,-31.42488249198495],[-54.819865009179615,-31.435124235018254],[-54.654131308620556,-31.45560772108486],[-54.619492432297925,-31.45560772108486],[-54.604571070189714,-31.459997039527703],[-54.591781331239815,-31.471214186659417],[-54.57366253439413,-31.502427117808534],[-54.56247151281298,-31.51608277518627],[-54.509713839644654,-31.552172726827433],[-54.49479247753644,-31.565828384205172],[-54.48306855016571,-31.583873360025756],[-54.47880530384908,-31.60143063379713],[-54.47720658648034,-31.64190990388114],[-54.46708137647834,-31.664344198144565],[-54.46388394174087,-31.671659728882638],[-54.43670574647234,-31.694094023146064],[-54.40366558751845,-31.714577509212674],[-54.37328995751244,-31.738962611672918],[-54.34291432750644,-31.769200138723622],[-54.274169480650755,-31.82333506618537],[-54.21874727853454,-31.856498805531306],[-54.16971994589328,-31.896002671516904],[-54.1462720911518,-31.90965832889464],[-54.135081069570646,-31.909170626845437],[-54.12548876535822,-31.898441181762927],[-54.107369968512536,-31.883810120286782],[-54.08818536008769,-31.87795769569632],[-54.06900075166285,-31.87990850389314],[-54.04981614323801,-31.887224034631213],[-54.03276315797148,-31.897953479713724],[-54.02690119428611,-31.90478130840259],[-54.01784179586327,-31.91941236987874],[-54.00878239744043,-31.92672790061681],[-53.998657187438425,-31.929654112912043],[-53.966149934274114,-31.932580325207272],[-53.948564043218006,-31.936969643650116],[-53.93417558689937,-31.94233436619137],[-53.905931580051686,-31.959403937913542],[-53.89420765268095,-31.97013338299605],[-53.88994440636432,-31.980375126029355],[-53.887279877416425,-31.990616869062656],[-53.881417913731056,-32.00134631414517],[-53.871292703729054,-32.01158805717847],[-53.85797005898958,-32.02134209816257],[-53.83025895793148,-32.03646086168792],[-53.771639321077785,-32.04719030677043],[-53.75725086475916,-32.05499353955771],[-53.75138890107379,-32.068649196935446],[-53.74979018370505,-32.10425144652741],[-53.721546176857366,-32.16228799038279],[-53.67038722105779,-32.22617695882863],[-53.65866329368705,-32.25446367768252],[-53.65173551842252,-32.28811511907766],[-53.64853808368505,-32.33883613219497],[-53.64374193157884,-32.35541800186794],[-53.634682533155996,-32.36858595719647],[-53.6091030552562,-32.387606337115464],[-53.598977845254204,-32.399798888345586],[-53.58192485998767,-32.42564709695345],[-53.56114153419409,-32.449544497364485],[-53.53769367945262,-32.470027983431095],[-53.474810796282306,-32.50806874326908],[-53.41565825363904,-32.56415447892764],[-53.359170239943666,-32.580248646551404],[-53.31600487098777,-32.60268294081483],[-53.298951885721245,-32.60707225925768],[-53.26697753834651,-32.60755996130688],[-53.23393737939261,-32.62462953302905],[-53.201430126228296,-32.63730978630838],[-53.1859758583305,-32.64657612524328],[-53.11989554042271,-32.70753888139389],[-53.11083614199987,-32.72216994287004],[-53.11403357673734,-32.740702620739825],[-53.12682331568724,-32.75484598016677],[-53.16306090937861,-32.77874338057781],[-53.18277842359303,-32.799714568693624],[-53.204094655176185,-32.82263656500625],[-53.27070787887356,-32.86360353713947],[-53.298951885721245,-32.888964043698124],[-53.30694547256493,-32.9070090195187],[-53.30961000151282,-32.94456207730748],[-53.31653777677735,-32.96260705312807],[-53.32719589256893,-32.97382420025978],[-53.449231318382516,-33.04210248714847],[-53.483337288915564,-33.067462993707124],[-53.51158129576325,-33.099163626905444],[-53.51158129576325,-33.09965132895465],[-53.52064069418609,-33.125011835513305],[-53.53662786787346,-33.17085582813856],[-53.53609496208389,-33.24449883756851],[-53.514245824711146,-33.39471106872362],[-53.53662786787346,-33.56004206340409],[-53.539825302610936,-33.64929153840859],[-53.51158129576325,-33.6902585105418],[-53.49133087575925,-33.6902585105418],[-53.47321207891357,-33.687332298246574],[-53.456691999436615,-33.687332298246574],[-53.44017191995967,-33.69708633923067],[-53.43057961574725,-33.71366820890364],[-53.42365184048272,-33.731225482675015],[-53.411395007322405,-33.74244262980673],[-53.378887754158086,-33.740491821609915],[-53.39647364521419,-33.75073356464321],[-53.41459244205988,-33.76438922202095],[-53.45083003575125,-33.80145457776052],[-53.47321207891357,-33.83461831710646],[-53.485468912073884,-33.86924516260001],[-53.50571933207788,-33.952154510964846],[-53.524903940502725,-34.00238782203295],[-53.529700092608934,-34.048231814658216],[-53.53929239682136,-34.06237517408516],[-53.57446417893357,-34.082858660151764],[-53.590984258410515,-34.09553891343109],[-53.64001159105178,-34.14772303269602],[-53.69383507579926,-34.18186217614036],[-53.71088806106579,-34.19893174786254],[-53.74659274896758,-34.257455993767124],[-53.75618505318,-34.26769773680043],[-53.75831667633831,-34.27842718188294],[-53.779632907921474,-34.33597602368912],[-53.7636457342341,-34.372553677379486],[-53.76471154581326,-34.39059865320007],[-53.80574529161084,-34.40084039623338],[-53.89847089899758,-34.443758176563406],[-53.972011897959476,-34.48716365894264],[-54.12442295377906,-34.61055227739149],[-54.13667978693938,-34.623720232720025],[-54.140943033256015,-34.6412775064914],[-54.14041012746643,-34.65639627001675],[-54.145739185362224,-34.667613417148466],[-54.23686607538023,-34.68468298887064],[-54.25978102433212,-34.68614609501825],[-54.25551777801549,-34.677367458132565],[-54.24965581433012,-34.6710273314929],[-54.23206992327402,-34.65834707821357],[-54.239530604328124,-34.652982355672314],[-54.24592547380307,-34.64712993108186],[-54.25072162590928,-34.63932669829458],[-54.2528532490676,-34.631035763458094],[-54.251254531698855,-34.618355510178766],[-54.24112932169686,-34.59397040771852],[-54.238464792748964,-34.589581089275676],[-54.253386154857175,-34.577388538045554],[-54.2805643501257,-34.56812219911066],[-54.30880835697339,-34.5622697745202],[-54.32852587118781,-34.561782072471],[-54.31733484960665,-34.56860990115987],[-54.280031444336124,-34.58226555853761],[-54.28802503117981,-34.594945811816935],[-54.304545110656754,-34.60860146919467],[-54.32319681329202,-34.61933091427718],[-54.33865108118981,-34.623720232720025],[-54.34451304487518,-34.63054806140889],[-54.345045950664755,-34.64420371878663],[-54.33758526961065,-34.65493316386914],[-54.3210651901337,-34.652494653623116],[-54.32266390750244,-34.644691420835834],[-54.30774254539423,-34.64761763313106],[-54.28909084275897,-34.66029788641039],[-54.280031444336124,-34.68224447862461],[-54.28802503117981,-34.69492473190394],[-54.30667673381507,-34.707604985183266],[-54.53103007122782,-34.80709620322107],[-54.54222109280897,-34.811973223713125],[-54.60403816440014,-34.82660428518927],[-54.63654541756445,-34.849038579452696],[-54.65679583756845,-34.85684181223998],[-54.699428300734766,-34.86757125732248],[-54.87262268234793,-34.93633724626038],[-54.893938913931095,-34.93926345855561],[-54.913656428145515,-34.945115883146066],[-54.939235906045305,-34.969988687655515],[-54.95842051447015,-34.97340260199995],[-54.954157268153516,-34.963160858966646],[-54.9520256449952,-34.95682073232698],[-54.9520256449952,-34.95291911593334],[-54.9621508549972,-34.939751160604814],[-54.97547349973667,-34.9285340134731],[-54.99359229658236,-34.92121848273502],[-55.033027325011204,-34.91682916429218],[-55.0356918539591,-34.91292754789854],[-55.03462604237994,-34.90658742125888],[-55.041020911854886,-34.89780878437319],[-55.05114612185689,-34.891468657733526],[-55.06020552027973,-34.887567041339885],[-55.08205465765247,-34.88415312699545],[-55.13001617871458,-34.88610393519227],[-55.22167597452216,-34.90366120896365],[-55.260045191371844,-34.89780878437319],[-55.286690480850794,-34.87634989420817],[-55.33838234243995,-34.81880105240199],[-55.37675155928964,-34.801243778630614],[-55.40179813139985,-34.799780672482996],[-55.46841135509722,-34.795391354040156],[-55.5094451008948,-34.7992929704338],[-55.56113696248396,-34.78807582330208],[-55.60163780249196,-34.77246935772752],[-55.646934794606175,-34.78124799461321],[-55.693297598299544,-34.76466612494024],[-55.75671338725944,-34.78271110076083],[-55.79188516937165,-34.77393246387514],[-55.8590312988586,-34.79295284379413],[-55.888874023075026,-34.80368228887664],[-55.95442143519324,-34.8392845384686],[-56.00398167362408,-34.8690343634701],[-56.069529085742296,-34.901222698717625],[-56.10523377364409,-34.898296486422396],[-56.135609403650086,-34.91292754789854],[-56.149997859968714,-34.92024307863662],[-56.15585982365408,-34.941214266752425],[-56.17717605523725,-34.916341462242976],[-56.19476194629335,-34.91341524994775],[-56.21288074313904,-34.90756282535729],[-56.20488715629535,-34.898784188471595],[-56.20328843892661,-34.887567041339885],[-56.214479460507775,-34.8797638085526],[-56.23046663419514,-34.877813000355786],[-56.23632859788051,-34.89293176388114],[-56.25657901788451,-34.90609971920967],[-56.265638416307354,-34.90609971920967],[-56.28802045946967,-34.90366120896365],[-56.31146831421115,-34.90609971920967],[-56.342909755796306,-34.88415312699545],[-56.40312811001873,-34.854891004043154],[-56.418582377916515,-34.84318615486224],[-56.420714001074835,-34.82806739133689],[-56.403661015808304,-34.81587484010676],[-56.38660803054178,-34.80173148067982],[-56.36102855264199,-34.79685446018777],[-56.3759499147502,-34.78271110076083],[-56.39566742896462,-34.77588327207196],[-56.44842510213294,-34.75832599830058],[-56.48519560161389,-34.75344897780853],[-56.5203673837261,-34.75491208395615],[-56.54168361530926,-34.76710463518627],[-56.55820369478621,-34.76515382698945],[-56.573657962683995,-34.75881370034978],[-56.61096136795452,-34.739305618381586],[-56.62854725901063,-34.73247778969272],[-56.64613315006674,-34.722723748708624],[-56.71327927955369,-34.70711728313406],[-56.79534677114884,-34.698338646248374],[-56.873683922216955,-34.67005192739449],[-56.89073690748348,-34.66029788641039],[-56.904059552222954,-34.63542508190094],[-56.91951382012075,-34.62323253067082],[-56.95308688486422,-34.603236746653415],[-56.9765347396057,-34.58080245238999],[-56.99731806539928,-34.56422058271702],[-57.01596976803454,-34.5520280314869],[-57.04261505751349,-34.53788467205996],[-57.0575364196217,-34.52715522697745],[-57.05593770225296,-34.51349956959971],[-57.06233257172791,-34.50667174091084],[-57.07725393383612,-34.49838080607436],[-57.08311589752149,-34.493503785582305],[-57.101767600156755,-34.47594651181093],[-57.11988639700244,-34.4627785564824],[-57.151860744377174,-34.45107370730148],[-57.20301970017675,-34.442295070415796],[-57.292014967036444,-34.44034426221897],[-57.34690426336308,-34.4432704745142],[-57.36502306020876,-34.43059022123487],[-57.41138586390213,-34.431565625333285],[-57.43696534180192,-34.44473358066182],[-57.44922217496224,-34.431565625333285],[-57.47480165286203,-34.42961481713647],[-57.502512753920136,-34.44034426221897],[-57.537684536032344,-34.453512217547505],[-57.56965888340709,-34.42668860484123],[-57.595238361306876,-34.42571320074283],[-57.62401527394414,-34.43059022123487],[-57.66451611395214,-34.445221282711024],[-57.720471221857935,-34.463266258531604],[-57.73859001870362,-34.46131545033479],[-57.76416949660341,-34.474483405663314],[-57.793479315030254,-34.47204489541729],[-57.822256227667516,-34.47497110771252],[-57.85529638662141,-34.471069491318886],[-57.84570408240899,-34.4627785564824],[-57.85423057504225,-34.44765979295705],[-57.88194167610036,-34.44083196426818],[-57.900060472946045,-34.416446861807934],[-57.89739594399815,-34.37645529377313],[-57.92297542189794,-34.353533297460494],[-57.942692936112365,-34.32622198270502],[-58.01676684086384,-34.253066675324284],[-58.04980699981773,-34.23989871999575],[-58.06153092718847,-34.2247799564704],[-58.07698519508626,-34.19210391917367],[-58.094571086142366,-34.17796055974672],[-58.11961765825258,-34.169181922861036],[-58.145730041941945,-34.165280306467395],[-58.16917789668342,-34.163817200319784],[-58.19635609195195,-34.15942788187694],[-58.20861292511227,-34.14772303269602],[-58.220336852483,-34.110169974907244],[-58.23206077985374,-34.08871108474222],[-58.31625989460722,-33.986293654409195],[-58.33491159724248,-33.97312569908066],[-58.37221500251301,-33.95459302121087],[-58.38873508198996,-33.94191276793154],[-58.40259063251901,-33.92289238801255],[-58.41005131357311,-33.90240890194595],[-58.43456497989375,-33.78487270808756],[-58.43936113199996,-33.69854944537829],[-58.42550558147091,-33.612713884718225],[-58.42923592199796,-33.592230398651616],[-58.43509788568333,-33.57223461463421],[-58.4382953204208,-33.5512634265184],[-58.432966262525014,-33.527853728156565],[-58.41964361778554,-33.50834564618837],[-58.385537647252484,-33.470304886350384],[-58.378609871987955,-33.44884599618537],[-58.38500474146291,-33.42933791421717],[-58.41271584252101,-33.409829832248974],[-58.419110711995955,-33.38983404823158],[-58.41271584252101,-33.37178907241099],[-58.39726157462322,-33.35569490478723],[-58.361023980931854,-33.32594507978573],[-58.35089877092985,-33.30594929576833],[-58.349300053561116,-33.283027299455696],[-58.36582013303806,-33.19621633469722],[-58.366885944617216,-33.153786256416396],[-58.35143167671943,-33.12159792116887],[-58.31039793092185,-33.10891766788954],[-58.21713941774553,-33.11330698633238],[-58.174506954579215,-33.110380774037154],[-58.13773645509826,-33.0952620105118],[-58.100433049827735,-33.0655121855103],[-58.08391297035079,-33.04746720968972],[-58.07698519508626,-33.03088534001675],[-58.07538647771752,-33.00747564165491],[-58.07059032561131,-32.989430665834334],[-58.0556689635031,-32.95187760804556],[-58.04874118823858,-32.91188604001075],[-58.05726768087184,-32.88164851296005],[-58.07698519508626,-32.857751112549],[-58.12068346983174,-32.819222650661814],[-58.130808679833734,-32.80264078098885],[-58.13613773772953,-32.784595805168266],[-58.13773645509826,-32.76362461705246],[-58.13560483193995,-32.7182683264764],[-58.13773645509826,-32.695346330163765],[-58.14519713615237,-32.6782767584416],[-58.13773645509826,-32.670473525654316],[-58.14626294773153,-32.64511301909566],[-58.157453969312684,-32.57537162605936],[-58.16917789668342,-32.56074056458321],[-58.177171483527104,-32.54513409900865],[-58.19742190353111,-32.470027983431095],[-58.200086432479004,-32.44710598711846],[-58.19955352668942,-32.44466747687244],[-58.189961222477,-32.43393803178993],[-58.16491465036679,-32.38955714531228],[-58.101498861406895,-32.3115248174395],[-58.096702709300686,-32.28079958833958],[-58.10682791930268,-32.25202516743649],[-58.17503986036879,-32.17399283956371],[-58.18676378773953,-32.153021651447894],[-58.18090182405416,-32.13253816538129],[-58.15905268668142,-32.10132523423218],[-58.14839457088984,-32.06279677234499],[-58.14519713615237,-32.017928183818135],[-58.148927476679425,-31.9750104034881],[-58.15905268668142,-31.943797472338986],[-58.19049412826658,-31.913072243239075],[-58.2027509614269,-31.893076459221675],[-58.19582318616237,-31.872592973155065],[-58.168644990893846,-31.846257062498],[-58.152657817206475,-31.836015319464696],[-58.130808679833734,-31.827724384628215],[-58.08338006456121,-31.819921151840937],[-58.05939930403016,-31.811630217004453],[-58.04874118823858,-31.796999155528304],[-57.98852283401615,-31.642885307979547],[-57.97946343559331,-31.598992123551106],[-57.986924116647415,-31.554123535024253],[-58.013569406126365,-31.52583681617037],[-58.039148884026154,-31.508767244448197],[-58.05087281139689,-31.50096401166092],[-58.07538647771752,-31.475115803053058],[-58.06259673876763,-31.444390573953147],[-58.04341213034279,-31.43073491657541],[-58.00610872507226,-31.411226834607213],[-57.99012155138489,-31.399521985426293],[-57.98052924717247,-31.380501605507302],[-57.97573309506626,-31.335145314931246],[-57.966140790853835,-31.314661828864637],[-57.95974592137889,-31.30783400017577],[-57.94322584190194,-31.296616853044057],[-57.935765160847836,-31.290276726404393],[-57.914981835054256,-31.25223596656641],[-57.904856625052254,-31.241018819434693],[-57.904856625052254,-31.215170610826835],[-57.91178440031678,-31.170789724349188],[-57.898994661366885,-31.126408837871537],[-57.87394808925667,-31.093245098525603],[-57.85529638662141,-31.05910595508126],[-57.86328997346509,-31.012286558357587],[-57.90538953084184,-30.958639332945047],[-57.91178440031678,-30.947422185813334],[-57.903790813473094,-30.929864912041957],[-57.885139110837834,-30.918647764910244],[-57.8430395534611,-30.909381425975347],[-57.81959169871962,-30.911819936221374],[-57.807334865559305,-30.90743061777853],[-57.80200580766351,-30.892311854253176],[-57.79614384397814,-30.868414453842135],[-57.79507803239899,-30.85817271080883],[-57.79614384397814,-30.81623033457721],[-57.79934127871562,-30.791357530067756],[-57.80200580766351,-30.773312554247177],[-57.808400677138465,-30.747464345639315],[-57.81799298135088,-30.711862096047355],[-57.825986568194566,-30.689915503833134],[-57.84836861135688,-30.64797312760151],[-57.86328997346509,-30.628465045633316],[-57.88567201662741,-30.589936583746127],[-57.88993526294404,-30.55092041980973],[-57.87714552399415,-30.51483046816857],[-57.84943442293604,-30.485080643167066],[-57.6527921865814,-30.329015987421492],[-57.63094304920867,-30.296827652173967],[-57.62348236815456,-30.25829919028678],[-57.63787082447319,-30.214893707907542],[-57.642666976579406,-30.192947115693322],[-57.63414048394614,-30.18368077675843],[-57.611758440783824,-30.183193074709223],[-57.58671186867361,-30.204164262825035],[-57.56752726024877,-30.25634838208996],[-57.53608581866361,-30.274393357910544],[-57.5110392465534,-30.276831868156567],[-57.46734097180792,-30.2700040394677],[-57.44336021127687,-30.269516337418494],[-57.43003756653739,-30.275368762008952],[-57.414583298639606,-30.29585224807556],[-57.39912903074182,-30.299266162419993],[-57.38953672652939,-30.29487684397715],[-57.3666217775775,-30.277319570205773],[-57.3538320386276,-30.271954847664517],[-57.33411452441318,-30.272442549713723],[-57.321857691252866,-30.279758080451796],[-57.31119957546129,-30.28804901528828],[-57.29627821335308,-30.293413737829535],[-57.28881753229897,-30.29097522758351],[-57.27602779334907,-30.277807272254975],[-57.2701658296637,-30.275368762008952],[-57.2627051486096,-30.278782676353387],[-57.24991540965971,-30.290487525534303],[-57.2451192575535,-30.293413737829535],[-57.21261200438918,-30.287561313239074],[-57.18383509175192,-30.267565529221674],[-57.16358467174791,-30.23927881036779],[-57.15825561385212,-30.208065879218672],[-57.150794932798014,-30.18221767061081],[-57.12947870121486,-30.15002933536329],[-57.10230050594633,-30.1212549144602],[-57.07725393383612,-30.106136150934844],[-57.06712872383412,-30.10662385298405],[-57.048477021198856,-30.11442708577133],[-57.03781890540728,-30.11442708577133],[-57.01810139119286,-30.10564844888564],[-57.01117361592833,-30.10369764068882],[-56.97440311644738,-30.097357514049158],[-56.954685602232956,-30.09686981199995],[-56.906191175381274,-30.10857466118087]]]},"properties":{"name":"Uruguay"},"id":"URY"}
]}

var svg = d3.select("svg");

// Set up a slippy projection
var slippy = d3.geoSlippy()
 .tileSet(d3.tileSet.ESRI_OceanBasemap)
 .size(svg)
 .fitMargin(20,geojson);
 
// Set up a group to hold the tiles
var raster = svg.append("g"); 

// Set up a path generator
var path = d3.geoPath().projection(slippy.projection());

// Set zoom properties
var zoom = d3.zoom()
  .on("zoom",zoomed)
  .translateExtent(slippy.zoomTranslateConstrain())
  .scaleExtent([0.5,4]);
  
// Draw a path:
var uruguay = svg.append("path")
  .datum(geojson)
  .attr("d", path)
  .attr("fill","none")
  .attr("stroke","black")
  .attr("stroke-width",1);

// Call zoom and set initial zoom
svg
  .call(zoom)
  .call(zoom.transform, slippy.zoomIdentity());

// Apply zoom
function zoomed() {
  // Update projection.
  slippy.zoomTransform(d3.event.transform)

  // Update raster tiles:
  raster.call(slippy.tile);
  
  // Update the vector layer:
  uruguay.attr("d",path);
}
</script>