Skip to content

Instantly share code, notes, and snippets.

@ivanfoong

ivanfoong/index.html

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

Revisions

  1. ivanfoong created this gist Aug 7, 2017.
    30 changes: 30 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    <!DOCTYPE html>
    <html >
    <head>
    <meta charset="UTF-8">
    <title>WebGL Version</title>
    <link rel='stylesheet prefetch' href='https://cdn.osmbuildings.org/OSMBuildings-GLMap-2.0.0/GLMap/GLMap.css'>
    <link rel="stylesheet" href="style.css">
    </head>

    <body>
    <div class="control tilt">
    <button class="dec">↙</button>
    <button class="inc">↗</button>
    </div>

    <div class="control rotation">
    <button class="inc">↶</button>
    <button class="dec">↷</button>
    </div>

    <div class="control zoom">
    <button class="dec">-</button>
    <button class="inc">+</button>
    </div>
    <div id="map"></div>
    <script src='https://cdn.osmbuildings.org/OSMBuildings-GLMap-2.0.0/GLMap/GLMap.js'></script>
    <script src='https://cdn.osmbuildings.org/OSMBuildings-GLMap-2.0.0/OSMBuildings/OSMBuildings-GLMap.js'></script>
    <script src="index.js"></script>
    </body>
    </html>
    80 changes: 80 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,80 @@
    var map = new GLMap('map', {
    position: { latitude: 1.290270, longitude: 103.851959 },
    zoom: 16,
    minZoom: 12,
    maxZoom: 20,
    tilt: 50,
    state: false // stores map position/rotation in url
    });

    var osmb = new OSMBuildings({
    baseURL: './OSMBuildings',
    minZoom: 15,
    maxZoom: 22,
    attribution: '© 3D <a href="https://osmbuildings.org/copyright/">OSM Buildings</a>'
    }).addTo(map);

    osmb.addMapTiles(
    'https://{s}.tiles.mapbox.com/v3/osmbuildings.kbpalbpk/{z}/{x}/{y}.png',
    {
    attribution: '© Data <a href="https://openstreetmap.org/copyright/">OpenStreetMap</a> · © Map <a href="https://mapbox.com">MapBox</a>'
    }
    );

    osmb.addGeoJSONTiles('https://{s}.data.osmbuildings.org/0.2/uejws863/tile/{z}/{x}/{y}.json');

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

    map.on('pointermove', function (e) {
    var id = osmb.getTarget(e.x, e.y);
    if (id) {
    document.body.style.cursor = 'pointer';
    osmb.highlight(id, '#f08000');
    } else {
    document.body.style.cursor = 'default';
    osmb.highlight(null);
    }
    });

    var pointerDownOn = null;
    map.on('pointerdown', function (e) {
    var id = osmb.getTarget(e.x, e.y);
    if (id) {
    pointerDownOn = id;
    }
    });
    map.on('pointerup', function (e) {
    var id = osmb.getTarget(e.x, e.y);
    if (id == pointerDownOn) {
    alert(id);
    }
    pointerDownOn = null;
    });

    var controlButtons = document.querySelectorAll('.control button');

    for (var i = 0; i < controlButtons.length; i++) {
    controlButtons[i].addEventListener('click', function(e) {
    var button = this;
    var parentClassList = button.parentNode.classList;
    var direction = button.classList.contains('inc') ? 1 : -1;
    var increment;
    var property;

    if (parentClassList.contains('tilt')) {
    property = 'Tilt';
    increment = direction*10;
    map.setTilt(map.getTilt()+increment);
    }
    if (parentClassList.contains('rotation')) {
    property = 'Rotation';
    increment = direction*10;
    map.setRotation(map.getRotation()+increment);
    }
    if (parentClassList.contains('zoom')) {
    property = 'Zoom';
    increment = direction*1;
    map.setZoom(map.getZoom()+increment);
    }
    });
    }
    51 changes: 51 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@
    html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    }

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

    .control {
    position: absolute;
    left: 0;
    z-index: 1000;
    }

    .control.tilt {
    top: 0;
    }

    .control.rotation {
    top: 45px;
    }

    .control.zoom {
    top: 90px;
    }

    .control.zoom button{
    font-weight: normal;
    }

    .control button {
    width: 30px;
    height: 30px;
    margin: 15px 0 0 15px;
    border: 1px solid #999999;
    background: #ffffff;
    opacity: 0.6;
    border-radius: 5px;
    box-shadow: 0 0 5px #666666;
    font-weight: bold;
    text-align: center;
    }

    .control button:hover {
    opacity: 1;
    cursor: pointer;
    }