Как добавить точки на карту листовки из локального файла geo json?

Question

Я пытаюсь отобразить точки из локального файла geo json (созданного с помощью overpass turbo) на листовой карте, но так как я новичок ie, я не могу понять это правильно

Вот что у меня сейчас:

  var mymap = L.map('mapid').setView([57.1497, -2.0943], 13);

  var Esri_WorldGrayCanvas = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', 
  {attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ', maxZoom: 16 }); 

  Esri_WorldGrayCanvas.addTo(mymap); 

  var CartoDB_Voyager = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
    subdomains: 'abcd',
    maxZoom: 19
  });

  CartoDB_Voyager.addTo(mymap);

  L.geoJSON(geojsonFeature).addTo(mymap);

  $.ajax({
  dataType: "json",
  url: "AllAberdeen.geojson",
  success: function(data) {
      $(data.features).each(function(key, data) {
          console.log(result)

          result.features.forEach(function(point) {

              var lon = point.geometry.coodrinates.lon;
              var lat = point.geometry.coodrinates.lat;

              var circle = L.circle( [lon, lat], {
                  color: 'red',
                  opacity: 0,
                  fillColor: 'red', 
                  fillOpacity: 0.8
              })

              circle.addTo(mymap)
          });
      });
  }
  }).error(function() {});

Буду благодарен за любую помощь

Answer 1

Попробуйте создать гео Json группу слоев:

  $.ajax({
  dataType: "json",
  url: "AllAberdeen.geojson",
  success: function(data) {
      console.log(data);
      L.geoJSON(data).addTo(mymap);
  }
  }).error(function(error) {
   console.log(error);
});