Closed cezarneaga closed 7 years ago
Example will work even with dynamic data, just get the state not from withState
https://github.com/istarkov/google-map-clustering-example/blob/master/src/GMap.js#L56-L60
but from redux (connect)
or any other source
To be clear - everywhere in the source I assume that markers can be changed, like https://github.com/istarkov/google-map-clustering-example/blob/master/src/GMap.js#L89-L91
i do not use redux on this. i guess this is my question: how do i get state into GMap.js from App.js? do I need withState instances:
withState(
'markers',
'setMarkers',
markersData
),
withState(
'hoveredMarkerId',
'setHoveredMarkerId',
-1
),
withState(
'mapProps',
'setMapProps',
{
center: { lat: 46.2, lng: 24 },
zoom: 7,
}
),
should they be withProps? please if you have time, give me a quick example Thanks, C
Have you tried just to start write your code? It's 10x faster just to try pass markers as a property and remove or not withState to check what you will get vs writing a question. Also recompose have a good documentation about it's enhancers ;-) It's simple code, just start writing and all will be fine ;-)
:)
@istarkov, i tried. i wouldnt have written otherwise.
i used react-google-maps
and i displayed clusters there but that package doesnt handle redrawing of markers on state changes. this is how i got to your package. only mentioning this to say that i started... :)
C
please explain just how i could get the markers( from props.markers) into the compose function
Just remove withState('markers'
and pass markers as a property to GMap
https://github.com/istarkov/google-map-clustering-example/blob/master/src/Layout.js#L23 like
<GMap markers={yourMarkers}
.
Be sure that all such properties u use in immutable manner, so if any marker has changed, reference to array of markers must also be changed.
Otherwise withPropsOnChange
with cluster creating logic will not be called.
that i already did. i can see them in React Dev Tools. i get this
warning.js:36 Warning: flattenChildren(...): Encountered two children with the same key, `.$1_242`. Child keys must be unique; when two children share a key, only the first child will be used.
in div (created by GoogleMapMarkers)
It seems that you have markers with duplicate id's. As current source uses id's as key for react elements in array https://github.com/istarkov/google-map-clustering-example/blob/master/src/GMap.js#L33-L34
React doc's about keys https://facebook.github.io/react/docs/reconciliation.html#keys
checked that. its not. id's are unique generated with math.random eg: "50d84f0e1e601"
i think id: ${numPoints}_${points[0].id}
might be the culprit
It might not, as points in every cluster are different, so taking an id of a first point in each cluster will give unique id's for clusters too
thanks @istarkov. will come back to this another day and keep trying.
Hi there,
in the clustering example you are using data from a static file. i don't have experience with recompose unfortunately and i got stuck.
i have a use case where i want to load the GMap.js inside App.js. App holds the state and the markersData would be in the state. how can i load this into GMap.js as props and then if state changes clusters change with it? thanks Cezar