89 lines
2.8 KiB
JavaScript
89 lines
2.8 KiB
JavaScript
import React, { useEffect } from "react";
|
|
import L from "leaflet";
|
|
import "leaflet/dist/leaflet.css";
|
|
import icon from "leaflet/dist/images/marker-icon.png";
|
|
import iconShadow from "leaflet/dist/images/marker-shadow.png";
|
|
|
|
let DefaultIcon = L.icon({
|
|
iconUrl: icon,
|
|
shadowUrl: iconShadow,
|
|
});
|
|
|
|
export default function MapNxt() {
|
|
|
|
useEffect(() => {
|
|
|
|
var container = L.DomUtil.get("map");
|
|
|
|
//https://stackoverflow.com/a/50034912/15078958
|
|
//Before initializing map check if the map is already initiated or not
|
|
if (container != null) {
|
|
container._leaflet_id = null;
|
|
}
|
|
//TODO Is this an alternative?
|
|
//https://stackoverflow.com/a/53836894/15078958
|
|
/**map.invalidateSize();*/
|
|
|
|
var map = L.map("map").setView([51.505, -0.09], 13);
|
|
|
|
//base layer
|
|
const baseLayerMapBox = L.tileLayer(
|
|
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
|
|
{
|
|
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
|
maxZoom: 18,
|
|
id: "mapbox/streets-v11",
|
|
tileSize: 512,
|
|
zoomOffset: -1,
|
|
accessToken: "pk.eyJ1IjoidGFyLWhlbCIsImEiOiJjbDJnYWRieGMwMTlrM2luenIzMzZwbGJ2In0.RQRMAJqClc4qoNwROT8Umg",
|
|
scrollWheelZoom: false,
|
|
});
|
|
|
|
//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],
|
|
{alt: 'popup marker name: ' + "Hello world! I am a popup."}
|
|
).addTo(map);
|
|
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<p>MapNext</p>
|
|
<div
|
|
id="map"
|
|
style={{ height: "42vh" }}>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
//https://stackoverflow.com/a/72016670/15078958
|
|
/**
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
|
|
*/
|
|
|
|
/**
|
|
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
|
|
*/
|