leaflet

%angular
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<div id="map" style="height: 300px; width: 50%"> </div>

<input type="button" value="Click me", onclick="eval()">
<script type="text/javascript">

//custom icons
var selectedIcon = L.icon({
    iconUrl: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    iconSize: [38, 38],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76]
});

var basicIcon = L.icon({
    iconUrl: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/info-i_maps.png',
    iconSize: [38, 38],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76]
});

var myGroup = null;

function initMap() {
    var map =L.map('map').setView([33.415, -111.831],1);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
        maxZoom: 15,
        minZoom: 3
    }).addTo(map);
    var geoMarkers = L.layerGroup().addTo(map);
    //manually added markers
    var lat = 31.603513;
    var long = -94.655487;
    var lat1 = 38.381572;
    var long1 = -121.49440;
    var marker = L.marker([ lat, long ], {icon: basic}).on('click', function(e){ onClick(e, '1' ); });
    var marker1 = L.marker([ lat1, long1],  {icon: basic}).on('click', function(e){ onClick(e, '2' ); });

//having a group is good when we will load bunch of points from some data source   (loop through source and add it to layerGroup)
    myGroup = L.layerGroup([marker, marker1]).addTo(map);
}

var id_selected_arr = [];
function onClick(e, id) {
    //if clicked, set new icon, otherwise set previous one
    var actMarker = e.target;
    actMarker.setIcon(actMarker.options.icon == selectedIcon ? basicIcon : selectedIcon);

//new id
    if(!id_selected_arr.includes(id))
    {
        console.log('id is new to me ' + id)
        id_selected_arr.push(id)
    }
//unslected id (user clicked twice), remove id
    else
    {
        console.log('I have already seen it before ' + id)
        var value = 3

    id_selected_arr = id_selected_arr.filter(function(item) {
        return item !== id;
        });
    }

     console.log('markerID: ' + id)
 //   alert('markerID: ' + id);
}

function eval() {
 //   z.angularBind("selected", id_selected_arr)

//this wont work
//    myGroup.forEach(item => item.setIcon(basicIcon));

//set icons for all markers back
   myGroup.eachLayer(function(marker) { marker.setIcon(basicIcon);   });
}



if (window.L) {
    initMap();
} else {
    console.log('Loading Leaflet library');
    var sc = document.createElement('script');
    sc.type = 'text/javascript';
    sc.src='https://unpkg.com/leaflet@1.0.3/dist/leaflet.js';
    sc.onload = initMap;
    sc.onerror = function(err) { alert(err); }
    document.getElementsByTagName('head')[0].appendChild(sc);
}
</script>