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

Enabling

Slpy JS

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.

Custom Setup

Consult the Mapillary documentation for how to integrate street level imagery into your custom software.

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.

Documentation