JSFiddle - React, Tailwind, and code Playground
CSS
body{
margin:0px;
background-color:black;
}
#map {
display:block;
margin-left:auto;
margin-right:auto;
margin-top:10px;
height:1100px;
background-color:black;
}
JavaScript
window.onload = function(){
// Developpement tool (clic to give coordinates
/*
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("Clic aux coordonées " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
*/
var cloudmadeUrl = 'http://indius.fr/map/{z}/{x}/{y}.jpg',
cloudmadeAttribution = 'The War Z Cartographer';
var cloudmade = L.tileLayer(cloudmadeUrl, { maxZoom: 4, minZoom: 2, attribution: cloudmadeAttribution, tms: true, continuousWorld: true });
var map = L.map('map').setView(new L.LatLng(-10, 0), 2);
/*
Colors and styles
*/
var defaultPolygonStyle = {
color: "#000",
opacity: 0.6,
fillOpacity: 0.6,
fillColor: "#000"
};
var opaqueRedStyle = {
color:'red',
fillColor: '#f03',
fillOpacity: 0.5
};
var transparentRedStyle = {
opacity: 0.05,
fillOpacity: 0.03,
};
/*
Functions (click event)
*/
function onLootSpotClick(e){
e.target.setStyle(transparentRedStyle);
map.setView([80.10347, 89.64844], 4);
/*e.target.removeFrom(map);*/
}
/*
Custom icons
*/
var helicopterCrashIcon = L.icon({ iconUrl: 'markers/helicopter.png',iconSize: [16, 16],popupAnchor: [0, -7] }),
postOfficeIcon = L.icon({ iconUrl: 'markers/postoffice.png',iconSize: [16, 16],popupAnchor: [0, -7] }),
supermarketIcon = L.icon({ iconUrl: 'markers/supermarket.png',iconSize: [16, 16],popupAnchor: [0, -7] }),
carIcon = L.icon({ iconUrl: 'markers/car.png',iconSize: [16, 16],popupAnchor: [0,...