Show details of your features on hover
Last active
August 29, 2015 14:21
-
-
Save mapsense-examples/fb1b68f530a5c4ebf4bf to your computer and use it in GitHub Desktop.
Hovercard
This file contains hidden or 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
| <!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; | |
| font-family: sans-serif; | |
| } | |
| .mapFeatures { | |
| fill: rgba(68, 167, 228, 0.0); /*give it fill, so we can interact with it*/ | |
| stroke: rgba(240,240,240, 1); /*white-gray*/ | |
| stroke-width: 1; | |
| } | |
| .hoverFeature { | |
| stroke: rgba(68, 167, 228, 1); /*blue*/ | |
| stroke-width: 3; | |
| } | |
| .popup { | |
| position: absolute; | |
| font-family: sans-serif; | |
| font-size: 11px; | |
| color: #666; | |
| visibility: hidden; | |
| border-radius: 3px; | |
| pointer-events: none; | |
| border: 1px solid #bbb; | |
| padding: 8px; | |
| background-color: rgba(255, 255, 255, .95); | |
| max-height: 500px; | |
| overflow: normal; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| } | |
| table, th, td { | |
| border: 1px solid #ddd; | |
| padding: 7px; | |
| } | |
| .detailKey { | |
| background: #eee; | |
| opacity: .8; | |
| text-transform: uppercase; | |
| font-weight: 600; | |
| } | |
| .detailVal { | |
| background: rgba(255,255,255,0.8); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="myMap"></div> | |
| <script> | |
| var the_key = "key-2d5eacd8b924489c8ed5e8418bd883bc"; | |
| var map = mapsense | |
| .map("#myMap") // init the map | |
| .add(mapsense.basemap().apiKey(the_key).style("blackprint")) | |
| .center({lon: -98, lat: 39}) | |
| .zoom(5) | |
| var url = "https://{S}-api.mapsense.co/universes/mapsense.demographics/{Z}/{X}/{Y}.topojson?api-key="+the_key; | |
| var selection_function = (function() { | |
| var whitelist = []; | |
| whitelist = ['population','female','male','hhi','layer','poverty','unemployment','uninsured','postal_code']; | |
| /* The id of the previously hovered-over feature. */ | |
| var hoverId = null; | |
| return function(s) { | |
| s.attr("class", function(d) { | |
| var classes = ["mapFeatures"], | |
| props = d.properties; | |
| if (props) { | |
| if (props.layer) classes.push(props.layer); | |
| if (props.sub_layer) classes.push(props.sub_layer); | |
| } | |
| if (d.id !== null && d.id == hoverId) { | |
| classes.push("hoverFeature"); | |
| } | |
| return classes.join(' '); | |
| }) | |
| .on("mouseover", function(d) { | |
| if ( d.properties.minz >= 5 ) { | |
| d3.select(this).classed("selected",true); | |
| } | |
| var text = ""; | |
| var value; | |
| text += '<div class="detailCard"><table><tbody>'; | |
| if (whitelist.length > 0) { | |
| for (var i = 0; i < whitelist.length; i++) { | |
| key = whitelist[i]; | |
| if ( d.properties && d.properties[key] ) { | |
| value = d.properties[key]; | |
| value = isFloat(value) ? value.toFixed(4) : value; | |
| text += '<tr><td class="detailKey">' + key + '</td><td class="detailVal">' + value + '</td></tr>'; | |
| } | |
| } | |
| } else { | |
| for (var key in d.properties) { | |
| text += '<tr><td class="detailKey">' + key + '</td><td class="detailVal">' + d.properties[key] + '</td></tr>'; | |
| } | |
| } | |
| tooltip.html(text); | |
| if (d.id != hoverId) { | |
| hoverId = d.id; | |
| layer.selection( selection_function ); | |
| } | |
| return tooltip.style("visibility", "visible"); | |
| }) | |
| .on("mousemove", function(){return tooltip.style("top",(d3.event.pageY-0)+"px").style("left",(d3.event.pageX+20)+"px");}) | |
| .on("mouseout", function(d){ | |
| d3.select(this).classed("selected",false); | |
| return tooltip.style("visibility", "hidden"); | |
| }); | |
| }; | |
| })(); | |
| var layer = mapsense.topoJson() //init a topojson layer | |
| .url(mapsense.url(url).hosts(['a', 'b', 'c', 'd'])) //tell it where to look | |
| .clip(true) | |
| .selection(selection_function); | |
| map.add(layer); | |
| var tooltip = d3.select('body') | |
| .append("div") | |
| .attr("class","popup"); | |
| function isFloat(n){ | |
| var r = Number(n) && n%1!==0; | |
| return r; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment