forked from emeeks's block: Stamen Tiles - d3.carto.map
Created
September 8, 2015 08:43
-
-
Save renecnielsen/c072f8145713cb3f0bde to your computer and use it in GitHub Desktop.
Stamen Tiles - d3.carto.map
Various d3.carto.map modes with Stamen tiles from http://maps.stamen.com/#toner/12/37.7706/-122.3782.
Click the button to cycle through map modes to see the difference between Transform, Projection and Globe modes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
path,circle,rect,polygon,ellipse,line { | |
vector-effect: non-scaling-stroke; | |
} | |
svg, canvas { | |
top: 0; | |
} | |
#d3MapZoomBox { | |
position: absolute; | |
z-index: 10; | |
height: 100px; | |
width: 25px; | |
top: 10px; | |
right: 50px; | |
} | |
#d3MapZoomBox > button { | |
height:25px; | |
width: 25px; | |
line-height: 25px; | |
} | |
.d3MapControlsBox > button { | |
font-size:22px; | |
font-weight:900; | |
border: none; | |
height:25px; | |
width:25px; | |
background: rgba(35,31,32,.85); | |
color: white; | |
padding: 0; | |
cursor: pointer; | |
} | |
.d3MapControlsBox > button:hover { | |
background: black; | |
} | |
#d3MapPanBox { | |
position: absolute; | |
z-index: 10; | |
height: 100px; | |
width: 25px; | |
top: 60px; | |
right: 50px; | |
} | |
#d3MapPanBox > button { | |
height:25px; | |
width: 25px; | |
line-height: 25px; | |
} | |
#d3MapPanBox > button#left { | |
position: absolute; | |
left: -25px; | |
top: 10px; | |
} | |
#d3MapPanBox > button#right { | |
position: absolute; | |
right: -25px; | |
top: 10px; | |
} | |
#d3MapLayerBox { | |
position: relative; | |
z-index: 10; | |
height: 100px; | |
width: 120px; | |
top: 10px; | |
left: 10px; | |
overflow: auto; | |
color: white; | |
background: rgba(35,31,32,.85); | |
} | |
#d3MapLayerBox > div { | |
margin: 5px; | |
border: none; | |
} | |
#d3MapLayerBox ul { | |
list-style: none; | |
padding: 0; | |
margin: 0; | |
cursor: pointer; | |
} | |
#d3MapLayerBox li { | |
list-style: none; | |
padding: 0; | |
} | |
#d3MapLayerBox li:hover { | |
font-weight:700; | |
} | |
#d3MapLayerBox li input { | |
cursor: pointer; | |
} | |
div.d3MapModal { | |
position: absolute; | |
z-index: 11; | |
background: rgba(35,31,32,.90); | |
top: 50px; | |
left: 50px; | |
color: white; | |
max-width: 400px; | |
} | |
div.d3MapModalContent { | |
width:100%; | |
height: 100%; | |
overflow: auto; | |
} | |
div.d3MapModalContent > p { | |
padding: 0px 20px; | |
margin: 5px 0; | |
} | |
div.d3MapModalContent > h1 { | |
padding: 0px 20px; | |
font-size: 20px; | |
} | |
div.d3MapModalArrow { | |
content: ""; | |
width: 0; | |
height: 0; | |
border-left: 20px solid transparent; | |
border-right: 20px solid transparent; | |
border-top: 20px solid rgba(35,31,32,.90); | |
position: absolute; | |
bottom: -20px; | |
left: 33px; | |
} | |
#d3MapSVG { | |
} | |
rect.minimap-extent { | |
fill: rgba(200,255,255,0.35); | |
stroke: black; | |
stroke-width: 2px; | |
stroke-dasharray: 5 5; | |
} | |
circle.newpoints { | |
fill: black; | |
stroke: red; | |
stroke-width: 2px; | |
} | |
path.newfeatures { | |
fill: steelblue; | |
fill-opacity: .5; | |
stroke: pink; | |
stroke-width: 2px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.countrylabel { | |
font-size: 12px; | |
color: red; | |
text-anchor: middle; | |
pointer-events: none; | |
font-weight: 900; | |
} | |
.wards { | |
fill: gray; | |
stroke: gray; | |
stroke-width: 1px; | |
} | |
.countryborders { | |
fill: rgba(0,0,0,0); | |
stroke-width: 1px; | |
stroke: gray; | |
cursor: pointer; | |
} | |
.invisible { | |
fill: rgba(0,0,0,0); | |
stroke-width: 0; | |
stroke: black; | |
cursor: pointer; | |
} | |
.countries { | |
fill: none; | |
stroke-width: 1px; | |
stroke: black; | |
opacity: 1; | |
} | |
.halffilledcountries { | |
fill: rgba(224,224,209,0.5); | |
stroke-width: 1px; | |
stroke: black; | |
opacity: 1; | |
} | |
.filledcountries { | |
fill: #E0E0D1; | |
stroke-width: 1px; | |
stroke: black; | |
opacity: 1; | |
} | |
.francelike { | |
fill: steelblue; | |
stroke-width: 2px; | |
stroke: lightgray; | |
} | |
.roads { | |
stroke: brown; | |
stroke-width: 1px; | |
fill: none; | |
} | |
.rivers { | |
stroke: blue; | |
stroke-width: 2px; | |
fill: none; | |
opacity: 1; | |
} | |
.thickborders { | |
stroke: brown; | |
stroke-width: 2px; | |
fill: none; | |
} | |
circle { | |
fill: black; | |
stroke: red; | |
} | |
circle.pinkcircle { | |
fill: pink; | |
stroke: black; | |
stroke-width: 1; | |
opacity: 1 | |
} | |
circle.greencircle { | |
fill: green; | |
stroke: red; | |
opacity: 1; | |
stroke-width: 3; | |
} | |
#infoBox { | |
position: fixed; | |
z-index: 1; | |
bottom: 150px; | |
right: 150px; | |
background: white; | |
border: 1px gray dashed; | |
padding:20px; | |
width: 200px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<title>d3.carto.map - globe mode</title> | |
<meta charset="utf-8" /> | |
<link type="text/css" rel="stylesheet" href="d3map.css" /> | |
<link type="text/css" rel="stylesheet" href="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; | |
} | |
</style> | |
<script> | |
function makeSomeMaps() { | |
map = d3.carto.map(); | |
d3.select("#map").call(map); | |
map.mode("globe"); | |
map.refresh(); | |
wcLayer = d3.carto.layer.tile(); | |
wcLayer | |
.tileType("stamen") | |
.path("watercolor") | |
.label("Watercolor") | |
.visibility(true) | |
tonerLayer = d3.carto.layer.tile(); | |
tonerLayer | |
.tileType("stamen") | |
.path("toner") | |
.visibility(false) | |
.label("Toner") | |
geojsonLayer = d3.carto.layer.geojson(); | |
geojsonLayer | |
.path("http://bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/world.geojson") | |
.label("SVG Borders") | |
.cssClass("thickborders") | |
.renderMode("svg") | |
.on("load", selectFeatures); | |
csvLayer = d3.carto.layer.csv(); | |
csvLayer | |
.path("http://bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/sample_points.csv") | |
.label("CSV Points") | |
.cssClass("pinkcircle") | |
.renderMode("svg") | |
.markerSize(2) | |
.x("x") | |
.y("y"); | |
map.addCartoLayer(wcLayer).addCartoLayer(tonerLayer).addCartoLayer(geojsonLayer).addCartoLayer(csvLayer); | |
function selectFeatures() { | |
fNamedCountries = geojsonLayer.features().filter(function (d) {return d.properties.name.length < 6}); | |
featureLayer = d3.carto.layer.featureArray(); | |
featureLayer | |
.features(fNamedCountries) | |
.label("featureArray") | |
.cssClass("halffilledcountries") | |
.renderMode("svg"); | |
map.addCartoLayer(featureLayer); | |
} | |
d3.select("#map").append("button").attr("class", "reproject").html("Transform").on("click", reproject); | |
function reproject() { | |
if (d3.select("button.reproject").html() == "Transform") { | |
d3.select("button.reproject").html("Projection") | |
map.mode("transform"); | |
map.refresh(); | |
} | |
else if (d3.select("button.reproject").html() == "Globe") { | |
d3.select("button.reproject").html("Transform") | |
map.mode("globe"); | |
map.refresh(); | |
} | |
else { | |
d3.select("button.reproject").html("Globe") | |
map.mode("projection"); | |
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment