Fork me on GitHub
#react
<
2021-04-27
>
fsd18:04:33

Hi there, I am working with react-map-gl using #helix wrapper. I have cards on the left side and a map on the right. When I hover on the card, I want the map layer icon to change so that it can indicate to the user where the item is located on the map. I am facing this issue where my icons are not being refreshed when I hover on the cards, I have to go back to the map and click on the it order for the icon changes to take place. Please see the gif attached

($ Source {:id "place" :type "geojson" :data  (clj->js {:type "FeatureCollection"
                          :features  [ { :geometry  {:type "Point" :coordinates [(:Longitude place),(:Latitude place)]}
                                         :properties 
                                                    {:title (:Name place) :marker-symbol (if (= placeId (int (get-item local-storage "placeToBeHighLighted"))) "HOVERED_SVG" "PLACE_SVG"  ) :marker-type "place"

}}]})}
                                                  
                ($ Layer {:type "symbol"
                          :layout #js {
                          :icon-image "{marker-symbol}"
                          :text-field (:Name place)
                          :paint #js {
                          :text-color "#000"
                          :text-halo-width 5}})))

lilactown20:04:01

are you storing the placeToBeHighlighted in local storage?