2
\$\begingroup\$

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.

JSFIDDLE

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);
    });
};
\$\endgroup\$
1
\$\begingroup\$

You should be using function such as:

localStorage.setItem('points', JSON.stringify(points));
localStorage.getItem('points');

If you can use es6:

// instead of 
var coords = e.get('target').geometry.getCoordinates();

var pointLat = coords[0],
    pointLng = coords[1];

// Could write  
const [pointLat, pointLng] = e.get('target').geometry.getCoordinates();

// Why save points as variable if it's only used once
var points = getPoints(),
    newPoints = [];

newPoints = points.filter((point) => point.lat != pointLat && point.lng != pointLng);    
// Could just do
var newPoints = getPoints().filter(point => point.lat != pointLat && point.lng != pointLng);  
| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.