CREATE ANIMATED 3D MAP CONTACT PAGES
NET|April 2020
Use OpenStreetMap and a very simple API from eeGeo to create 3D maps with animated cars and camera moves
MARK SHUFFLEBOT TOM
CREATE ANIMATED 3D MAP CONTACT PAGES

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.

Denne historien er fra April 2020-utgaven av NET.

Start din 7-dagers gratis prøveperiode på Magzter GOLD for å få tilgang til tusenvis av utvalgte premiumhistorier og 9000+ magasiner og aviser.

Denne historien er fra April 2020-utgaven av NET.

Start din 7-dagers gratis prøveperiode på Magzter GOLD for å få tilgang til tusenvis av utvalgte premiumhistorier og 9000+ magasiner og aviser.

FLERE HISTORIER FRA NETSe alt
Camille Gribbons
NET

Camille Gribbons

UX designer at Booking.com, Camille Gribbons reveals how she first got into the industry

time-read
7 mins  |
June 2020
THE 5G UI REVOLUTION
NET

THE 5G UI REVOLUTION

Tris Tolliday describes his vision of a web UI catapulted forwards by 5G

time-read
3 mins  |
June 2020
HOW TO SHOWCASE YOUR DEV SKILLS
NET

HOW TO SHOWCASE YOUR DEV SKILLS

Aude Barral shares 5 top tips for landing your dream developer job

time-read
3 mins  |
June 2020
KNIVES OUT
NET

KNIVES OUT

Murder mystery film, Knives Out, grabbed everyone’s attention, and so did the fun website that promoted it. Oblio tells Tom May how it created its innovative 3D navigation

time-read
6 mins  |
June 2020
HOW EMOTIONAL LABOUR HINDERS WOMEN IN TECH
NET

HOW EMOTIONAL LABOUR HINDERS WOMEN IN TECH

Christine Brewis, head of digital marketing at Studio Graphene, discusses how gender parity in tech has changed over the last ten years, and what more can be done

time-read
5 mins  |
June 2020
EDAN KWAN
NET

EDAN KWAN

He swapped life as a singer for a career making eye-popping digital visuals. The Lusion founder chats to Tom May about battling demons, winning awards and where digital advertising is heading

time-read
8 mins  |
June 2020
ANDREW COULDWELL
NET

ANDREW COULDWELL

The Brit in LA discusses his new book on design systems, Laying the Foundations

time-read
3 mins  |
June 2020
Top 5 Tips For Ensuring Web Content Is Accessible For All
NET

Top 5 Tips For Ensuring Web Content Is Accessible For All

Merlyn Meredith outlines five top tips for ensuring web content is accessible for all

time-read
2 mins  |
May 2020
WHAT DOES THE FUTURE HOLD FOR BROWSERS?
NET

WHAT DOES THE FUTURE HOLD FOR BROWSERS?

Nico Turco examines the state of play with browsers, whether developers should encourage diversity or monopoly and how Google fits into it all

time-read
6 mins  |
May 2020
YEARS IN THE MAKING
NET

YEARS IN THE MAKING

Exclusively for net: The latest in a series of anonymous accounts of nightmare clients

time-read
3 mins  |
May 2020