I just want to try showing information about the wms layer about the layers details using openlayers 3.14
map.on('singleclick', function(evt) {
var url = layers.getSource().getGetFeatureInfoUrl(
evt.coordinate, viewResolution, viewProjection,
{'INFO_FORMAT': 'text/javascript',
'propertyName': 'formal_en'});
if (url) {
var parser = new ol.format.GeoJSON();
$.ajax({
url: url,
dataType: 'jsonp',
jsonpCallback: 'parseResponse'
}).then(function(response) {
var result = parser.readFeatures(response);
if (result.length) {
var info = [];
for (var i = 0, ii = result.length; i < ii; ++i) {
info.push(result[i].get('formal_en'));
}
container.innerHTML = info.join(', ');
} else {
container.innerHTML = ' ';
}
});
}
});
layers is probably an array of ol.layer or it may not even be available in the function's scope.
Either way you need to get a single layer to use .getGetFeatureInfoUrl() against.
So either something like:
layers[0].getSource().getGetFeature....
or if layers isn't available you can get it from the map object with .getLayers()
map.getLayers().forEach(function(layer) {
// optionally check that the layer is the one you want.
if (layer.getProperties().ref === 'myLayer'){
layer.getSource().getGetFeature....
}
}
Related
I am trying to use JQPlot for plotting a live time based data .
As it is live data, I am doing an ajax call every 10 seconds to get new data and appending it to the existing dataset before replotting.
The initial plotting of the JQPlot chart is fine but subsequently from the first replot onwards the chart becomes blank for ever.
Here is my javascript code.
$.jqplot.config.enablePlugins = false;
var Graph;
var GraphUpdate;
var GraphData = [];
var interval = 10000;
var npoints = 25;
var maxIterations = 200;
var niters = 0;
var fetchInProgress = false;
var lastSuccessCDR = 0;
function BuildDataArray() {
GraphData = [];
lastSuccessCDR = 0;
if(fetchInProgress == false)
{
postdata = 'successCDR='+lastSuccessCDR;
fetchInProgress = true;
$.ajax({url:'/CDR-Analyser/php/livedata_fetch.php',
type:'POST',
data:postdata,
async:true,
dataType:"json",
success: function(data,status){
if(lastSuccessCDR == 0)
{
//GraphData = [data[0]['data']];
GraphData = [[["2013-07-17 21:11:20",2],["2013-07-17 21:12:20",5],["2013-07-17 21:14:20",7]]];
//GraphData = [[[1,2],[2,5],[3,7]]];
lastSuccessCDR = data[1]['lastCDR'];
Graph = $.jqplot('livechart', GraphData, {
stackseries : true,
seriesDefaults: {
showMarker: false,
fill: true,
fillAndStroke: true
},
axes: {
xaxis: {
//numberTicks:2,
//renderer:$.jqplot.DateAxisRenderer,
//pad:0,
renderer:$.jqplot.DateAxisRenderer,
tickOptions: {
angle: -30
}
},
yaxis: {
label: 'Call Count',
//min:0,
//max:30,
tickInterval:2,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
},
cursor:{
zoom:true,
looseZoom: true
}
});
}
fetchInProgress = false;
}
});
}
}
function UpdateDataArray() {
var set = 0;
if(fetchInProgress == false)
{
postdata = 'successCDR='+lastSuccessCDR;
fetchInProgress = true;
$.ajax({url:'/CDR-Analyser/php/livedata_fetch.php',
type:'POST',
data:postdata,
async:true,
dataType:"json",
success: function(data,status){
set = [data[0]['data']];
lastSuccessCDR = data[1]['lastCDR'];
var newData = new Array();
newData = GraphData;
newData[0].shift();
newData[0].push(set[0][0]);
GraphData = [["2013-07-17 21:11:20",2],["2013-07-17 21:12:20",5]];
//Graph.series[0].data = newData[0];
Graph.series[0].data = [["2013-07-17 21:11:20",2],["2013-07-17 21:12:20",5]];
//Graph.data[0] = [["2013-07-17 21:12:20",5],["2013-07-17 21:14:20",7]] ;
Graph.replot({resetAxes:true});
fetchInProgress = false;
}
});
}
return set;
}
function StartGraphLoop() {
BuildDataArray();
GraphUpdate = setInterval(UpdateGraph, interval);
}
function UpdateGraph() {
UpdateDataArray();
}
function StopGraphLoop() {
clearInterval(GraphUpdate);
}
I have two functions above , BuildDataArray() and updateDataArray() for building the initial data set and for getting the subsequent data elements.
As you can see I have replaced the actual data received from ajax ( it is commented) with sample data to test the behavour of JQPlot. Unfortunately with this sample data also the chart goes blank at the call of first replot. I had earlier tested this with sample data without the dates ( something like [[1,2] , [2,5] , [3,4]] ) by commenting out the dateaxisrenderer option in xaxis property.
So now I am left with no option so either I am missing something or it is a bug in JQPlot while rendering dateaxis.
Please advise
I had the same problem using the dateAxisRenderer where the series were being updated and the plot redrawn but there was no data in my graph. After a lot of head scratching I found this stackoverflow answer
Instead of updating the series data via
chartObj.series[i].data = // your data
You can create a variable and pass it as an argument to the replot() function. To use the snippet from C5H8NNaO4 as an example
var series = [[1,2],[2,3]];
chartObj.replot({data:series});
I haven't tested it with your code but it looks like we had the same problem and this solved the issue for me. If this works I suggest you up-vote the initial answer too :)
I have a code that works well for sending multiple files via ajax with FormData and XMLHttpRequest;
for (var i=0, j=this.files.length; i<j; i++) {
file = this.files[i];
var formdata = new FormData();
formdata.append("images[]", file);
var xhr = new XMLHttpRequest(),
upload = xhr.upload,
id = Math.floor((Math.random() * 100000));
upload.addEventListener("loadstart", function(e){
showUploadedItem(file, this.id);
});
upload.id = id;
upload.onprogress = function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
)
};
upload.onload = function(e) {
if (this.status == 200) {
console.log('');
}
};
xhr.onreadystatechange = function(e) {
if ( 4 == this.readyState ) {
console.log('');
}
};
xhr.open('post', '<?php echo Yii::app()->createUrl('url') ?>', true);
xhr.send(formdata);
}
I am sending each file as a new XMLHttpRequest object inside the loop, so I do not know when I'm getting all requests ending.
Can anyone help?
Take a look at the documentation for XMLHttpRequest.
There are a couple of options that I can think of. You could use the "loadend" callback for each of them and increment a variable outside of the loop and check for the total amount of requests that were sent in each one. Once the count reaches the total number of requests, you could perform any logic or call a function that would want to call.
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest?redirectlocale=en-US&redirectslug=DOM%2FXMLHttpRequest%2FUsing_XMLHttpRequest
Otherwise, setting the async parameter to false would work as well, but then you take a performance hit waiting for each one to finish before starting the others.
Based on your answer, my solution;
var x = 0;
var lenght = this.files.length;
for (var i=0, j=lenght; i<j; i++) {
// code here
var xhr = new XMLHttpRequest(),
// code here
xhr.onreadystatechange = function(e) {
if ( 4 == this.readyState && this.status == 200 ) {
x++;
if(x == lenght) {
window.setTimeout( function(){
alert('finish');
}, 1000 );
}
}
};
// code here
}
Though it is a trivial function, it works.
So I'm trying to find a method of getting a progress bar working on my .ajax call but not having much luck. I know that the ajaxForm plugin has the following code in it that allows for the uploadProgress option but the way my code works I'm not able to use that plugin. Is there anyway of adding the following code somehow so that it attaches to the standard .ajax call? Long shot I know!
// XMLHttpRequest Level 2 file uploads (big hat tip to francois2metz)
function fileUploadXhr(a) {
var formdata = new FormData();
for (var i=0; i < a.length; i++) {
formdata.append(a[i].name, a[i].value);
}
if (options.extraData) {
var serializedData = deepSerialize(options.extraData);
for (i=0; i < serializedData.length; i++)
if (serializedData[i])
formdata.append(serializedData[i][0], serializedData[i][1]);
}
options.data = null;
var s = $.extend(true, {}, $.ajaxSettings, options, {
contentType: false,
processData: false,
cache: false,
type: method || 'POST'
});
if (options.uploadProgress) {
// workaround because jqXHR does not expose upload property
s.xhr = function() {
var xhr = jQuery.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.addEventListener('progress', function(event) {
var percent = 0;
var position = event.loaded || event.position; /*event.position is deprecated*/
var total = event.total;
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
options.uploadProgress(event, position, total, percent);
}, false);
}
return xhr;
};
}
s.data = null;
var beforeSend = s.beforeSend;
s.beforeSend = function(xhr, o) {
o.data = formdata;
if(beforeSend)
beforeSend.call(this, xhr, o);
};
return $.ajax(s);
}
I do not guarantee on that, but try this:
xhr.upload.onprogress = function(event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
console.log("Progress: "+percent+"%"); //debug to see if the problem is there
options.uploadProgress(event, position, total, percent);
};
From posted code, I cannot even guess if the problem is in onprogress event handling or that options.uploadProgress, whatever it is.
I posted this as answer only because it wouldn't fit in comment.
I cannot seem to find out why IE does not read my success on get after the post. I have tried cache: false, with no luck. This works in all other browsers, just not IE.
$.ajaxSetup({ cache: false });
num = $('#num').val();
phone = $('#phone').val();
$.post("post.php?"+$("#MYFORM").serialize(), {
}, function(response){
if(response==1 && codeVal == 1 && telVal == 1)
{
$("#after_submit").html('');
$("#Send").after('<label class="success" id="after_submit">Η αποστολή πραγματοποιήθηκε</label>');
change_captcha();
clear_form();
$.ajax({
type:'get',
cache: false,
url: "http://web.somesite/submit_code.php",
dataType: 'html',
data:{ user: "one", pass: "mtwo", source: "WEB", receipt: num, msisdn: phone},
success: function(data) {
var qsFull = "http://web.somesite.gr/submit_code.php?" + data;
var qs = URI(qsFull).query(true);
TINY.box.show({html:qs.message,animate:false,boxid:'error',top:5});
}
});
}
else
{
$("#after_submit").html('');
$("#Send").after('<label class="error" id="after_submit">Error! in CAPTCHA .</label>');
}
});
OK, I tried adding an error after the success and I see that I get my pop up as I should be, but the value of qs.message is 0. Why would I get error and not success, when it is successful in other browsers.
I found the answer, It has to do with IE not being flexible with cross domains and such, so I added a XDomainRequest like so
if (jQuery.browser.msie && window.XDomainRequest) {
var xdr = new XDomainRequest();
var my_request_data = { user: "M1web", pass: "m!", source: "WEB", receipt: num, msisdn: phone};
my_request_data = $.param(my_request_data);
if (xdr) {
xdr.onerror = function () {
alert('xdr onerror');
};
xdr.ontimeout = function () {
alert('xdr ontimeout');
};
xdr.onprogress = function () {
alert("XDR onprogress");
alert("Got: " + xdr.responseText);
};
xdr.onload = function() {
//alert('onload ' + xdr.responseText);
var qsFull = "http://web.web.gr/submit_code.php?" + xdr.responseText;
var qs = URI(qsFull).query(true);
TINY.box.show({html:qs.message,animate:false,boxid:'error',top:5});
callback(xdr.responseText);
};
xdr.timeout = 5000;
xdr.open("get", "http://web.web.gr/submit_code.php?" + my_request_data);
xdr.send();
} else {
}
}
I unfortunately had to do a crash course in legacy IE behavior, and this post was very helpful. Here are some other links to help those having to deal with these issues:
Microsoft's Documentation of their XDomainRequest object
An internal blog post covering some of XDomainRequest's idiosyncrasies
Here's a function I use as a fallback where necessary:
// This is necessary due to IE<10 having no support for CORS.
function fallbackXDR(callObj) {
if (window.XDomainRequest) {
var xdrObj = new XDomainRequest();
xdrObj.timeout = callObj.timeout;
xdrObj.onload = function() {
handleSuccess(xdrObj.responseText);
};
xdrObj.onerror = function() {
handleError(xdrObj);
};
xdrObj.ontimeout = function() {
callObj.xdrAttempts = callObj.xdrAttempts++ || 1;
if (callObj.xdrAttempts < callObj.maxAttempts) {
fallbackXDR(callObj);
}
};
xdrObj.onprogress = function() {
// Unfortunately this has to be included or it will not work in some cases.
};
// Use something other than $.param() to format the url if not using jQuery.
var callStr = callObj ? '?'+$.param(callObj.urlVars) : '';
xdrObj.open("get", callObj.url+callStr);
xdrObj.send();
} else {
handleError("No XDomainRequest available.", callObj);
}
}//fallbackXDR()
I am calling google maps within a for loop in my javascript as I have mulitple routes that need to be costed separately based on distances.
Everything works great except that the distance is only returned for one of the routes.
I have a feeling that it is something to do with the way I have the items declared within the ajax call for the maps. Any ideas what could be the issue from the code below?
for (var i = 1; i <= numJourneys; i++) {
var mapContainer = 'directionsMap' + i;
var directionContainer = $('#getDistance' + i);
$.ajax({
async: false,
type: "POST",
url: "Journey/LoadWayPoints",
data: "{'args': '" + i + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
if (msg.d != '[]') {
var map = new GMap2(document.getElementById(mapContainer));
var distance = directionContainer;
var wp = new Array();
//routes
var counter = 0;
$.each(content, function () {
wp[counter] = new GLatLng(this['Lat'], this['Long']);
counter = counter + 1;
});
map.clearOverlays();
map.setCenter(wp[0], 14);
// load directions
directions = new GDirections(map);
GEvent.addListener(directions, "load", function () {
alert(directions.getDistance());
//directionContainer.html(directions.getDistance().html);
});
directions.loadFromWaypoints(wp, { getSteps: true });
}
}
});
}
The issue was down to a non declared variable. Just before the GEvent call there is a variable called 'directions' but this was never actually declared with a var so it wasn't being cleared out.
var directions = new GDirections(map);
Doing the above worked for me.