D3 Examples - Google Maps + D3 (OSP)

Google Maps + D3 (OSP)

From an example by Mike Bostock implementing D3 and Google Maps together. This map is centered on the McAlester Prison, as a prior visualization was, and allows marker annotation of a Google map.

var map = new google.maps.Map(d3.select("#map").node(), { zoom: 17, center: new google.maps.LatLng(34.954642, -95.783317), disableDefaultUI: true, disableDoubleClickZoom: true, draggable: false, scrollwheel: false, mapTypeId: google.maps.MapTypeId.SATELLITE });

When rendering the map I disabled the default UI, double click zoom, drag, and scrollwheel zoom. We want a simple overlay for presentation purposes.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <style type="text/css">
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            color: blue;
        }
        
        .stations,
        .stations svg {
            position: absolute;
        }
        
        .stations svg {
            width: 60px;
            height: 35px;
            padding-right: 100px;
            font: 12px sans-serif;
        }
        /*Use Oklahoma Watch blue.*/
        
        .stations circle {
            fill: #3587D4;
            stroke: black;
            stroke-width: 1px;
        }
    </style>
</head>
​
<body>
    <div id="map"></div>
    <script type="text/javascript">
        var markers = {
            "1": [-95.784385,
                34.954322
            ],
            "2": [-95.784192,
                34.953574
            ],
            "3": [-95.783022,
                34.953346
            ],
            "4": [-95.783071,
                34.953636
            ],
            "5": [-95.782507,
                34.952919
            ],
            "6": [-95.782518,
                34.953363
            ],
            "7": [-95.782046,
                34.953346
            ],
            "8": [-95.781333,
                34.954269
            ],
            "9": [-95.781987,
                34.954893
            ],
            "10": [-95.782754,
                34.955531
            ],
            "11": [-95.782781,
                34.954405
            ],
            "12": [-95.783173,
                34.954352
            ],
            "13": [-95.783173,
                34.956146
            ],
            "14": [-95.782293,
                34.956155
            ],
            "15": [-95.781483,
                34.956137
            ],
            "16": [-95.784846,
                34.955808
            ],
            "17": [-95.78173,
                34.954075
            ]
        };
​
        //Create the Google Map…
        var map = new google.maps.Map(d3.select("#map").node(), {
            zoom: 17,
            center: new google.maps.LatLng(34.954642, -95.783317),
            //Disable the zoom and scroll control UI.
            disableDefaultUI: true,
            //Disable double click zoom.
            disableDoubleClickZoom: true,
            //Disable draggable map. No hand!
            draggable: false,
            //disable scrollwheel for trackpad and mouse.
            scrollwheel: false,
            //change the type to SATELLITE
            mapTypeId: google.maps.MapTypeId.SATELLITE
        });
​
        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");
​
            overlay.draw = function() {
                var projection = this.getProjection(),
                    padding = 20;
​
                var marker = layer.selectAll("svg")
                    .data(d3.entries(markers))
                    .each(transform) // update existing markers
                    .enter().append("svg:svg")
                    .each(transform)
                    .attr("class", "marker");
​
                // Add a circle.
                marker.append("svg:circle")
                    .attr("r", 11)
                    .attr("cx", padding)
                    .attr("cy", padding);
​
                // Add a label.
                marker.append("svg:text")
                    .attr("x", padding)
                    .attr("y", padding)
                    .attr("dy", ".31em")
                    //Center label in the circle.
                    .attr("text-anchor", "middle")
                    .text(function(d) {
                        return d.key;
                    });
​
                function transform(d) {
                    d = new google.maps.LatLng(d.value[1], d.value[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>
​
</body>
​
</html>
    