Hi there StackOverflow!
I have been building a web interface to display the communication states of the various elements on my network. I am down to the last bit that I have been putting off as I knew it was going to be a struggle.
For reasons of awesomeness I wanted to have a geographical layout of the various equipment with their current states and therefore decided to implement the googlemaps api to help me.
The Idea is that via ajax, the map updates the markers (their icon) every 4 seconds with their communication state (via django, ajax & JSON).
The script I have based this on is based on Beetroot-Beetroot's answer from this thread. Where instead of icon, he updates the location of the markers.
I have adapted this so that the icons change from the first to the second state (e.g. On and Off). As seen in this JSFiddle
Now ,I realize that this is using the "Simulated Ajax" as Beetroot-Beetroot called it rather than the continually updating version that has been commented out (Pulls in a Json File).
I have been trying to use a view & template in Django to create a HTML file that contains the new information to be put into "var Locs" and tried importing it. This is not working, and even if it did would be incredibly messy / frowned upon.
So, my next plan of action was just to make a JSON file to update the "Loc" array within the script.
My Question finally, Through Django, how can I create JSON file that the script can pull in and updates the "var Loc" array, with the new information?
Here is the HTML equivalent of the JSON file, (Uses Django tags to decide what each value would be if/else, etc).
{% load staticfiles %}
var Locs = {
1: { info:'Updated', lat:40.538834, lng:-74.555049, icon: {% if element1.communication_state == 'CS_AVAILABLE' %}'http://i.imgur.com/DCU6Bzc.png'{% else %}'http://i.imgur.com/8bJFdFV.png'{% endif %} },
2: { info:'Updated', lat:40.543127, lng:-74.606598, icon: {% if element2.communication_state == 'CS_AVAILABLE' %}'http://i.imgur.com/DCU6Bzc.png'{% else %}'http://i.imgur.com/8bJFdFV.png'{% endif %} },
3: { info:'Updated', lat:40.544770, lng:-74.632273, icon: {% if element3.communication_state == 'CS_AVAILABLE' %}'http://i.imgur.com/DCU6Bzc.png'{% else %}'http://i.imgur.com/8bJFdFV.png'{% endif %} },
4: { info:'Updated', lat:40.489954, lng:-74.586175, icon: {% if element4.communication_state == 'CS_AVAILABLE' %}'http://i.imgur.com/DCU6Bzc.png'{% else %}'http://i.imgur.com/8bJFdFV.png'{% endif %} },
};
Once I can get a valid JSON file/url to the script it should work, the problem I'm having is that I have no idea how to generate a correctly formatted JSON file through Django.
This is what I assume will be the final script for the maps once I am able to generate the JSON file.
var locations = {};
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 11,
center: new google.maps.LatLng(40.5000, -74.6203),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var auto_remove = true;//When true, markers for all unreported locs will be removed.
function setMarkers(locObj) {
if(auto_remove) {
//Remove markers for all unreported locs, and the corrsponding locations entry.
$.each(locations, function(key) {
if(!locObj[key]) {
if(locations[key].marker) {
locations[key].marker.setMap(null);
}
delete locations[key];
}
});
}
$.each(locObj, function(key, loc) {
if(!locations[key] && loc.lat!==undefined && loc.lng!==undefined) {
//Marker has not yet been made (and there's enough data to create one).
//Create marker
loc.marker = new google.maps.Marker({
position: new google.maps.LatLng(loc.lat, loc.lng),
icon: loc.icon,
map: map
});
//Attach click listener to marker
google.maps.event.addListener(loc.marker, 'click', (function(key) {
return function() {
if(locations[key]) {
infowindow.setContent(locations[key].info);
infowindow.open(map, locations[key].marker);
}
}
})(key));
//Remember loc in the `locations` so its info can be displayed and so its marker can be deleted.
locations[key] = loc;
}
else if(locations[key] && loc.remove) {
//Remove marker from map
if(locations[key].marker) {
locations[key].marker.setMap(null);
}
//Remove element from `locations`
delete locations[key];
}
else if(locations[key]) {
//Update the previous data object with the latest data.
$.extend(locations[key], loc);
locations[key].marker.setIcon(loc.icon);
if(loc.lat!==undefined && loc.lng!==undefined) {
//Update marker position (maybe not necessary but doesn't hurt).
locations[key].marker.setPosition(
new google.maps.LatLng(loc.lat, loc.lng)
);
}
//locations[key].info looks after itself.
}
});
}
var ajaxObj = {//Object to save cluttering the namespace.
options: {
url: MAPS_JSON,//The resource that delivers loc data.
dataType: "json"
},
delay: 4000,//(milliseconds) the interval between successive gets.
errorCount: 0,//running total of ajax errors.
errorThreshold: 5,//the number of ajax errors beyond which the get cycle should cease.
ticker: null,//setTimeout reference - allows the get cycle to be cancelled with clearTimeout(ajaxObj.ticker);
get: function() { //a function which initiates
if(ajaxObj.errorCount < ajaxObj.errorThreshold) {
ajaxObj.ticker = setTimeout(getMarkerData, ajaxObj.delay);
}
},
fail: function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
ajaxObj.errorCount++;
}
};
//Ajax master routine
function getMarkerData() {
$.ajax(ajaxObj.options)
.done(setMarkers) //fires when ajax returns successfully
.fail(ajaxObj.fail) //fires when an ajax error occurs
.always(ajaxObj.get); //fires after ajax success or ajax error
}
setMarkers(locs);//Create markers from the initial dataset served with the document.
ajaxObj.get();//Start the get cycle.
Thanks for any help, I realize this is a long winded question. I can Provide links to my models.py, views.py, urls.py, etc if that would help.
