Interactive Web Maps¶
If you're looking to get started with interactive maps on the web, you're in the right place! Let's get started with the best libraries for based on your preferred tech stack and use case.
React¶
-
React Leaflet
React Leaflet is the simplest way to get started building maps in React. It leverages the rich Leaflet ecosystem, and makes it easy to build interactive maps with marker clustering, custom annotations and popups, and more.
-
Custom React Component
Need more advanced features like 3D perspective or restyling client-side? You can build a component that's customised for your application and data flow using MapLibre GL JS to do the heavy lifting. Our tutorial on the vanilla JavaScript API covers the basics, empowering you to build your own component.
Vue¶
-
Vue Leaflet
Vue Leaflet is the easiest way to build maps with Vue 3. While you won't get the glitzy 3D effects and vector rendering of MapLibre GL JS, Vue Leaflet leverages the rich Leaflet ecosystem, which makes it extremely easy to build maps with marker clustering, custom annotations and popups, and more.
-
Custom Vue Component
Need more advanced features like 3D perspective or restyling client-side? You can build a component that's customised for your application and data flow using MapLibre GL JS to do the heavy lifting. Our tutorial on the vanilla JavaScript API covers the basics, empowering you to build your own component.
Vanilla JS¶
-
MapLibre GL JS
MapLibre GL JS is the most advanced vector tile renderer and supports dynamic styling, 3D perspective, hillshading, and more. Our tutorial will get you started, and point to further examples of how to handle the more complex use cases.
-
MapLibre GL Leaflet
MapLibre GL Leaflet gives developers most of the benefits of vector tiles while avoiding the complexity of MapLibre GL JS. For data visualization use cases that don't require things like dynamic re-styling and 3D perspective, this is a much simpler option.
-
Leaflet
Want to use Leaflet but don't care about vector tiles? No problem! Leaflet works just as well with raster tiles, and is the perfect option if you want to keep things light or support older hardware.
-
OpenLayers
OpenLayers has a dizzying array of features, integrates with many OGC APIs, supports vector layers in multiple formats, and a lot more. If you're a GIS professional, OpenLayers needs no introduction. Stadia Maps is a built-in tile provider from OpenLayers v8.0.0, and is quite easy to use in prior versions.
Other vector renderers
Our vector tiles use the Mapbox Vector Tile format, and are compatible with several other renderers, but we cannot provide official styles and support for these at the moment.
If you'd like help getting started and your framework isn't mentioned, let us know!