diff --git a/leaflet-js/README.md b/leaflet-js/README.md
index 46208d4..17eb998 100644
--- a/leaflet-js/README.md
+++ b/leaflet-js/README.md
@@ -8,6 +8,7 @@
# Links
+* [leaflet & webpack](https://gist.github.com/simon04/3b89aa6ca858c72110bb80dd13b4f941)
* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
* [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)
diff --git a/leaflet-js/app/app.jsx b/leaflet-js/app/app.jsx
index 4110628..ace731e 100644
--- a/leaflet-js/app/app.jsx
+++ b/leaflet-js/app/app.jsx
@@ -1,10 +1,28 @@
+import L from 'leaflet';
import React from 'react';
+import 'leaflet/dist/leaflet.css'
+
import Home from './pages/home';
+import './index.css';
+
export default function App() {
+var map = L.map("map").setView([51.505, -0.09], 13);
+
+L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+ attribution:
+ '© OpenStreetMap contributors',
+}).addTo(map);
+
+L.marker([51.5, -0.09])
+ .addTo(map)
+ .bindPopup("A pretty CSS3 popup.
Easily customizable.")
+ .openPopup();
+
return (
React.js
+
)
}
diff --git a/leaflet-js/app/index.css b/leaflet-js/app/index.css
new file mode 100644
index 0000000..6be7e4b
--- /dev/null
+++ b/leaflet-js/app/index.css
@@ -0,0 +1,11 @@
+html,
+body {
+ height: 100%;
+ padding: 0;
+ margin: 0;
+}
+
+#map {
+ z-index: 0;
+ height: 100%;
+}
diff --git a/leaflet-js/package-lock.json b/leaflet-js/package-lock.json
index c92e0ce..aac1d79 100644
--- a/leaflet-js/package-lock.json
+++ b/leaflet-js/package-lock.json
@@ -9,6 +9,7 @@
"version": "0.1.0",
"license": "GPL-3.0-or-later",
"dependencies": {
+ "leaflet": "1.9.4",
"prop-types": "15.8.1",
"react": "18.2.0",
"react-dom": "18.2.0"
@@ -4196,6 +4197,11 @@
"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": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -9354,6 +9360,11 @@
"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": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
diff --git a/leaflet-js/package.json b/leaflet-js/package.json
index b275acb..608564f 100644
--- a/leaflet-js/package.json
+++ b/leaflet-js/package.json
@@ -31,6 +31,7 @@
"webpack-merge": "5.8.0"
},
"dependencies": {
+ "leaflet": "1.9.4",
"prop-types": "15.8.1",
"react": "18.2.0",
"react-dom": "18.2.0"
diff --git a/leaflet-js/public/index.html b/leaflet-js/public/index.html
index 965d3b5..71eea47 100644
--- a/leaflet-js/public/index.html
+++ b/leaflet-js/public/index.html
@@ -2,7 +2,7 @@
- React Example
+ leaflet-js