All Questions
32
questions
0
votes
0
answers
12
views
how to push React Leaflet's attribution and map controls to the back [duplicate]
what i'm trying to do
the user sees a map, built in React Leaflet / Leaflet.JS. The user can then click a CTA button that pops up a modal. The modal should be the "top layer" of the screen, ...
- 174
0
votes
1
answer
115
views
React Leaflet Material UI divIcon not styled
In React Leaflet, I am trying to use divIcon to render a custom Material UI marker that takes in a background color prop. However, when the marker is used in leaflet, the background style is not ...
- 51
0
votes
0
answers
13
views
How to dynamically resize Leaflet CRS.Simple map based on viewport while maintaining standardized coordinates? [duplicate]
I'm using Leaflet to render a static image as a map. For the sake of example, let's say the image is 700px x 700px.
To create the map, I do the following:
map.current = L.map("map", {
...
- 43
0
votes
1
answer
276
views
Leaflet rendering issue - map overflows
I have created a repo to reproduce the issue. I use Leaflet in React.js. The issue is that Leaflet map overflows in a mobile view and Navbar is not visible. It happens only when user logs in and is ...
- 8,753
0
votes
1
answer
244
views
Rotating and scaling an image to match reference points on a map in Leaflet
I'm implementing a feature where users can overlay an image onto a map. The idea is for users to select two reference points on the map and two on the image (but using map coordinates i receive). ...
- 29
0
votes
0
answers
130
views
React-leaflet with animated ImageOverlay misbehaving on zoom/pan actions
I'm attempting to use react-leaflet and ImageOverlay with CSS animation to create the appearance of clouds floating over the base image.
At the default zoom level, all is good. The animation works, ...
- 533
0
votes
1
answer
156
views
How can I add a switch to leaflet map react?
There is a problem with customizing a button and put it at top right of a Map Container.
here is my reactjs code for Map box.
<MapContainer style={{width:"32vw", height:"32vh&...
- 25
0
votes
1
answer
178
views
Fixing Popup Leaflet on the left side
I need to fix the Popup to the left of the map, but when moving the map, the Popup does not adhere to the left edge
I entered position: fixed in styling and everything is fine when zooming, but when ...
0
votes
1
answer
329
views
add div to map leaflet reactjs
Good morning
I would like to add a block div on my leaflet card with text in the div Reactjs.
but it does not show on the map. It is displayed under the map, I tried with z-index but I did not ...
- 13
0
votes
0
answers
369
views
Marker position on the map Leaflet
I have a custom map created using the Leaflet library. And also the Marker component. When I place a marker with a value of 100 on the Y-axis, the marker is at the top of the map, but when I place a ...
- 35
2
votes
2
answers
2k
views
Fit the map view of an Image Overlay to the size of the container Leaflet
I am using React Leaflet to create a custom map.
The card (Image Overlay) is currently being rendered, but it does not fill the container in which the card is placed.
The size of the container is set ...
- 35
2
votes
0
answers
736
views
how to apply different styles to react leaftlet map based on state
I want to apply these certain styles to my react leaflet map when the user clicks a button to signal that they want a dark themed map or a light themed one but I am not entirely sure how to go about ...
- 422
0
votes
2
answers
950
views
Changing react-leaflet map width with button click
I am working on a map with react-leaflet. I placed a button on the map that will ideally open a menu on the left side of the map. The way I want to open up the menu is by changing the width of the map ...
0
votes
1
answer
64
views
Why does when I click on the map I get the map bigger using Chrome?
I am working with leaflet and when I click on the map, the map is bigger with the Chrome browser I don't know why.
Here is my code :
import "./styles.css";
import { MapContainer, TileLayer, ...
- 1
0
votes
1
answer
502
views
How can I do to avoid to make hidden the navbar?
I am working on a project using React, Leaflet, and Tailwind, and I have the following problem:
This is a preview of my project:
My project
But when I click on the map I get this:
My problem
I don't ...
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 ...
- 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={...
- 197
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",
...
- 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 ...
- 65
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 ...
- 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 ...
- 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 ...
- 592
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,...
- 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/...
- 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 ...
- 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 ...
- 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 ...
user11936976
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 ...
- 156
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 ...
- 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 ...
- 1,168
21
votes
7
answers
41k
views
How to include "leaflet.css" in a React app with webpack?
I using the survivejs.com site as a template to build a map based React app with webpack. For the map i am using leaflet but i can't find a way to add the leaflet.css. Without this the map tiles are ...
- 691
91
votes
19
answers
85k
views
react-leaflet map not correctly displayed
I'm trying to use react-leaflet to display a map. I use the code from this fiddle which is working, but on my computer I have this output
Here is my code :
DeviceMap.js
import React from 'react'
...
- 11.8k