CREATE ANIMATED 3D MAP CONTACT PAGES

Use OpenStreetMap and a very simple API from eeGeo to create 3D maps with animated cars and camera moves

- MARK SHUFFLEBOT TOM

Early examples of internet maps were nothing more than static images placed on pages, but the promise was that these would eventually be interactive. MapServer and Esri’s ArcIMS are two early examples of interactive maps but were extremely slow and served up pixelated images. The main problem was that the maps were being drawn dynamically and so ran into speed and scalability challenges. Fast forward to 2004 and Google Maps offered ‘pre-baked’ images and used AJAX to speed up the process of serving image tiles as the user scrolled. No page refresh was required.

In this tutorial, we will explore using the free OpenStreetMap, initially through leaflet.js and then through eeGeo, to create interactive and animated 3D maps, rendered through WebGL in order to create a 3D contact page for the web. The tutorial will focus on creating the HTML elements for the map and contact form, then move onto exploring JavaScript to control the map.

To get started drag the ‘start’ folder in your code IDE, opening ‘index.html’ to add the basic page structure. The first part of the page will be a simple header consisting of a logo on the left and navigation elements on the right. This will make up the top of the page and will be followed by a large map taking up the majority of the page.