Skip to content

Instantly share code, notes, and snippets.

@ivanfoong

ivanfoong/index.html

Created August 7, 2017 02:53
Show Gist options
  • Save ivanfoong/25a93cd4036f105a25770f398d35f00e to your computer and use it in GitHub Desktop.
Save ivanfoong/25a93cd4036f105a25770f398d35f00e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ivanfoong created this gist Aug 7, 2017.
    17 changes: 17 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    <!DOCTYPE html>
    <html >
    <head>
    <meta charset="UTF-8">
    <title>Interaction</title>
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.css'>
    <link rel="stylesheet" href="style.css">
    </head>

    <body>
    <div id="map"></div>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.js'></script>
    <script src='https://cdn.osmbuildings.org/OSMBuildings-Leaflet.js'></script>
    <script src='https://cdn.osmbuildings.org/Leaflet.draw/0.2.0/leaflet.draw.js'></script>
    <script src="index.js"></script>
    </body>
    </html>
    57 changes: 57 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,57 @@
    var map = new L.Map('map');
    map.setView([1.290270, 103.851959], 16, false);
    new L.TileLayer('http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png', {
    attribution: 'Map tiles &copy; <a href="https://mapbox.com">MapBox</a>',
    maxZoom: 18,
    maxNativeZoom: 20
    }).addTo(map);

    var osmb = new OSMBuildings(map).load();

    //********************************************************

    function ajax(url, callback) {
    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
    if (req.readyState !== 4) {
    return;
    }
    if (!req.status || req.status < 200 || req.status > 299) {
    return;
    }

    callback(JSON.parse(req.responseText));
    };
    req.open('GET', url);
    req.send(null);
    }

    function formatJSON(json) {
    var html = '';
    for (var key in json) {
    html += '<em>'+ key +'</em> '+ json[key] +'<br>';
    }
    return html;
    }

    var popup;
    osmb.click(function(e) {
    popup = L.popup({ maxHeight:200, autoPanPaddingTopLeft:[50,50] })
    .setLatLng(L.latLng(e.lat, e.lon))
    .setContent('<b>OSM ID '+ e.feature +'</b>')
    .openOn(map);
    map.flyTo([e.lat, e.lon], 18, {animate: true});

    var url = 'https://data.osmbuildings.org/0.2/uejws863/feature/'+ e.feature +'.json';
    ajax(url, function(json) {
    alert(json);
    var content = '<b>OSM ID '+ e.feature +'</b>';
    for (var i = 0; i < json.features.length; i++) {
    content += '<br><em>OSM Part ID</em> '+ json.features[i].id;
    content += '<br>'+ formatJSON(json.features[i].properties.tags);
    }
    popup.setContent(content).openOn(map);
    });
    });

    osmb.style({ wallColor: 'rgba(0,0,255,170)', roofColor: 'rgba(0,0,255,170)', shadows: 'rgb(0,0,0)' });
    12 changes: 12 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    html, body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    }

    #map {
    width: 100%;
    height: 100%;
    }