Using JSON instead of GeoJSON in Leaflet with AJAX

Question

I'm looking for a way to use JSON instead of GeoJSON in leaflet using AJAX. Using JSON and AJAX are required.

I managed to call JSON file using AJAX. However, now I'm confused how I can use data in JSON to plot markers on map. I'm guessing I can't use L.geoJson().

HTML:

<div id="map" style="width: 800px; height: 500px"></div>

This is the JavaScript file:

var map;
var overlay;

var addPopupsFromLocations = function(locations) {
  var popups = new Array();
  locations.forEach(function(location){
    console.log('creating popup for location ' + location.title);

    console.log(location.latitude);
    console.log(location.longitude);
      }) ;
};

function init() {
        var map = L.map('map').setView([51.505, -0.09], 13);

        L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="http://mapbox.com">Mapbox</a>',
            id: 'examples.map-i86knfo3'
        }).addTo(map);
    }

$(document).ready(function(){
    init();
    $.ajax('locations.json', {
        dataType: 'json',
        success: addPopupsFromLocations,
        error: function(xhr, st, et) {
          console.warn(et);
        }
    });
});

This is the JSON file:

[
  {
    "title": "Weathertop",
    "link": "http://en.wikipedia.org/wiki/Weathertop",
    "latitude": 51.505,
    "longitude": -0.09,
    "imageUrl": "assets/img/location-images/Weathertop.jpg"
  },
{
  "title": "Rivendell",
  "link": "http://lotr.wikia.com/wiki/Rivendell",
  "latitude": -0.09,
  "longitude": 51.505,
  "imageUrl": "assets/img/location-images/Rivendell2.jpg"
},
{
  "title": "Minas Tirith",
  "link": "http://lotr.wikia.com/wiki/Minas_Tirith",
  "latitude": 38.78,
  "longitude": -77.18,
  "imageUrl": "assets/img/location-images/320px-Minas_Tirith.jpg"
}

]

Console:

creating popup for location Weathertop
custom.js (line 7)
51.505
custom.js (line 9)
-0.09
custom.js (line 10)
creating popup for location Rivendell
custom.js (line 7)
-0.09
custom.js (line 9)
51.505
custom.js (line 10)
creating popup for location Minas Tirith
custom.js (line 7)
38.78
custom.js (line 9)
-77.18

Answer 1

I'm looking for a way to use JSON instead of GeoJSON in leaflet using AJAX.

Okay: to review some terms,

• JSON is a basic data-interchange format. It doesn't contain anything in particular.
• GeoJSON is a subset of JSON that is formatted to be map-friendly and understandable to things like Leaflet.

If you want to use L.geoJson, you need to reformat your data so that it fits the GeoJSON specification. You can do this with basic JavaScript.

var geojsonFormattedLocations = locations.map(function(location) {
    return {
        type: 'Feature',
        geometry: {
        type: 'Point',
            coordinates: [location.longitude, location.latitude]
        },
        properties: {
            location
        }
    };
});

Answer 2

I know it is a late answer but you definitely can use simple JSON format with Leaflet.

As you say, you receive the JSON with ajax and on success, you run a function that loops each JSON object and for each one, adds a marker on the map. For example:

var response = req.responseText;
var arr = JSON.parse(response);

for (var i=0 ; i<arr.length ; i++) {
    L.marker([arr[i].latitude, arr[i].longitude]).addTo(map);
}