Блог

Я создаю макет веб-карты для Jekyll на основе сообщения в блоге, хотя я использую Leaflet.js вместо Mapbox.js .

В начале сообщения маркеры определяются как список массивов. Формат следующий:


[ "lng, lat", "Popup Content", "Font-awesome Icon", "Color of Marker"]


Два маркера могут выглядеть следующим образом:


markers:
- ["-84.312, 33.845", "Regional Office", "home", "red"]
- ["-84.393, 33.753", "Federal Building", "building", "blue"]


Я беру параметры из маркера и добавляю их в представление GeoJSON в качестве свойств. Чтобы использовать Leaflet.awesome-markers, каждый элемент должен быть представлен в виде слоя маркеров вместо слоя GeoJSON. К счастью, слой GeoJSON предоставляет метод для преобразования каждой точки в слой маркеров.

Кажется, что, хотя у меня есть доступ к функции (и, следовательно, к свойствам функций), я не могу заставить переменную feature.properties.icon оценивать. После того, как Jekyll работает по волшебству и создает статические HTML-файлы, я вижу, что для свойства icon по-прежнему установлено значение «feature.properties.icon» вместо значения этой переменной.

console.log(feature.properties.icon) вычисляется на "home" , как и ожидалось в этом случае.

Post Front-Matter:

 ---
title: "This is an Example of a Map-Centric Post"
layout: post
tags:
 - Map

map: leaflet
center: "33.733784, -84.389369"
zoom: 9
map-background: terrain
markers: # [ Coordinates, Popup Content, Font-Awesome Icon, Color]
 - ["-84.312, 33.845", "Office", "home", "red"]
 - ["-84.393, 33.753", "Federal Building", "building", "blue"]

---
  

leaflet.html включить:

 <script>
var toner = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> amp;mdash; Map data amp;copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    subdomains: 'abcd',
    minZoom: 0,
    maxZoom: 20
}),
terrain = L.tileLayer('http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png', {
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> amp;mdash; Map data amp;copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    subdomains: 'abcd',
    minZoom: 4,
    maxZoom: 18
}),
map = L.map('map', {
    layers: [{{page.map-background}}]
}).setView([ {{page.center}} ], {{page.zoom}} );

map.touchZoom.disable();
map.scrollWheelZoom.disable();
if (map.tap) map.tap.disable();

{% if page.markers %}
    var markers = [{
        "type":"FeatureCollection",
        "features":[
            {% for marker in page.markers %}
                {
                    "type":"Feature",
                    "properties":{
                        "popup": "{{marker[1]}}",
                        "icon": "{{marker[2]}}",
                        "color": "{{marker[3]}}"
                    },
                    "geometry":{
                        "type":"Point",
                        "coordinates":[ {{ marker[0] }} ]
                    }
                }{% if forloop.last == false %},{% endif %}
            {% endfor %}
        ]
    }];

L.geoJson(markers, {
    pointToLayer: function (feature, latlng) {
        console.log(feature.properties.icon) // This works!
        var mapMarker = L.AwesomeMarkers.icon({
            icon: feature.properties.icon, // This doesn't work
            prefix: 'fa',
            markerColor: feature.properties.color
        });
        return L.marker(latlng, {
            icon: mapMarker
        });
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.popup);
    }
    }).addTo(map);

    {% else %}
        markerLayer.clearLayers();
    {% endif %}

</script>
  

Средства разработки:

Редактировать: переключение на обозначение скобками icon: feature['properties']['icon'] работало только на index.html страница, а не страница записи в блоге.