score:4
here is the same approach without hooks:
the provider should look like this:
class provider extends component {
state = { map: null };
setmap = map => {
this.setstate({ map });
};
render() {
return (
<context.provider value={{ map: this.state.map, setmap: this.setmap }}>
{this.props.children}
</context.provider>
);
}
}
leaflet component will be:
class leaflet extends component {
mapref = createref(null);
componentdidmount() {
const map = this.mapref.current.leafletelement;
this.props.setmap(map);
}
render() {
return (
<map
style={{ width: "80vw", height: "60vh" }}
ref={this.mapref}
center={[50.63, 13.047]}
zoom={13}
zoomcontrol={false}
minzoom={3}
maxzoom={18}
>
<tilelayer
attribution='&copy <a href="http://osm.org/copyright">openstreetmap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?"
/>
</map>
);
}
}
and now to access the setmap function to the compoenntdidmount you need to do the following:
export default props => (
<context.consumer>
{({ setmap }) => <leaflet {...props} setmap={setmap} />}
</context.consumer>
);
for the rest take a look here: demo
score:2
i am not sure how to achieve that using your approach where react-leaflet's wrapper zoomcontrol is not a child of map wrapper when you try to place it outside the map wrapper.
however, for a small control like the zoomcontrol, an easy solution would be to create a custom zoom component, identical to the original, construct it easily using the native css style and after accessing the map element, invoke the zoom in and out methods respectively.
in the below example i use react-context to save the map element after the map loads:
useeffect(() => {
const map = mapref.current.leafletelement;
setmap(map);
}, [mapref, setmap]);
and then here use the map reference to make a custom zoom component identical to the native (for css see the demo):
const zoom = () => {
const { map } = usecontext(context);
const zoomin = e => {
e.preventdefault();
map.setzoom(map.getzoom() + 1);
};
const zoomout = e => {
e.preventdefault();
map.setzoom(map.getzoom() - 1);
};
return (
<div classname="leaflet-bar">
<a
classname="leaflet-control-zoom-in"
href="/"
title="zoom in"
role="button"
aria-label="zoom in"
onclick={zoomin}
>
+
</a>
<a
classname="leaflet-control-zoom-out"
href="/"
title="zoom out"
role="button"
aria-label="zoom out"
onclick={zoomout}
>
−
</a>
</div>
);
};
and then place it wherever you like:
const app = () => {
return (
<provider>
<div style={{ display: "flex", flexdirection: "row" }}>
<leaflet />
<zoom />
</div>
</provider>
);
};
Source: stackoverflow.com
Related Query
- Remove Zoom control from map in react-leaflet
- remove circles from google map react
- React Leaflet: Get objects from MongoDB to Leaflet map as markers (using node.js and express)
- Using React state, how can I remove markers from a Google map before adding new ones?
- How to update leaflet map with `getDerivedStateFromProps` from React 16.3?
- How to change map zoom dynamically when clicking on a marker in react leaflet v.3.x?
- Location me in map from React Leaflet
- How can I remove an attribute from a React component's state object
- Render Content Dynamically from an array map function in React Native
- How can I remove unused imports/declarations from the entire project of React Typescript?
- React JS: how to properly remove an item from this.state.data where data is an array of objects
- Unload / Release / Remove React Native View from runtime
- Leaflet React get map instance in functional component
- Remove expo from react native
- Remove white spaces from both ends of a string inside a form - React
- Remove caret from semantic-ui react dropdown menu
- React hooks - remove from react-router location state when we refresh page
- Remove last route from react navigation stack
- Remove .html extension from a url for a website built using React and Webpack
- How to remove storybook from the react project
- How can I get the current Leaflet map zoom level?
- Remove query from cache without refetching react query
- Correct way to remove key from react state
- React Native: How to stop map markers from re-rendering on every state update
- Remove margin from body in React
- How do I get acces to only one item from map method in react js
- Does React remove the node with display:none from DOM?
- How to remove caret from dropdown nav item in React Bootstrap
- Remove a prop from cloned React component
- Fixing typescript warnings when inferring react props types from map of string=>type
More Query from same tag
- How to add user's name as well as Id to users field in a chat?
- NextJS images - reload gif onClick
- JSX not being rendered
- typescript+reactjs+ requirejs: how to import react-dom into typescript
- can i override a method defined in node_modules file?
- Sending streams as response of a axios request
- How to embed an Exit Button inside a Mapbox-GL Static Map Component with a Deck-GL Layer in it
- Detecting a refresh event in react
- Need to add a number of variables dynamically after user clicks on Add button
- Rendering DB entry in Expo
- How can I make this nav bar thinner and the background color transparent
- React useContext cannot make simple counter work
- Array does not update after it is set to update (React)
- Sparklines charts coming up different sizes?
- react draggable window off the screen in Full Screen mode
- Using a function inside a map on a map attribute
- Want to set a state object within a for loop: React+Typescript
- How to implement a dynamic reducer creator for API service call in React with Redux project?
- How do I format ReactJs date picker to look normal?
- How do I use in-memory cache in Remix.run dev mode?
- How to get the raw value of an antd form field using antd-mask-input library?
- Click a material-ui radio button in a jest test and see it's effect
- Passing Data from one Functional Component to another
- How to update array within state object with react/redux
- UnhandledPromiseRejectionWarning error when accessing Faker images?
- How do I define a TypeScript interface for an empty array?
- format date as long inside reactjs component
- React Rails Passing props to React Select
- React Admin Tutorial by Marmelab not working
- how do you preload background img with react?