Introducing MapillaryJS v4

MapillaryJS is the platform that makes street-level imagery viewing possible. In this post we outline new features in MapillaryJS 4.0.
Oscar Lorentzon
24 June 2021

MapillaryJS is an interactive, extendable street-level imagery and semantic mapping visualization platform and a reusable component on the web. Our new documentation website for MapillaryJS v4.0 will guide you in how to start using the library and also how to augment and extend the street-level imagery experience with 3D models, animation, camera controls, editor functionality, and your own data formats.

Core Capabilities

Out of the box, MapillaryJS comes with a set of stable, performant core capabilities.

  • Interactivity - Smooth street level and map camera navigation, panning, zooming
  • Navigation graph construction - S2 geometry cell based graph creation and caching
  • Image tiling - On demand, full resolution image rendering
  • Undistortion - Textures and camera frames are undistorted in the virtual 3D world
  • Spatial rendering - Point clouds, camera frames, GPS positions
With the MapillaryJS v4.0.0 release we have focused on adding extensibility on top of these core capabilities.

Extension APIs

The core capabilities of MapillaryJS provides a good base for interactive street-level imagery applications, but many applications require specific functionality and customization. Therefore MapillaryJS now provides a set of powerful extension APIs for developers to build upon. When building these APIs we have focused on providing great power to you when extending and augmenting MapillaryJS. We have also worked on making them coherent and simple to use. Take a look at the detailed guides for the three main extension APIs to learn more.

  • Data Provider API - Write a data provider to render your own 3D reconstruction data of any format in MapillaryJS.
  • Custom Render API - Superimpose any geo-anchored 3D content on the street-level imagery. You can render 3D models of any format and create animations in the undistorted virtual 3D world of MapillaryJS. You can even create 3D content editor functionality directly in the viewer.
  • Camera Control API - Define your own interactivity by attaching custom camera controls.

Documentation

In addition to the extension APIs, we have built a new documentation website to make it easier to start using and developing applications with MapillaryJS. The documentation website includes step-by-step guides with live example code to make it easy to follow along. Take a look at these resources to get up to speed.

Distribution

Lastly, we have made some internal changes to the way we build the library. This has made it possible to release MapillaryJS with improvements and new resources.

  • UMD Bundle - Decreased library size from 1.9 to ~1.1MB (~290kb gzipped)
  • ES6 Module Bundle - Use import statements for every MapillaryJS member
  • TypeScript Type Definitions - Get intellisense and type checking at compile time for every MapillaryJS member in your TypeScript application

Summary

With MapillaryJS v4.0 we are providing you with more power to customize and augment the street-level imagery experience in your application by adding a set of extension APIs. In future releases, we aim to expand these APIs to make it even easier to visualize your 3D content at world scale.