I want to add a new marker on the map when I right click,
function InitialiserCarte() {
var map = L.map('map').setView([48.866667, 2.333333], 17);
// create the tile layer with correct attribution
var tuileUrl = 'http://{s}.tile.osm/{z}/{x}/{y}.png';
var attrib='Map data © <a href="">OpenStreetMap</a> contributors';
var osm = L.tileLayer(tuileUrl, {
minZoom: 8,
maxZoom: 17,
attribution: attrib
});
osm.addTo(map);
var marker = L.marker([48.866667, 2.333333]).addTo(map);}
and I call this function with this jquery (loading of the page)
$(document).ready(function(){
InitialiserCarte();
});
Is it possible to add marker dynamically with a click action ?
I want to add a new marker on the map when I right click,
function InitialiserCarte() {
var map = L.map('map').setView([48.866667, 2.333333], 17);
// create the tile layer with correct attribution
var tuileUrl = 'http://{s}.tile.osm/{z}/{x}/{y}.png';
var attrib='Map data © <a href="http://openstreetmap">OpenStreetMap</a> contributors';
var osm = L.tileLayer(tuileUrl, {
minZoom: 8,
maxZoom: 17,
attribution: attrib
});
osm.addTo(map);
var marker = L.marker([48.866667, 2.333333]).addTo(map);}
and I call this function with this jquery (loading of the page)
$(document).ready(function(){
InitialiserCarte();
});
Is it possible to add marker dynamically with a click action ?
Share Improve this question edited Apr 6, 2017 at 19:28 user2441511 11.1k3 gold badges28 silver badges52 bronze badges asked Apr 4, 2017 at 15:03 Nassim El HormiNassim El Hormi 151 gold badge1 silver badge6 bronze badges 1- May be related to stackoverflow./questions/18388288/… and stackoverflow./questions/9912145/… – user2441511 Commented Apr 6, 2017 at 18:12
2 Answers
Reset to default 3 function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(macarte);
var marker = L.marker(e.latlng).addTo(macarte)
}
<head>
<link rel="stylesheet" href="https://unpkg./[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="crossorigin="" />
<link rel="stylesheet" type="text/css" href="https://unpkg./[email protected]/dist/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="https://unpkg./[email protected]/dist/MarkerCluster.Default.css" />
<script src="https://unpkg./[email protected]/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="crossorigin=""></script>
<script type='text/javascript' src='https://code.jquery./jquery-3.3.1.min.js'></script>
<script type='text/javascript' src='https://unpkg./[email protected]/dist/leaflet.markercluster.js'></script>
<style type="text/css">
#map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
height:1000px;
width: 1000px;
}
</style>
</head>
<script type="text/javascript">
var theme = 'https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png';
var lat = 8.619543;
var lon = 0.82;
var alt =481;
var macarte = null;
//var trace = new Array();
var i = 0;
//var marker1;
var markerClusters; // Servira à stocker les groupes de marqueurs
var popup = L.popup();
function initMap(){
// Nous définissons le dossier qui contiendra les marqueurs
//var iconBase = 'img';
// Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
macarte = L.map('map').setView([lat, lon], 5);
markerClusters = L.markerClusterGroup; // Nous initialisons les groupes de marqueurs
// Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
L.tileLayer(theme, {
// Il est toujours bien de laisser le lien vers la source des données
//attribution: 'données © OpenStreetMap/ODbL - rendu OSM France',
minZoom: 1,
maxZoom: 20
}).addTo(macarte);
macarte.on('click', onMapClick);
}
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(macarte);
var marker = L.marker(e.latlng).addTo(macarte)
}
$(document).ready(function(){
initMap();
});
</script>
<div id="imap">
<div id="map">
<!-- Ici s'affichera la carte -->
</div>
</div>Start here: the Leaflet Quick Start guide. The "Dealing with events" section talks about how to add events. From this Quick Start guide, here's some example code for adding a popup on a mouse click:
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
Try modifying the onMapClick function to add a marker instead of a popup. You'll need to use e.latlng to set the marker location.