Comments (5)
Hi, little late to the party, but if you still wanna use it in React, it can be used like this. (Working on my NextJS 14.x and react-leaflet 4.2.1)
You can install it npmjs.com or copy it from this repo.
"use client";
import { MapContainer, GeoJSON, useMap } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-active-area";
const MapContent = () => {
const map = useMap();
useEffect(() => {
map?.setActiveArea("activeArea", true, true);
}, [map]);
return (
<GeoJSON />
);
};
export default function Map() {
return (
<MapContainer>
<MapContent />
</MapContainer>
);
}
leaflet-active-area
will render empty <div class="activeArea"></div>
so you can somewhere in css define .activeArea
class like this (I will use tailwind here)
@layer components {
.activeArea {
@apply absolute top-0 bottom-32 right-0 left-0 border border-primary;
}
}
I tore apart this example from my complex code, so thiswill not work by copy/paste, I think.
from leaflet-active-area.
Hello,
That’s a good idea indeed.
However, we do not have any plan to integrate leaflet-active-area
with react-leaflet
in a near future.
Regards
from leaflet-active-area.
Hi @benistary this was a great solution! I am having a little trouble as a beginner... did you also struggle with the error:
`Cannot read properties of null (reading 'getBounds')
TypeError: Cannot read properties of null (reading 'getBounds')
at NewClass._onZoomEnd (http://localhost:3004/static/js/bundle.js:23342:40) ... and four more?
something is obviously going on when I added this function, but I am clueless and nooby as to what this means/where to start triaging.
from leaflet-active-area.
@benistary As I try to figure it out, could you maybe say a word about why the MapContent is needed here? is there a way to do it simply on MapContainer?
from leaflet-active-area.
It is because you can use useMap() hook only inside MapContainer's context. So it has to be used directly inside some child component. Then you have access to map instance, like it is in my example.
Sorry, but I do not know why you have got error mentioned in your first question. But let us know please if you will resolve it. :)
from leaflet-active-area.
Related Issues (20)
- Doesn't work with Google Maps HOT 3
- Error on zoom HOT 3
- Zoom causes flicker when using Leaflet 1.0.0-rc.1 HOT 1
- Update the NPM version compatible with Leaflet 0.7.7 and document it HOT 2
- Leaflet-active-area doesn't work well with CartoDB's Torque layer HOT 1
- Redraw map after setActiveArea() HOT 15
- Add release tags HOT 2
- Does it support leaflet 1.2.0? HOT 1
- npm install defaults to 0.0.1 HOT 2
- Does not work with flyTo() HOT 9
- What is the preferred way to reset the map view HOT 7
- Maximum call stack size exceeded with "maxNativeZoom" HOT 7
- Problem with autoPan when popups open HOT 1
- Getting original map bounds
- Causing problems with L.esri.imageMapLayer / L.ImageOverlay HOT 1
- Not an issue but a question HOT 4
- Yarn release
- Compatibility with native Leaflet fitBounds() or flyToBounds() HOT 1
- Typescript support HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from leaflet-active-area.