GeoJson/Mapbox markers: let users change their attributes (e.g. color) via a button [EDITED]

Question

(EDIT:I received some thumbs down because accidentally posted the question with an unfinished name, please don't be deterred)

As in the example of https://www.mapbox.com/mapbox.js/example/v1.0.0/change-marker-color-click/ I'm trying to let the user change attributes (in this example the color) of markers.

In this example of Mapbox the attribute of a marker is changed when the user clicks on the marker. However, I would like to change the attribute of markers when the user clicks on one of the divs (buttons) in the html instead. So when the user clicks on Button1 the color of Marker 1 should change and when the user clicks on Button2 the color of Marker 2 should change.

You can find my test html here: http://weareguide.com/test.html

Any help is greatly appreciated.

<!--I would like these buttons to do the job-->
<div class='buttons'>
    <div id='Button1' onclick='AddToSelection(1)'>Change color Marker 1</div> <!--call a function that changes Marker 1-->
    <div id='Button2' onclick='AddToSelection(2)'>Change color Marker 2</div> <!--call a function that changes Marker 2-->
</div>

<div id='map'></div>

<script>
var map = L.mapbox.map('map', 'njit.map-cval12af');

var geoJson = [
    {type:'Feature',geometry:{type:'Point',coordinates:[174.7665232,-36.853447]},properties:{title:"Marker 1",'marker-color':'#4c96ce','marker-size':'small'}},
    {type:'Feature',geometry:{type:'Point',coordinates:[174.7774598,-41.29007064]},properties:{title:"Marker 2",'marker-color':'#4c96ce','marker-size':'small'}}
];

map.markerLayer.setGeoJSON(geoJson);

//This is the current function used in the Mapbox example, I want to replace this with the new function
map.markerLayer.on('click',function(e) {
    e.layer.feature.properties['marker-color'] = '#000000';
    map.markerLayer.setGeoJSON(geoJson);
});
</script>

Answer 1

Use like this.. This is working example.

<div class='buttons' style="z-index: 100; position: absolute;">
    <input type="button" onclick='AddToSelection(1)' value="Change color Marker 1" /><!--call a function that changes Marker 1-->
    <input type="button" onclick='AddToSelection(2)' value="Change color Marker 2" /> <!--call a function that changes Marker 2-->
</div>

<div id='map'></div>

<script>
  var map = L.mapbox.map('map', 'njit.map-cval12af');

  var geoJson = [
   {type:'Feature',geometry:{type:'Point',coordinates:[174.7665232,-36.853447]},properties:{title:"Marker 1",'marker-color':'#4c96ce','marker-size':'small'}},
   {type:'Feature',geometry:{type:'Point',coordinates:[174.7774598,-41.29007064]},properties:{title:"Marker 2",'marker-color':'#4c96ce','marker-size':'small'}}
  ];

  map.markerLayer.setGeoJSON(geoJson);

  function AddToSelection(mydata) {
      map.markerLayer.eachLayer(function(marker) {
          var feature = marker.feature;
          if(feature.properties['title'] == 'Marker '+mydata) {
              feature.properties['marker-color'] = '#000000';
              map.markerLayer.setGeoJSON(geoJson);
          }
      }
  }      
</script>