I'm trying to build my own Zoom button with react-leaflet
I have the following code:
import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { Map, TileLayer } from 'react-leaflet';
import Control from 'react-leaflet-control';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ZoomIn from 'material-ui/svg-icons/action/zoom-in';
import ZoomOut from 'material-ui/svg-icons/action/zoom-out';
class LeafletMap extends React.Component {
constructor(props) {
super(props);
this.state = {
animate: true,
center: [
-34.989610443115,
-71.232476234436
],
zoom: 13,
zoomControl: false
};
}
render() {
return (
<div>
<Map
animate={this.state.animate}
center={this.state.center}
zoom={this.state.zoom}
zoomControl={this.state.zoomControl}
>
<TileLayer
url={'http://{s}.tile.osm.org/{z}/{x}/{y}.png'}
attribution={'© OpenStreetMap'}
/>
<Control position="topleft">
<MuiThemeProvider>
<div>
<div> </div>
<FloatingActionButton mini={true}>
<ZoomIn onClick={ () => alert('Zoom In') } />
</FloatingActionButton>
<div> </div>
<FloatingActionButton mini={true}>
<ZoomOut onClick={ () => alert('Zoom Out') }/>
</FloatingActionButton>
</div>
</MuiThemeProvider>
</Control>
</Map>
</div>
);
}
}
export default LeafletMap;
All this is displaying good way, but now I want to to put a funcion where I can able to do zoom in or out. I don't have an idea how to call leaflet's methods using react-leaflet library.
I've tried many ways to implement it but without success.
Do you have any idea how to implement it?
There are a few ways to handle map functions/actions.
Pass via props
Many options are available via the Map's props(bounds, center, zoom). This way allows you to hold the zoom in your one state/store, instead of in leaflet.
const React = window.React;
const {
Map,
TileLayer,
Marker,
Popup
} = window.ReactLeaflet;
class ZoomInState extends React.Component {
constructor() {
super();
this.state = {
lat: 51.505,
lng: -0.09,
zoom: 13,
};
this.zoomIn = () => this.setState({zoom: this.state.zoom+1})
this.zoomOut = () => this.setState({zoom: this.state.zoom-1})
}
render() {
const position = [this.state.lat, this.state.lng];
return ( < Map center = {
position
}
zoom = {
this.state.zoom
}
>
< TileLayer attribution = '© OpenStreetMap contributors'
url = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png' / >
< Marker position = {
position
} >
< Popup >
< span >
<button onClick={this.zoomOut}>
Zoom out
</button >
< button onClick = {this.zoomIn} >
Zoom in
< /button>
< /span>
</Popup >
< /Marker>
</Map >
);
}
}
export default ZoomInState
Get map via refs
This way will not hold the zoom level in your component. Often this is a good practice, because it keeps a single source of truth. You can always get the zoom with map.getZoom()
const React = window.React;
const { Map, TileLayer, Marker, Popup } = window.ReactLeaflet;
class MapByRef extends React.Component {
constructor() {
super();
this.state = {
lat: 51.505,
lng: -0.09,
zoom: 13,
};
}
bindMap(el) {
this.map = el.leafletElement;
}
zoomIn() {
this.map.zoomIn();
}
zoomOut() {
this.map.zoomOut();
}
render() {
const position = [this.state.lat, this.state.lng];
return (
<Map center={position} zoom={this.state.zoom} ref={::this.bindMap}>
<TileLayer
attribution='© OpenStreetMap contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
<Marker position={position}>
<Popup>
<span>
<button onClick={::this.zoomIn} >Zoom In</button>
<button onClick={::this.zoomIn} >Zoom Out</button>
</span>
</Popup>
</Marker>
</Map>
);
}
}
export default MapByRef
3. Get from Context
This way is nice if you want to make many child components that need to interact with the map. It also keeps leaflet as the single source of truth.
const React = window.React;
const { Map, TileLayer, Marker, Popup } = window.ReactLeaflet;
class CustomMarker {
zoomIn(){
this.context.map.zoomIn()
}
zoomOut(){
this.context.map.zoomOut()
}
render() {
return (
<Marker position={position}>
<Popup>
<button onCLick={::this.zoomIn}>Zoom In</button>
<button onCLick={::this.zoomOut}>Zoom In</button>
</Popup>
</Marker>
)
}
}
export CustomMarker
class MapWithCustomChildren extends React.Component {
constructor() {
super();
this.state = {
lat: 51.505,
lng: -0.09,
zoom: 13,
};
}
render() {
const position = [this.state.lat, this.state.lng];
return (
<Map center={position} zoom={this.state.zoom}>
<TileLayer
attribution='© OpenStreetMap contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
<CustomMarker />
</Map>
);
}
}
export default MapWithCustomChildren
Related
I want to move the position in the Basemap Gallery Leaflet to the top near the Leaflet zoom on the Map but am confused about how to move the coding, here it is:
Basemap Gallery Brochure wants to move up and near Zoom.
Sample image: Images
Example of desired Basemap Gallery position:
Example of Basemap Gallery position
Here is my code and what I need to change in my code:
import { React, useState, useEffect } from 'react'
import {
LayersControl,
MapContainer,
TileLayer,
Marker,
Popup,
useMapEvents,
} from 'react-leaflet'
import List from '../Component/List'
import L from 'leaflet'
import SearchControl from './SearchControl'
const { BaseLayer } = LayersControl
function LocationMarker() {
const [position, setPosition] = useState(null)
const map = useMapEvents({
locationfound(e) {
setPosition(e.latlng)
map.flyTo(e.latlng, map.getZoom())
},
})
return position === null ? null : (
<Marker position={position}>
<Popup>Location Me</Popup>
</Marker>
)
}
function MyLocationMe() {
const [map, setMap] = useState(null)
const [position, setPosition] = useState(null)
useEffect(() => {
if (!map) return
L.easyButton('fa-map-marker', () => {
map.locate().on('locationfound', function (e) {
setPosition(e.latlng)
map.flyTo(e.latlng, map.getZoom())
})
}).addTo(map)
}, [map])
return (
<div className="flex ml-auto">
<List />
<div className="w-4/5">
<MapContainer
center={{ lat: 51.505, lng: -0.09 }}
zoom={20}
style={{ height: '100vh' }}
whenCreated={setMap}
>
<SearchControl className="MarkerIcon" position="topright" />
<LayersControl position="topleft">
<BaseLayer checked name="OpenStreetMap">
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png "
/>
</BaseLayer>
</LayersControl>
<LocationMarker />
</MapContainer>
</div>
</div>
)
}
export default MyLocationMe
The easiest way to do that is to change the left css property of the relevant css class by making position absolute
Add this to your styles.css
.leaflet-control-layers.leaflet-control {
position: absolute;
left: 50px;
}
Demo
I want to move the position on the BasemapGallery Leaflet and GeoSearch Leaflet on the Map but for confusion how to move in coding, here is:
The BasemapGallery leaflet wants to move to the right, and
The GeoSearch leaflet wants to move to the left.
Sample image:
Image
Here is my code and what I need to change in my code:
import { React, useState, useEffect } from 'react'
import {
LayersControl,
MapContainer,
TileLayer,
Marker,
Popup,
useMapEvents,
} from 'react-leaflet'
import List from '../Component/List'
import L from 'leaflet'
import SearchControl from './SearchControl'
const { BaseLayer } = LayersControl
function LocationMarker() {
const [position, setPosition] = useState(null)
const map = useMapEvents({
locationfound(e) {
setPosition(e.latlng)
map.flyTo(e.latlng, map.getZoom())
},
})
return position === null ? null : (
<Marker position={position}>
<Popup>Location Me</Popup>
</Marker>
)
}
function MyLocationMe() {
const [map, setMap] = useState(null)
const [position, setPosition] = useState(null)
useEffect(() => {
if (!map) return
L.easyButton('fa-map-marker', () => {
map.locate().on('locationfound', function (e) {
setPosition(e.latlng)
map.flyTo(e.latlng, map.getZoom())
})
}).addTo(map)
}, [map])
return (
<div className="flex ml-auto">
<List />
<div className="w-4/5">
<MapContainer
center={{ lat: 51.505, lng: -0.09 }}
zoom={20}
style={{ height: '100vh' }}
whenCreated={setMap}
>
<SearchControl className="MarkerIcon" />
<LayersControl>
<BaseLayer checked name="OpenStreetMap">
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png "
/>
</BaseLayer>
</LayersControl>
<LocationMarker />
</MapContainer>
</div>
</div>
)
}
export default MyLocationMe
There should be a position attribute for the controls:
<SearchControl className="MarkerIcon" position="topright" />
and
<LayersControl position="topleft">
<BaseLayer checked name="OpenStreetMap">
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png "
/>
</BaseLayer>
</LayersControl>
I'm setting up a map to find the coords of a person and then put that location on the map. But for some reason, the coords aren't being shown on the map. I console.log to make sure the state variables(where the coords are being stored) were emitting the right coords and they are. I don't know why the map won't change to them though.
My code:
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import Constants from "expo-constants";
import * as Location from "expo-location";
import * as Permissions from "expo-permissions";
import { render } from "react-dom";
import "leaflet/dist/leaflet.css";
export default class App extends React.Component {
constructor() {
super();
this.state = {
ready: false,
where: { lat: '', lng: '' },
error: null,
};
}
componentDidMount() {
let geoOptions = {
enableHighAccuracy: true,
timeOut: 20000,
maximumAge: 60 * 60 * 24,
};
this.setState({ ready: false, error: null });
navigator.geolocation.getCurrentPosition(
this.geoSuccess,
this.geoFailure,
geoOptions
);
}
geoSuccess = (position) => {
console.log(position.coords.latitude);
console.log(position.coords.longitude);
console.log(this.state.where?.lng);
console.log(this.state.where?.lat);
this.setState({
ready: true,
where: { lat: position.coords.latitude, lng: position.coords.longitude
},
});
console.log(this.state.where?.lng);
console.log(this.state.where?.lat);
};
geoFailure = (err) => {
this.setState({ error: err.message });
console.log(this.state.error);
};
render() {
const position = [this.state.where?.lat, this.state.where?.lng];
return (
<>
{(this.state.where != null || this.state.where != undefined) &&
<MapContainer
style={{ height: "100%", width: "100%" }}
center={position}
zoom="30"
scrollWheelZoom={true}
>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</MapContainer>
}
</>
);
}
}
From the official docs
Except for its children, MapContainer props are immutable: changing
them after they have been set a first time will have no effect on the
Map instance or its container.
Use a child component that will change your map view upon position change
function ChangeMapView({ coords }) {
const map = useMap();
map.setView(coords, map.getZoom());
return null;
}
Use it like this:
<MapContainer
style={{ height: "100vh", width: "100%" }}
center={position}
zoom="30"
scrollWheelZoom={true}
>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<ChangeMapView coords={position} />
</MapContainer>
Demo
I'm trying to create a react-leaflet Map that onClick creates a Marker on the click's Lat and Lng. The problem is that the marker is created at an offset, towards the bottom right instead of on the mouse cursor.
import React, { useState, useContext } from "react";
import classes from "./WorldMap.module.css";
import { Map, TileLayer, Marker } from "react-leaflet";
import L from "leaflet";
import RoundInformationDisplay from "./RoundInfoDisplay/RoundInfoDisplay";
import ConfirmGuessButton from "./ConfirmGuessButton/ConfirmGuessButton";
import { AppContext } from "../../../../context/appContext";
interface Props {
handleEndOfRound: () => void;
}
const WorldMap: React.FC<Props> = (props) => {
const { currentRoundGuess, setCurrentRoundGuess } = useContext(AppContext);
const icon = L.icon({ iconUrl: require("../../../../static/marker.svg") });
const [selected, setSelected] = useState<boolean>(false);
const handleMapClick = (e: any) => {
setCurrentRoundGuess({ ...e.latlng });
setSelected(true);
};
return (
<div className={classes.WorldMapContainer}>
<div className={classes.InfoDisplay}>
<RoundInformationDisplay />
</div>
<Map
center={[45.4, -75.7]}
zoom={3}
className={classes.Map}
onClick={(e: any) => handleMapClick(e)}
>
{selected ? (
<Marker
position={[currentRoundGuess.lat, currentRoundGuess.lng]}
icon={icon}
/>
) : (
<p></p>
)}
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
</Map>
<div className={classes.ConfirmButton}>
<ConfirmGuessButton
selected={selected}
handleEndOfRound={props.handleEndOfRound}
/>
</div>
</div>
);
};
export default WorldMap;
A video showcasing the issue: https://streamable.com/g5uusl
What could be causing this problem? Thank you in advance.
As was mentioned in comments icon.iconanchor property allows to align the icon position relative to marker's location, in case of react-leaflet library, icon.iconanchor property could be specified as demonstrated below:
function MapExample(props) {
const [selectedPos, setSelectedPos] = useState(props.center);
function getMarkerIcon() {
const icon = new L.Icon({
iconSize: [32, 37], // size of the icon
iconAnchor: [16, 37],
iconUrl: "/bigcity_green.png",
});
return icon;
}
function handleMapClick(e) {
setSelectedPos(e.latlng);
}
return (
<Map center={props.center} zoom={props.zoom} onclick={handleMapClick}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© OpenStreetMap contributors'
/>
{selectedPos && <Marker position={selectedPos} icon={getMarkerIcon()} />}
</Map>
);
}
I'm trying to make dynamic polygons by using the react's state, but leaflet polygons are not being re-rendered.
The target is to create a polygon that the user creates clicking in the map.
class SimpleExample extends React.Component {
constructor() {
super();
this.state = {
positions: [[51.505, -0.09]]
};
}
addPosition = (e) => {
const {positions} = this.state
console.log('Adding positions', positions)
positions.push([e.latlng.lat, e.latlng.lng])
this.setState({positions})
}
render() {
console.log('Should render new positions', this.state.positions)
const staticPositions = [[51.505, -0.09], [51.4958128370432, -0.10728836059570314], [51.49602657961649, -0.09956359863281251]]
return (
<Map
center={[51.505, -0.09]}
onClick={this.addPosition}
zoom={13}
>
<TileLayer
attribution='© OpenStreetMap contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
<Polygon positions={this.state.positions} color="blue" />
<Polygon positions={staticPositions} color="red" />
<Polyline positions={this.state.positions} />
</Map>
);
}
}
Please checkout this fiddle:
https://jsfiddle.net/cesargdm/j2g4ktsg/1/
You can copy this in jsfiddle and it should work. Hope it helps.
I have the initial state to an empty array so your first click decides where you start drawing your <Polygon>, of course you can use an initial coordinate, that's totally up to you.
Using an arrow function (prevState) => {} you can properly update the state depending on your "previous state", here we're taking the new coordinates and using concat() to add it to our positions state.
You can find more information about updating the state here.
const React = window.React;
const { Map, TileLayer, Marker, Popup, Polygon } = window.ReactLeaflet;
class SimpleExample extends React.Component {
constructor() {
super();
this.state = {
positions: []
};
}
addPosition = (e) => {
const newPos = [e.latlng.lat, e.latlng.lng];
this.setState(prevState => (
{
positions: prevState.positions.concat([newPos])
}
));
}
render() {
return (
<Map
center={[51.505, -0.09]}
onClick={this.addPosition}
zoom={13}>
<TileLayer attribution='© <ahref="http://osm.org/copyright">
OpenStreetMap</a> contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
<Polygon positions={this.state.positions} color="blue" />
</Map>
);
}
}
window.ReactDOM.render(<SimpleExample />,
document.getElementById('container'));