PROJECTS
eeGeo.js
EEGEO.JS
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.<header>
<div class=”logo”><img src=”img/logo.svg”></div>
<nav>
<ul>
<li><a href=”about.html”>About</a></li>
<li><a href=”portfolio.html”>Portfolio</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>CREATE ANIMATED 3D
MAP CONTACT PAGES
Use OpenStreetMapand a very simple API from eeGeo to create 3D maps
with animated cars and camera moves
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 andView source
files here!
All the files you need for
this tutorial can be found at
https://netm.ag/2RNPzSsABOUT THE AUTHOR
MARK
SHUFFLEBOTTOM
w: webspaceinvader.com
t: @webspaceinvader
job: Professor interaction
design
areas of expertise:
HTML, CSS, JavaScript