dancingCycle
/
sandbox-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(leaflet-js-intg): add layer control according to https://leafletjs.com/examples/layers-control/

This commit is contained in:
dancingCycle 2023-12-30 22:50:05 +01:00
parent 3983ccb13a
commit 27f7c81237
3 changed files with 69 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
leaflet-js-intg/app/components/map-1k-circle-fixed.jsx
View File

@ -8,35 +8,39 @@ export default function Map1kCircleFixed() {
useEffect(() => {
//layer
const layerOsm = L.tileLayer(
//base layer
const baseLayerOsm = L.tileLayer(
"http://{s}.tile.osm.org/{z}/{x}/{y}.png",
{
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 18,
scrollWheelZoom: false,
});
var layerOsmHot = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
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'});
var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
//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.');
var layerCities = L.layerGroup([littleton, denver, aurora, golden]);
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: [layerOsm, layerCities]}
layers: [baseLayerOsm, overlayCity]}
).setView( [42.69751, 23.32415], 13 );
//layer control
var baseMaps = {
"OpenStreetMap": layerOsm,
"<span style='color: red'>OpenStreetMap.HOT</span>": layerOsmHot
"OpenStreetMap": baseLayerOsm,
"<span style='color: red'>OpenStreetMap.HOT</span>": baseLayerOsmHot
};
var overlayMaps = {
"Cities": layerCities
"Cities": overlayCity
};
var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);

50
leaflet-js-intg/app/components/map-array.jsx
View File

@ -20,34 +20,54 @@ export default function MapArray( { array } ) {
useEffect(() => {
const map = L.map(
mapRef.current,
{attributionControl: true}
).setView(
mapCenter,
6
);
L.tileLayer(
//base layer
const baseLayerOsm = L.tileLayer(
"http://{s}.tile.osm.org/{z}/{x}/{y}.png",
{
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 18,
scrollWheelZoom: false,
}).addTo(map);
}
);
array.map( function( value, key ) {
//marker array
const rryMrkr = array.map( function( value, key ) {
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;
var marker = L.marker(
const marker = L.marker(
[value.lat, value.lon],
{alt: 'popup marker name: ' + value.name}
).addTo(map);
{alt: 'marker name: ' + value.name}
);
const popupText ='name: <b>' + value.name + '</b><br />lat: ' + value.lat + '<br />lon: ' + value.lon;
//console.log('popupText: ' + popupText);
marker.bindPopup(popupText);
return marker
});
console.log('rryMrkr: ' + rryMrkr.length);
//layer group
const overlayMrkr = L.layerGroup(rryMrkr);
//map
const map = L.map(
mapRef.current,
{attributionControl: true,
layers : [baseLayerOsm, overlayMrkr]}
).setView(
mapCenter,
3
);
//layout control
var baseMaps = {
"OpenStreetMap": baseLayerOsm
};
var overlayMaps = {
'Markers' : overlayMrkr
};
const layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
// unmount map function
//You should unmount the function in react.js to remove the existing map.

22
leaflet-js-intg/app/components/map-next.jsx
View File

@ -26,7 +26,8 @@ export default function MapNxt() {
var map = L.map("map").setView([51.505, -0.09], 13);
L.tileLayer(
//base layer
const baseLayerMapBox = L.tileLayer(
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
{
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
@ -36,12 +37,29 @@ export default function MapNxt() {
zoomOffset: -1,
accessToken: "pk.eyJ1IjoidGFyLWhlbCIsImEiOiJjbDJnYWRieGMwMTlrM2luenIzMzZwbGJ2In0.RQRMAJqClc4qoNwROT8Umg",
scrollWheelZoom: false,
}).addTo(map);
});
//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]);
//TODO: Why is 'scrollWheelZoom: false,' above not working?
//TODO: Why the following line instead?
map.scrollWheelZoom.disable()
//layer control
var baseMaps = {
"MapBox": baseLayerMapBox,
};
var overlayMaps = {
"Cities": overlayCity
};
var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
//marker
L.Marker.prototype.options.icon = DefaultIcon;
var marker = L.marker(
[51.5, -0.09],