Skip to main content

All Questions

Tagged with
1 vote
0 answers
264 views

React Leaflet Popup does not fit the screen completely

I'm trying to fit the opened tooltip to the frame I set on the screen. I want it to be dynamic according to the framework I put instead of making it static, but I couldn't. Thank you for your help in ...
Yunus's user avatar
  • 143
1 vote
1 answer
178 views

React-Leaflet adding sign on center of map

I add a sign on map that shows the center. <MapContainer fullscreenControl={true} center={center} zoom={18} maxNativeZoom = {22} maxZoom={...
TranceAddict's user avatar
1 vote
1 answer
861 views

Leaflet Center Marker Numbers

Does anyone have an idea how to center numbers inside markers? This is the current situation. Marker with Number Creating a Marker return L.divIcon({ className: "green-icon", ...
aksoco's user avatar
  • 191
2 votes
2 answers
1k views

Adding Title to React Leaflet Map

I have the relatively simple problem of trying to add a title to a leaflet map, similar to the image below. I have seen posts like R: Add title to Leaflet map, but have not been able to find an ...
munkaboo's user avatar
0 votes
1 answer
524 views

Why I cannot set percentage size for my leaflet container? [duplicate]

I am using leaflet with react and I cannot use percentage for height for my leaflet container ... I did that : .leaflet-container { height: 100%; width: 100%; } whereas if I put height: 600px ...
Tom's user avatar
  • 183
0 votes
1 answer
321 views

CSS display problem in mobile version for my map leaflet width just an header and footer

I have a display problem on android or iphone depending on the css commands. Explanation: I am working with React + React leaflet with a header + main + footer in width 100%, all in a parent div body ...
gcbox999's user avatar
  • 171
1 vote
1 answer
1k views

Change css filter property on React-Leaflet TileLayer with useRef

I am trying to change the filter style property on the React-Leaflet TileLayer. Basically, what I want to do is to dim the tile layer without dimming/altering the markers by adjusting the filter style ...
jharris711's user avatar
1 vote
1 answer
4k views

Show popup on hover a layer in react-leaflet

I'm trying to show popup on hover a layer in react leaflet. I use GeoJson to render all layer on map, and use onEachFeature() to show popup on hover a layer. However, when I move my mouse into a layer,...
Nguyen Tu's user avatar
  • 159
0 votes
1 answer
1k views

Leaflet.js Map Not taking up Full Width [React.js]

I have a leaflet.js Map that is not appearing full height inside the div, or full width, even with 100% full height declared in the CSS. The Code and Video is below. https://codesandbox.io/s/...
Owen's user avatar
  • 178
0 votes
1 answer
1k views

React-Leaflet : Adding L.TileLayer breaks map

My goal is to add leaflet-draw to my Map. To do this, I've been using L to add control and drawnItem layers to the map upon component mount. The problem seems to be with the TileLayer. If I add it in ...
BurgMan's user avatar
  • 67
3 votes
4 answers
3k views

leaflet map overlapping the container div

So I went leaflet documentation and copy pasted example I found there to see If can reproduce the map, however, not only the map is broken but it is also overlapping the container it is in. I tried to ...
bihire boris's user avatar
  • 1,630
0 votes
0 answers
65 views

How can I realign this Leaflet map on my page?

I use the Leaflet map to display, on a map, a position given by my user. However, when I load the map and center it on the marker of the user, it is not in the center of my map, but in the top-left ...
user avatar
0 votes
1 answer
271 views

Is there a way to set a modified SVG in runtime as custom icon in leafletjs?

I'm using leaflet js and want to set my customized icon for the marker with different angles. Is there a way to do so in runtime? Previously, I tried "react-Samy-SVG" but that didn't work because in ...
hajbabaeim's user avatar
0 votes
2 answers
2k views

My leaflet map doesn't appear on my webpage [duplicate]

I'm using ReactJS with NextJS. Currently my leaflet fails to fill the whole parent div on my page, in fact it doesn't appear at all. I assumed the map would fill the entire parent div, maybe someone ...
DiaJos's user avatar
  • 11.3k
1 vote
1 answer
2k views

Wrapping react-leaflet Map componet in <div> tag makes it disappear

I am attempting to add a sibling <DeviceControls/> component alongside my <MapContainer/> component. But when when I do so the OpenStreetMap / Leaflet map disappears from the DOM and all ...
currenthandle's user avatar

15 30 50 per page