Skip to content

Instantly share code, notes, and snippets.

@mbrucher mbrucher/index.html
Last active Mar 30, 2019

Embed
What would you like to do?
<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"
}
}
@import "~leaflet/dist/leaflet.css";
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];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.