VTS: Our Intergeo app and how we created it
October 16, 2016
It’s this time of year again when people from all over the globe swarm up on an international event called Intergeo. For those of you who have no clue what the event is, let’s simplify it by saying it is for anyone who - in some way - measures our planet and uses these data in real life. And since we are creating astounding 3D maps rendering engine it was our moment to get the booth up and running.
We decided to create a simple app showing how easy it is to use Melown API. This app consists of two main elements: 3D Map and Panel with places you can visit. When you click on any of those places the 3D map starts to pitch, yaw and roll, creating an amazing fly-over to the selected location. Upon arrival the camera starts slowly rotating around the center of view, creating natural visual experience. Check it out here.
So, are you ready to dig through the code? Don’t be afraid, it’s really easy and self-explanatory. This is the whole code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Intergeo 2016 - Demo</title>
<!-- Include CSS Stylesheet for Melown API -->
<link rel="stylesheet" type="text/css" href="//cdn.melown.com/libs/melownjs/browser/stable/melown-browser.min.css">
<!-- Include JavaScript Melown API -->
<script type="text/javascript"
src="//cdn.melown.com/libs/melownjs/browser/stable/melown-browser.min.js"></script>
<style>
/* Add style for the layout */
#melown-map {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 90%;
}
#melown-places {
position: absolute;
top: 0;
left: 90%;
height: 100%;
width: 10%;
text-align: center;
}
#melown-places div {
font-size: 25px;
padding: 20px 10px;
cursor: pointer;
}
#melown-places div:hover {
color: #0066ff;
}
</style>
</head>
<body>
<!-- Create two elements to store 3D map
and Places to visit -->
<div id="melown-map"></div>
<div id="melown-places">
<h3>Places to visit</h3>
<hr>
<div onclick='map.flyTo(["obj",14.403566,50.087933,"fix",244.2,78.12,-62.32,0.00,707.71,55.00]); map.setAutorotate(5);'>Prague</div>
<div onclick='map.flyTo(["obj",14.315856,48.811244,"fix",527.6,93.05,-33.99,0.00,306.28,55.00]); map.setAutorotate(-5);'>Český Krumlov</div>
<div onclick='map.flyTo(["obj",35.230410,31.777802,"fix",790.3,267.14,-58.23,0.00,90.00,55.00]); map.setAutorotate(5);'>Jerusalem</div>
</div>
<!-- Include JavaScript to initialize 3D map -->
<script>
var map = Melown.mapBrowser("melown-map", {
map: "//cdn.melown.com/mario/store/melown2015/map-config/melown/Intergeo-Melown-Earth/mapConfig.json",
position: ["subj",9.987766,53.552479,"fix",400000.00,0.00,-12.20,0.00,7605.80,23.03],
authorization: "//cdn.melown.com/mario/get-token/qduLbzCFlqh8W5PESjzy"
});
</script>
</body>
</html>
First of all we will start off by creating a basic HTML5 layout where we will store our 3D map and right panel for nesting places which we can visit, then include Melown API and add JavaScript that will handle the initialization of 3D map. Let’s go through it step by step. In the top part, we are including Melown API by loading vital CSS and JavaScript libraries, which looks like this:
<!-- Include CSS Stylesheet for Melown API -->
<link rel="stylesheet" type="text/css" href="//cdn.melown.com/libs/melownjs/browser/stable/melown-browser.min.css">
Then we add two elements where we will display 3D map and Panel with places to visit. <div id="melown-map"></div> <div id="melown-places"></div> And now we have to tell the Melown API which map should be loaded (along with other parameters, such as initial position and valid authorization): At this point if you save the document and load it up in a browser, you will get a blank screen with some controls at the bottom left corner. That is because the 3D map is already working however since we haven’t specified any styling for the layout yet it doesn’t know how to display it. Let’s fix that by simply adding style to the HTML document.
<style>
/* Add style for the layout */
#melown-map {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 90%;
}
</style>
Great! Now save it, refresh the page and voilà you have your first own 3D map being displayed right in front of you. Let’s sum it up by adding a little bit more of styling and some elements on which we can click and the map will take us there.
<style>
/* Add style for the layout */
#melown-map {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 90%;
}
#melown-places {
position: absolute;
top: 0;
left: 90%;
height: 100%;
width: 10%;
text-align: center;
}
#melown-places div {
font-size: 25px;
padding: 20px 10px;
cursor: pointer;
}
#melown-places div:hover {
color: #0066ff;
}
</style>
… and add clickable elements:
<div onclick='map.flyTo(["obj",14.403566,50.087933,"fix",244.2,78.12,-62.32,0.00,707.71,55.00]); map.setAutorotate(5);'>Prague</div>
<div onclick='map.flyTo(["obj",14.315856,48.811244,"fix",527.6,93.05,-33.99,0.00,306.28,55.00]); map.setAutorotate(-5);'>Český Krumlov</div>
<div onclick='map.flyTo(["obj",35.230410,31.777802,"fix",790.3,267.14,-58.23,0.00,90.00,55.00]); map.setAutorotate(5);'>Jerusalem</div>
These are just basic div elements used everywhere on the web. What’s important here is what happens when you click on them. They call two methods - the first fires flyTo() procedure, which takes us to the desired location and the second one, setAutorotate() starts rotating the scene.
That is pretty much it! Check out the code in practice: JSFiddle.
Our team is having a great time at Intergeo 2016 showing you all the possibilities. We can’t wait to see what you create! With the right tools and ideas the world is your canvas.