Skip to content

Instantly share code, notes, and snippets.

@simon04

simon04/.gitignore

Last active September 19, 2023 12:33
Show Gist options
  • Save simon04/3b89aa6ca858c72110bb80dd13b4f941 to your computer and use it in GitHub Desktop.
Save simon04/3b89aa6ca858c72110bb80dd13b4f941 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet & webpack
Raw
.gitignore
dist/
node_modules/
Raw
README.md
Raw
index.css
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
z-index: 0;
height: 100%;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Leaflet</title>
</head>
<body>
<div id="map"></div>
<script src="./dist/app.js"></script>
</body>
</html>
Raw
index.js
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "./index.css";
var map = L.map("map").setView([51.505, -0.09], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
L.marker([51.5, -0.09])
.addTo(map)
.bindPopup("A pretty CSS3 popup.<br> Easily customizable.")
.openPopup();
Raw
package.json
{
"scripts": {
"build": "webpack"
},
"dependencies": {
"leaflet": "^1.6.0"
},
"devDependencies": {
"css-loader": "^3.4.0",
"file-loader": "^5.1.0",
"style-loader": "^1.1.1",
"webpack": "^4.41.4",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
}
}
Raw
webpack.config.js
module.exports = {
mode: "production",
entry: "./index.js",
output: {
filename: "app.js",
},
module: {
rules: [
{
test: /\.css$/,
loaders: ["style-loader", "css-loader"],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: "file-loader",
},
},
],
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment