Skip to content

Instantly share code, notes, and snippets.

@lmullen lmullen/README.md
Created Dec 16, 2014

Embed
What would you like to do?
Unzoomable d3-carto-map

Using d3-carto-map to create a map which cannot be zoomed or panned.

<!DOCTYPE html>
<html>
<head>
<title>D3-carto-map with Albers USA projection</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://rawgit.com/emeeks/d3-carto-map/master/d3map.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="makeMap();">
<div id="viz"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js"></script>
<script src="visualization.js"></script>
</body>
</html>
#viz {
width: 100%;
height: 100%;
}
.city {
fill: none;
stroke: red;
stroke-width: 1px;
}
.land {
fill: lightgray;
stroke: black;
stroke-width: 1px;
}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
function makeMap() {
var map = d3.carto.map();
d3.select("#viz").call(map);
usLayer = d3.carto.layer.topojson();
usLayer
.path("us.topojson")
.label("USA")
.renderMode("svg")
.specificFeature("counties")
.clickableFeatures(true)
.cssClass("land");
map
.addCartoLayer(usLayer);
map
.setScale(3)
.centerOn([-98.5795,39.8282], "latlong")
.zoomable(false);
d3.selectAll(".d3MapControlsBox").style("display", "none");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.