xxxxxxxxxx<head> <meta name="viewport" content="intial-scale=1.0, user-scalable=no"/> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body {margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } #map {position:absolute;width: 100%;height: 100%; } #mapid {height: 180px;} #legend {font-family: Arial, sans-serif;background: #fff;padding: 10px;margin: 10px; border: 3px solid #000;} #legend h3 {margin-top: 0;} #legend img {vertical-align: middle;} html, body, #map { width: 100%; height: 100%; margin: 0; padding: 0;} .data, .stations svg { position: absolute;} .data svg { width: 60px; height: 20px; padding-right: 100px; font: 10px sans-serif;} .data circle { fill: brown; stroke: black; stroke-width: 1.5px;} </style> <link rel="stylesheet" href="/maps/documentation/javascript/demos/demos.css"> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBkEjkS9E2RAIJodE6gFHseUQx8_Cx2AiE&callback=initMap" async defer></script></head><body> <input type ="checkbox" onclick="USAdots()">United States<br> <input type ="checkbox" onclick="Liberiadots()">Liberia<br> <input type ="checkbox" onclick="Guineadots()">Guinea<br> <button type='button' onclick='uncheckAll()'>Reset</button> <button type='button' onclick='checkAll()'>All</button> <div id="map"></div> <div id="legend"> <h3>Legend</h3> </div> <script> function checkAll() { d3.selectAll('input').property('checked', true);} function uncheckAll() { d3.selectAll('input').property('checked', false);} //Creates Google Maps Background function initMap() { // Create a map object and specify the DOM element for display. var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 38.434084, lng: -78.864970}, scrollwheel: true, zoom: 30, mapTypeId: "satellite", //rotates the map heading: 60,}); d3.json("data.json", function(error, data) { if (error) throw error; var overlay = new google.maps.OverlayView(); // Add the container when the overlay is added to the map. overlay.onAdd = function() { var layer = d3.select(this.getPanes().overlayLayer).append("div") .attr("class", "stations"); // Draw each marker as a separate SVG element. // We could use a single SVG, but what size would it have? 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"); // Add a circle. marker.append("circle") .attr("r", 4.5) .attr("cx", padding) .attr("cy", padding); // Add a label. marker.append("text") .attr("x", padding + 7) .attr("y", padding) .attr("dy", ".31em") .text(function(d) { return d.key; }); function transform(d) { d = new google.maps.LatLng(d.Latitude, d.Longitude); 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);}); //Makes a variable for each icon annd has specified info (name, url) var icons = { parking: { name: 'Trees', icon:'https://www.iconexperience.com/_img/g_collection_png/standard/32x32/tree.png' }, library: { name: 'flower', icon: 'https://www.free-emoticons.com/files/kids-emoticons/10519.png'}, info: { name: 'bush', icon: 'https://vignette3.wikia.nocookie.net/tinymonsters/images/c/c2/Quest_icon_small_bush_debris%402x.png/revision/latest?cb=20120924140142'} }; //the markers access these features for information. // var features = [ // {position: new google.maps.LatLng(38.434084, -78.864970), // type: 'info'}, // {position: new google.maps.LatLng(38.436084, -78.864970), // type: 'parking'}, // {position: new google.maps.LatLng(38.437084, -78.864970), // type: 'library'}]; // Create markers for each of the featurs above. It loops through each feature and and creates a marker with the specified position, and type, which is defined above. //features.forEach(function(feature) { // var marker = new google.maps.Marker({ // position: feature.position, // icon: icons[feature.type].icon, // map: map}); // }); //For the legend. It accesses the legend div (at top) and appends things to it. Maybe this is where checkboxes should go? var legend = document.getElementById('legend'); for (var key in icons) { var type = icons[key]; var name = type.name; var icon = type.icon; var div = document.createElement('div'); div.innerHTML = '<img src="' + icon + '"> ' + name; legend.appendChild(div);} map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend); //var svg = d3.select("body").append("svg")// .attr("width", 1000)// .attr("height", 1000); d3.json("data.json", function(err, data) { var plots = d3.select("body").selectAll("plots") .data(data.features) .enter() .each(function(d) { var Group = d3.select("mysvg").selectAll("g") .data(data.features) .enter() .append("svg:g") Group.append("rect") .attr("x", 50) .attr("y", 50) .attr("width", 50) .attr("height", 50) .attr("fill", "black") console.log(Group)// console.log(svg) var rectangle = new google.maps.Rectangle({ strokeColor: 'black', strokeOpacity: 0.8, strokeWeight: 2, fillColor: function () { if (d.Treatment == "Compost") {return "brown";} else if (d.Treatment == "Natural") {return "green"}}, fillOpacity: 0.3, map: map, bounds: { north: +d.Latitude, south: +d.Latitude - 0.00012, east: +d.Longitude, west: +d.Longitude - 0.00012}})})}) } </script> </body> https://d3js.org/d3.v4.min.js