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.
-
Leaflet
Leaflet is probably the best known and simplest of all map rendering libraries. Its gentle learning curve yet powerful APIs make it one of the most popular renderers around. And if the base library can't do something out of the box, check out the long list of available plugins.
-
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!