I made script which create marker on the map after mouse left button click. And after mouse right button click marker removed.
All markers coordinates storage in browser localStorage.
I use yandex-maps technoogy.
code:
ymaps.ready(init);
var myMap,
collectionMarkers,
myPlacemark;
function init(){
myMap = new ymaps.Map("map", {
center: [55.76, 37.64],
zoom: 7
});
collectionMarkers = new ymaps.GeoObjectCollection({}, {
preset: "islands#redIcon"
});
myMap.geoObjects.add(collectionMarkers);
renderSavedPoints();
myMap.events.add('click', function (e) {
var coords = e.get('coords');
//console.log('lat:', coords[0], 'lng:', coords[1]);
var placemark = new ymaps.Placemark([coords[0], coords[1]]);
collectionMarkers.add(placemark);
addToStoragePoint({
lat: coords[0],
lng: coords[1]
});
});
collectionMarkers.events.add('contextmenu', function(e) {
var coords = e.get('target').geometry.getCoordinates();
var pointLat = coords[0],
pointLng = coords[1];
//console.log('right click', pointLat, pointLng);
var points = getPoints(),
newPoints = [];
newPoints = points.filter((point) => point.lat != pointLat && point.lng != pointLng);
localStorage.points = JSON.stringify(newPoints);
renderSavedPoints();
});
};
function getPoints() {
return localStorage.points ? JSON.parse(localStorage.points) : [];
};
function addToStoragePoint(pointObj) {
console.log('addToStoragePoint start');
var points = getPoints();
points.push(pointObj);
localStorage.points = JSON.stringify(points);
};
function renderSavedPoints() {
var points = getPoints();
collectionMarkers.removeAll();
points.forEach((point) => {
var placemark = new ymaps.Placemark([point.lat, point.lng]);
collectionMarkers.add(placemark);
});
};