Can someone help me with fixing the positioning of the Popup to the left of the map? Currently, it does not stay aligned to the left edge when moving the map.
I tried using position: fixed in my styling, and while everything looks good when zooming, it breaks when the map is moved. Here is the code for my Map component:
<MapContainer zoom={this.state.zoom} center={center} zoomControl={false}>
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url={"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"}
/>
{this.state.geoJsonIsVisibleAll[0].geoJsonIsVisible &&
<ChuyGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
}
{this.state.geoJsonIsVisibleAll[1].geoJsonIsVisible &&
<TalasGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
}
{this.state.geoJsonIsVisibleAll[2].geoJsonIsVisible &&
<OshGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
}
{this.state.geoJsonIsVisibleAll[3].geoJsonIsVisible &&
<BatkenGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
}
{this.state.geoJsonIsVisibleAll[4].geoJsonIsVisible &&
<JalalAbadGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
}
{this.state.geoJsonIsVisibleAll[5].geoJsonIsVisible &&
<NarynGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
}
{this.state.geoJsonIsVisibleAll[6].geoJsonIsVisible &&
<IssykKolGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
}
</MapContainer>
And here is the code for the popup:
<Marker
key={f.properties.id}
position={f.geometry.coordinate.reverse()}
>
<Popup
maxWidth={250}
maxHeight={650}
closeButton={true}
className={'popup-fixed'}
autoPan={false}>
<div className="popup-info">
<p><span>Name: </span>{f.properties.name}</p>
<p><span>Location: </span>{f.properties.location}</p>
<p><span>Description: </span>{f.properties.description}</p>
</div>
</Popup>
</Marker>
Here are the styles I am using:
.leaflet-container {
height: 70vh;
width: 60vw;
position: absolute;
right: 20%;
top: 15%;
}
.popup-fixed {
position: fixed;
top: 0;
left: 1% !important;
transform: none !important;
margin: 0;
border-radius: 0;
}
Image showing the problem: