Как передать пользовательские поля в mapbox-gl js для создания точек на карте? - PullRequest
Новая
       24

Как передать пользовательские поля в mapbox-gl js для создания точек на карте?

0 голосов
/ 13 мая 2019

Я создал карту с помощью mapbox и нанес на карту несколько пользовательских точек, с которыми вы можете взаимодействовать. Я также использую Wordpress и хочу использовать расширенные настраиваемые поля для создания каждой точки, чтобы ими можно было легко управлять от не технического специалиста. Все поля настроены, но у меня возникают проблемы с передачей их в javascript в моем шаблоне php.

Я пытался использовать цикл, но я не могу использовать цикл внутри JavaScript. Вот мой код Mapbox, который я использую для построения точек и хочу использовать расширенные настраиваемые поля с: 

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/coptmarketing/cjvi7hc4602dk1cpgqul6mz0b',
    center: [-76.615573, 39.285685],
    zoom: 16 // starting zoom
});

var geojson = {
    "type": "FeatureCollection",
    "features": [{
            "type": "Feature",
            "properties": {
                "title": "Shake Shack",
                "id": "shake-shack"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-76.609844, 39.286894]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "title": "Starbucks",
                "id": "starbucks"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-76.619071, 39.286649]
            }
        }
    ]
};

Я сохранил данные в массиве JSON: 

[{"title":"Shake Shack","slug":"shake-shack","latitude":"-76.609844","longitude":"39.286894"},{"title":"Starbucks","slug":"starbucks","latitude":"-76.619071","longitude":"39.286649"}]

Как мне вставить это в geoJSON?

1 Ответ

0 голосов
/ 13 мая 2019

Разобрался:

Сначала я создал плагин, который сохранял пользовательские данные постов в массиве JSON и сохранял их на сервере. Это также обновляется каждый раз, когда я обновляю, сохраняю или удаляю сообщение. Вот пример JSON: 

data = {"placeList": [{"title":"Shake Shack","slug":"shake-shack","latitude":"-76.609844","longitude":"39.286894"},{"title":"Starbucks","slug":"starbucks","latitude":"-76.619071","longitude":"39.286649"}]}

Затем в php-файле я вызвал файл .json и в своем javascript вставил массив в GeoJSON: 

var placeJson = data;

        var geojson = {
          type: "FeatureCollection",
          features: [],
        };

        for (i = 0; i < placeJson.placeList.length; i++) {

          geojson.features.push({
            "type": "Feature",
            "geometry": {
              "type": "Point",
              "coordinates": [placeJson.placeList[i].latitude, placeJson.placeList[i].longitude]
            },
            "properties": {
              "id": placeJson.placeList[i].slug,
              "title": placeJson.placeList[i].title
            }
          });
        }
...