diff --git a/leaflet-js-intg/app/components/map-1k-circle-fixed.jsx b/leaflet-js-intg/app/components/map-1k-circle-fixed.jsx
index 3f0651b..e4d1253 100644
--- a/leaflet-js-intg/app/components/map-1k-circle-fixed.jsx
+++ b/leaflet-js-intg/app/components/map-1k-circle-fixed.jsx
@@ -8,25 +8,56 @@ export default function Map1kCircleFixed() {
useEffect(() => {
- const map = L.map(
- mapRef.current,
- {attributionControl: true}
- ).setView( [42.69751, 23.32415], 13 );
-
- //add layer
- L.tileLayer(
+ //layer
+ const layerOsm = L.tileLayer(
"http://{s}.tile.osm.org/{z}/{x}/{y}.png",
{
attribution: '© OpenStreetMap contributors',
maxZoom: 18,
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,
+ "OpenStreetMap.HOT": 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
var circle = L.circle(map.getCenter(), {
radius: 500
- }).addTo(map);
+ });
+ var layerCircles = L.layerGroup([circle]);
+ layerControl.addOverlay(layerCircles, "Circles");
//https://jsfiddle.net/falkedesign/q2mdow5c/
map.on('move', function(e){
diff --git a/leaflet-js-intg/app/components/map-array.jsx b/leaflet-js-intg/app/components/map-array.jsx
index e22a1b5..6e0d388 100644
--- a/leaflet-js-intg/app/components/map-array.jsx
+++ b/leaflet-js-intg/app/components/map-array.jsx
@@ -41,7 +41,10 @@ export default function MapArray( { array } ) {
console.log('map-array:MapArray:map() value: ' +JSON.stringify(value));
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: ' + value.name + '
lat: ' + value.lat + '
lon: ' + value.lon;
marker.bindPopup(popupText);
});
diff --git a/leaflet-js-intg/app/components/map-circle-fixed.jsx b/leaflet-js-intg/app/components/map-circle-fixed.jsx
index b2f179c..755dd01 100644
--- a/leaflet-js-intg/app/components/map-circle-fixed.jsx
+++ b/leaflet-js-intg/app/components/map-circle-fixed.jsx
@@ -27,7 +27,8 @@ export default function MapCircleFixed() {
radius: 50,
color: 'red',
fillOpacity: 0.2,
- }).addTo(map);
+ alt: 'popup marker name: ' + 'circle fixed to center'}
+ ).addTo(map);
map.on('move', function(e){
circle.setLatLng(map.getCenter());
diff --git a/leaflet-js-intg/app/components/map-geo-json.jsx b/leaflet-js-intg/app/components/map-geo-json.jsx
index d076073..81e8ac7 100644
--- a/leaflet-js-intg/app/components/map-geo-json.jsx
+++ b/leaflet-js-intg/app/components/map-geo-json.jsx
@@ -34,7 +34,11 @@ function MapGeoJSON() {
if(markerRef.current)
markerRef.current.setLatLng(markerPosition)
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])
const geoJsonRef = useRef(null)
diff --git a/leaflet-js-intg/app/components/map-next.jsx b/leaflet-js-intg/app/components/map-next.jsx
index 5e4c0a1..eeeb7c3 100644
--- a/leaflet-js-intg/app/components/map-next.jsx
+++ b/leaflet-js-intg/app/components/map-next.jsx
@@ -43,7 +43,10 @@ export default function MapNxt() {
map.scrollWheelZoom.disable()
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("Hello world!
I am a popup.").openPopup();
}, []);
diff --git a/leaflet-js-intg/app/components/map-nxt.jsx b/leaflet-js-intg/app/components/map-nxt.jsx
index e7baafa..e153175 100644
--- a/leaflet-js-intg/app/components/map-nxt.jsx
+++ b/leaflet-js-intg/app/components/map-nxt.jsx
@@ -41,7 +41,10 @@ export default function Map() {
map.scrollWheelZoom.disable()
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("Hello world!
I am a popup.").openPopup();
// unmount map function
diff --git a/leaflet-js-intg/app/components/map.jsx b/leaflet-js-intg/app/components/map.jsx
index 39c3b82..65d4a37 100644
--- a/leaflet-js-intg/app/components/map.jsx
+++ b/leaflet-js-intg/app/components/map.jsx
@@ -68,7 +68,11 @@ export default function Map() {
if(markerRef.current) {
markerRef.current.setLatLng(markerPosition)
} 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
//You should unmount the function in react.js to remove the existing map.