Skip to content

Instantly share code, notes, and snippets.

@mapsense-examples
Last active August 29, 2015 14:26
Show Gist options
  • Save mapsense-examples/b061f96764b168c1ce51 to your computer and use it in GitHub Desktop.
Save mapsense-examples/b061f96764b168c1ce51 to your computer and use it in GitHub Desktop.
simple query
<!doctype html>
<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 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>
/* Sets the map to be full screen with no margin */
body, html, #myMap{
height: 100%;
width: 100%;
margin: 0;
}
.queried {
fill: orange;
stroke: orange;
fill-opacity: 0.5;
}
</style>
</head>
<body>
<div id="myMap"></div>
<script>
var map = mapsense
.map("#myMap") // Select an element to add the map to
.add(mapsense.basemap().apiKey("key-2d5eacd8b924489c8ed5e8418bd883bc").style("sketch"))
var lyr_url = "https://{S}-api.mapsense.co/universes/mapsense.earth/{Z}/{X}/{Y}.topojson?api-key=key-2d5eacd8b924489c8ed5e8418bd883bc";
// Add params to the url to request only certain features
// For keys and values see https://developer.mapsense.co/tileViewer/?tileset=mapsense.earth
lyr_url += "&where=sub_layer=='school'";
var lyr = mapsense.topoJson()
.url(mapsense.url(lyr_url).hosts(['a', 'b', 'c', 'd']))
.clip(true)
// Pass each feature a selection function
// Here we give them all the same class
// and an id based on their name
.selection(function(s){
s.attr('class','queried');
s.attr('id',function(f){
if (f.properties.name) {
var name = f.properties.name;
// replace all spaces with _
return name.replace(/ /g,'_');
}
});
});
map.add(lyr);
map.add(mapsense.hash()); // for bookmarking
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment