Маркеры GeoJson/Mapbox: пользователи могут изменять свои атрибуты (например, цвет) с помощью кнопки [EDITED]

(EDIT: я получил несколько отрицательных отзывов, потому что случайно опубликовал вопрос с незавершенным именем, пожалуйста, не пугайтесь)

Как в примере с https://www.mapbox.com/mapbox.js/example/v1.0.0/change-marker-color-click/ Я пытаюсь позволить пользователю изменять атрибуты (в данном примере цвет) маркеров.

В этом примере Mapbox атрибут маркера изменяется, когда пользователь щелкает маркер. Однако я хотел бы изменить атрибут маркеров, когда пользователь вместо этого нажимает на один из div (кнопок) в html. Поэтому, когда пользователь нажимает кнопку Button1, цвет маркера 1 должен измениться, а когда пользователь нажимает кнопку Button2, должен измениться цвет маркера 2.

Вы можете найти мой тестовый HTML здесь: http://weareguide.com/test.html

Любая помощь приветствуется.

<!--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>

javascript mapbox geojson markers
person Njit    schedule 06.01.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Используйте так.. Это рабочий пример.

<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>
person Bharat Chodvadiya    schedule 20.01.2014