Loading JSON URL into Leaflet map?

Question

Based on this example http://labs.easyblog.it/maps/leaflet-layerjson/examples/overpass.html I'm trying to load the following url into a Leaflet map

https://data.police.uk/api/crimes-street/all-crime?lat=52.629729&lng=-1.131592&date=2013-01&category=anti-social-behaviour

below is a snippet of the request.

{
category: "anti-social-behaviour",
location_type: "Force",
location: 
{
latitude: "52.635598",
street: 
{
id: 883314,
name: "On or near Yeoman Lane"
},
longitude: "-1.129330"
},
context: "",
outcome_status: null,
persistent_id: "",
id: 20597163,
location_subtype: "",
month: "2013-01"
},

My problem is that the latitude and longitude are nested in the location tab and not declared as lat lon. I've tried in-vain but can't work out how to call the the nested latitude and longitude in this part of the code propertyLoc: ['lat','lon'], in the labs example.

Answer 1

Not sure if this (really simple approach) would work, but you might want to try something like

propertyLoc: ['location.latitude','location.longitude']

• geosmiles: Yep that did it! I swear that I tried that approach before posting the question!? Cheers Si

Answer 2

Haven't used L.layerJSON before, but looks like it doesn't have a particularly good way to parse incoming JSON data. Because the endpoint your loading your data from is not formatted as geoJSON, you should load it via an ajax call, parse it into geoJSON (shouldn't be that hard, as it's just points), and pass that to L.geojson. (see docs).

This is much of what L.layerJSON is doing anyway.

For reference, here's a great tutorial on geoJSON.