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
Related
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 display the Temperature of multiple cities dynamically on a leaflet map as shown in the image below.
Here's my code and it's outcome:
import React, { useEffect, useState, useRef } from "react";
import L from "leaflet";
import "../MainContent/MergeStyles.css";
import "./Map.css";
import "leaflet/dist/leaflet.css";
import {
MapContainer,
TileLayer,
useMap,
Marker,
Popup,
Tooltip,
} from "react-leaflet";
function Map(props) {
let location = props.location;
let weatherData = props.weatherData;
const markerIcon = new L.Icon({
iconUrl:
"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Location_dot_black.svg/768px-Location_dot_black.svg.png",
iconSize: [7, 7],
});
let { lat, lon } = location[0];
// let loc = { lat, lon };
console.log(lat, lon);
return (
<>
<div className="map leaflet-container sidebar-open default-styles">
<MapContainer
center={[lat, lon]}
zoom={10}
zoomControl={false}
scrollWheelZoom={true}
>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[lat, lon]} icon={markerIcon}>
<Tooltip
className="tooltip"
direction="right"
opacity={1}
permanent
>
<div className="tooltip-div">
<p className="temp-tooltip">{weatherData.current.temp}°C</p>
</div>
</Tooltip>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
</div>
);
}
export default Map;
NOTE: I've updated the code a bit and displayed the current temperature of the given location, but I want to display the surrounding cities' Temperature too.
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>
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.