Load Places from GraphQL

[ofostier]

Hello Richard, And thanks a lot for this project. It is the one I need and prefer. I'm trying to learn how to build more complex react project today and try to understand where I can put in place a GraphQL request to load Places data corresponding in the exact shape of the map.

so 2 questions, 1 - Where is the best place to inject graphql queries and how to correctly pass the result to Markers components 2 - How to retrieve the coordinates of the top-left and the bottom-right corners for the GraphQL query

Thanks

[richard-unterberg]

hey @ofostier - thank you! that's always interesting how to integrate a api in the application and depends heavily on what you wanna do. the example template only features displaying static markers on the map (at the moment I'm writing this).

assuming you wanna refetch markers provided for a specific view state - (bounding box of what the user sees on the map). this would make it handy to place a state based query directly to the map, where we have already access the <LeafleftMapContextProvider>, there we could then watch for the moveend event and transform it to a view state you could use to build a custom query.

this could look like this https://github.com/richard-unterberg/leaflet-nextjs-ts-starter/commit/0ac904d36aa8d94a0e3755d61d43933941036c15

But; If not covered within your graph-ql backend the "big" deal with this approach is the transformation from this view state to your markers - for this you will need some middleware, which can determine which of your markers are in the bounding box. I would use api routes and turf.js for calculation.

I would also suggest to not call any api rest/graphql directly from your frontend, especially if you have the opportunity of using ssr. because then we could use the route/api handlers provided by next.js.

Hope this helps. Looking forward to your feedback.

[ofostier]

Wow ! Thanks for your quick answer. This was my approach but for testing, I created a sad component to handle a useMapEvents and place this component inside the <LeafletMapContainer><MyComponent></<LeafletMapContainer>

MyComponent can detect MoveEnd , retrieve Bounds and pass them to my query builder (gql, apollo, etc.)

When I look the code you shared with me, I realize that the moveEnd event was already accessible (my bad ...) and if I applied this modification in my code it doesn't works because I lost the MapContext somewhere and I don't understand why (for example the coords are not refresh in the topbar when I move the map, because of that)

but whatever, I have restarted a part from scratch with a clean code and then it WORKS perfectly.

So, now I can load dozen of markers and play with cluster. It is not so easy to manage hundreds markers in the same coords and find the right design/ux

Again, thanks a lot and please don't delete your https://github.com/richard-unterberg/leaflet-nextjs-ts-starter/commit/0ac904d36aa8d94a0e3755d61d43933941036c15 piece of code right now :D

[richard-unterberg]

@ofostier glad it works for you.

another general idea is to use a state manager for sharing view states and other properties which then could be distributed everywhere in the application. I often use zustand for the job, as you can observe in this mapgl-counterpart to this repo: https://github.com/richard-unterberg/maplibre-nextjs-ts-starter

[ofostier]

Thans for this sharing. It is now what I need :) Because I want to share data throught map and a card list reflecting the map I will take a look right now