In the latest release of MapillaryJS we have added APIs for showing 3D markers in the viewer and synchronizing their geographic positions with corresponding markers on a map. The new functionality contains a mouse event API supplying geographic coordinates which can be used together with a marker API to create and edit 3D markers in the viewer.

We have focused on creating a dynamic API that can be used for different kinds of integrations (like GIS applications) as well as making it perform well. With the help of the RBush library we have made it possible to add one million markers spread out over a city to MapillaryJS without any significant performance implications.

This new API will be useful when creating inventories and marking points of interest like traffic lights, benches, and fire hydrants on a map. Showing, creating and editing these map objects in 3D in the viewer instead of on the map feels natural and simplifies this work by giving street-level context.

You can try it out yourself in the example application below, using the new MapillaryJS mouse and marker API features. The following functionality is available (we do not have full touch support yet):

Viewer

• Pan in the viewer by dragging with the mouse.
• Hover over the ground with the mouse in the viewer to see a green indicator marker in the viewer. A green indicator marker corresponding to the geographic position will also appear on the map.
• Click in the viewer when the green indicator marker is visible to create a red object marker. The new object marker will appear both in the viewer and on the map.
• Drag the sphere of the red object marker in the viewer to edit its geographic position. The corresponding map marker will be synchronized.

Map

• The blue marker indicates the geographic position of the current viewer photo.
• Hover over the map with the mouse within the current field of view of the viewer to see a corresponding green indicator marker in the viewer.
• Click on the map to create a red object marker that appears both in the viewer and on the map.
• Drag the red object marker on the map to edit its geographic position. The corresponding viewer marker will be synchronized.

Try creating and editing map objects in the viewer and on the map above.

There are currently some limitations to the behavior of the marker and mouse APIs. In general, it will work well in areas that align well with:

• Fairly flat areas with no hills or large altitude differences.
• Photo sequences with a lot of overlap between the photos (photos taken with small distance between them, generally less than 5 meters) where the camera was held upright.
• Photos with good GPS latitude and longitude positions as well as correct compass angles.

If the area is not flat enough, our ground approximation may not correspond to the real ground very well. If the GPS positions are not correct, the markers will be shifted between the map and photo. If the camera was not held upright, the 3D alignment in the photo may be incorrect. We will work on support for and improved handling of some of those cases in the future.

If you want to develop an application showing markers in MapillaryJS you should head to the documentation of the marker component. Markers can be added and removed, using the marker component API. For creating and editing markers, you should check out the viewer mouse events and the event data contract and combine that functionality with the marker component API.

Finally, take a look at the marker component examples for a thorough introduction to combining the viewer mouse and marker component APIs.

/Oscar