JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<div id="map"></div>

CSS

#map {
    height: 500px;
}

JavaScript

var pointsLayer;
var map;
initmap();

// Initialistaion de la carte
function initmap() {

	//Latitude, longitude et zoom du point sur lequel sera centrée la map
	map = L.map('map').setView([48.583, 7.7478], 12);


	//Récupération du fond de carte voulu (ici, un fond de carte avec niveaux)
	var Thunderforest_Landscape = L.tileLayer('http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png', {
		attribution: '&copy; <a href="http://www.opencyclemap.org">OpenCycleMap</a>, &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	}).addTo(map);

	//On crée et on ajoute le layer qui affichera les points à la map
	pointsLayer = L.geoJson().addTo(map);


	map.on('click', function(e) {
	    displayCoords( e.latlng.lat, e.latlng.lng);
	});

	pointsLayer.on("mouseover", function (e) {

		displayCoords( e.latlng.lat, e.latlng.lng);
	});

}

//Fonction permettant d'ajouter un point sur la carte
function addFeature() {

	var geojsonFeature = {
	    "type": "Feature",
	    "properties": {
	        "name": nom,
	        "amenity": type,
	        "popupContent": description
	    },
	    "geometry": {
	        "type": "Point",
	        "coordinates": [-104.99404, 39.75621]
	    }
	};

	pointsLayer.addData(geojsonFeature);
}

function centerMap() {

	var lat = $( "#latCenter" ).val();
	var lng = $( "#lngCenter" ).val();
	map.panTo(new L.LatLng(lat, lng));
	displayCoords(lat, lng);
}

function displayCoords(lat, lng) {

	$( "#currentLatAndLng").empty();
	$( "#currentLatAndLng").append("Latitude: " + lat + " | Longitude: " + lng);
}