D3 Examples - Skycoin Nodes 2018/06/10

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Skycoin Nodes - 2018/06/10</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
​
    <style>
        .mapboxgl-popup {
            max-width: 500px;
            font: 10px/14px 'Helvetica Neue', Arial, Helvetica, sans-serif;
        }
    </style>
    <div id='map'></div>
    <script>
​
        //based on: https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/
​
        // get bounding box: https://bboxfinder.com
        let mapBounds = [-167.695313,-56.365250,191.250000,76.016094];//Southwest corner, Northeast corner
​
        mapboxgl.accessToken = 'pk.eyJ1Ijoid2lsbGNhcnRlciIsImEiOiJjamV4b2g3Z2ExOGF4MzFwN3R1dHJ3d2J4In0.Ti-hnuBH8W4bHn7k6GCpGw';
​
        // let basemap = 'basic';
        // let basemap = 'streets';
        // let basemap = 'bright';
        // let basemap = 'light';
        let basemap = 'dark';
        // let basemap = 'satellite';
​
        // https://www.mapbox.com/api-documentation/#styles
        let map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/' + basemap + '-v9',
            center: [(mapBounds[0] + mapBounds[2]) / 2, (mapBounds[1] + mapBounds[3]) / 2],
            zoom: 1
        });
​
        map.on('load', function () {
            
            map.addSource('data', {
                type: 'geojson',
                data: 'https://rawgit.com/FergusDevelopmentLLC/646a839ec3b9e7a2ffa1c7bd7b3c2f34/raw/37289e45196441db1d67a953112382cb7daaad82/skycoin_20180601.geojson'
            });
​
            map.addLayer({
                id: 'beacons',
                source: 'data',
                type: 'circle',
                paint: {
                    'circle-radius': 4,
                    'circle-color': '#0072ff'
                }
            });
​
            handlePopup();
        });
​
        handlePopup = () => {
​
            // Create a popup, but don't add it to the map yet.
            let popup = new mapboxgl.Popup({
                closeButton: false,
                closeOnClick: false
            });
​
            map.on('mouseenter', 'beacons', function (e) {
​
                // Change the cursor style as a UI indicator.
                map.getCanvas().style.cursor = 'pointer';
​
                let coordinates = [e.features[0].properties.lng, e.features[0].properties.lat];
​
                // Ensure that if the map is zoomed out such that multiple copies of the feature are visible, the popup appears over the copy being pointed to.
                while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                    coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
                }
​
                let tooltip_msg = '<strong>Details</strong></br>';
                tooltip_msg += `Name: ${e.features[0].properties.name}<br/>`;
                tooltip_msg += `Description: ${e.features[0].properties.desc}<br/>`;
                tooltip_msg += `Lat: ${e.features[0].properties.lat}<br/>`;
                tooltip_msg += `Lng: ${e.features[0].properties.lng}<br/>`;
​
                // Populate the popup and set its coordinates based on the feature found.
                popup.setLngLat(coordinates)
                    .setHTML(tooltip_msg)
                    .addTo(map);
            });
​
            map.on('mouseleave', 'beacons', function () {
                map.getCanvas().style.cursor = '';
                popup.remove();
            });
        }
​
    </script>
</body>
</html>
<!-- source -->
<!-- https://www.google.com/maps/d/viewer?ll=-20.011258269165346%2C-62.41891005000008&z=2&mid=17KsSrD6lE_1BPeinRgBmKxnZPPFmCyW3 -->
    