Develop Reference

Calling a .php document in JavaScript using Django Framework

I'm wondering if this is Django URLs issue. I am following [a Google Tutorial][1] to pop down markers showing addresses on a Google Map pulled from a database using php and xml. I have wired up a .php to my PostgreSQL db okay and seem to be able to run the script and show all the addresses and details in the console (I believe this means the XML file is working too).
The Problem
The trouble I am having is on the JavaScript side: I am using downloadURL() function in my .js static file. And pointing the URL parameter to my .php file which is stored in my local directory:
var markerurl = 'testingland/www/xmlpgd.php'
downloadUrl(markerurl, function(data)
However when I test the script on my local development server (http://127.0.0.1:8000/cafe_list) it returns the following error:
http://127.0.0.1:8000/cafe_list/testingland/www/xmlpgd.php 404 (Not Found)
What I have tried
I have tried moving the xmlpgd.php file to different locations including templates, static and elsewhere. I have tried hosting it on Google Cloud (which returns a CORS error). I am at a loss and thinking maybe I need to wire it up to my urls.py file? I am just not sure whether this is the case or how to do this properly.
My Code
Here is my urls.py file:
urlpatterns = [
path('cafe_list/', views.cafes_home, name='cafes_home'),
url('electra/cafe_list/', views.cafe_list.as_view(), name='cafe_list'),
]
Here is my JS Code:
//loads map markers from database
function downloadUrl(url,callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
//get the markers from php file and adds them to map
var markerurl = 'testingland/www/xmlpgd.php';
downloadUrl(markerurl, function(data) {
var xml = parseXml(data);
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('location');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point
[1]: https://developers.google.com/maps/documentation/javascript/mysql-to-maps

Openlayers authorization authentication [duplicate]

some wms or wfs sources require user and password authentication.
for example https://apps.sogelink.fr/maplink/public/wfs?request=GetCapabilities
need Basic authentication.
How can I inject this authentication?

You can provide your own imageLoadFunction to an ImageWMS source.
The default one just takes the URL and inserts it as the src of the img tag:
ol.source.Image.defaultImageLoadFunction = function(image, src) {
image.getImage().src = src;
};
That question was already asked on the OpenLayers GitHub, here is an example from there:
function customLoader(tile, src) {
var client = new XMLHttpRequest();
client.open('GET', src);
client.setRequestHeader('foo', 'bar');
client.onload = function() {
var data = 'data:image/png;base64,' + btoa(unescape(encodeURIComponent(this.responseText));
tile.getImage().src = data;
};
client.send();
}
The documentation of OpenLayers is really good. Just find an example that uses features you want and then follow the links to the API docs.The ol.source.Vector doc even includes an example of a loading function for WFS, where you could manipulate the request:
new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) {
var wfsUrl = 'TODO';
var xhr = new XMLHttpRequest();
// see above example....
}
});

Angular JS with PDFTron

I am trying to get a blob as a URL but i get an error on this line :
xhr.send()
The error message is angular.js:13920 Error: Failed to execute 'send' on 'XMLHttpRequest': The object's state must be OPENED.
But in the code I am using xhr.open('GET', blobValue) as shown in my code here
if(someBlobValue){
var viewerElement = $document[0].getElementById('viewer');
var myWebViewer = new PDFTron.WebViewer({
path: 'lib',
pdftronServer: 'https://demo.pdftron.com' // remove
}, viewerElement);
var xhr = new XMLHttpRequest;
xhr.responseType = 'blob';
xhr.onload = function() {
var recoveredBlob = xhr.response;
var reader = new FileReader;
reader.readAsDataURL(recoveredBlob);
};
xhr.open('GET', someBlobValue);
xhr.setRequestHeader('Content-type', 'application/pdf');
xhr.send(); //error here although its open?
//var file = new File([newValue], 'somefile.pdf');
myWebViewer.loadDocument(xhr.response, { filename: 'somefile.pdf'});
Currently i have the document as a blob but i am trying to load it to pdftron library and unfortunately i dont seem to find the myWebViewer.getInstance().loadLocalFile method in the DOM (its undefined).
Would appreciate any pointers as its the first time trying to use pdftron in the angularjs app.
NOTE : This is inside a directive.

You need to wait for the DOM element containing WebViewer to trigger the ready event, for the ReaderControl instance, returned from getInstance(), to be defined.
For example:
$(viewerElement).on('ready', function() {
myWebViewer.getInstance().loadLocalFile(someBlobValue);
});

There is nothing wrong in your code logically,
You just forgot to instantiate the XHR object over here var xhr = new XMLHttpRequest;.
You can correct it by doing this var xhr = new XMLHttpRequest();

Failing to load CSV data through Omnivore

I am trying to load a CSV file, convert it to GeoJSON, add an empty geoJson layer and then adding data to that geoJson layer. Why is it not working?
var locations = 'locations.csv';
var x = omnivore.csv(locations);
var geojsonLayer = L.geoJson().addTo(map);
geojsonLayer.addData(x);

omnivore.csv returns a layer built with the loaded data, not the underlying GeoJSON object.
Try
var geojsonLayer = omnivore.csv(locations);
geojsonLayer.addTo(map);
Or build your layer and pass it to omnivore.csv:
var geojsonLayer = L.geoJson().addTo(map);
omnivore.csv('locations.csv', null, geojsonLayer);
Or ditch omnivore and use csv2geojson to load your data before populating your layer :
var geojsonLayer = L.geoJson().addTo(map);
xhr = new XMLHttpRequest();
xhr.onload = function() {
csv2geojson.csv2geojson(this.responseText, {}, function(err, data) {
geojsonLayer.addData(data);
});
};
xhr.open('GET', 'locations.csv', true);
xhr.send(null);

Passing result of xhr.onload

This should be a very simple concept, but I just don't understand. In a Titanium app I have an array of data used by several windows, my xhr result needs to be passed to the top level of my app's namespace to be added to the array. I can successfully parse the JSON response inside of the onload function, but I want to separate my data code from my UI generation.
Here is a simplified app.js version so that I might be able to understand the concept. And no, I won't pollute the global namespace in my real app.
Titanium.UI.setBackgroundColor('#000');
var myArray = [];
var xhr = Titanium.Network.createHTTPClient();
xhr.onload = function() {
myArray = JSON.parse(this.responseText);
// var data = JSON.parse(this.responseText); // no help
// myArray.push(data); // no help
// return myArray; // no help
};
xhr.onerror = function() {
Titanium.UI.createAlertDialog({ message:"Something has gone terrible wrong."});
};
xhr.open('GET','http://myapp.com/data.json');
xhr.send();
var win = Ti.UI.createWindow();
var view = Titanium.UI.createView({
backgroundColor:'green'
});
var caption = myArray[2].caption;
var label = Ti.UI.createLabel({
color:'white',
text:caption,
textAlign:'center'
});
view.add(label);
win.add(view);
win.open();
Thanks for your patience!
Edit
This produces the the correct result from the user's perspective, but I want to access the array outside the scope of the onload function. I don't want to have UI code mixed with API calls.
xhr.onload = function() {
myArray = JSON.parse(this.responseText);
var caption = myArray[2].caption;
var label = Ti.UI.createLabel({
color:'white',
text:caption,
textAlign:'center'
});
view.add(label);
};

The code is being run asynchronously. The label is attempting to generate before the xhr.onload has begun.
you should fire an event from the onload method of your code.
the event will have a listener in the UI section of your application and it will provide the appropriate separation of http code from the ui code; Something like this
xhr.onload = function() {
myArray = Ti.App.fireEvent("app.updateLabel",
{"responseText":this.responseText});
};
in your UI, view code
Ti.App.addEventListener("app.updateLabel",function(data) {
myArray = JSON.parse(data.responseText);
var caption = myArray[2].caption;
var label = Ti.UI.createLabel({
color:'white',
text:caption,
textAlign:'center'
});
view.add(label);
});
more on events from appcelerator documentation
and I have some examples on my blog, http://blog.clearlyinnovative.com, also

I'm not exactly sure what you're asking but I do see an issue. You are creating a JSON object not an array with myArray = JSON.parse(this.responseText); An object doesn't have the .push() method so that explains the no help comment. I also noticed you defined it as an array then assigned a JSON object to it.