D3 Examples - D3 + leaflet + GForm

xxxxxxxxxx
 
<!DOCTYPE HTML>
​
<html>
​
<head>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <!--Leaflet-->
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.min.js"></script>
    <!--Tabletop-->
    <script type="text/javascript" src="tabletop.js"></script>
    <!--Google Maps JavaScript API-->
    <script src="https://maps.googleapis.com/maps/api/js?key=[your_api_key]&language=es&region=co"></script>
</head>
​
<body>
​
    <div id="map"></div>
    <div id="tooltip">
        <p><span id="headline">CLICK TO START</span></p>
        <p><span id="location"></span></p>
        <p><span id="time"></span></p>
    </div>
​
<script type="text/javascript">
​
    //------Leaflet------
    var map = L.map('map').setView([4.711245, -74.069368], 11);
​
    L.tileLayer('https://api.mapbox.com/styles/v1/federicopvs/cinweuph60029b4npbawfzlc7/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZmVkZXJpY29wdnMiLCJhIjoiY2lsZ3JqdXgxMDA0MHdnbTRzYjJkaWplZiJ9.P_8XuqQUogZRfBqwXnXF8g', {
    attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="https://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    minZoom: 11,
    id: 'your.mapbox.project.id',
    accessToken: 'your.mapbox.public.access.token'
    }).addTo(map);
​
​
    //------D3------
    var dataset;
​
    /// Initialize the SVG layer
    map._initPathRoot()    
​
    // We pick up the SVG from the map object
    var svg = d3.select("#map").select("svg"),
    g = svg.append("g");
​
    function drawCircles (d) {
        circle = g.selectAll("circle")
            .data(dataset)
            .enter()
            .append("circle")
            .style("stroke", "black")
            .style("fill", fillColor)
            .style("fill-opacity", 0.7)
            .attr("r", 20)
            .attr("cx", -20)
            .attr("cy", -20);
    }
​
    function fillColor (d) {
        if (d.color=="red") {return "red";}
        else if (d.color=="blue") {return "blue";}
        else if (d.color=="yellow") {return "yellow";}
    }   
​
    function update () {
        circle.attr("transform", function (d) {
            return "translate("+
                map.latLngToLayerPoint(d.LatLng).x +","+ 
                map.latLngToLayerPoint(d.LatLng).y +")";
        })
​
    }
​
    function interactivity () {
        circle.on("mouseover", function () {
            d3.select(this)
            .transition()
            .duration(500)
            .style("fill-opacity", 1)
            .attr("r", 25)
            .ease("elastic")
        })
​
        circle.on("mouseout", function () {
            d3.select(this)
            .transition()
            .duration(500)
            .style("fill-opacity", 0.7)
            .attr("r", 20)
            .ease("elastic")
        })
​
        circle.on("click", function (d) {
            d3.select(this)
            d3.select("#tooltip")
                .select("#headline")
                .text(d.displayName)
            d3.select("#tooltip")
                .select("#location")
                .text(d.formattedAddress)
            d3.select("#tooltip")
                .select("#time")
                .text(d.Timestamp)
        })
​
        d3.select("#headline").on("click", function () {
            update();
            d3.select("#headline").text('Click on a circle to visualize more information.')
        })
    }
​
​
    //------Google Maps JavaScript API------
    var geocoder = new google.maps.Geocoder();
​
    function getCoordinates (d, index, fullAddress) {
    var coordinates;
    var formattedAddress;
    geocoder.geocode({'address': fullAddress}, function (results, status) {
        dataset[index].formattedAddress = results[0].formatted_address;
        coords_obj = results[0].geometry.bounds;
        dataset[index].LatLng = new L.LatLng(coords_obj.H.H,coords_obj.j.H);
        })
    }
​
    // Concatenate location info
    function findLocation () {
    dataset.forEach(function (d, index) {
        d.fullAddress = d.street+" "+d.number+", "+d.city+", Colombia";
        var fullAddress = d.fullAddress;
        getCoordinates(d, index, fullAddress);
    })
    }
​
​
    //------Tabletop------
    window.onload = function() { init() };
    var public_spreadsheet_url = 'https://docs.google.com/spreadsheets/d/1N6FXNLNQyJUhI27-j6uhuVyEgRKm3UOrGsDfY9V_T5w/pubhtml';
​
    function init() {
    Tabletop.init( { key: public_spreadsheet_url,
                     callback: showInfo,
                     simpleSheet: true } )
    }
​
    function showInfo(data, tabletop) {
    console.log(data);
    dataset=data;
​
    findLocation();
    drawCircles();
    map.on("viewreset", update);
    interactivity();
    }
​
</script>
​
</body>
​
</html>
    