FREE maps for any app - replace Google maps TODAY

In this video CJ shows how to add a map to your web site for FREE with OpenFreeMap and MapLibre. He explains how these map libraries and tile servers work, talks about some of the paid offerings available and shows example implementations with vanilla js, react, vue and svelte.

View the code here: https://github.com/w3cj/openfreemap-e...

00:00 intro
01:48 how do map libraries work?
04:17 client js - per load fees
06:15 tile server - usage fees
07:45 free map libraries
08:18 maplibre short history - mapbox fork
09:15 free map tile servers
09:54 what is openstreetmap?
10:47 openfreemap is good
11:00 vector tile services
11:18 vector tile specification
11:37 map styles
14:20 code examples
14:41 vanilla example
16:39 vanilla leaflet example
18:08 maplibre framework adapters
19:41 react example
22:03 vue example
24:25 svelte example
26:18 awesome-maplibre
26:36 thanks

OpenFreeMap | https://openfreemap.org/
MapLibre | https://maplibre.org/
OpenStreetMap | https://www.openstreetmap.org

Google Maps JavaScript | https://developers.google.com/maps/do...
Google Maps Pricing | https://mapsplatform.google.com/pricing/
mapbox | https://www.mapbox.com/
mapbox pricing | https://www.mapbox.com/pricing
maptiler | https://www.maptiler.com/
maptiler server | https://www.maptiler.com/server/
protomaps | https://protomaps.com/
Leaflet | https://leafletjs.com/
OpenLayers | https://openlayers.org/
Raster tile providers | https://wiki.openstreetmap.org/wiki/R...
Vector tiles | https://wiki.openstreetmap.org/wiki/V...
maputnik map style editor | https://maputnik.github.io/
VS Code Live Server | https://marketplace.visualstudio.com/...
react-maplibre | https://visgl.github.io/react-maplibre/
vue-maplibre-gl | https://indoorequal.github.io/vue-map...
svelte-maplibre | https://github.com/dimfeld/svelte-map...
awesome-maplibre | https://github.com/maplibre/awesome-m...
openfreemap self hosting | https://github.com/hyperknot/openfree...

Support hyperknot on github - https://github.com/sponsors/hyperknot

------------------------------------------------------------------------------

Hit us up on Socials!

https://www.syntax.fm/links

Brought to you by Sentry - Use code "tastytreats" to get 2 months free - https://sentry.io/syntax

#free #maps #webdeveloper