|
<html xmlns="http://www.w3.org/1999/xhtml"> |
|
<head> |
|
<title>Improved Canvas Rendering - d3.carto</title> |
|
<meta charset="utf-8" /> |
|
<link type="text/css" rel="stylesheet" href="d3map.css" /> |
|
<link type="text/css" rel="stylesheet" href="https://raw.githubusercontent.com/emeeks/d3-carto-map/master/examples/example.css" /> |
|
</head> |
|
<style> |
|
html,body { |
|
height: 100%; |
|
width: 100%; |
|
margin: 0; |
|
} |
|
|
|
#map { |
|
height: 100%; |
|
width: 100%; |
|
position: absolute; |
|
} |
|
|
|
.region { |
|
stroke: white; |
|
} |
|
|
|
</style> |
|
<script> |
|
|
|
function makeSomeMaps() { |
|
pathSource = 0; |
|
|
|
map = d3.carto.map(); |
|
|
|
var regionColor = ["lightgray","#feedde","#fdbe85","#fd8d3c","#e6550d","#a63603"]; |
|
var colorScale = d3.scale.linear().domain([0,5,26]).range(["green","yellow", "red"]) |
|
var sizeScale = d3.scale.linear().domain([50,1000]).range([1,6]) |
|
|
|
d3.select("#map").call(map); |
|
map.mode("globe"); |
|
map.zoom().scale(350); |
|
|
|
// map.centerOn([-88,39],"latlong"); |
|
// map.setScale(2); |
|
|
|
wcLayer = d3.carto.layer.tile(); |
|
wcLayer |
|
.tileType("mapbox") |
|
.path("elijahmeeks.map-azn21pbi") |
|
.label("Base") |
|
.visibility(true) |
|
|
|
regionLayer = d3.carto.layer.geojson(); |
|
regionLayer |
|
.path("ecoregions.json") |
|
.label("Regions") |
|
.cssClass("region") |
|
.renderMode("canvas") |
|
.markerColor(function(d) {return regionColor[d.a]}) |
|
.clickableFeatures(true); |
|
|
|
csvLayer = d3.carto.layer.csv(); |
|
csvLayer |
|
.path("all_sites.csv") |
|
.label("Cities") |
|
.cssClass("pinkcircle") |
|
.renderMode("canvas") |
|
.markerSize(function(d) {return sizeScale(d.pop)}) |
|
.markerColor(function(d) {return colorScale(d.capacity)}) |
|
.x(function(d) {return d.xcoord}) |
|
.y(function(d) {return d.ycoord}); |
|
|
|
map.addCartoLayer(wcLayer).addCartoLayer(regionLayer).addCartoLayer(csvLayer); |
|
map.refresh(); |
|
|
|
} |
|
</script> |
|
<body onload="makeSomeMaps()"> |
|
<div id="map"> |
|
</div> |
|
<footer> |
|
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script> |
|
<script src="http://d3js.org/topojson.v1.min.js" type="text/javascript"> |
|
</script> |
|
<script src="http://d3js.org/d3.geo.projection.v0.min.js" type="text/javascript"> |
|
</script> |
|
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js" type="text/javascript"> |
|
</script> |
|
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js" type="text/javascript"> |
|
</script> |
|
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js" type="text/javascript"> |
|
</script> |
|
<script src="https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js" type="text/javascript"> |
|
</script> |
|
</footer> |
|
</body> |
|
</html> |