test(leaflet-js-intg): add test components
This commit is contained in:
parent
b269097efd
commit
bf5c23cb46
|
@ -8,6 +8,8 @@
|
||||||
|
|
||||||
# Links
|
# Links
|
||||||
|
|
||||||
|
* [Leaflet.js Integration](https://betterprogramming.pub/a-quick-guide-to-integrating-leaflet-js-and-react-ed89ff92790e)
|
||||||
|
* [Making Sense of React Hocks](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889)
|
||||||
* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
|
* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
|
||||||
* [Production](https://webpack.js.org/guides/production/)
|
* [Production](https://webpack.js.org/guides/production/)
|
||||||
* [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
|
* [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,64 @@
|
||||||
|
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);
|
||||||
|
|
||||||
|
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,
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
//TODO: Why is 'scrollWheelZoom: false,' above not working?
|
||||||
|
//TODO: Why the following line instead?
|
||||||
|
map.scrollWheelZoom.disable()
|
||||||
|
|
||||||
|
L.Marker.prototype.options.icon = DefaultIcon;
|
||||||
|
var marker = L.marker([51.5, -0.09]).addTo(map);
|
||||||
|
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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>
|
||||||
|
*/
|
|
@ -0,0 +1,58 @@
|
||||||
|
import React, { useEffect, useRef, useState } 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 Map() {
|
||||||
|
|
||||||
|
const mapContainer = useRef();
|
||||||
|
const [map, setMap] = useState({});
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
|
||||||
|
const map = L.map(
|
||||||
|
mapContainer.current,
|
||||||
|
{attributionControl: false}
|
||||||
|
).setView([51.505, -0.09], 13);
|
||||||
|
|
||||||
|
map.zoomControl.setPosition("bottomright");
|
||||||
|
|
||||||
|
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,
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
//TODO: Why is 'scrollWheelZoom: false,' above not working?
|
||||||
|
//TODO: Why the following line instead?
|
||||||
|
map.scrollWheelZoom.disable()
|
||||||
|
|
||||||
|
L.Marker.prototype.options.icon = DefaultIcon;
|
||||||
|
var marker = L.marker([51.5, -0.09]).addTo(map);
|
||||||
|
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
|
||||||
|
|
||||||
|
// unmount map function
|
||||||
|
//You should unmount the function in react.js to remove the existing map.
|
||||||
|
return () => map.remove();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{padding: 0, margin: 0, width: "50%", height: "23vh",}}
|
||||||
|
ref={el => mapContainer.current = el}>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
//https://stackoverflow.com/a/66920207/15078958
|
|
@ -0,0 +1,111 @@
|
||||||
|
import React, { useEffect, useRef } from 'react';
|
||||||
|
import L from "leaflet";
|
||||||
|
import "leaflet/dist/leaflet.css";
|
||||||
|
|
||||||
|
export default function Map() {
|
||||||
|
|
||||||
|
|
||||||
|
const mapContainerRef = useRef(null);
|
||||||
|
|
||||||
|
useEffect( async () => {
|
||||||
|
//const res =await Axios.get(BASE_PATH + 'fetchProperty')
|
||||||
|
|
||||||
|
//TODO Is this the map unload part?
|
||||||
|
const container = L.DomUtil.get(mapContainerRef.current);
|
||||||
|
if(container != null) {
|
||||||
|
container._leaflet_id = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(container) {
|
||||||
|
|
||||||
|
const mapView = L.map( mapContainerRef.current, {
|
||||||
|
zoom: 13,
|
||||||
|
center: [19.059984, 72.889999]
|
||||||
|
// maxZoom: 13
|
||||||
|
// minZoom: 15
|
||||||
|
});
|
||||||
|
|
||||||
|
// const canvas = mapView.getCanvasContainer();
|
||||||
|
mapView.zoomControl.setPosition("bottomright");
|
||||||
|
mapView.attributionControl.addAttribution(
|
||||||
|
"<a href='https://mascots.pro'>Mascots. pro</a>"
|
||||||
|
);
|
||||||
|
|
||||||
|
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,
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
const mask = L.tileLayer.mask(
|
||||||
|
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
|
||||||
|
{
|
||||||
|
attribution: '<a href="https://mascots.pro">Mascots pro</a>',
|
||||||
|
maskSize: 300
|
||||||
|
// maxZoom: 18,
|
||||||
|
// maxNativeZoom: 16
|
||||||
|
// tms: true
|
||||||
|
}
|
||||||
|
).addTo(mapView);
|
||||||
|
|
||||||
|
mapView.on("mousemove", function (e) {
|
||||||
|
mask.setCenter(e.containerPoint);
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
res.data.map((marker) => {
|
||||||
|
|
||||||
|
const innerHtmlContent = `<div id='popup-container' class='popup-container'> <h3> Property Details</h3>
|
||||||
|
<div class='popup-label'>Building Name :<p>${marker.Building}</p></div>
|
||||||
|
<div class='popup-address-label'> Address : <p>${marker.Landmark}, ${marker.Location}</p></div>
|
||||||
|
<div class='popup-rent-label'>Monthly Rent : <p> ₹ ${marker.Price}</p></div>
|
||||||
|
</div>`;
|
||||||
|
const divElement = document.createElement("div");
|
||||||
|
const assignBtn = document.createElement("div");
|
||||||
|
assignBtn.className = "map-link";
|
||||||
|
assignBtn.innerHTML = `<button class="view-btn">View Property</button>`;
|
||||||
|
divElement.innerHTML = innerHtmlContent;
|
||||||
|
divElement.appendChild(assignBtn);
|
||||||
|
assignBtn.addEventListener("click", (e) => {
|
||||||
|
console.log("dsvsdvb");
|
||||||
|
});
|
||||||
|
var iconOptions = {
|
||||||
|
iconUrl: "/images/location_pin2.svg",
|
||||||
|
iconSize: [25, 25]
|
||||||
|
};
|
||||||
|
var customIcon = L.icon(iconOptions);
|
||||||
|
// create popup contents
|
||||||
|
var customPopup = divElement;
|
||||||
|
// specify popup options
|
||||||
|
var customOptions = {
|
||||||
|
maxWidth: "500",
|
||||||
|
className: "custom"
|
||||||
|
};
|
||||||
|
const markerOptions = {
|
||||||
|
// title: "MyLocation",
|
||||||
|
// draggable: true
|
||||||
|
clickable: true,
|
||||||
|
icon: customIcon
|
||||||
|
};
|
||||||
|
const mark = L.marker([marker.Latitude,marker.Longitude], markerOptions);
|
||||||
|
mark.bindPopup(customPopup, customOptions);
|
||||||
|
mark.addTo(mapView);
|
||||||
|
// return mapView.off();
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
return () => mapView.remove();
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
return (
|
||||||
|
<div className="map-box">
|
||||||
|
<div className="map-container" ref={mapContainerRef}></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
//https://stackoverflow.com/a/67486824/15078958
|
|
@ -0,0 +1,39 @@
|
||||||
|
import React, { useEffect, useRef, useState } from 'react'
|
||||||
|
import L from 'leaflet'
|
||||||
|
import "leaflet/dist/leaflet.css";
|
||||||
|
|
||||||
|
export default function MapSimple() {
|
||||||
|
|
||||||
|
const mapRef = useRef();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
|
||||||
|
const map = L.map(
|
||||||
|
mapRef.current,
|
||||||
|
{attributionControl: true}
|
||||||
|
).setView(
|
||||||
|
[42.69751, 23.32415],
|
||||||
|
16
|
||||||
|
);
|
||||||
|
|
||||||
|
L.tileLayer(
|
||||||
|
"http://{s}.tile.osm.org/{z}/{x}/{y}.png",
|
||||||
|
{
|
||||||
|
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
||||||
|
maxZoom: 18,
|
||||||
|
scrollWheelZoom: false,
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
// unmount map function
|
||||||
|
//You should unmount the function in react.js to remove the existing map.
|
||||||
|
return () => map.remove();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{padding: 0, margin: 0, width: "75%", height: "23vh",}}
|
||||||
|
ref={el => mapRef.current = el}>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
//https://github.com/azaharyan/react-leaflet-example
|
|
@ -0,0 +1,41 @@
|
||||||
|
import React, { useEffect, useRef, useState } from 'react'
|
||||||
|
import L, { geoJson } from 'leaflet'
|
||||||
|
|
||||||
|
function MapWithMarker() {
|
||||||
|
|
||||||
|
const [markerPosition, setMarkerPosition] = useState({ lat:42.6944, lng:23.3328 })
|
||||||
|
|
||||||
|
const mapRef = useRef(null)
|
||||||
|
useEffect(() => {
|
||||||
|
|
||||||
|
mapRef.current = L.map('map', {
|
||||||
|
center: markerPosition,
|
||||||
|
zoom: 18,
|
||||||
|
layers: [
|
||||||
|
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
|
||||||
|
attribution:
|
||||||
|
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||||
|
})
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}, [markerPosition])
|
||||||
|
|
||||||
|
|
||||||
|
const markerRef = useRef(null)
|
||||||
|
const customIcon = L.icon({
|
||||||
|
iconUrl: 'https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png',
|
||||||
|
iconSize: [35,46],
|
||||||
|
iconAnchor: [17,46]
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if(markerRef.current)
|
||||||
|
markerRef.current.setLatLng(markerPosition)
|
||||||
|
else
|
||||||
|
markerRef.current = L.marker(markerPosition, {icon:customIcon }).addTo(mapRef.current).bindPopup('Bulgarian National Assembly')
|
||||||
|
}, [markerPosition, customIcon])
|
||||||
|
|
||||||
|
return <div id='map' style={{ width: '80%' }}></div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MapWithMarker
|
File diff suppressed because one or more lines are too long
|
@ -1,12 +1,27 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Hello from '../components/hello';
|
import Hello from '../components/hello';
|
||||||
|
//TODO Why is this component not working?
|
||||||
|
//import Map from '../components/map';
|
||||||
|
import MapSimple from '../components/map-simple';
|
||||||
|
import MapNext from '../components/map-next';
|
||||||
|
import MapNxt from '../components/map-nxt';
|
||||||
|
//TODO Why is this component not working?
|
||||||
|
//import MapNxt2 from '../components/map-nxt2';
|
||||||
import '../style.css';
|
import '../style.css';
|
||||||
|
|
||||||
const Home = () => {
|
const Home = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h2>Home</h2>
|
<h2>Home</h2>
|
||||||
<h3>(React.js Lambda Function Component)</h3>
|
<h3>(React.js Lambda Function Component)</h3>
|
||||||
<Hello msg="Hello World!" />
|
<Hello msg="Hello World!" />
|
||||||
|
{/**<Map />*/}
|
||||||
|
<MapNext />
|
||||||
|
<br />
|
||||||
|
<MapNxt />
|
||||||
|
<br />
|
||||||
|
<MapSimple />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,6 +26,14 @@ module.exports = {
|
||||||
test: /\.css$/i,
|
test: /\.css$/i,
|
||||||
use: ["style-loader", "css-loader"],
|
use: ["style-loader", "css-loader"],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
test: /\.(png|jpe?g|gif)$/i,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'file-loader',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"license": "GPL-3.0-or-later",
|
"license": "GPL-3.0-or-later",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"leaflet": "1.9.4",
|
||||||
"prop-types": "15.8.1",
|
"prop-types": "15.8.1",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-dom": "18.2.0"
|
"react-dom": "18.2.0"
|
||||||
|
@ -19,6 +20,7 @@
|
||||||
"@babel/preset-react": "7.18.6",
|
"@babel/preset-react": "7.18.6",
|
||||||
"babel-loader": "9.1.2",
|
"babel-loader": "9.1.2",
|
||||||
"css-loader": "6.7.3",
|
"css-loader": "6.7.3",
|
||||||
|
"file-loader": "^6.2.0",
|
||||||
"html-webpack-plugin": "5.5.1",
|
"html-webpack-plugin": "5.5.1",
|
||||||
"style-loader": "3.3.2",
|
"style-loader": "3.3.2",
|
||||||
"webpack": "5.80.0",
|
"webpack": "5.80.0",
|
||||||
|
@ -2433,6 +2435,15 @@
|
||||||
"integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
|
"integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/big.js": {
|
||||||
|
"version": "5.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
|
||||||
|
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
|
||||||
|
"dev": true,
|
||||||
|
"engines": {
|
||||||
|
"node": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/binary-extensions": {
|
"node_modules/binary-extensions": {
|
||||||
"version": "2.2.0",
|
"version": "2.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
|
||||||
|
@ -3134,6 +3145,15 @@
|
||||||
"integrity": "sha512-e2aeCAixCj9M7nJxdB/wDjO6mbYX+lJJxSJCXDzlr5YPGYVofuJwGN9nKg2o6wWInjX6XmxRinn3AeJMK81ltw==",
|
"integrity": "sha512-e2aeCAixCj9M7nJxdB/wDjO6mbYX+lJJxSJCXDzlr5YPGYVofuJwGN9nKg2o6wWInjX6XmxRinn3AeJMK81ltw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/emojis-list": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
|
||||||
|
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
|
||||||
|
"dev": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 4"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/encodeurl": {
|
"node_modules/encodeurl": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
|
||||||
|
@ -3422,6 +3442,44 @@
|
||||||
"node": ">=0.8.0"
|
"node": ">=0.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/file-loader": {
|
||||||
|
"version": "6.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
|
||||||
|
"integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"loader-utils": "^2.0.0",
|
||||||
|
"schema-utils": "^3.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.13.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/webpack"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"webpack": "^4.0.0 || ^5.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/file-loader/node_modules/schema-utils": {
|
||||||
|
"version": "3.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
|
||||||
|
"integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@types/json-schema": "^7.0.8",
|
||||||
|
"ajv": "^6.12.5",
|
||||||
|
"ajv-keywords": "^3.5.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.13.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/webpack"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/fill-range": {
|
"node_modules/fill-range": {
|
||||||
"version": "7.0.1",
|
"version": "7.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
||||||
|
@ -4196,6 +4254,11 @@
|
||||||
"shell-quote": "^1.7.3"
|
"shell-quote": "^1.7.3"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/leaflet": {
|
||||||
|
"version": "1.9.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
|
||||||
|
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
|
||||||
|
},
|
||||||
"node_modules/loader-runner": {
|
"node_modules/loader-runner": {
|
||||||
"version": "4.3.0",
|
"version": "4.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
|
||||||
|
@ -4205,6 +4268,20 @@
|
||||||
"node": ">=6.11.5"
|
"node": ">=6.11.5"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/loader-utils": {
|
||||||
|
"version": "2.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
|
||||||
|
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"big.js": "^5.2.2",
|
||||||
|
"emojis-list": "^3.0.0",
|
||||||
|
"json5": "^2.1.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8.9.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/locate-path": {
|
"node_modules/locate-path": {
|
||||||
"version": "5.0.0",
|
"version": "5.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
|
||||||
|
@ -8050,6 +8127,12 @@
|
||||||
"integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
|
"integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"big.js": {
|
||||||
|
"version": "5.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
|
||||||
|
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"binary-extensions": {
|
"binary-extensions": {
|
||||||
"version": "2.2.0",
|
"version": "2.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
|
||||||
|
@ -8572,6 +8655,12 @@
|
||||||
"integrity": "sha512-e2aeCAixCj9M7nJxdB/wDjO6mbYX+lJJxSJCXDzlr5YPGYVofuJwGN9nKg2o6wWInjX6XmxRinn3AeJMK81ltw==",
|
"integrity": "sha512-e2aeCAixCj9M7nJxdB/wDjO6mbYX+lJJxSJCXDzlr5YPGYVofuJwGN9nKg2o6wWInjX6XmxRinn3AeJMK81ltw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"emojis-list": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
|
||||||
|
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"encodeurl": {
|
"encodeurl": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
|
||||||
|
@ -8793,6 +8882,29 @@
|
||||||
"websocket-driver": ">=0.5.1"
|
"websocket-driver": ">=0.5.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"file-loader": {
|
||||||
|
"version": "6.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
|
||||||
|
"integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"loader-utils": "^2.0.0",
|
||||||
|
"schema-utils": "^3.0.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"schema-utils": {
|
||||||
|
"version": "3.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
|
||||||
|
"integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"@types/json-schema": "^7.0.8",
|
||||||
|
"ajv": "^6.12.5",
|
||||||
|
"ajv-keywords": "^3.5.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"fill-range": {
|
"fill-range": {
|
||||||
"version": "7.0.1",
|
"version": "7.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
||||||
|
@ -9354,12 +9466,28 @@
|
||||||
"shell-quote": "^1.7.3"
|
"shell-quote": "^1.7.3"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"leaflet": {
|
||||||
|
"version": "1.9.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
|
||||||
|
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
|
||||||
|
},
|
||||||
"loader-runner": {
|
"loader-runner": {
|
||||||
"version": "4.3.0",
|
"version": "4.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
|
||||||
"integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
|
"integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"loader-utils": {
|
||||||
|
"version": "2.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
|
||||||
|
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"big.js": "^5.2.2",
|
||||||
|
"emojis-list": "^3.0.0",
|
||||||
|
"json5": "^2.1.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"locate-path": {
|
"locate-path": {
|
||||||
"version": "5.0.0",
|
"version": "5.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
|
||||||
|
|
|
@ -23,6 +23,7 @@
|
||||||
"@babel/preset-react": "7.18.6",
|
"@babel/preset-react": "7.18.6",
|
||||||
"babel-loader": "9.1.2",
|
"babel-loader": "9.1.2",
|
||||||
"css-loader": "6.7.3",
|
"css-loader": "6.7.3",
|
||||||
|
"file-loader": "^6.2.0",
|
||||||
"html-webpack-plugin": "5.5.1",
|
"html-webpack-plugin": "5.5.1",
|
||||||
"style-loader": "3.3.2",
|
"style-loader": "3.3.2",
|
||||||
"webpack": "5.80.0",
|
"webpack": "5.80.0",
|
||||||
|
@ -31,6 +32,7 @@
|
||||||
"webpack-merge": "5.8.0"
|
"webpack-merge": "5.8.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"leaflet": "1.9.4",
|
||||||
"prop-types": "15.8.1",
|
"prop-types": "15.8.1",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-dom": "18.2.0"
|
"react-dom": "18.2.0"
|
||||||
|
|
|
@ -3,6 +3,9 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>React Example</title>
|
<title>React Example</title>
|
||||||
|
<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.css" />
|
||||||
|
<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>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|
Loading…
Reference in New Issue