Skip to content

Instantly share code, notes, and snippets.

@emeeks
Last active November 1, 2016 11:22
Show Gist options
  • Save emeeks/abcc82cc61c52fc47b19 to your computer and use it in GitHub Desktop.
Save emeeks/abcc82cc61c52fc47b19 to your computer and use it in GitHub Desktop.
Stamen Tiles - d3.carto.map
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;
}
.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;
}
<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