|
<html xmlns="http://www.w3.org/1999/xhtml"> |
|
<head> |
|
<title>Changing Markers - 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; |
|
} |
|
|
|
.reproject { |
|
position: absolute; |
|
z-index: 99; |
|
left: 50px; |
|
top: 250px; |
|
} |
|
|
|
|
|
.metro { |
|
fill: rgba(255,0,255,.5); |
|
stroke: darkred; |
|
stroke-width: 1 |
|
} |
|
|
|
.markerButton { |
|
position: fixed; |
|
top: 20px; |
|
cursor: pointer; |
|
z-index: 99; |
|
} |
|
|
|
</style> |
|
<script> |
|
|
|
function pngMarker() { |
|
d3.selectAll("g.marker").selectAll("*").remove(); |
|
d3.selectAll("g.marker").append("image").attr("xlink:href", "icon_2330.png") |
|
.attr("height", 20).attr("width", 20) |
|
.attr("x", -10).attr("y", -10) |
|
} |
|
|
|
function rectangleMarker() { |
|
d3.selectAll("g.marker").selectAll("*").remove(); |
|
d3.selectAll("g.marker").append("rect").attr("height", 10).attr("width", 10) |
|
.attr("x", -5) |
|
.attr("y", -5) |
|
.style("fill", "yellow") |
|
.style("stroke", "black") |
|
.style("stroke-width", "1px") |
|
} |
|
|
|
function circleMarker() { |
|
var sizeScale = d3.scale.linear().domain([0,100,2000]).range([2,10,20]).clamp(true); |
|
var randomDatapoint = "r" + Math.ceil(Math.random() * 7); |
|
d3.selectAll("g.marker").selectAll("*").remove(); |
|
d3.selectAll("g.marker").append("circle") |
|
.attr("class", "metro") |
|
.attr("r", function(d) {return sizeScale(d[randomDatapoint])}) |
|
} |
|
|
|
function svgMarker() { |
|
d3.selectAll("g.marker").selectAll("*").remove(); |
|
d3.html("icon_2330.svg", loadSVG); |
|
function loadSVG(svgData) { |
|
d3.select(svgData).selectAll("path").each(function(d) { |
|
var that = this; |
|
d3.selectAll("g.marker").each( |
|
function() { |
|
d3.select(this).node().appendChild(that.cloneNode(true)); |
|
} |
|
) |
|
}) |
|
d3.selectAll("g.marker").select("path"); |
|
} |
|
} |
|
|
|
function pieMarker() { |
|
d3.selectAll("g.marker").selectAll("*").remove(); |
|
var pieChart = d3.layout.pie(); |
|
var newArc = d3.svg.arc().outerRadius(10); |
|
var set3 = ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494"]; |
|
|
|
pieChart.value(function(d) {return d}); |
|
d3.selectAll("g.marker").each(function(d) { |
|
var pieData = d3.values(d).splice(3,7); |
|
var pieChart = d3.layout.pie(); |
|
|
|
d3.select(this).append("circle").attr("r",11).style("fill", "black").style("stroke","black") |
|
|
|
d3.select(this).selectAll("path").data(pieChart(pieData)).enter().append("path").attr("d", function(d) {return newArc(d)}) |
|
.style("fill", function(d,i) {return set3[i]}) |
|
.style("stroke", function(d,i) {return set3[i]}) |
|
.style("stroke-width", "1px") |
|
}) |
|
} |
|
|
|
function makeSomeMaps() { |
|
map = d3.carto.map(); |
|
|
|
d3.select("#map").call(map); |
|
map.centerOn([-99,39],"latlong"); |
|
map.setScale(4); |
|
|
|
map.refresh(); |
|
|
|
wcLayer = d3.carto.layer.tile(); |
|
wcLayer |
|
.tileType("stamen") |
|
.path("watercolor") |
|
.label("Watercolor") |
|
.visibility(true) |
|
|
|
cityLayer = d3.carto.layer.csv(); |
|
cityLayer |
|
.path("cities.csv") |
|
.label("Metro Areas") |
|
.cssClass("metro") |
|
.renderMode("svg") |
|
.x("x") |
|
.y("y") |
|
.clickableFeatures(true) |
|
.on("load", function(){console.log(cityLayer.dataset())}); |
|
|
|
map.addCartoLayer(wcLayer).addCartoLayer(cityLayer); |
|
|
|
} |
|
</script> |
|
<body onload="makeSomeMaps()"> |
|
<div id="map"> |
|
<button style="left: 140px;" class="markerButton" onclick="rectangleMarker();">Rectangle Marker</button> |
|
<button style="left: 250px;" class="markerButton" onclick="pngMarker();">Image Marker</button> |
|
<button style="left: 340px;" class="markerButton" onclick="circleMarker();">Circle Marker</button> |
|
<button style="left: 428px;" class="markerButton" onclick="svgMarker();">SVG Marker</button> |
|
<button style="top:50px; left: 140px;" class="markerButton" onclick="pieMarker();">Pie Marker</button> |
|
</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> |
