feat(leaflet-js-intg) add layer control according to https://leafletjs.com/examples/layers-control/
This commit is contained in:
parent
1e70ea67a9
commit
3983ccb13a
|
@ -8,25 +8,56 @@ export default function Map1kCircleFixed() {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
||||||
const map = L.map(
|
//layer
|
||||||
mapRef.current,
|
const layerOsm = L.tileLayer(
|
||||||
{attributionControl: true}
|
|
||||||
).setView( [42.69751, 23.32415], 13 );
|
|
||||||
|
|
||||||
//add layer
|
|
||||||
L.tileLayer(
|
|
||||||
"http://{s}.tile.osm.org/{z}/{x}/{y}.png",
|
"http://{s}.tile.osm.org/{z}/{x}/{y}.png",
|
||||||
{
|
{
|
||||||
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
||||||
maxZoom: 18,
|
maxZoom: 18,
|
||||||
scrollWheelZoom: false,
|
scrollWheelZoom: false,
|
||||||
}).addTo(map);
|
});
|
||||||
|
var layerOsmHot = 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'});
|
||||||
|
var 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.');
|
||||||
|
var layerCities = L.layerGroup([littleton, denver, aurora, golden]);
|
||||||
|
|
||||||
//add circle with a radius of 500 m
|
//map
|
||||||
|
const map = L.map(
|
||||||
|
mapRef.current,
|
||||||
|
{attributionControl: true,
|
||||||
|
layers: [layerOsm, layerCities]}
|
||||||
|
).setView( [42.69751, 23.32415], 13 );
|
||||||
|
var baseMaps = {
|
||||||
|
"OpenStreetMap": layerOsm,
|
||||||
|
"<span style='color: red'>OpenStreetMap.HOT</span>": layerOsmHot
|
||||||
|
};
|
||||||
|
var overlayMaps = {
|
||||||
|
"Cities": layerCities
|
||||||
|
};
|
||||||
|
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
|
//https://leafletjs.com/reference.html#circle
|
||||||
var circle = L.circle(map.getCenter(), {
|
var circle = L.circle(map.getCenter(), {
|
||||||
radius: 500
|
radius: 500
|
||||||
}).addTo(map);
|
});
|
||||||
|
var layerCircles = L.layerGroup([circle]);
|
||||||
|
layerControl.addOverlay(layerCircles, "Circles");
|
||||||
|
|
||||||
//https://jsfiddle.net/falkedesign/q2mdow5c/
|
//https://jsfiddle.net/falkedesign/q2mdow5c/
|
||||||
map.on('move', function(e){
|
map.on('move', function(e){
|
||||||
|
|
|
@ -41,7 +41,10 @@ export default function MapArray( { array } ) {
|
||||||
console.log('map-array:MapArray:map() value: ' +JSON.stringify(value));
|
console.log('map-array:MapArray:map() value: ' +JSON.stringify(value));
|
||||||
|
|
||||||
L.Marker.prototype.options.icon = DefaultIcon;
|
L.Marker.prototype.options.icon = DefaultIcon;
|
||||||
var marker = L.marker([value.lat, value.lon]).addTo(map);
|
var marker = L.marker(
|
||||||
|
[value.lat, value.lon],
|
||||||
|
{alt: 'popup marker name: ' + value.name}
|
||||||
|
).addTo(map);
|
||||||
const popupText ='name: <b>' + value.name + '</b><br />lat: ' + value.lat + '<br />lon: ' + value.lon;
|
const popupText ='name: <b>' + value.name + '</b><br />lat: ' + value.lat + '<br />lon: ' + value.lon;
|
||||||
marker.bindPopup(popupText);
|
marker.bindPopup(popupText);
|
||||||
});
|
});
|
||||||
|
|
|
@ -27,7 +27,8 @@ export default function MapCircleFixed() {
|
||||||
radius: 50,
|
radius: 50,
|
||||||
color: 'red',
|
color: 'red',
|
||||||
fillOpacity: 0.2,
|
fillOpacity: 0.2,
|
||||||
}).addTo(map);
|
alt: 'popup marker name: ' + 'circle fixed to center'}
|
||||||
|
).addTo(map);
|
||||||
|
|
||||||
map.on('move', function(e){
|
map.on('move', function(e){
|
||||||
circle.setLatLng(map.getCenter());
|
circle.setLatLng(map.getCenter());
|
||||||
|
|
|
@ -34,7 +34,11 @@ function MapGeoJSON() {
|
||||||
if(markerRef.current)
|
if(markerRef.current)
|
||||||
markerRef.current.setLatLng(markerPosition)
|
markerRef.current.setLatLng(markerPosition)
|
||||||
else
|
else
|
||||||
markerRef.current = L.marker(markerPosition, {icon:customIcon }).addTo(mapRef.current).bindPopup('Business Center Andromeda')
|
markerRef.current = L.marker(
|
||||||
|
markerPosition,
|
||||||
|
{icon:customIcon,
|
||||||
|
alt: 'popup marker name: ' + 'Business Center Andromeda'}
|
||||||
|
).addTo(mapRef.current).bindPopup('Business Center Andromeda')
|
||||||
}, [markerPosition, customIcon])
|
}, [markerPosition, customIcon])
|
||||||
|
|
||||||
const geoJsonRef = useRef(null)
|
const geoJsonRef = useRef(null)
|
||||||
|
|
|
@ -43,7 +43,10 @@ export default function MapNxt() {
|
||||||
map.scrollWheelZoom.disable()
|
map.scrollWheelZoom.disable()
|
||||||
|
|
||||||
L.Marker.prototype.options.icon = DefaultIcon;
|
L.Marker.prototype.options.icon = DefaultIcon;
|
||||||
var marker = L.marker([51.5, -0.09]).addTo(map);
|
var marker = L.marker(
|
||||||
|
[51.5, -0.09],
|
||||||
|
{alt: 'popup marker name: ' + "Hello world! I am a popup."}
|
||||||
|
).addTo(map);
|
||||||
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
|
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
|
@ -41,7 +41,10 @@ export default function Map() {
|
||||||
map.scrollWheelZoom.disable()
|
map.scrollWheelZoom.disable()
|
||||||
|
|
||||||
L.Marker.prototype.options.icon = DefaultIcon;
|
L.Marker.prototype.options.icon = DefaultIcon;
|
||||||
var marker = L.marker([51.5, -0.09]).addTo(map);
|
var marker = L.marker(
|
||||||
|
[51.5, -0.09],
|
||||||
|
{alt: 'popup marker name: ' + "Hello world! I am a popup."}
|
||||||
|
).addTo(map);
|
||||||
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
|
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
|
||||||
|
|
||||||
// unmount map function
|
// unmount map function
|
||||||
|
|
|
@ -68,7 +68,11 @@ export default function Map() {
|
||||||
if(markerRef.current) {
|
if(markerRef.current) {
|
||||||
markerRef.current.setLatLng(markerPosition)
|
markerRef.current.setLatLng(markerPosition)
|
||||||
} else {
|
} else {
|
||||||
markerRef.current = L.marker(markerPosition, {icon:customIcon }).addTo(mapRef.current).bindPopup('Business Center Andromeda')
|
markerRef.current = L.marker(
|
||||||
|
markerPosition,
|
||||||
|
{icon:customIcon,
|
||||||
|
alt: 'popup marker name: ' + 'Business Center Andromeda'}
|
||||||
|
).addTo(mapRef.current).bindPopup('Business Center Andromeda')
|
||||||
}
|
}
|
||||||
// unmount map function
|
// unmount map function
|
||||||
//You should unmount the function in react.js to remove the existing map.
|
//You should unmount the function in react.js to remove the existing map.
|
||||||
|
|
Loading…
Reference in New Issue