FREE maps for any app - replace Google maps TODAY

[@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.

[@hugodsa89]

I was coming here to say this. You beat me to it 👍🏼👍🏼

[@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.

[@lolmos]

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

[@pavelk7373]

unbelievably good content 👍

[@loicleray]

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

[@arvi8843]

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

[@Danielo515]

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

[@alazyartist]

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

[@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♥

[@hugodsa89]

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

[@maxgarcia4547]

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

[@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.

[@kissu_io]

Very amazing video CJ, thanks!💖

[@lucasbug4987]

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

[@slimanbaghouri4287]

Another banger

[@nitely9089]

CJ you're the GOAT

[@smartini123]

Versatiles also looks like a promising tiles server alternative

[@malaq119]

informative thanks man

[@_waptik]

Thanks for this ❤

[@JosprimaSihombing]

Thankyou CJ

[@JacquesvanWyk]

Amazing thanks!!

[@aldialfarnando6813]

thank you Gabriel

[@zahid8566]

make a tutorial on that mustache man!

[@gold-junge91]

CJ i love your videos,you are explain evertime well explained. Can you mac a video how make a cookie banner and make sure that keep can opt in for german DSGVO

[@Sitruc-reloaded]

Are you using a custom dev tools extension or is this the default on your browser? This looks a lot nicer than brave/arc/chrome

[@MeghdipKarmakar]

it's firefox

[@brancode404]

How about integrating the open street map with React Native? 😊

[@serychristianrenaud]

I like this chanel ...🎉

[@phantazzor]

any free or cheeper api for fetch coordinates of businesses ? something to replace Places Api ( google) ? Bing from Microsoft is not accessible anymore for new app they don't hand api keys anymore

[@syntaxfm]

mapbox search box API offers 50K requests per month free - www.mapbox.com/search-box | www.mapbox.com/pricing

[@coherentpanda7115]

We searched last Summer for an alternative to Places API, and there just isn't anything comparable. We since had an executive decision to have the content teams manually add locations in the CMS, but personally I would have stuck with Google. Despite the costs associated with it, Google has the most complete API out there, and superior maps.

[@syntaxfm]

Another comment mentioned overture maps, it is not an API, but a collaborative data source that includes places info overturemaps.org/

[@phantazzor]

@@coherentpanda7115 yes thanks, yes im building for an island so it is not that big so at some point all the coordinates will be all in the db :)

[@nilsandresen97]

Overturemaps is pretty nice but still very new and not as good as google maps but it will probably get better over time.

[@basketberoende]

Very nice example! I am building a application right now where i was using MapBox. I gonna try this as well. Do you have any recommendations on a free suggestions address api?

[@syntaxfm]

Nominatim is one - nominatim.org/ Photo is another - photon.komoot.io/ Mapbox offers 50K free requests per month - docs.mapbox.com/api/search/search-box/

[@agammore]

What about address to coordinate? Any good free option?

[@alvingultiano7513]

Its capable to return a payload of location , like street , city and etc ?

[@marhensa]

better yet, there's serverless vector/raster map called "pmtiles", you could serve vector/raster just like images.

[@vsChris]

Can you use your own Map svg file as a base?

[@syntaxfm]

You can overlay an svg onto the map with maplibre-gl-svg - rbrundritt.github.io/maplibre-gl-svg/index.html

[@zlackbiro]

I use Leaflet Maps alone in my react dash and I don't give a damn what's going one behind the scene. Its free

[@syntaxfm]

If you are using the default leaflet example with the openstreetmap tile server, there are usage constraints. I talk about this at 9:15 - also, with OSM tiles, you do not have options to style the map - I talk about this at 11:37

[@DavideMaiolo]

Also also Leaflet renders DOM elements, which is fine for most applications. But when you have a couple of hundred markers with different layers the performance suffers alot. Thats when the native WebGl elements that are used by Maplibre really shine.

[@electroheadfx]

thank you

[@reenuux]

Super

[@AbouAnia]

Why does Zillow use Google maps? Open door usesabox…? Etc

[@syntaxfm]

Yes Zillow uses google maps.

[@Joshua-dc4un]

Frontend frameworks left map libraries and users in the dust

[@codernerd7076]

I use it for Google places 😢

[@bilalillahi6347]

can we use this to share location. for example show multiple location pinpoints on map of different users? the above video just gives one pin point which is self

[@marked75]

Google Maps is free :/

[@brysona-dev]

Thank you