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
Related
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'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.
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 am trying to create a minimap but for some reason, react-leaflet renders the map twice.
I think its the container is not big enough to contain the map so it translates it out but I don't get how big it's supposed to be.
The documentation doesn't really mention this.
import React from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';
const MapStyle = {
height: '100px',
width: '100px',
};
const MiniMap = assetLocation => {
return (
<MapContainer center={[45.4, -75.7]} zoom={13} scrollWheelZoom={false} style={MapStyle}>
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
</MapContainer>
);
};
I implement it inside Antd's grid system
<Row>
<Space>
<Col>
<MiniMap assetLocation={item} />
<NavButtons id={id} />
</Col>
<Col>{ ...otherComponents }</Col>
</Space>
I was missing the Leaflet's CSS.
Just need to import it into the react component:
import 'leaflet/dist/leaflet.css';
This is my Dashnoard.js file, i dont have an html file .My question is how to add the drawing toolbar on the leaflet map.At the moment i have the map only...
Thank you!
import React from 'react'
import { Map, Marker, Popup, TileLayer } from 'react-leaflet'
import { compose } from 'redux'
import "leaflet/dist/leaflet.css";
import L from 'leaflet';
export class Dashboard extends React.Component{
constructor() {
super();
this.state = {
lat: 42.696295,
lng: 23.303643,
zoom: 10,
};
}
render() {
const position = [this.state.lat, this.state.lng]
return(
<div className='dashboard container'>
<Map id="map" style={{ height: "50vh" }} center={position} zoom={13}>
<TileLayer
attribution='© OpenStreetMap contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
<Marker position={position}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</Map>
</div>
)
} }
export default compose()(Dashboard);
I have successfully initialize the map on the page,but at the next step i cannto initialize na drawing comonent and set to the map.