PROJECTS
eeGeo.js
GOING FURTHER
WITH THE MAP
RESOURCESThe eeGeo maps website has the definitive list of resources
to help you design and get the most out of your mapping
needs. There are many features in the 3D map that you normally
expect to find in 2D maps; this helps you know that by moving to
including a 3D map on your site, you won’t simply be getting style
over functionality.eeGeo API
https://docs.eegeo.com/eegeo.js/v0.1.780/docs/api/
The API is well documented and you will see here that there are
many options available, from framing the map with the right area
of content visible, to drawing lines and polygons on the map.
Options such as adding image overlays and icons can also all be
found here. A major use of maps is for directions and the API
includes routes, which enable the creation of routes between two
points and the option of going via a specific point is also available.
Clicking each option from the list on the left brings up the relevant
information in order to add the correct syntax into your own code
to target your map.Example projects
https://docs.eegeo.com/eegeo.js/v0.1.780/docs/examples/finding-a-
route-in-an-indoor-map/
The eeGeo example projects feature a great many use cases that
you might need – consider these a very quick start to get up and
running with your map. Probably one of the most interesting
examples is the ability to display the inside of a building (yes,
really!). There are routing options that even give access and
directions from different floors of buildings with the ability to
transition from indoors to outdoors.mobile browsing, as well as appropriate icons added
to the page.<p class=”comm”><img src=”img/phone.png”
class=”icon”><a href=”tel:123-456-7890” class=”tel”><str
ong>123-456-7890</strong></a>
<br>123 City Street, Marshall City,
<br> NY 012345</p>
</div>
</div>To make the map work, the libraries need to be
linked up to the page. Start by adding the leaflet.js
library and stylesheet into the head section at the
top of the page.<link rel=”stylesheet” href=”https://unpkg.com/
[email protected]/dist/leaflet.css” />
<script src=”https://unpkg.com/[email protected]/dist/leaflet.
js”></script>Now add the following code into script tags before
the closing body tag. In this code the map is called
from leaflet.js and sent into the <div> with the id of
map in the HTML layout. View this in your browser
to see the 2D map working.let map = L.map(‘map’, {
center: [37.784532, -122.400426],
zoom: 15
});
L.tileLayer(‘http://{s}.tile.osm.org/{z}/{x}/{y}.png’, {
attribution: ‘© <a href=”http://osm.org/
copyright”>OpenStreetMap</a> contributors’
}).addTo(map);We want to add a 3D map into our page and this
is just a 2D map, so first we need a free eeGeo API
key, available from https://accounts.wrld3d.com/users/
sign_up. Then create a new API key and copy that
number. In the head section of the page, add in the
new script for the 3D map.<script src=”https://cdn-webgl.eegeo.com/eegeojs/api/
v0.1.780/eegeo.js”></script>Change the map variable to point to the 3D map
instead. This will call the 3D map into the design
and is where the API key is inserted to make this
work. Refreshing your browser will load the 3D map
and place it onto the page; ensure you are serving
your page from a web server, either local or hosted.let map = L.eeGeo.map(‘map’, ‘your_api_key_goes_here’, {
center: [37.784532, -122.400426],