net - UK (2020-04)

eeGeo.js

The map can be further customised to create something

special for your visitors because there are themes built into

the eeGeo maps. Firstly, the time of day can be simulated by

adding the following line to your JavaScript code anywhere after

the map is defined:

map.themes.setTime(L.eeGeo.themes.time.Night);

Moving to the night theme will give you the most dramatic change

as streetlights will turn on and office blocks have lit windows, not

to mention everything turning to a dark blue. Other times of day

include: Dusk, Dawn and the default of Day. To further enhance the

map, try adding some weather conditions:

map.themes.setWeather(L.eeGeo.themes.weather.Snowy);

The default condition is the regular Clear, but you can mix it

up with Overcast and Rainy. To finish with, you can also set the

season to Spring, Summer, Autumn and Winter.

map.themes.setSeason(L.eeGeo.themes.season.Winter);

If you were to include a weather API – such as https://

openweathermap.org/api – and then used the location of your

map and queried the browser’s time, you would be able to set the

season, time of day and weather condition dynamically to match

what is happening in real life. This would give you a truly unique

contact map and demonstrates the possibilities for tweaking the

map for your own purposes.

A MAP FOR ALL SEASONS

IN-DEPTH

Customise your map with the built-in themes – you can change the season, time of

day and weather conditions of the map

Above The 3D map is set to display on the screen and you can see that there is a marker
available. This is the zoomed-out image before animating into the city

The map is placed in a grid container with the
map making up two columns and the contact form
making up one right-hand side column of a three-
column grid. When moving to smaller screens, the
form can collapse onto the next row down giving
ample viewing of both the map and the contact
form on tablets and mobile screens.