simon04/.gitignore

## .gitignore
dist/
node_modules/

## README.md

      
    Raw
  

              README.md
            
          
    https://leafletjs.com/

npm install
npm run build
Open index.html in browser


## index.css
html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#map {
  z-index: 0;
  height: 100%;
}

## 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>

## 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();

## 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"
  }
}

## 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",
        },
      },
    ],
  },
};
	html,
	body {
	height: 100%;
	padding: 0;
	margin: 0;
	}

	#map {
	z-index: 0;
	height: 100%;
	}
	<!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>
	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:
	'© <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();
	{
	"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"
	}
	}
	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",
	},
	},
	],
	},
	};