net - UK (2020-04)

eeGeo.js

Top left Sign up for a free

eeGeo account in order to

include 3D maps on your

web pages

Bottom left Once you

have a custom API key, you

can add this to your page

and get access to the 3D

mapping options available

from eeGeo

Above right The tablet

view shows how the

contact form collapses

below the map but the map

now fills less screen height

so the user knows that

content is below

zoom: 13
});

The map can be animated, which is a great way to
zoom in and show your visitors a close up of the
building or area that you are focusing on. One of the
best features of the animation is seeing labels such
as street names and points of interest move with
the map as it animates.
This code now adds an animation to the page after
eight seconds, so that once the map is fully loaded it
zooms in and spins using the heading degrees. The
heading is worked out in degrees from the north
position, with the tilt angle being a number from 0
to 45 degrees – 45 is directly overhead and 0 is the
default view. This animation really grabs attention.
Another interesting point to note is that once the
map is zoomed in to 16 or higher, cars will be placed
onto the streets and they will also animate to
simulate the bustle of a city.

setTimeout(function() {
map.setView([37.784532, -122.400426], 15, {
headingDegrees: 340.0,
tiltDegrees: 10.0
});
}, 8000);

Having the ability to zoom in on the map is another
worthwhile feature to include. The zoom controls

can be added to the map and positioned in any of

the corners to suit the design. Users click and drag

the map to move it around; it will bring in new tiles

and therefore the relevant 3D models of the space.

L.control.zoom({

position: ‘bottomright’

}).addTo(map);

It’s very easy to add a marker to the map and this

is essential in most map uses. Once the marker is

created, it’s then possible to bind a pop-up so that

information is displayed once the marker is clicked

on. Here the address is being highlighted and, as

you can see, HTML tags can be included, so that

more control can go into the styling of the content.

In the ‘design.css’ file you can see that the pop-up

is styled with our selection of typeface and colour to

match the rest of the design, so full customisation

of the elements in the map is possible.

let marker = L.eeGeo.marker([37.784532, -122.400426]).

addTo(map);

marker.bindPopup(“<strong>Create Conference</

strong><br> March 21st - 23rd<br>Moscone Center, 747

Howard St,<br> San Francisco, CA 94103”);

Now try adding an interactive map to your own

projects – it is just the thing for making a contact

page seem more professional.