3D Map Example

Developer
Moklick
Size
2,980 Kb
Views
26,312
  1. 3D Map Example Previews
  2. 3D Map Example HTML Codes
  3. 3D Map Example CSS Codes
  4. 3D Map Example JS Codes

How do I make an 3d map example?

Interactive example for our blog post about OSMBuildings & Animations http://blog.webkid.io/3d-maps-with-osmbuildings/. What is a 3d map example? How do you make a 3d map example? This script and codes were developed by Moklick on 20 November 2022, Sunday.

3D Map Example Previews
IQ Test

3D Map Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Map Example</title> <link rel='stylesheet prefetch' href='https://osmbuildings.org/index.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="map"></div>
<div class="button-wrapper"> <div class="label">Fly to:</div> <button data-point="a">Point A</button> <button data-point="b">Point B</button>
</div> <script src='https://osmbuildings.org/script.js'></script>
<script src='https://cdn.rawgit.com/tweenjs/tween.js/master/src/Tween.js'></script> <script src="js/index.js"></script>
</body>
</html>

3D Map Example - Script Codes CSS Codes

* {margin: 0; padding: 0;}
html, body {height: 100%;}
#map {width: 100%; height: 100%;}
.button-wrapper{ position: absolute; top:1em; left:1em; font-family: Arial, sans-serif; font-size:12px;
}
.button-wrapper .label{ font-weight: bold; color:#555; margin-bottom:.5em;
}
.button-wrapper button{ padding: .7em 1em; background: white; font-weight:bold; border:none; box-shadow: 0 2px 3px rgba(0,0,0,.1); border-radius:2px; z-index:99; cursor: pointer; background:#dd5050; color:white;
}
.button-wrapper button:hover{ box-shadow: 0 3px 4px rgba(0,0,0,.3);
}
.button-wrapper button:active{ box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.button-wrapper button:focus{ outline:none
}

3D Map Example - Script Codes JS Codes

var pointData = { a: function(){ return {latitude: 52.5155, longitude: 13.3499, rotation: 0, zoom: 17, tilt: 25}; }, b: function(){ return {latitude: 52.516, longitude: 13.349, rotation: -30, zoom: 17.2, tilt: 50}; }
};
// map creation
var initMapConfig = pointData.a();
var map = new GLMap('map', { position: { latitude: initMapConfig.latitude, longitude: initMapConfig.longitude}, zoom: initMapConfig.zoom, rotation: initMapConfig.rotation, tilt: initMapConfig.tilt, minZoom: 16, maxZoom: 22, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
});
var osmb = new OSMBuildings({}).addTo(map);
// add tiles
osmb.addMapTiles('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png');
// add custom geojson (https://gist.github.com/moklick/9861cea20a97d7517365)
osmb.addGeoJSON('https://cdn.rawgit.com/moklick/9861cea20a97d7517365/raw/0ab6652b3d86225272aa75ecb346f6fb2406742b/osmb-testdata.geo.json');
// button handling
var currentPoint = 'a';
var animationTime = 2500;
var buttons = document.querySelectorAll('button');
var tween = null;
var isAnimating = false;
[].forEach.call(buttons, function(button){ button.addEventListener('click', handleButton, false);
});
function handleButton(){ var pointTo = this.getAttribute('data-point'); var pointFrom = pointTo === 'a' ? 'b' : 'a'; if(currentPoint === pointTo || isAnimating){ return false; } currentPoint = pointTo; startAnimation(pointData[pointFrom](), pointData[pointTo]());
}
function startAnimation(valuesFrom, valuesTo){ if(tween){ tween.stop(); } isAnimating = true; tween = new TWEEN.Tween(valuesFrom) .to(valuesTo, animationTime) .onUpdate(function() { map.setPosition({ latitude: this.latitude, longitude: this.longitude }); map.setRotation(this.rotation); map.setZoom(this.zoom); map.setTilt(this.tilt); }) .onComplete(function(){ isAnimating = false; }) .start(); requestAnimationFrame(animate);
}
function animate(time) { requestAnimationFrame(animate); TWEEN.update(time);
}
3D Map Example - Script Codes
3D Map Example - Script Codes
Home Page Home
Developer Moklick
Username moklick
Uploaded November 20, 2022
Rating 3
Size 2,980 Kb
Views 26,312
Do you need developer help for 3D Map Example?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Moklick (moklick) Script Codes
Name
CSS Color Fading
Zeichensatz
Berlin Building Map
CSS Text-FX
A Pen by moklick
Random Skyline
Fullscreen fun
SVG Dom Visualization
... is watching you
3D Mapbox
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!