Mapbox Store Locator에 대한 외부 GeoJSON 파일 가져 오기

최근에 Mapbox Store Locator 자습서를 따라 내가 일하는 여행 예술가를위한 간단한 "다가오는 여행 날짜"지도를 작성했습니다. 위대한 일이지만 geoJSON 포인트를 더 쉽게 업데이트 할 수있는 방법을 찾고 있습니다. 동료의 페이지 유지 관리를 일일이 전달할 것이고 포인트를 쉽게 추가/제거 할 수 있기를 바랍니다. . 현재 geoJSON 포인트는 스크립트에 인라인으로 코딩되어 있지만 geojson.io 또는 Mapbox 데이터를 통해 파일을 업데이트 할 수 있으면 자동으로 새 포인트를지도로 가져 오는 것이 이상적입니다. 주어진 시간에지도 상에있는 대부분의 데이터는 ~ 100 개의 단일 장소이며, 다각형이나 경계 상자는 사용되지 않습니다.Mapbox Store Locator에 대한 외부 GeoJSON 파일 가져 오기

이것은 스크립트가 현재 geoJSON 포인트를 얻는 방법입니다. 변수 "stores"가 모든 인라인을 유지합니다. Mapbox 또는 geojson.io와 같은 CMS에서 geoJSON 데이터를 편집/추가/제거하고 스크립트의 URL을 통해 동적으로 업데이트 할 수있는 가장 좋은 방법은 궁금합니다.

이러한 내용이 무의미하다고 생각한다면 용서해주세요. 도와 주셔서 미리 감사드립니다.

var stores = { 

"type": "FeatureCollection", 
"features": [ 
{ 
    "type": "Feature", 
    "geometry": { 
    "type": "Point", 
    "coordinates": [ 
     -77.034084142948, 
     38.909671288923 
    ] 
    }, 
    "properties": { 
    "phoneFormatted": "(202) 234-7336", 
    "phone": 2022347336, 
    "address": "1471 P St NW", 
    "city": "Washington DC", 
    "country": "United States", 
    "crossStreet": "at 15th St NW", 
    "postalCode": 20005, 
    "state": "D.C." 
    } 
} 

map.on('load', function(e) { 
    map.addSource("places", { 
    "type": "geojson", 
    "data": stores 
});

출처

2017-12-13 Bret Hawkins

실제로는 실제로 쉽습니다.

"data": "https://..."

문서와

"data": stores

: 당신은이 라인을 대체 https://www.mapbox.com/mapbox-gl-js/style-spec#sources-geojson

그래서 당신은 당신이 온라인으로 그 GeoJSON 파일을 저장하고 정기적으로 업데이트 할 수있는 장소를 찾을 필요가있다. 때때로 나는 Github의 Gist를이 목적으로 사용합니다.

출처

2017-12-18 23:10:09

감사합니다. 스티브! 내가 찾은 한 가지 사실은 Mapbox Store Locator 스크립트가 상점 목록 등을 만드는 함수에 "stores"변수를 사용한다는 것입니다 -이 함수가 포함 된 "stores"변수 없이도 계속 작동 할 수 있도록하려면 어떻게해야합니까? 인라인 geoJSON 데이터? –

아. 당신은 그것을 언급 했어야합니다. 이 경우, 먼저 D3의'.json()'메소드를 사용하여 GeoJSON을 직접 가져 와서 원래의 방법을 따라야합니다. –

Mapbox Store Locator에 대한 외부 GeoJSON 파일 가져 오기

답변

관련 문제