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.

Summary:

The OpenFreeMap + MapLibre GL JS Examples provide a practical demonstration of utilizing OpenFreeMap.org tiles with MapLibre GL JS libraries. These examples showcase the integration of user location functionality, interactive mapping features, and different frameworks like React, Vue, and Svelte. By following the installation guide, users can easily explore these examples and leverage the functionalities offered by the libraries.