リーフレットの変更円マーカーの色はテキストフィールドに基づいて

Question

以下のコードを使用してリーフレットの地図に円マーカーが表示されます。

しかし、 'stype'という名前の属性フィールドに基づいて異なる色でマーカーを表示したいとします。

どのように私がこれを達成するための助けや指導？

 function siteslabels (feature, layer){ 
     layer.bindPopup("<p class='info header'>"+ 
     "<b>" + feature.properties.SITE + "</b>" + 
     "</br>" + feature.properties.Address1 + 
     "</br>" + feature.properties.stype + 
     "</p>"); 
     }; 


     var geojsonMarkerOptions = { 
      radius: 8, 
      fillColor: 'green', 
      color: 'black', 
      weight: 1, 
      opacity: 1, 
      fillOpacity: 0.8 
     }; 

     L.geoJson(sites, { 
      pointToLayer: function (feature, latlng) { 
       return L.circleMarker(latlng, geojsonMarkerOptions); 
      }, 
      onEachFeature: siteslabels 
     }).addTo(map); 

Answer 1

Leaflet GeoJSON tutorial、pointToLayerオプションセクションを確認してください。

サークルマーカーとしてポイントをレンダリングすると、styleにさまざまな色を簡単に設定できます。

マーカーを貼り付ける場合は、カスタムアイコンを指定する必要があります。 marker pluginsを検索することができます。 Leaflet.Extra-Markers。

Answer 2

ソート済みです。ここに私のコードは

<script>  
     <!-- long and lat for UK & Zoom level for whole of UK --> 
     var map = L.map('map',{ center:[54.038486, -1.948915], zoom: 5}); 

     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
     }).addTo(map); 



     <!-- LAYERS/SITES --> 
     <!-- LAYERS/SITES POP UP CONTENT--> 
     function siteslabels (feature, layer){ 
     layer.bindPopup("<p class='info header'>"+ 
     "<b>" + feature.properties.SITE + "</b>" + 
     "</br>" + feature.properties.Address1 + 
     "</br>" + feature.properties.stype + 
     "</p>"); 
     }; 

     <!-- LAYERS/SITES POP UP COLOUR CIRCLE MARKERS-> 
     function getColor(stype) { 
      switch (stype) { 
      case 'POP': 
       return 'orange'; 
      case 'Regen': 
       return 'green'; 
      case 'LLU': 
       return 'blue'; 
      case 'Colo': 
       return 'purple'; 
      case 'DMSU': 
       return 'blue'; 
      default: 
       return 'white'; 
      } 
     } 

     <!-- LAYERS/SITES ADD LAYER-> 
     L.geoJson(sites, { 
      pointToLayer: function (feature, latlng) { 
      return new L.CircleMarker(latlng, {radius: 8, 
               fillOpacity: 1, 
               color: 'black', 
               fillColor: getColor(feature.properties.stype), 
               weight: 1,}); 
      }, 
      onEachFeature: siteslabels 
     }).addTo(map); 


    </script>