Skip to content

Instantly share code, notes, and snippets.

@maptastik

maptastik/index.html

Last active August 29, 2015 14:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maptastik/54b1164f4dc311c6406d to your computer and use it in GitHub Desktop.
Save maptastik/54b1164f4dc311c6406d to your computer and use it in GitHub Desktop.
Download ZIP
My first Mapsense
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/topojson.v1.min.js" charset="utf-8"></script>
<script src="https://developer.mapsense.co/mapsense.js" charset="utf-8"></script>
<link type="text/css" href="https://developer.mapsense.co/mapsense.css" rel="stylesheet"/>
<style>
html, body, #myMap{
height: 100%;
width: 100%;
margin: 0; padding: 0;
}
.map {
background-color: white;
width: 100%;
height: 100%;
}
.mapFeatures {
vector-effect: non-scaling-stroke;
stroke: grey;
fill : none;
}
.tile-background {
fill: #158F00;
}
.blockgroup{
fill: rgba(57,215,29,0.5);
stroke: rgba(23,44,58,1);
stroke-width: 5px;
}
.blockgroup:hover{
fill: rgba(23,44,58,1);
cursor: pointer;
}
</style>
</head>
<body>
<div id="myMap"></div>
<script>
var sf = [
{lon: -84.739998, lat: 38.113182},
{lon: -84.401825, lat: 38.49279}
];
var map = mapsense.map("#myMap"); //tell it where to go
map.add(
mapsense.basemap()
.apiKey("key-b4bc5affdce44f7d86e3efdf72f5d0d4")
.style("tron")
)
.extent(sf);
d3.json("popACS13.geojson", function(data){
map.add(mapsense.geoJson()
.features(data.features)
.selection(function(d){
d.attr("class","blockgroup")
})
);
});
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
popACS13.geojson
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment