Created
August 7, 2017 02:56
-
-
Save ivanfoong/3b8edce7a92bd2d4aa6e760ac746b24c to your computer and use it in GitHub Desktop.
OSM WebGL 3D Building
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| } | |
| }); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment