FREE maps for any app - replace Google maps TODAY

Video Description

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-examples/ 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/documentation/javascript/overview 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/Raster_tile_providers Vector tiles | https://wiki.openstreetmap.org/wiki/Vector_tiles maputnik map style editor | https://maputnik.github.io/ VS Code Live Server | https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer react-maplibre | https://visgl.github.io/react-maplibre/ vue-maplibre-gl | https://indoorequal.github.io/vue-maplibre-gl/ svelte-maplibre | https://github.com/dimfeld/svelte-maplibre awesome-maplibre | https://github.com/maplibre/awesome-maplibre openfreemap self hosting | https://github.com/hyperknot/openfreemap/blob/main/docs/self_hosting.md 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