mbrucher/index.html

## index.html
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="/static/main.css?lang=fr">
  </head>
  <body>
  <center><div id="map-canvas" style="width:70%;height:500px"></div></center>

  <script src="/static/map.js?lang=fr" type="text/javascript"></script>
  <script type="text/javascript">
    Map.set_one_marker();
  </script>

  </body>
</html>

## map.jsx
const L = require('leaflet')

// set up the map
let map = new L.Map('map-canvas');

// create the tile layer with correct attribution
let osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
let osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
let osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 20, attribution: osmAttrib});

navigator.geolocation.getCurrentPosition((position) => {
    map.setView(new L.LatLng(position.coords.latitude, position.coords.longitude), 14);
  }
)

map.addLayer(osm);

let set_one_marker = () => {
  let marker;
  let popup = L.popup();

  map.addEventListener('click',
                        event => {
    if(marker) {
      map.removeLayer(marker);
    }
    marker = L.marker(event.latlng).addTo(map);
  })
}

module.exports = {
  set_one_marker: set_one_marker,
}

## package.json
{
  "name": "something",
  "version": "0.1.0",
  "description": "Something",
  "main": "index.js",
  "scripts": {
    "build": "webpack -p --progress --config webpack.config.js",
    "dev-build": "webpack --progress -d --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --progress -d --config webpack.config.js --watch"
  },
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "author": "John Doe",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  },
  "dependencies": {
    "leaflet": "^1.4.0",
    "react": "^16.8.4",
    "react-dom": "^16.8.4"
  }
}

## style.scss
@import "~leaflet/dist/leaflet.css";

## webpack.config.js

const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const config = {
  resolve: {
      extensions: ['.js', '.jsx', '.css', '.scss']
  },
  plugins: [
    new MiniCssExtractPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.jsx?/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react'
            ]
          }
        }
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[hash].[ext]',
              useRelativePath: false,
            },
          },
        ],
      },
    ]
  }
};

var jsxConfig = Object.assign({}, config, {
  entry:  __dirname + '/js/map.jsx',
  output: {
    path: __dirname + '/../app/static/',
    filename: 'map.js',
    library: 'Map',
  },
});

var cssConfig = Object.assign({}, config, {
  entry:  __dirname + '/css/style.scss',
  output: {
    path: __dirname + '/../app/static/',
    filename: 'style.css'
  },
});

module.exports = [jsxConfig, cssConfig];
	<html>
	<head>
	<title></title>
	<link rel="stylesheet" href="/static/main.css?lang=fr">
	</head>
	<body>
	<center><div id="map-canvas" style="width:70%;height:500px"></div></center>

	<script src="/static/map.js?lang=fr" type="text/javascript"></script>
	<script type="text/javascript">
	Map.set_one_marker();
	</script>

	</body>
	</html>
	const L = require('leaflet')

	// set up the map
	let map = new L.Map('map-canvas');

	// create the tile layer with correct attribution
	let osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
	let osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
	let osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 20, attribution: osmAttrib});

	navigator.geolocation.getCurrentPosition((position) => {
	map.setView(new L.LatLng(position.coords.latitude, position.coords.longitude), 14);
	}
	)

	map.addLayer(osm);

	let set_one_marker = () => {
	let marker;
	let popup = L.popup();

	map.addEventListener('click',
	event => {
	if(marker) {
	map.removeLayer(marker);
	}
	marker = L.marker(event.latlng).addTo(map);
	})
	}

	module.exports = {
	set_one_marker: set_one_marker,
	}
	{
	"name": "something",
	"version": "0.1.0",
	"description": "Something",
	"main": "index.js",
	"scripts": {
	"build": "webpack -p --progress --config webpack.config.js",
	"dev-build": "webpack --progress -d --config webpack.config.js",
	"test": "echo \"Error: no test specified\" && exit 1",
	"watch": "webpack --progress -d --config webpack.config.js --watch"
	},
	"presets": [
	"@babel/preset-env",
	"@babel/preset-react"
	],
	"author": "John Doe",
	"license": "ISC",
	"devDependencies": {
	"@babel/core": "^7.4.0",
	"@babel/preset-env": "^7.4.0",
	"@babel/preset-react": "^7.0.0",
	"babel-loader": "^8.0.5",
	"css-loader": "^2.1.1",
	"file-loader": "^3.0.1",
	"mini-css-extract-plugin": "^0.5.0",
	"node-sass": "^4.11.0",
	"sass-loader": "^7.1.0",
	"style-loader": "^0.23.1",
	"webpack": "^4.29.6",
	"webpack-cli": "^3.3.0"
	},
	"dependencies": {
	"leaflet": "^1.4.0",
	"react": "^16.8.4",
	"react-dom": "^16.8.4"
	}
	}

	const webpack = require('webpack');
	const MiniCssExtractPlugin = require("mini-css-extract-plugin");

	const config = {
	resolve: {
	extensions: ['.js', '.jsx', '.css', '.scss']
	},
	plugins: [
	new MiniCssExtractPlugin()
	],
	module: {
	rules: [
	{
	test: /\.s?css$/,
	use: [
	MiniCssExtractPlugin.loader,
	'css-loader',
	'sass-loader'
	]
	},
	{
	test: /\.jsx?/,
	exclude: /node_modules/,
	use: {
	loader: 'babel-loader',
	options: {
	presets: [
	'@babel/preset-env',
	'@babel/preset-react'
	]
	}
	}
	},
	{
	test: /\.(png\|jpg\|gif)$/,
	use: [
	{
	loader: 'file-loader',
	options: {
	name: '[hash].[ext]',
	useRelativePath: false,
	},
	},
	],
	},
	]
	}
	};

	var jsxConfig = Object.assign({}, config, {
	entry: __dirname + '/js/map.jsx',
	output: {
	path: __dirname + '/../app/static/',
	filename: 'map.js',
	library: 'Map',
	},
	});

	var cssConfig = Object.assign({}, config, {
	entry: __dirname + '/css/style.scss',
	output: {
	path: __dirname + '/../app/static/',
	filename: 'style.css'
	},
	});

	module.exports = [jsxConfig, cssConfig];