Created
April 30, 2015 19:30
-
-
Save jhnklly/c93c46622accd68e80e6 to your computer and use it in GitHub Desktop.
mapsense.js popup first draft
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> | |
<head> | |
<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 type="text/javascript" src="http://developer.mapsense.co/mapsense.js" charset="utf-8"></script> | |
<style> | |
body { | |
background-color: #ddd; | |
} | |
.map { | |
background-color: transparent; | |
width: 100%; | |
height: 100%; | |
} | |
.mapFeatures { | |
vector-effect: non-scaling-stroke; | |
stroke: grey; | |
fill : none; | |
} | |
.mapFeaturesBuffer { | |
stroke-width: 20px; | |
stroke: none; | |
fill: none; | |
} | |
.tile-background { | |
fill: none; | |
} | |
.popup { | |
position: relative; | |
text-align: center; | |
/*width: 300px; | |
height: 50px;*/ | |
padding: 10px; | |
font: 16px sans-serif; | |
border: solid 2px #555; | |
border-radius: 3px; | |
pointer-events: none; | |
background-color: rgba(255,255,255,0.75); | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
//create your containing svg | |
var svg = d3.select('body').append('svg') | |
var map = mapsense.map() // init the map | |
.container(svg.node()) //tell it where to go | |
.add(mapsense.interact()) //add interaction | |
.center({lon: -122.4, lat: 37.75}) // SF bay area | |
//.center({lon: -96, lat: 37.7}) // USA | |
.zoom(11); //set a zoom | |
//tile url | |
var url = "http://{S}-tiles.mapsense.co/mapsense.earth/tile/{Z}/{X}/{Y}.topojson"; | |
//var url = "https://{S}-tiles.mapsense.co/mapsense.demographics/tile/{Z}/{X}/{Y}.topojson?key=key-a6e5eb71915e464798b60b30e1e52524&where=layer=='state'"; | |
var layer = mapsense.topoJson() //init a topojson layer | |
.url(mapsense.url(url).hosts(['a', 'b', 'c', 'd'])) //tell it where to look | |
.selection( | |
function(element){ | |
element.attr("class", function(feature){ | |
var classes = ['mapFeatures']; | |
if (feature.properties){ | |
props = [feature.properties]; | |
if (feature.properties.layer) | |
classes.push(feature.properties.layer); | |
layer_arr = [feature.properties.layer]; | |
if (feature.properties.sub_layer) | |
classes.push(feature.properties.sub_layer) | |
} | |
return classes.join(' '); | |
}); | |
element.on("mousemove", function(){ | |
//d3.select(this).attr("style", "stroke: #0f0") ; | |
}); | |
element.on("mouseover", function(d){ | |
d3.select(this).attr("style", "stroke: #0f0; stroke-width: 10px;") ; | |
var text = d.properties.name || d.properties.layer || 'empty'; | |
tooltip.text(text); | |
return tooltip.style("visibility", "visible"); | |
}) | |
.on("mousemove", function(){return tooltip.style("top",(d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");}) | |
.on("mouseout", function(d){ | |
d3.select(this).attr("style", "stroke: #000; stroke-width: 1px;") ; | |
return tooltip.style("visibility", "hidden"); | |
}); | |
} | |
); | |
map.add(layer); //add the topojson layer to your map | |
var tooltip = d3.select('body') | |
.append("div") | |
.attr("class","popup") | |
.style("position", "absolute") | |
.style("visibility", "hidden"); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment