Maps for Every Framework: MapLibre-compatible Maps API - 50,000 free tile requests · no credit card # Maps for every framework Copy-paste MapLibre GL snippets, install commands, and live demos for the frameworks your team already uses. /maps-for/react React MapLibre-native maps for React apps. View snippet - /maps-for/nextjs Next.js SSR-safe maps inside the App Router. View snippet - /maps-for/vue Vue @geoql/v-maplibre: our own Vue 3 wrapper for MapLibre. View snippet - /maps-for/nuxt Nuxt SSR-safe VMap with the official Nuxt 4 module. View snippet - /maps-for/svelte Svelte Idiomatic Svelte 5 runes with raw maplibre-gl. View snippet - /maps-for/sveltekit SvelteKit Browser-only map inside a SvelteKit route. View snippet - /maps-for/angular Angular MapLibre inside Angular component lifecycle hooks. View snippet - /maps-for/flutter Flutter Native maps with the official Flutter MapLibre package. View snippet - /maps-for/react-native React Native Native iOS + Android maps via @maplibre/maplibre-react-native. View snippet - /maps-for/leaflet Leaflet Drop-in raster tiles for existing Leaflet apps. View snippet - /maps-for/maplibre MapLibre GL JS Pure maplibre-gl with no wrappers or opinions. View snippet - /maps-for/javascript JavaScript Drop-in maplibre-gl via CDN with no build step. View snippet ## Mapping terms, defined The vocabulary behind every framework guide, in plain language. ### What is Vector tile? A vector tile is a compressed binary chunk of map geometry (roads, buildings, labels) that the browser styles and renders at runtime, instead of downloading a pre-drawn image. Vector tiles let one dataset power unlimited visual styles and stay sharp at every zoom level. ### What is Basemap? A basemap is the background map layer (roads, water, landuse, place labels) that your own data is drawn on top of. maps.guru serves basemaps as MapLibre-compatible vector tiles. ### What is Map style? A map style is a JSON document that tells a renderer which colours, fonts, widths, and zoom rules to apply to each layer of a vector tile. maps.guru styles follow the MapLibre Style Specification, so they work in any MapLibre or Mapbox GL JS compatible renderer. ### What is Geocoding? Geocoding is the process of converting a text address or place name into latitude and longitude coordinates. Reverse geocoding does the opposite: it converts coordinates into the nearest human-readable address. ## Questions about adding maps to your app - ### How do I add a map to my app? Install MapLibre GL JS, create a map instance pointed at a maps.guru style URL with your API key, and mount it on a container element with an explicit height. The per-framework guides give the exact wrapper code for React, Vue, Svelte, Angular, Flutter, and React Native. - ### Which framework has the best map support? All of them render the same MapLibre GL JS canvas, so the map itself is identical. What differs is lifecycle wiring: React and Vue need the map instance kept out of reactive state, Svelte needs cleanup on destroy, and React Native and Flutter use platform-native MapLibre bindings. - ### Do I need a separate wrapper library? No. MapLibre GL JS works directly in every framework. Wrappers such as v-maplibre for Vue are conveniences for declarative layer management, not requirements. ## Sources - MapLibre Style Specification — MapLibre - Mapbox Vector Tile specification — Mapbox - MapLibre GL JS documentation — MapLibre - OpenStreetMap tile usage policy — OpenStreetMap Foundation ## Ready to build with beautiful basemaps? Join developers worldwide who trust maps.guru for their mapping needs. Start free, no credit card required. Get started free Get started free Contact us Free forever plan 5-minute setup No credit card