https://github.com/w3cj/openfreemap-examples
Examples for react, vue, svelte and vanilla js using OpenFreeMap.org tiles with MapLibre GL JS libraries.
https://github.com/w3cj/openfreemap-examples
Last synced: 17 days ago
JSON representation
Examples for react, vue, svelte and vanilla js using OpenFreeMap.org tiles with MapLibre GL JS libraries.
- Host: GitHub
- URL: https://github.com/w3cj/openfreemap-examples
- Owner: w3cj
- License: mit
- Created: 2024-10-21T14:22:11.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-10-21T14:23:22.000Z (6 months ago)
- Last Synced: 2025-03-28T22:12:28.190Z (24 days ago)
- Language: TypeScript
- Homepage: https://www.youtube.com/watch?v=UAQogFwyna0
- Size: 59.6 KB
- Stars: 166
- Watchers: 3
- Forks: 33
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - openfreemap-examples
README
# OpenFreeMap + MapLibre GL JS Examples
Basic examples using [OpenFreeMap.org](https://openfreemap.org/) tiles with [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) 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/](http://ip-api.com/json/)
3. Uses [`map.flyTo`](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#flyto) to animate / zoom to the users location
4. Displays a Popup on the map at the users location## Examples
* [Vanilla JS / HTML](./vanilla-example/)
* built with core MapLibre GL JS loaded from unpkg cdn
* [React Example](./react-example/)
* built with [@vis.gl/react-maplibre](https://visgl.github.io/react-maplibre/)
* [Vue Example](./vue-example/)
* built with [@indoorequal/vue-maplibre-gl](https://indoorequal.github.io/vue-maplibre-gl/)
* [Svelte Example](./svelte-example/)
* built with [svelte-maplibre](https://github.com/dimfeld/svelte-maplibre)
* [Vanilla JS / HTML + LeafletJS](./vanilla-leaflet-example/)
* same as vanilla-example but uses [leaflet](https://leafletjs.com/) instead