How to develop responsive layer container in Leaflet? - reactjs

Question

I'm using leaflet.js to develop a drawing layer tool with the full-page map. Users will draw a group of layers to describe an industrial product's parts.
The leaflet map and its layers should be fit to screen. For example, if a user draws a circle to the left bottom corner with 1920x1080 resolution pc, I should see it in the left bottom corner with my 1366x768 resolution pc. The leaflet map is resizing with the page correctly but the circle is being out of the screen in my pc because of its latitude-longitude in this example.
I tried to develop this example with invalidateSize, maxBounds, fitBounds, etc. but haven't succeeded yet. How can I develop this scenario?
Saved GeoJSON from 1920x1080 with layers looking:
Loaded same GeoJSON from 1366x768 looking (attention to left corner):
Map (React):
const corner1 = L.latLng(-180, -180);
const corner2 = L.latLng(180, 180);
const bounds = L.latLngBounds(corner1, corner2);
<Map
ref={map => {
this.tryToCreate(map);
}}
className="c-leaflet-map-map"
center={[0, 0]}
zoom={0}
maxZoom={10}
zoomControl={false}
onzoomend={this.zoomLevelsChange}
maxBounds={bounds}
maxBoundsViscosity={1.0}
zoomSnap={0}
crs={L.CRS.Simple}
>
<ImageOverlay
bounds={map.backgroundImageBounds || map.bounds}
attribution="&copy TofnaTech"
url={
map.backgroundImage ||
map.backgroundImageURL ||
TransparentImage
}
opacity={map.opacity}
className={cn({ transparentImage: !map.backgroundImage })}
/>
<FeatureGroup
ref={controller => {
this.controller = controller;
this.tryToCreate();
}}
>
<EditControl
position="topleft"
onCreated={this._onCreated}
onEditStart={this.onEditStart}
onEditStop={this.onEditStop}
onEdited={this.onEdited}
draw={{
polyline: false,
polygon: {
shapeOptions: { ...defaultShapeOptions }
},
rectangle: {
shapeOptions: { ...defaultShapeOptions }
},
circle: {
shapeOptions: { ...defaultShapeOptions }
},
marker: false,
circlemarker: false
}}
edit={{
remove: false
}}
/></Map>

Answer 1

Using React-Leaflet is a little different. You can accomplish what you're trying to do in componentDidMount, where you can make a reference to your map and then call fitBounds on that.
Edit: Adding the rectangle
However, the next issue is resolution. Leaflet will maintain the aspect ratio so you actually need to render your circle (or rectangle)in the corner dynamically if you always want it to show up in the bottom left corner of the screen regardless of the aspect ratio of the screen and browser. So in componentDidMount, just after you set the new bounds, you can get those bounds, and define a rectangle (or anything) to always render in the same spot relative to say, the getBounds()._southWest bound. In this code I wrapped this code in a setTimeout because the animation takes a moment and that moment needs to pass to get the new bounds values from getBounds(). I'm sure there's a way to reduce or remove that animation time.
To keep the rectangle in the same spot, I wrote a onMove function for the map to always recalculate the position regardless of moving the map around or resizing the window.
Note that the size of the rectangle is a little slapdash in this example, but I think you'll have an easier time getting a consistent size using CRS, as CRS is a lot more uniform than lats and lngs.
class Map extends React.Component {
state = {
rectCoords: null
};
componentDidMount() {
const map = this.mapReference.leafletElement;
window.map = map;
console.log("Initiates with bounds:", map.getBounds());
map.fitBounds([[32.852169, -90.5322], [33.852169, -85.5322]]);
setTimeout(() => {
console.log("Bounds immediately reset to", map.getBounds());
const rectCoords = [
[
map.getBounds()._southWest.lat + 0.1,
map.getBounds()._southWest.lng + 0.1
],
[
map.getBounds()._southWest.lat + 1,
map.getBounds()._southWest.lng + 1
]
];
this.setState({ rectCoords });
}, 500);
}
onMapmove = () => {
const map = this.mapReference.leafletElement;
const rectCoords = [
[
map.getBounds()._southWest.lat + 0.1,
map.getBounds()._southWest.lng + 0.1
],
[map.getBounds()._southWest.lat + 1, map.getBounds()._southWest.lng + 1]
];
this.setState({ rectCoords });
}
render() {
return (
<LeafletMap
ref={mapReference => this.mapReference = mapReference}
zoom={4}
center={[33.852169, -100.5322]}
onMove={() => this.onMapmove() } >
<TileLayer ... />
{this.state.rectCoords && (
<Rectangle
bounds={this.state.rectCoords}
color={"#ff7800"}
weight={1}
/>
)}
</LeafletMap>
);
}
}
So even though the map initiates with certain bounds, it immediately fits it to your desired bounds, and renders the rectangle always in the bottom left corner in the same spot.
Here is a working codesandbox. I'm sure this can be adapted to using CRS Simple as well.