Add Markers onclick
HTML
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='map'></div>
CSS
#map {
position:absolute;
top:0;
bottom:0;
width:100%;
height: 100%;
}
JavaScript
var myBounds = [[0.001, -179.999],[84.999, -0.001]];
var map = L.map('map', {maxBounds: myBounds, minZoom: 1}).setView([42.5, -90], 2);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {noWrap: true, bounds: myBounds}).addTo(map);
var redmarker = L.icon({
iconUrl: 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/48/map-marker-icon.png',
iconSize: [48, 48], // size of the icon
iconAnchor: [24, 48], // point of the icon which will correspond to marker's location
popupAnchor: [-2, -48] // point from which the popup should open relative to the iconAnchor
});
var popup = L.popup();
// On map click shows coordinates X, Y
function onMapClick(e) {
var geojsonFeature = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [e.latlng.lat, e.latlng.lng]
}
}
var marker;
L.geoJson(geojsonFeature, {
pointToLayer: function(feature, latlng){
marker = L.marker(e.latlng, {
title: "Resource Location",
alt: "Resource Location",
riseOnHover: true,
draggable: true,
icon: redmarker
}).bindPopup("<<span>X: " + e.latlng.lng + ", Y: " + e.latlng.lat + "</span><br><a href='#' id='marker-delete-button'>Delete marker</a>");
marker.on("popupopen", onPopupOpen);
// Begin store markers in local storage
storeMarker(e.latlng);
// End store markers in local storage
return marker;
}
}).addTo(map);
}
function onPopupOpen() {
var tempMarker = this;
$("#marker-delete-button:visible").click(function () {
map.removeLayer(tempMarker);
});
}
/// Load markers
function loadMarkers()
{
var markers = localStorage.getItem("markers");
if(!markers) return;
markers = JSON.parse(markers);
markers.forEach(function(entry) {
latlng...