I'm trying to use this library called React Leaflet Markercluster.
I use React version 18.2.0. When I put the code into my app, I got error like this
"Invalid hook call. Hooks can only be called inside of the body of a function component."
This is the code that I'm copying from the documentation example:
import React from "react";
import { MapContainer, TileLayer, Marker } from "react-leaflet";
import MarkerClusterGroup from "react-leaflet-markercluster";
import "./styles.scss";
export default function DashboardMap() {
return (
<MapContainer
className="markercluster-map"
center={[51.0, 19.0]}
zoom={4}
maxZoom={18}
>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© OpenStreetMap contributors'
/>
{/* Put <MarkerClusterGroup {...props} /> inside react-leaflet after <TileLayer /> */}
<MarkerClusterGroup>
<Marker position={[49.8397, 24.0297]} />
<Marker position={[52.2297, 21.0122]} />
<Marker position={[51.5074, -0.0901]} />
</MarkerClusterGroup>
</MapContainer>
);
}
Do you guys have any idea why is this happening? Thank you in advance.
Related
I tried for many hours but nothing shows up on the following code...
Does anyone know what the failure is?
// material-ui
import { TileLayer, MapContainer } from 'react-leaflet'
import 'leaflet/dist/leaflet.css';
// ==============================|| SAMPLE PAGE ||============================== //
const Dashboard_5G = () => {
return (
<MapContainer Center={[0, 0]} zoom={4} style={{height: '100%'}}>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
/>
</MapContainer>
)
};
export default Dashboard_5G;
This is what It displays
I've followed all documentation that is available, but it seems that I just cannot get react-leaflet-geosearch to interact and cooperate with my react-leaflet map.
This is my component rendering a <MapContainer> component:
import { MapContainer, TileLayer } from 'react-leaflet';
import LoadingScreen from '../LoadingScreen/LoadingScreen';
import './Report.css';
import { OpenStreetMapProvider, SearchControl } from "react-leaflet-geosearch";
const Report = () => {
return (
<>
<LoadingScreen />
<div className="Report">
<MapContainer center={[49.3,-123]} className="Map" zoom={10} maxZoom={19} minZoom={2}>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<SearchControl
provider={new OpenStreetMapProvider()}
showMarker={true}
showPopup={false}
popupFormat={({ query, result }) => result.label}
maxMarkers={3}
retainZoomLevel={false}
animateZoom={true}
autoClose={false}
searchLabel={"Enter address, please"}
keepResult={true}
/>
</MapContainer>
</div>
</>
)
}
export default Report;
react-leaflet-geosearch seems to have recently added the <SearchControl> component to the library. It is identical to suggestions online, but I cannot get it to interact.
I occasionally receive the error:
Error: iconUrl not set in Icon options (see the docs).
Any ideas, or could this be an error because of version incompatibility/deprecated libraries?
I would like to add a custom Legend in react-leaflet v4 map, but i can't understand how to do it correctly. I have already read the https://react-leaflet.js.org/docs/example-react-control/ example but it is quite complicated.
Please check the image
to better understand the issue.
Map.js (Main map component)
import React from 'react'
import { MapContainer, TileLayer, Marker } from 'react-leaflet'
import MapLegendControl from './map/MapLegendControl'; //Custom control i want to add
function Map() {
return (
<>
<MapContainer
center={[37.983810, 23.727539]}
zoom={6}
style={{ height: '100%' }}
>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© OpenStreetMap contributors'
/>
<MapLegendControl map={map} />
</MapContainer>
</>
)
}
Custom Control (Legend)
import React from 'react'
function MapLegendControl({ map }) {
return (
<div className='leaflet-control leaflet-bar map-legend'>
<button> Test </button>
</div>
)
}
export default MapLegendControl;
Thank you in advance.
I need to highlight a layer on every states of india on map using react leaflet, So I'am adding WMS layer for that but after adding this code my map is not showing
<WMSTileLayer
layers={this.state.bluemarble ? 'nasa:bluemarble' : 'ne:ne'}
url="https://demo.boundlessgeo.com/geoserver/ows"
/>
kindly let me know what mistake am I making, and how to achieve this? I am taking reference from this example
my full code
import React from "react";
import { MapContainer, TileLayer, useMap, Marker, Popup, ZoomControl, FeatureGroup, Map, WMSTileLayer, Polygon } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet-draw/dist/leaflet.draw.css';
import L from 'leaflet';
import {EditControl} from 'react-leaflet-draw'
const markerIcon = new L.Icon({
iconUrl: require("../resources/placeholder.png"),
iconSize: [35, 35],
});
function Mymap(){
return(
<div className='mymap'>
<MapContainer center={[21.7679, 78.8718]} zoom={5} scrollWheelZoom={true} zoomControl={false} >
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<ZoomControl position="topright"/>
<Marker position={[21.7679, 78.8718]} icon={markerIcon}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
<WMSTileLayer
layers={this.state.bluemarble ? 'nasa:bluemarble' : 'ne:ne'}
url="https://demo.boundlessgeo.com/geoserver/ows"
/>
</MapContainer>
</div>
);
}
export default Mymap
I am using this code :
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import './styles.css';
class App extends Component {
state = {
center: [51.505, -0.091],
zoom: 13,
};
render() {
return (
<div>
<Map center={this.state.center} zoom={this.state.zoom}>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
/>
<Marker position={this.state.center}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</Map>
</div>
);
}
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
But I try to reduce the height and I don't achieve using Tailwind CSS. I tried that :
<Map className="h-0" center={this.state.center} zoom={this.state.zoom}>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
/>
<Marker position={this.state.center}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</Map>
ie className="h-0" in the tag Map but it does not work.
Could you help me please ?
Thank you !
Here is my code without tailwind css
https://codesandbox.io/s/react-leaflet-s1q44
The referenced styles.css defines the dimensions of the map:
.leaflet-container {
height: 600px; /* <-- map height */
width: 100%;
}
You can reduce the map height by decreasing the height from 600px to e.g. 400px.
If you would like to use Tailwind, I would recommend replacing the styles defined in styles.css with Tailwind equivalent classes. Removing the styles.css import and defining a height by using a Tailwind classes on the Map component works as well.
<Map className='h-36' center={this.state.center} zoom={this.state.zoom}>
// map component content
</Map>