90 lines
3.0 KiB
JavaScript
90 lines
3.0 KiB
JavaScript
import React, { useEffect, useRef, useState } from 'react'
|
|
import L from 'leaflet'
|
|
import "leaflet/dist/leaflet.css";
|
|
|
|
export default function Map1kCircleFixed() {
|
|
|
|
const mapRef = useRef();
|
|
|
|
useEffect(() => {
|
|
|
|
//base layer
|
|
const baseLayerOsm = L.tileLayer(
|
|
"http://{s}.tile.osm.org/{z}/{x}/{y}.png",
|
|
{
|
|
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
|
maxZoom: 18,
|
|
scrollWheelZoom: false,
|
|
});
|
|
const baseLayerOsmHot = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France'});
|
|
|
|
//overlay
|
|
const littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
|
|
denver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
|
|
aurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
|
|
golden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');
|
|
const overlayCity = L.layerGroup([littleton, denver, aurora, golden]);
|
|
|
|
//map
|
|
const map = L.map(
|
|
mapRef.current,
|
|
{attributionControl: true,
|
|
layers: [baseLayerOsm, overlayCity]}
|
|
).setView( [42.69751, 23.32415], 13 );
|
|
|
|
//layer control
|
|
var baseMaps = {
|
|
"OpenStreetMap": baseLayerOsm,
|
|
"<span style='color: red'>OpenStreetMap.HOT</span>": baseLayerOsmHot
|
|
};
|
|
var overlayMaps = {
|
|
"Cities": overlayCity
|
|
};
|
|
var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
|
|
|
|
//dynamic adding of base and overlay layers
|
|
var crownHill = L.marker([39.75, -105.09]).bindPopup('This is Crown Hill Park.'),
|
|
rubyHill = L.marker([39.68, -105.00]).bindPopup('This is Ruby Hill Park.');
|
|
var parks = L.layerGroup([crownHill, rubyHill]);
|
|
var openTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: 'Map data: © OpenStreetMap contributors, SRTM | Map style: © OpenTopoMap (CC-BY-SA)'
|
|
});
|
|
layerControl.addBaseLayer(openTopoMap, "OpenTopoMap");
|
|
layerControl.addOverlay(parks, "Parks");
|
|
|
|
//add circle with a radius of X m
|
|
//https://leafletjs.com/reference.html#circle
|
|
var circle = L.circle(map.getCenter(), {
|
|
radius: 500
|
|
});
|
|
var layerCircles = L.layerGroup([circle]);
|
|
layerControl.addOverlay(layerCircles, "Circles");
|
|
|
|
//https://jsfiddle.net/falkedesign/q2mdow5c/
|
|
map.on('move', function(e){
|
|
circle.setLatLng(map.getCenter());
|
|
map._renderer._update();
|
|
});
|
|
|
|
// unmount map function
|
|
//You should unmount the function in react.js to remove the existing map.
|
|
return () => map.remove();
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<p>Map1kCircleFixed</p>
|
|
<div
|
|
style={{padding: 0, margin: 0, width: "75%", height: "23vh",}}
|
|
ref={el => mapRef.current = el}>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
//https://jsfiddle.net/falkedesign/q2mdow5c/
|
|
//https://github.com/azaharyan/react-leaflet-example
|
|
//https://stackoverflow.com/questions/61159376/how-to-draw-a-circle-that-stays-in-the-center-of-a-leaflet-js-map
|