Mapillary has integrated with Esri’s Web AppBuilder Developer Edition to allow the use of a Mapillary widget inside custom web applications. You can use the Mapillary widget to allow viewing street-level images alongside additional feature layers, as well as to assist in editing feature layers.
A live demo of the widget .
This article will go over the following sections to help you get started with the widget:
When you download the widget, it will come in a compressed zip file and include a single folder called MapillaryViewer. Inside this folder are the contents of the widget. It is important not to change the name of the folder, as the code refers to this folder name when adding and deploying the widget in your web app.
There are several different ways to add the widget to your web app, depending on your own development environment, or if you’re planning to use a server such as Portal. In Web AppBuilder (Developer Edition), the default directory for all widgets is client\stemapp\widgets. Assuming this matches your own environment, you’ll place the MapillaryViewer folder there. This will enable you to add the Mapillary widget to any new web app that you create.
If you’d like to add the widget to a custom or downloaded app that already exists, you’ll need to navigate to the directory for that app and place the MapillaryViewer folder inside of stemapp\widgets. You will also need to edit the app config file to configure the widget.
Alternative instructions from Esri with an example widget .
In the Web AppBuilder for ArcGIS, you can create a new app then add the Mapillary Viewer widget. The Mapillary Viewer widget will appear in the alphabetically ordered list of widgets.
Once you’ve added the widget to your app, you’ll be asked to review the configuration for the widget. The most important part of this is ensuring you provide a valid Mapillary client ID. The client ID is your access token, indicating you have a Mapillary account and therefore letting you access Mapillary from outside the website. It can be generated in your account .
When registering a client ID, the callback URL should match the URL where your web app will be hosted. This is not critical currently but will be helpful in future versions of the app that may require authentication to manage your organization imagery in an ArcGIS environment.
The other configuration options have explanatory text below them.
By default, no username filter is applied and users may modify the filter on their own. But as indicated, you may both set a default username filter as well as prevent users from modifying this filter once the app is deployed.
For example, if you are a city GIS administrator and wish to show only 360° imagery captured by your own user account on a public works map, you may wish to enter your username in the filter, and prevent the filter from being removed so that your map serves the purpose of only showcasing your specific imagery.
Alternatively, you may wish to have users only initially see your imagery, so you can add a username filter but also allow users to add or remove filters for their own interests. Also, multiple username filters can be applied, which is useful if you have multiple contributor accounts you’d like to display on the initial map load.
The image transition toggle involves how the Mapillary Viewer displays transitions between images. By default, Mapillary’s 3D reconstruction (Structure from Motion, SfM) is used to create the transitions by matching common points between images. This can show a warping effect for a moment once you begin navigating but may interfere with viewing at higher playback speeds. If you opt to remove the image transitions, there is still a visible toggle in the widget to turn this feature back on, whether the box is checked or not. The toggle is always there for the user to control.
There are two methods of navigating through images in the Mapillary Viewer: spatial navigation and sequence navigation. The spatial method involves using arrows that are overlaid over the bottom half of the image, some implying a discrete direction and others implying a turn or reversal motion. Navigating with these arrows will allow you to move to other images that are located near your current view, but that also may be from different users, dates, sequences, or perspectives.
The sequence method involves either a forward or backward motion that keeps your perspective in the same sequences of images, thus maintaining consistency within the direction of travel, username, and date. Sequence navigation also includes a play button, useful for automatically navigating through the sequences, as well as options to change the speed or the playback direction.
Both navigation options are enabled by default, but it may be useful to remove one or both if you wish to restrict users from navigating, and instead only be able to view the photo or sequence of photos that they’ve selected from the map.
The camera angle indicator is also visible in the widget by default, showing the current viewing direction of the photo. It is based on a 0- to 360-degree scale, with 180 degrees indicating due south, 90 degrees due east, and so on. This can help give the user an orientation in comparison to the map and its location icon but can be disabled if desired.
Once all component options have been reviewed, you may click OK and the widget configuration will be saved. Your widget is now ready to be deployed with your app. You can find detailed instructions for deploying your app in the Web AppBuilder guide.
The Mapillary Viewer widget can be opened by clicking the widget icon. Once open, it will add green point and line feature layers to the map, indicating Mapillary coverage. If you have applied a username filter by default, then the green coverage layer will match the filter.
The viewer will be empty initially, and display a message: "Click on the map to display the location." When you click on the map, the closest image to the point of the click event will be loaded. If you click on a location with no green coverage layer, the widget will search up to 100 meters’ radius for the nearest image, but it's recommended to use the green coverage as a guide for where to click.
Once you’ve clicked, an image will load in the viewer, and an orange-yellow icon will appear on the map. This icon will indicate the camera angle of the current image and will match the camera angle indicator at the bottom-right of the image.
You can click the spatial navigation arrows to move to nearby images, and you’ll find it may show images in different perspectives, from different dates, or different users.
Contrarily, sequence navigation will maintain the direction of travel from the current sequence. Click the Vertical line at the right of the sequence menu, and you will be able to then click the rabbit icon to adjust the playback speed on the slider or click the arrows icon to reverse playback direction. Clicking the frame icon beside the rabbit icon will open the sequence timeline, allowing you to quickly jump to a different location in the current sequence.
You may also apply a username filter by typing a username into the filter box, then clicking that user’s name once you see it appear in the drop-down. Repeat this to filter for multiple users—their names will appear above the box, and can each be cleared by clicking the X beside the name. The date filter works by selecting a start and end date in the drop-down box.
You may clear all filters, and clear the current image as well as map location by clicking the Reset button. If you experience any problems loading an image upon click, this also can help refresh the widget.
To close the widget, click the X at the top right, and the Mapillary coverage and location icon will disappear from the map. They will also be saved and reloaded once you open the widget again.
The widget is free to use and offers the same functionality as the map on the Mapillary web. It is encouraged that you use it for internal viewing in your organization as well as publicly served maps.
Please note that extra features, such as managing your organizational projects, editing point data with reference markers in the imagery, and adding or deleting point data via the viewer are part of the paid, full-feature version of this widget that is separately available on the ArcGIS Marketplace.