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.

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

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

Hit us up on Socials!

#free #maps #webdeveloper

[syntaxfm]

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

[JacquesvanWyk]

Just want to say I am so happy to see CJ on this channel. He is truly a great teacher and you can see he loves what he does.

[narixius]

CJ's iconic intro never fails—'My name is CJ, welcome to Syntax!' It sets the vibe for the whole video!

[dan-garden]

I actually saw your fork of the repo before the video and got interested. Now seeing the video for the explanation, THANKS!!! This saves me a f*** ton of money.

[dazecm]

Probably the best video on diving into low-cost geo-mapping tech on the web. Thanks CJ!

[nalux]

Really good video. Would also love some examples on self-hosting, such as self hosting a tile server would be amazing. I know many people take for granted, that the juicy internet connection always exists, but there are in-fact also people using web technologies, in air gapped systems :) It's a bit of a niche topic, I know, but it's an interesting aspect to explore. What do you do when there is no internet where the stuff you've built is deployed.

[nclsDesign]

This video landed on my feed at the exact right moment. I need a map for my school project and didn't want to use Mapbox again but was planning on using Leaflet. Now I changed my mind

[loicleray]

He’s done it again! Thanks for your work CJ, tremendously helpful. 👌

[Danielo]

This information is genuinely hard to find. Thanks for putting this all together. It feels like there was just one alternative to proprietary monopolies

[maxgarcia]

Nice video! I learnt a lot!
It would be cool to make the next video about how to serve your own data layers and style it on top of the map ;)

For example, if you have 100K elements to display, how to run supercluster, store clusters in your server, and then run an {z}/{x}/{y} endpoint to serve that data
Cheers

[lolmos]

CJ thanks for the great info! Loved the Hono stuff too!

[lucasbug]

Awesome overview of map libraries and useful info on costs for using Google, etc. Well done.

[arvi]

CJ you're my favorite! Great content. Thanks so much. 🔥

[restpointar]

Amazing! I’m currently working on a website for a Food Truck Business. I think this will be useful for a feature I’m planning to include in the Homepage. Thanks a lot CJ!

[play-good]

bro this is literally what im looking for in my current project, im using leaflet
Thx u man 4real♥

[alazyartist]

ive been lookin for exactly this for over a year now. TY!

[hugodsa]

Just like Wes said last time, CJ goes deep. He doesn’t just skim over the surface. Ans bless him for that. ✌🏼✌🏼

[gabrielburgos]

Ultra informative, ultra dense, ultra useful, and ultra passionate,

[kristiang.lazartebsit-tc]

i only found this video after the final checking of my project but i did use the leaflet js

[registro_pedagogico]

Please enable automatic translation of your videos (already available on YouTube) on your channel because I love watching and listening to your videos in Spanish. Greetings from Latin America.