OpenFreeMap + MapLibre GL JS Examples

Basic examples using OpenFreeMap.org tiles with MapLibre GL JS libraries.

• Each example:
  1. Loads the base MapLibre GL JS map
  • style url set to https://tiles.openfreemap.org/styles/liberty
  • option to set style url to /styles/dark.json
    • hosted in the public folder of each app
    • dark style adapted from maptiler.com basic-v2-dark style
  2. Gets the users location via http://ip-api.com/json/
  3. Uses map.flyTo to animate / zoom to the users location
  4. Displays a Popup on the map at the users location

Examples

• Vanilla JS / HTML
  • 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
  • same as vanilla-example but uses leaflet instead