Street Level Imagery
After you have Setup an Interactive Map, you can now add a ground level view.
Mapillary
Street Level imagery is powered by the free Mapillary service, and will require you to sign up with them to get your Token. Using the Slpy JS library will take care of everything else.
| Link | Description |
|---|---|
| Developer Homepage | Get your token |
| Reference | Information, examples, and documentation |
| Mapillary JS | Github |
Custom Setup
Consult the Mapillary documentation above for examples and documentation on how to integrate street level imagery into your custom software.
For those configuring maps with Slpy JS, modifying your maps with the code on this page will automatically configure Mapillary and an icon will appear on your map for using it.
HTML Changes
Modify your map's Div html and add the style code to your pages <body>.
<style>
.map, #map-mapillary {
width: 100%;
height:400px;
}
.map {float:right}
#mly {
width: 65%;
height: 100%;
float: left;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
box-shadow: 5px 0px 3px rgba(0, 0, 0, 0.08);
z-index: 3;
display: none;
}
#mly:after {
font-family: Arial,Helvetica,sans-serif;
content: "Finding Street Level Photos...";
position: absolute;
color: white;
top: 50%;
width: 100%;
text-align: center;
z-index: -1;
}
</style>
<div id="map-mapillary"><div id="map" class="map"></div><div id="mly"></div></div>
Javascript
Add the function below to your javascript section and change the text for the token to the token key you obtained from Mapillary above.
//settings
//initialize map code
//after map code
addMapillary('Your Mapillary Token', map);Next Steps
Customize and add features to your new map
Settings & Features
- Common settings and Language Support.
- Content Filtering
- Satellite, Street Level, and other features.
- Compatibility for older browsers.
Markers & Popups
- Add markers to your points
- Include popups on your page for more info.
- Highlight points on your map.
- Helper functions
Map Design
- Customize your maps look
- Night Mode, Greyscale.
- Get the Slpy Style source code.
Search & Geocoding
- Add a search bar to your map.
- Translate addresses to coordinates
- Search for points of interest.