FREE maps for any app - replace Google maps TODAY

แชร์
ฝัง
  • เผยแพร่เมื่อ 7 ม.ค. 2025

ความคิดเห็น • 69

  • @syntaxfm
    @syntaxfm  2 หลายเดือนก่อน +11

    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
    @JacquesvanWyk 2 หลายเดือนก่อน +38

    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
      @hugodsa89 2 หลายเดือนก่อน +1

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

  • @narixius
    @narixius 2 หลายเดือนก่อน +12

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

  • @dan-garden
    @dan-garden 2 หลายเดือนก่อน +7

    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.

  • @pavelk7373
    @pavelk7373 2 หลายเดือนก่อน +11

    unbelievably good content 👍

  • @lolmos
    @lolmos 2 หลายเดือนก่อน +1

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

  • @loicleray
    @loicleray 2 หลายเดือนก่อน +2

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

  • @arvi8843
    @arvi8843 2 หลายเดือนก่อน +2

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

  • @Danielo515
    @Danielo515 2 หลายเดือนก่อน

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

  • @maxgarcia4547
    @maxgarcia4547 2 หลายเดือนก่อน +4

    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
    @nalux 2 หลายเดือนก่อน

    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.

  • @restpointar
    @restpointar 2 หลายเดือนก่อน

    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!

  • @alazyartist
    @alazyartist 2 หลายเดือนก่อน

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

  • @hugodsa89
    @hugodsa89 2 หลายเดือนก่อน

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

  • @lucasbug4987
    @lucasbug4987 2 หลายเดือนก่อน +4

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

  • @play-good
    @play-good 2 หลายเดือนก่อน

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

  • @kissu_io
    @kissu_io 2 หลายเดือนก่อน

    Very amazing video CJ, thanks!💖

  • @slimanbaghouri4287
    @slimanbaghouri4287 2 หลายเดือนก่อน +7

    Another banger

  • @brancode404
    @brancode404 2 หลายเดือนก่อน

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

  • @Sitruc-reloaded
    @Sitruc-reloaded 2 หลายเดือนก่อน +2

    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

  • @nitely9089
    @nitely9089 2 หลายเดือนก่อน

    CJ you're the GOAT

  • @smartini123
    @smartini123 2 หลายเดือนก่อน

    Versatiles also looks like a promising tiles server alternative

  • @basketberoende
    @basketberoende 2 หลายเดือนก่อน

    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
      @syntaxfm  2 หลายเดือนก่อน

      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/

  • @alvingultiano7513
    @alvingultiano7513 2 หลายเดือนก่อน

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

  • @agammore
    @agammore 2 หลายเดือนก่อน

    What about address to coordinate? Any good free option?

  • @phantazzor
    @phantazzor 2 หลายเดือนก่อน +3

    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
      @syntaxfm  2 หลายเดือนก่อน +1

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

    • @coherentpanda7115
      @coherentpanda7115 2 หลายเดือนก่อน +1

      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
      @syntaxfm  2 หลายเดือนก่อน +4

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

    • @phantazzor
      @phantazzor 2 หลายเดือนก่อน

      @@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
      @nilsandresen97 2 หลายเดือนก่อน +1

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

  • @gold-junge91
    @gold-junge91 2 หลายเดือนก่อน

    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

  • @_waptik
    @_waptik 2 หลายเดือนก่อน

    Thanks for this ❤

  • @zahid8566
    @zahid8566 หลายเดือนก่อน +1

    make a tutorial on that mustache man!

  • @vsChris
    @vsChris 2 หลายเดือนก่อน

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

    • @syntaxfm
      @syntaxfm  2 หลายเดือนก่อน

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

  • @malaq119
    @malaq119 2 หลายเดือนก่อน

    informative thanks man

  • @marhensa
    @marhensa หลายเดือนก่อน

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

  • @JacquesvanWyk
    @JacquesvanWyk 2 หลายเดือนก่อน

    Amazing thanks!!

  • @zlackbiro
    @zlackbiro 2 หลายเดือนก่อน

    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
      @syntaxfm  2 หลายเดือนก่อน

      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
      @DavideMaiolo 2 หลายเดือนก่อน

      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.

  • @JosprimaSihombing
    @JosprimaSihombing 2 หลายเดือนก่อน

    Thankyou CJ

  • @AbouAnia
    @AbouAnia 2 หลายเดือนก่อน

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

    • @syntaxfm
      @syntaxfm  หลายเดือนก่อน

      Yes Zillow uses google maps.

  • @serychristianrenaud
    @serychristianrenaud 2 หลายเดือนก่อน

    I like this chanel ...🎉

  • @aldialfarnando6813
    @aldialfarnando6813 2 หลายเดือนก่อน

    thank you Gabriel

  • @Joshua-dc4un
    @Joshua-dc4un 2 หลายเดือนก่อน

    Frontend frameworks left map libraries and users in the dust

  • @codernerd7076
    @codernerd7076 2 หลายเดือนก่อน +1

    I use it for Google places 😢

    • @bilalillahi6347
      @bilalillahi6347 2 หลายเดือนก่อน +1

      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

  • @electroheadfx
    @electroheadfx 2 หลายเดือนก่อน

    thank you

  • @reenuux
    @reenuux 2 หลายเดือนก่อน

    Super

  • @marked75
    @marked75 2 หลายเดือนก่อน +1

    Google Maps is free :/

  • @brysona-dev
    @brysona-dev 2 หลายเดือนก่อน

    Thank you