Nuxt•4mo ago

Selecting map library

I have a project where i need integration of a map with custom points and polygons. All data is stored in postgres and PostGIS(supabase) with some extra data like titles and layer. What is your preferred map solution. Is see both maplibre and mapbox have modules but im not sure which too choose. I do need popups for both points and polygons and to be able to toggle layers but I assume both would support that. Any other options? For now i fetch data as GeoJson but that is easily changed

8 Replies

kapa.ai•4mo ago

Hi @isakwang. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources provided do not contain enough information to recommend a specific map library (such as MapLibre, Mapbox, or alternatives) for use with Nuxt, nor do they compare their features or integration options. The sources do mention issues and solutions related to using Leaflet (via vue-leaflet) in Nuxt 3, including handling PNG tiles and build configuration, but do not discuss MapLibre, Mapbox, or their Nuxt modules, nor do they provide a feature comparison or best practices for your use case involving custom points, polygons, popups, and layer toggling. If you need guidance specifically on integrating Leaflet with Nuxt, there is information about resolving build errors by adding leaflet and @vue-leaflet/vue-leaflet to the transpile array in your nuxt.config.js, which may be helpful if you consider Leaflet as an option for your project:

export default defineNuxtConfig({
  build: {
    transpile: ['leaflet', '@vue-leaflet/vue-leaflet'],
  }
})

export default defineNuxtConfig({
  build: {
    transpile: ['leaflet', '@vue-leaflet/vue-leaflet'],
  }
})

vue-Leaflet (Nuxt) produce error Unexpected character '�' when using PNG tiles However, for MapLibre, Mapbox, or a direct comparison and recommendation, the knowledge sources do not provide relevant details. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@234270188906741761> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

isakwangOP•4mo ago

Being able to overlay SVG or PNG on the map could be a future feature so is a plus too i have a test built in nextJS that I started as a way to learn it, but I know nuxt/vue better so im jumping ship on that. I also have a project spec with some more insight demo: https://stilla-web.vercel.app/map

DonJonko•4mo ago

Hey bro! I use maplibre, as its free and open source and mapbox will get expansive when you scale

DonJonko•4mo ago

Maplibre is just the JS tho, you’ll also need maptiles. I recommend https://openfreemap.org for free tiles (throw them a bit of money in the donations if you end up with this 💚)

OpenFreeMap

OpenFreeMap – Open-Source Map Hosting lets you display custom maps on your website and apps for free.

DonJonko•4mo ago

Maplibre features and stuff is all great

isakwangOP•4mo ago

Im going with maplibre then. Thanks

dmarr•4mo ago

I have a fork of the nuxt module that illustrates how to use it a bit better. dm.nuxt.space/nuxt-maplibre I just published an updated css feature you can clone the repo and mess around The demo has various provider integrations and a vector tile inspector (doens't work on google map tiles yet).

Gaming

Programming

Selecting map library

Did you find this page helpful?