Django - Как отобразить GeoJSON на карте Mapbox?

Question

Используя Django (v1.11) и Mapbox, я пытаюсь отобразить карту с некоторым содержимым GeoJSON, которое я загружаю из локального файла.В качестве примера я использую этот файл sample.json .

Моя идея состояла в том, чтобы загрузить файл GeoJSON в объект JSON и передать его шаблону (в данном случае ).map.html ).Кроме того, я попытался преобразовать объект JSON в строку, передать эту строку, а затем заново создать новый объект JSON с помощью Javascript (как показано ниже).Ни один из методов не сработал для меня.

Однако, если я просто скопирую и вставлю содержимое sample.json в качестве переменной Javascript, все будет работать, и GeoJSON будет отображаться правильно.

Итак, мой вопрос: как я могу загрузить GeoJSON из файла, передать его в шаблон HTML и затем отобразить содержимое на карте Mapbox?

views.py

def get(self, request, *args, **kwargs):
    with open('/somepath/sample.json') as f:
        data = json.load(f)
    data = json.dumps(data)
    return render(request, 'map.html', {'data':data})

map.html

map.on('load', function () {

    // THIS DOES NOT WORK

    var json_data = JSON.parse({{ data }})

    map.addLayer({
        'id': 'layerid',
        'type': 'fill',
        'source': {
            'type': 'geojson',
            'data': json_data
        }
    });
});

map.html

map.on('load', function () {

    // THIS WORKS

    var json_data = { "type": "FeatureCollection",
    "features": [
      { "type": "Feature",
        "geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
        "properties": {"prop0": "value0"}
        },
      { "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
            ]
          },
        "properties": {
          "prop0": "value0",
          "prop1": 0.0
          }
        },
      { "type": "Feature",
         "geometry": {
           "type": "Polygon",
           "coordinates": [
             [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
               [100.0, 1.0], [100.0, 0.0] ]
             ]
         },
         "properties": {
           "prop0": "value0",
           "prop1": {"this": "that"}
           }
         }
      ]
    }

    map.addLayer({
        'id': 'layerid',
        'type': 'fill',
        'source': {
            'type': 'geojson',
            'data': json_data
        }
    });
});

---

РЕДАКТИРОВАТЬ

Я также сейчас попробовал:

views.py

def get(self, request, *args, **kwargs):
    return render(request, 'map.html', {'path':'/somepath/sample.json'})

map.html

map.on('load', function () {

    // THIS DOES NOT WORK

    $.getJSON({{ path }}, function(data) {
        var json_data = data
    });

    map.addLayer({
        'id': 'layerid',
        'type': 'fill',
        'source': {
            'type': 'geojson',
            'data': json_data
        }
    });
});