I would like to add the real time dynamic to my map, by means of passing a new local geojson file about every 3 minutes. What is the best approach to do this so that it is seamless to the end-user. I am thinking ajax and or setinterval function is the answer, but I'm not sure where to begin. If anyone knows of any examples or can offer some advice. I would greatly appreciate it.
Thank you.
Here is my attempt to use AJAX. I am unable to loop over the geoJSON structure. Not sure what i ma doing wrong. AJAX and javascript is still kind of foreign to me.
<!DOCTYPE html>
<html>
<head>
<p id="demo">coordinates</p>
</br>
<p id="coords">coordinates</p>
<style>
html, body, #map_canvas { margin: 0; padding: 0; height: 100%; }
</style>
<script
src="https://maps.googleapis.com/maps/api/js?sensor=false& libraries=visualization,MVCObject">
</script>
<script>
var map;
// ajax request to load json data
var xhr = new XMLHttpRequest();
xhr.open('GET', 'json_template.json', true);
xhr.onload = function() {
//
sector_callback(this.responseText);
//console.log(xhr.responseText);
};
xhr.send();
// function to load map into body when page loads
function initialize() {
var kansas_city = new google.maps.LatLng(39.00495613,-94.64780668);
var mapOptions = {
zoom: 10,
center: kansas_city,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}
// function definition to process the geoJSON data
function sector_callback() {
var bounds = new google.maps.LatLngBounds();
//console.log(xhr.responseText);
for (var i = 0, len = features.length; i < len; i++) {
var coords = features[i].geometry.coordinates[0];
siteNames = features[i].properties.Name; // added for site names
var path = [];
//console.log(data);
for ( var j = 0, len2 = coords.length; j < len2; j++ ){ // pull out each set of coords and create a map object
var pt = new google.maps.LatLng(coords[j][1], coords[j][0])
bounds.extend(pt);
path.push(pt);
//path.push(new google.maps.LatLng(coords[j][1], coords[j][0]));
}
var polygons = new google.maps.Polygon({
path: path,
strokeColor: "#000000",
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: "#000000",
fillOpacity: 0.35,
map: map
});
createClickablePoly(polygons, siteNames);
google.maps.event.addListener(polygons, 'mouseover', function() {
var currentPolygon = this;
currentPolygon.setOptions({ // setOptions is a method and properties below
fillOpacity: 0.45,
fillColor: "#FF0000"
})
});
google.maps.event.addListener(polygons, 'mouseout', function() {
var currentPolygon = this;
currentPolygon.setOptions({
fillOpacity: 0.35,
fillColor: "#000000"
})
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<h2>AJAX</h2>
<div id="myDiv"></div>
</body>
</html>
geoJSON:
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"Name": "1_1",
"Description": ""
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-94.963194, 39.316858],
[-94.959670, 39.321990],
[-94.959050, 39.321720],
[-94.958460, 39.321400],
[-94.957920, 39.321040],
[-94.957420, 39.320640],
[-94.956980, 39.320210],
[-94.956250, 39.319270],
[-94.955990, 39.318760],
[-94.955780, 39.318240],
[-94.955640, 39.317700],
[-94.955570, 39.317160],
[-94.955570, 39.316610],
[-94.963194, 39.316858]
]
]
}
}, {
"type": "Feature",
"properties": {
"Name": "214_1",
"Description": ""
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-94.783917, 39.083417],
[-94.776470, 39.084670],
[-94.776340, 39.084140],
[-94.776290, 39.083590],
[-94.776300, 39.083040],
[-94.776380, 39.082500],
[-94.776530, 39.081960],
[-94.777020, 39.080940],
[-94.777360, 39.080460],
[-94.777760, 39.080000],
[-94.778210, 39.079570],
[-94.778710, 39.079180],
[-94.779260, 39.078830],
[-94.783917, 39.083417]
]
]
}
}]
}