Open Street Mapにカテゴリ毎に違ったアイコンを表示したい

Question

###前提・実現したいこと
OSMにGeojsonデータを読み込んで、カテゴリ毎に違ったアイコンを表示したいと思っています（Leaflet.js使用）。

Geojsonを読み込んでマーカーを立てて、ポップアップさせるところまでは出来たのですが、Javascriptを理解していないせいか、チュートリアルを見てもどうもその後がちんぷんかんぷんです。

###該当のソースコード

$.getJSON("geojson.php", function (data) {
                    
     var geojson = L.geoJson(data, {
         onEachFeature: function (feature, layer) {
               layer.bindPopup('<b>' + feature.properties.name + '</b><br />' + feature.properties.address);
         }

     });

     geojson.addTo(map);

});

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": ["140.10", "39.60"]
        },
        "properties": {
            "name": "鈴木商店",
            "address": "宮城県仙台市青葉区",
            "category": "1"
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": ["140.00", "39.40"]
        },
        "properties": {
            "name": "佐藤水産",
            "address": "宮城県名取市",
            "category": "2"
        }
    }

###試したこと
IF分岐を考える前に、とりあえずカスタムマーカーに変えてみようと、Leaflet.jsのチュートリアルを参考にしてみましたが、早くもこの段階でつまずいてしまいました。

Leaflet.jsチュートリアル

var greenIcon = L.icon({
    iconUrl: 'leaf-green.png',
    shadowUrl: 'leaf-shadow.png',

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

を定義し、

L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");

を、前述した「geojson.addTo(map);」の前に差し込もうにも、どこをどう置き換えたらいいか分かりません。また、カテゴリ別にアイコンを表示するためのIF分岐もこのブロックの中でやるのでしょうか。

OSMのカスタマイズについては、GoogleMapsと違ってなかなか目的の情報に辿り着かず、書籍も見当たらないため、かなり苦戦しておりました。ご指導いただけたら幸いです。よろしくお願いいたします。

Answer 1

多分こんな感じかなと思う。

$.getJSON( 'geojson.php', function ( data ) {
	var geojson = L.geoJson( data, {
		  onEachFeature: function ( feature, layer ) {
			if ( feature.properties && feature.properties.popupContent ) {
				layer.bindPopup( '<b>' + feature.properties.name + '</b><br />' + feature.properties.address );
			}
		  }
		, pointToLayer: function( feature, latlng ) {
			var icn = greenIcon; // デフォルトアイコンを指定
			if ( feature.properties && feature.properties.category === '1' ) { //  "category": "1" の場合。 "category": 1 の場合 === 1 とする
				icn = redIcon;
			}
			return L.marker( latlng, { icon: icn });
		  }
	});
	geojson.addTo(map);
});

リファレンスを見ながら、それが何を表すかを考え、そのあたりをキーワードに検索すれば、案外答えに辿り着けることが多い。

【Documentation - Leaflet - a JavaScript library for interactive maps】
http://leafletjs.com/reference.html#geojson

【Leaflet.js geoJson marker - Google 検索】
https://www.google.co.jp/search?num=100&safe=off&hl=ja&q=Leaflet.js+geoJson+marker

---

---

これが応用を含めて書いてある気がする（英語）。

【Creating a Leaflet.js mapping app from the ground up | Technical Tidbits From Spatial Analysis & Data Science】
http://zevross.com/blog/2014/10/28/tips-for-creating-leafleft-js-maps/

アイコンを使った書き方の例（×2）。（質問文と回答をあわせてみれば正解が見えるはず）

【Leaflet: how to use a custom marker on a geojson layer? - Geographic Information Systems Stack Exchange】
http://gis.stackexchange.com/questions/121424/leaflet-how-to-use-a-custom-marker-on-a-geojson-layer

【How can I change the style of marker in leaflet (from GeoJSON)? - Geographic Information Systems Stack Exchange】
http://gis.stackexchange.com/questions/65964/how-can-i-change-the-style-of-marker-in-leaflet-from-geojson

Comments

[capella]

早速のご回答ありがとうございます！
今こちらの情報に辿り着いたところでした。

http://gis.stackexchange.com/questions/113076/custom-marker-icon-based-on-attribute-data-in-leaflet-geojson

お教えいただいたコード含め、これから色々試してみます！

[capella]

解決しました！まだやりたい事を実現するまでには程遠いのですが…
ありがとうございました！

[kei344]

解決できたようで良かったです。

> まだやりたい事を実現するまでには程遠いのですが…
がんばってください！