##Rule of thumb ###Overview first, zoom and filter, details on demand
####Problem:
####Solution:
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> | |
| <style> | |
| html, body, #map { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .stations, .stations svg { | |
| position: absolute; | |
| } | |
| .stations svg { | |
| width: 400px; | |
| height: 50px; | |
| padding: 10px 5px 5px 5px; | |
| font: 12px sans-serif; | |
| } | |
| .textbox { | |
| padding: 10px 5px 5px 5px; | |
| font: 12px sans-serif; | |
| background-color:lightblue; | |
| top:true; | |
| } | |
| .stations circle { | |
| fill: brown; | |
| stroke: black; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| <div id="map"></div> | |
| <script src="//maps.google.com/maps/api/js?sensor=true"></script> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| // Create the Google Map… | |
| var map = new google.maps.Map(d3.select("#map").node(), { | |
| zoom: 13, | |
| center: new google.maps.LatLng(36.876354, -76.251697), | |
| mapTypeId: google.maps.MapTypeId.TERRAIN | |
| }); | |
| d3.json("stations.json", function(error, data) { | |
| if (error) throw error; | |
| var overlay = new google.maps.OverlayView(); | |
| overlay.onAdd = function() { | |
| var layer = d3.select(this.getPanes().overlayMouseTarget).append("div") | |
| .attr("class", "stations"); | |
| overlay.draw = function() { | |
| var projection = this.getProjection(), | |
| padding = 10; | |
| var marker = layer.selectAll("svg") | |
| .data(d3.entries(data)) | |
| .each(transform) // update existing markers | |
| .enter().append("svg") | |
| .each(transform) | |
| .attr("class", "marker"); | |
| marker.append("foreignObject") | |
| .attr("width", 600) | |
| .attr("height", 60) | |
| .attr("x", 20) | |
| .attr("id",function(d, i){return "t" + i;}) | |
| .attr("visibility","hidden") | |
| .attr("class","textbox") | |
| .append("xhtml:body") | |
| .html(function(d){ return "<b>Starbucks:</b> <br>"+d.value.properties.Description; }); | |
| // Add a circle. | |
| marker.append("circle") | |
| .attr("r", 10) | |
| .attr("cx", padding) | |
| .attr("cy", padding) | |
| .on("mouseover",function(d,i){ | |
| d3.select("#t"+i).transition() | |
| .duration(100) | |
| .attr("visibility","visible") | |
| }) | |
| .on("mouseout",function(d,i){ | |
| d3.select("#t"+i).transition() | |
| .duration(100) | |
| .attr("visibility","hidden") | |
| ; | |
| }); | |
| function transform(d, i) { | |
| d = new google.maps.LatLng(d.value.geometry.coordinates[1], d.value.geometry.coordinates[0]); | |
| d = projection.fromLatLngToDivPixel(d); | |
| return d3.select(this) | |
| .style("left", (d.x - padding) + "px") | |
| .style("top", (d.y - padding) + "px"); | |
| } | |
| }; | |
| }; | |
| // Bind our overlay to the map… | |
| overlay.setMap(map); | |
| }); | |
| </script> |
| [{"type":"Feature","properties":{"Name":"Starbucks","Description":"Address: 210 E Main St #1, Norfolk, VA 23510<br>Phone: 757-625-0600"},"geometry":{"type":"Point","coordinates":[-76.2912402,36.8460577,0]}},{"type":"Feature","properties":{"Name":"Starbucks","Description":"Address: 520 W 21st St, Norfolk, VA 23517<br>Phone: 757-622-3018"},"geometry":{"type":"Point","coordinates":[-76.2925184,36.8699991,0]}},{"type":"Feature","properties":{"Name":"Starbucks","Description":"Address: Webb University Center, 1200 W 49th St, Norfolk, VA 23529<br>Phone: 757-683-3218"},"geometry":{"type":"Point","coordinates":[-76.30633260000002,36.8869978,0]}},{"type":"Feature","properties":{"Name":"Starbucks","Description":"Address: 1318 Colley Avenue, Norfolk, VA 23507<br>Phone: 757-640-8513"},"geometry":{"type":"Point","coordinates":[-76.29820130000002,36.8670478,0]}},{"type":"Feature","properties":{"Name":"Starbucks","Description":"Address: 361 Effingham St, Portsmouth, VA 23704<br>Phone: 757-391-0322"},"geometry":{"type":"Point","coordinates":[-76.30660949999998,36.8380556,0]}},{"type":"Feature","properties":{"Name":"Starbucks","Description":"Address: 1119 N Military Hwy, Norfolk, VA 23502<br>Phone: 757-455-6504"},"geometry":{"type":"Point","coordinates":[-76.21071819999997,36.8608264,0]}},{"type":"Feature","properties":{"Name":"Starbucks","Description":"Address: 230 Little Creek Road, Norfolk, VA 23505<br>Phone: 757-587-8741"},"geometry":{"type":"Point","coordinates":[-76.2699867,36.9165594,0]}},{"type":"Feature","properties":{"Name":"Starbucks","Description":"Address: 4000 Victory Blvd, Portsmouth, VA 23701<br>Phone: 757-488-3916"},"geometry":{"type":"Point","coordinates":[-76.3537303,36.8113903,0]}},{"type":"Feature","properties":{"Name":"Starbucks","Description":"Address: 2200 Norview Ave, Norfolk, VA 23518<br>Phone: 757-449-7427"},"geometry":{"type":"Point","coordinates":[-76.2033063,36.8974442,0]}},{"type":"Feature","properties":{"Name":"Starbucks","Description":"Address: 5824 Northampton Blvd #101, Virginia Beach, VA 23455<br>Phone: 757-460-1862"},"geometry":{"type":"Point","coordinates":[-76.18721570000002,36.8817711,0]}}] |