追加データは、マーカー要素

Question

GOALをleaflet.jsする属性：マーカー要素のマークアップに

をleaflet.jsするために、データ属性を追加し、私はマップと「スポットライト」の領域でプロジェクトを持っています。

マップは、私は地図上のピンをクリックすると、場所がleaflet.js

を使用して移入され、私はそれはスポットライト領域に表示された画像や情報を対応だ持っていると思います。

マップなしの予備テストを行った：http://codepen.io/sheriffderek/pen/yOmjLVここでは、コインの2辺を接続するためにデータ属性を使用しました。 （1つのデータセットはPHPによって吐き出され、地図データはAPI ajaxコールです）

私は、クラスやIDやデータやrelなどを追加することができます。それ：

// Purveyor types - for query endpoints 
var bar = 4; 
var retailer = 3; 

// Create the "map" 
var onSiteMap = L.map('on-site-map').setView([34.0758661, -118.25430590], 13); 

// Define the pin (no SVG?) 
var onSiteIcon = L.divIcon({ 
    className: 'my-div-icon' // this gets one class name as far as I can tell 
}); 

// Setup map "Look" 
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(onSiteMap); 

// Grab the data 
$.ajax({ 
    url: 'http://xxxxxx.com/wp-json/wp/v2/purveyor?purveyor-type=' + bar, 
    success: function (data) { 
    var purveyorData = data; 
    for (var i = 0; i < data.length; i++) { 
     var ourLat = purveyorData[i].acf.purveyor_latitude; 
     var ourLong = purveyorData[i].acf.purveyor_longitude; 
     var ourSlug = purveyorData[i].slug; 
     // create the markers 
     L.marker([ ourLat , ourLong ], { 
     icon: onSiteIcon, 
     slug: ourSlug // creates an extra option... but... 
     }).addTo(onSiteMap); 
    } 
    }, 
    cache: false 
}); 

私は「オプション」とそのためのユニークな値を追加することができます - オブジェクトに、それは私がマークアップに何かを得る助けにはなりません。

マーカーのための要素は、次のように終わる：

<div 
    class="leaflet-marker-icon my-div-icon leaflet-zoom-animated leaflet-clickable" 
    tabindex="0" style="margin-left: -6px; margin-top: -6px; width: 12px; height: 12px; transform: translate3d(276px, 140px, 0px); z-index: 140;"></div> 

はもっとこのような何かを取得しよう：私は少し研究してきました

<div 
    id='possible-id-237' 
    rel='possible-rel' 
    data-name='this-slug' 
    class="leaflet-marker-icon my-div-icon leaflet-zoom-animated leaflet-clickable" 
    tabindex="0" style="margin-left: -6px; margin-top: -6px; width: 12px; height: 12px; transform: translate3d(276px, 140px, 0px); z-index: 140;"></div> 

- と最も質問は2014年以上でした。私は新しい文書には欠けているものがあると思っています。

Answer 1

「オプション」とそれに固有の値をオブジェクトに追加することはできますが、マークアップに役立つものはありません。

これは正しいことです - リーフレットはオプションを魔法のようにHTML data属性に変換しません。

最初に：leaflet codeを読んでください！ちょっとした時間を費やしても分かりやすいです。マーカーの場合、HTMLは実際にL.MarkerではなくL.Iconに組み込まれています。

次のようなものはないあなたがsrc/layer/marker/icon.jsでコードを気づくでしょう、ということをやった後は：あなたが、その後Leaflet's plugin guideを読めば、あなたはのラインにプラグインを作ることができ、その後

_setIconStyles: function (img, name) { 
    var options = this.options; 

    if (options.something) { 
     img.style.something = something(something); 
    } 
}, 

を実現します：

L.Icon.DataMarkup = L.Icon.extend({ 

    _setIconStyles: function(img, name) { 
     L.Icon.prototype._setIconStyles.call(this, img, name); 

     if (options.slug) { 
      img.dataset.slug = options.slug; 
     } 
    } 

}); 

あなたはそこから作業することができます。