Openfreemap Examples

Overview:

The OpenFreeMap + MapLibre GL JS Examples showcase basic examples using OpenFreeMap.org tiles with MapLibre GL JS libraries. Each example loads a base MapLibre GL JS map style URL set to https://tiles.openfreemap.org/styles/liberty and allows for the option to set the style URL to /styles/dark.json. The examples are hosted in the public folder of each app, with the dark style adapted from maptiler.com basic-v2-dark style. These examples also get the user's location via http://ip-api.com/json/, use map.flyTo to animate or zoom to the user's location, and display a popup on the map at the user's location.

Features:

• Basic Examples: Demonstrates using OpenFreeMap.org tiles with MapLibre GL JS libraries.
• User Location: Gets the user's location via http://ip-api.com/json/.
• Interactive Map: Uses map.flyTo to animate or zoom to the user's location.
• Popup Display: Displays a popup on the map at the user's location.
• Vanilla JS/HTML Example: Built with core MapLibre GL JS loaded from unpkg cdn.
• React Example: Built with @vis.gl/react-maplibre.
• Vue Example: Built with @indoorequal/vue-maplibre-gl.
• Svelte Example: Built with svelte-maplibre.
• Vanilla JS/HTML + LeafletJS: Similar to vanilla JS/HTML example but uses Leaflet instead.