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 e4d1253..4333def 100644
--- a/leaflet-js-intg/app/components/map-1k-circle-fixed.jsx
+++ b/leaflet-js-intg/app/components/map-1k-circle-fixed.jsx
@@ -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: '© OpenStreetMap 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,
- "OpenStreetMap.HOT": layerOsmHot
+ "OpenStreetMap": baseLayerOsm,
+ "OpenStreetMap.HOT": baseLayerOsmHot
};
var overlayMaps = {
- "Cities": layerCities
+ "Cities": overlayCity
};
var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
diff --git a/leaflet-js-intg/app/components/map-array.jsx b/leaflet-js-intg/app/components/map-array.jsx
index 6e0d388..83c970b 100644
--- a/leaflet-js-intg/app/components/map-array.jsx
+++ b/leaflet-js-intg/app/components/map-array.jsx
@@ -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: '© OpenStreetMap 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: ' + value.name + '
lat: ' + value.lat + '
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.
diff --git a/leaflet-js-intg/app/components/map-next.jsx b/leaflet-js-intg/app/components/map-next.jsx
index eeeb7c3..fc9efa8 100644
--- a/leaflet-js-intg/app/components/map-next.jsx
+++ b/leaflet-js-intg/app/components/map-next.jsx
@@ -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 © OpenStreetMap contributors, Imagery © Mapbox',
@@ -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],