I am trying to hide the markers behind my cluster and only have them show when the marker is clicked. This is how it appears: However when I click the cluster and exit it, it goes back to how it should look (second pic) (This is how I want it to look originally) This is my code: Answer You are
Tag: leaflet
How to call useMap() outside of the file where is NOT called?
I am using react-leaflet. For example I want to set bounds to map outside of the file where <MapContainer> is called. For this I need to use const map = useMap();. How do I connect useMap() with the file where was called? Or to clarify even more.. I want to connect with the map outside of the map file to
Missing data in JSON from API call, gives error
I make an API call to server to fetch data Then I turn the JSON into GeoJSON for Leaflet.js The problem is that every items does not have the values of “openingHours”. This makes the error “undefined” and I can’t retrieve data to display on Leaflet map. How can I go pass or ignore those values or perhaps filter them
Cluster geojson Layer doesn’t work with marker filtering
I’m doing a Leaflet map with some GeoJSON data. I try to add the cluster function to my JS file. As I added some filter and styling features according to properties, I’m unable to find the right way to code the cluster fonction. Here is the GeoJSON layer and the filter verificator: with the syling function: I add then the
Tooltip in leaflet.js flickers so users can’t click on link inside it
I am using bindTool tip to create pop up elements with html and links within them in Custom options I have the following EDIT – There is flickering when the tooltip is hovered over – it appears to be activating mouseover and mouseout at the same time. I am working on this project in a glitch project here / Code
Remove clicked marker Leaflet
I want to create an interactive map in html/js with Leaflet. I have a function that creates markers on click : Now, I want to remove markers when I click on them. However, I cannot find the way to do that. Is there a way to fetch marker id and remove it with a specific method ? Answer You need
How to add a button to run code inside LeafletJS marker?
I am trying to add a button inside a pointer which print a log to the console. This is just meant to be a test, so I can actually make the marker run a method, but I can’t even get it to print text. When I load the page, I immediately get this error: Uncaught (in promise) TypeError: Cannot read
Leaflet : How to create marker labels based on JSON fetched from API
Users are shown points to press. When clicking a point, a menu pops up with text. I’ve been able to set down points, but when I try to retrieve data from my database when clicking a point, it shows does not show the marker specific information. Where did I go wrong? I need the pointers to only show their own
Leaflet Change the circle radius in real time
I would like to change the size of the circle when selecting a value in the dropdown menu. I can change the size of the circle by pressing enter again in the search bar but I want to do it automaticaly when selecting a new value. I thought about emulate the enter key (folowing this : jquery (or pure js)
React Leaflet Bound not working as expected
I’m using react-leaflet package to create bound animation on the map from selected markers as seen on the screenshot below. Here is the full code: https://codesandbox.io/s/react-leaflet-marker-with-bound-869mj The map will be bound if only the selected markers change. I try to implement the bound animation sample code from the documentation here https://react-leaflet.js.org/docs/example-view-bounds/ As we can see from the screenshot above, the