I'm trying to create a simple map using JavaScript and OpenLayers 3 which should dynamically load OpenStreetMap XML data from Overpass API whenever the bounding box of the map changes. For this purpose I have created a map with a vector layer, and the source of this vector layer is a vector source. The loading strategy of this source is set to bbox. I have created a loader function, which is called whenever the bounding box changes. However, I could not figure out by now how to actually load the data and add it to the map.
var vectorSource = new ol.source.Vector({
format: ol.format.OSMXML(),
loader: function(extent, resolution, projection) {
var epsg4326 = ol.proj.transformExtent(extent, projection, 'EPSG:4326');
var bbox = epsg4326.join(',');
var url = 'http://overpass-api.de/api/interpreter?data=(node["light_source"](' + bbox + ');way["light_source"](' + bbox + ');relation["light_source"](' + bbox + ');>;);out meta;';
?
},
strategy: ol.loadingstrategy.bbox
});
var vector = new ol.layer.Vector({
source: vectorSource
});
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [raster, vector],
target: document.getElementById('map'),
controls: ol.control.defaults(),
view: new ol.View({
center: ol.proj.transform([26.69075, 58.3743], 'EPSG:4326', 'EPSG:3857'),
maxZoom: 19,
zoom: 18
})
});
Basically, the question is: what should I put to the place marked with the question mark in the code above? The examples I have found so far mostly use jQuery, which I am not using in my project, so I am looking for something which does not use jQuery. I know that OpenLayers 3 can load data from Overpass API without jQuery, however, the only examples I have found (and reproduced) use a fixed loading strategy to load all data once at the beginning instead of dynamically when the bounding box changes.
basically $.ajax from jquery is a helper for the javascript xmlHttpRequest object.
You can use it without jquery: http://www.w3schools.com/xml/xml_http.asp
you can find lots if how to do on google about this (try it to load data out of openlayers 3 first) http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp