mirror of
https://github.com/netzmacht/contao-leaflet-libraries.git
synced 2025-11-28 11:04:07 +01:00
76 lines
3.4 KiB
Markdown
76 lines
3.4 KiB
Markdown
leaflet-ajax
|
||
===========
|
||
|
||
Allows you to call JSON via an Ajax call with a jsonp fallback.
|
||
|
||
```javascript
|
||
var geojsonLayer = new L.GeoJSON.AJAX("geojson.json");
|
||
```
|
||
for jsonp add the option "dataType" and set it to "jsonp"
|
||
``` javascript
|
||
var geojsonLayer = L.geoJson.ajax("http:webhost.fake/geojson.jsonp",{dataType:"jsonp"});
|
||
```
|
||
Note that data starts to download when the layer is created NOT when it’s added to the map in order to get a head start.
|
||
|
||
You may pass either a url string or an array of url strings if you want to download multiple things (handy
|
||
if your downloading data from an ESRI based thing which will have separate line, point, and poly features).
|
||
|
||
As you see you can also use lower case methods without creating new objects
|
||
|
||
For weirder jsonp you can set "callbackParam" for if you need to change the name of the callback parameter to something besides "callback", e.g. [Mapquest Nominative Open](http://open.mapquestapi.com/nominatim/) uses "json_callback" instead of "callback".
|
||
|
||
If you want to use `eval` to parse JSON in older browsers you need to pass an option `evil` set to something truthy.
|
||
|
||
If you want to be able to load stuff from the file system (with appropriate custom flags set) set local to true.
|
||
|
||
Gives off three events `data:loading`, `data:progress` and `data:loaded`.
|
||
|
||
- `data:loading` fires before we start downloading things, note if the constructor is given a url it won't wait to be added to the map
|
||
to start downloading the data, but it does do an async wait so you have time to add a listener to it (and so [leaflet.spin](https://github.com/makinacorpus/Leaflet.Spin) will work with it).
|
||
- `data:progress` is called each time a file is downloaded and passes the downloaded geojson as event data.
|
||
- `data:loaded` is called when all files have downloaded, this is mainly different from `data:progress` when you are downloading multiple things.
|
||
|
||
You can also add a middleware function which is called after you download the data but before you add it to leaflet:
|
||
|
||
```javascript
|
||
var geojsonLayer = L.geoJson.ajax("route/to/esri.json",{
|
||
middleware:function(data){
|
||
return esri2geoOrSomething(json);
|
||
}
|
||
});
|
||
```
|
||
|
||
addUrl does not clear the current layers but adds to the current one, e.g.:
|
||
|
||
```javascript
|
||
var geojsonLayer = L.geoJson.ajax("data.json");
|
||
geojsonLayer.addUrl("data2.json");//we now have 2 layers
|
||
geojsonLayer.refresh();//redownload the most recent layer
|
||
geojsonLayer.refresh("new1.json");//add a new layer replacing whatever is there
|
||
```
|
||
|
||
last but now least we can refilter layers without re adding them
|
||
|
||
```javascript
|
||
var geojsonLayer = L.geoJson.ajax("data.json");
|
||
geojsonLayer.refilter(function(feature){
|
||
return feature.properties.key === values;
|
||
});
|
||
```
|
||
|
||
Behind the scenes are two new classes L.Util.ajax = function (url) for same origin requests and L.Util.jsonp = function (url,options) cross origin ones. Both return promises, which have an additional abort method that will abort the ajax request.
|
||
|
||
```js
|
||
L.Util.ajax("url/same/origin.xml").then(function(data){
|
||
doStuff(data);
|
||
});
|
||
//or
|
||
L.Util.jsonp("http://www.dif.ori/gin").then(function(data){
|
||
doStuff(data);
|
||
});
|
||
```
|
||
|
||
In related news `L.Util.Promise` is now a constructor for a promise, it takes one argument, a resolver function.
|
||
|
||
Some of the jsonp code inspired by/taken from [this interesting looking plugin](https://github.com/stefanocudini/leaflet-search) that I have failed to make heads nor tails of (the plugin, not the jsonp code)
|