Animated heatmap with new data sets - javascript

I have created a simple heatmap (using google maps api v3), into which I would like to add an element of basic animation.
I have a number of collections of datapoints, each collection representing a time period (say 30 minutes).
I want to "replay" the heatmaps corresponding to one collection of data, followed by the next collection, and the next, and so on. Almost like replaying video frames.
I have tried doing this with an MVCArray, which I clear and update with the new datapoints. Something like this
data = new google.maps.MVCArray(datapoints);
then after a few seconds:
for (i=0;i<data.getLength();i++){
data.removeAt(i);
}
This does not work, because the new heatmap data will simply be added ontop of the old heatmap in the browser, even though the data array was succesfully cleared.
This problem, and a basic solution is described here:
Remove HeatmapLayer from google maps
The solution is to clear the heatmap using:
heatmap.setMap(null)
However, this does not work for me, since this will completely clear the heatmap, and leave the map empty for a second or two. That is to say, the animation effect is lost.
Any suggestions out there on what I could do?

Well, I don't know if it's possible to really animate one heatmap into the other but it is definitely possible to do something like this.
Which is basically doing the same thing you did, but at a quicker rate.
You can achieve something like that with some basic JavaScript.
For example:
<script type="text/javascript">
// initialise variables
var speed=5;
x=0;
var interval = setInterval(function(){},10000000);
var heatmap;
// function to change map
function changeSpeed(change) {
speed = speed+change;
if (speed<=0) speed=1;
if (speed>=10) speed=10;
// speed --> delay
if (speed>5) {
delay=1000/(speed-5);
} else {
delay=1000*(6-speed);
}
document.getElementById('speed').firstChild.nodeValue=speed;
// restarting the function
clearInterval(interval)
interval=setInterval(function(){
x++;
if (x>=heatmapFiles.length) x=0;
// document.getElementById('filename').firstChild.nodeValue=heatmapFiles[x];
var re = /[0-9]{8}/;
var datestr = re.exec(heatmapFiles[x])[0];
document.getElementById('date').firstChild.nodeValue=datestr.substring(6,8)+"."+datestr.substring(4,6)+"."+datestr.substring(0,4);
var req = new XMLHttpRequest();
req.open("GET", "./"+heatmapFiles[x], true);
req.onreadystatechange = function heatmapLoaded() {
if (req.readyState == 4) {
eval("map="+req.responseText);
heatmap.setData(map);
}
}
req.send(null);
// redraw
document.getElementById('boxed').style.display = 'none';
document.getElementById('boxed').style.display = 'inline-block';
},delay);
}
// this is important for you
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(0,0),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// creating a new heatmap
heatmap = new google.maps.visualization.HeatmapLayer({ radius: 50 });
heatmap.setMap(map);
// calling the 'change map' function
changeSpeed(0);
}
</script>
How does it work?
The heat map data are stored in JSON format in seperate Javascript files. A timer is used to load the next dataset. It will be parsed and assigned to the “data” property of the Google Maps HeatMapLayer object. After the property has been changed, the heatmap is redrawn automatically with the new data set. source
Alternatively
You could create the different heatmaps in different divs and then use jQuery to fadeIn the 'new' heatmap and fadeOut the 'old' heatmap at the same time. This would create a sort of 'animation'.
I hope this helps you out. Good luck!

Related

I have a location list of 300000 elements and want to visualize them on my localhost

Basically, what I have is a geolocation data (longtitude and latitudes) of 300.000 locations. I have different attributes attached to the data and it is approx. 32MB. Reading it through js and putting markers on google maps is what I've tried, and It works OK when i put only 25 to 2500 markers on my map, I cant really put all of my locations at once. Eventually I want to be able to filter markers through the attributes etc. The locations are all at one city, so I might use my own map or something.
What I want to ask/learn is do you have any better solutions for this particular situation?
Here is my code.
function initJS() {
var promise = getData();
var locations1;
var locations;
promise.success( (data) => {
locations1 = parseData(data);
locations = locations1.filter(location => {
return location.DuyuruTipi == "16";
});
//initializing google map
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: latitude, lng:longtitude},
zoom: zooming,
});
//creating a marker
const svgMarker = {
// path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
url: "./assets/marker.svg",
size: new google.maps.Size(20,20),
scaledSize: new google.maps.Size(20,20),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(10, 10),
};
for (var i = 0; i < locations.length; i++) { //locations.length
// init markers
var marker = new google.maps.Marker({
position: { lat: parseFloat(locations[i]["YCoor"]), lng: parseFloat(locations[i]["XCoor"])},
map: map,
label: locations[i]["DuyuruId"],
icon: svgMarker
});
console.log(locations[i]["DuyuruTipi"]);
marker.duyurutipi = locations[i]["DuyuruTipi"];
marker.kazatipi = locations[i]["KazaTipi"];
marker.vsegid = locations[i]["vSegID"];
markers.push(marker);
}
});
Displaying 300000 points directly on the map is not the correct approach and will not perform well, especially as more datasets get added to your map.
In addition, sending 32MB of data or more to the browser is bad form, even for a web map application. If you try out e.g. Google Maps with the network panel open, you'll see that you'll barely go over a few MB even after quite some time using it.
There are a couple approaches that web mappers take to counter this:
Use a service such as Geoserver or Mapserver to split up the data into "chunks" based on what is in the the map clients (openlayers, in your case, according to your answer) viewport. This is the best choice if you could potentially have lots of layers or basemaps in future, but is a lot of work to setup and configure.
Write your own implementation of the above in your back-end. For points, this is relatively simple. This is the best choice for something quick with just a couple of points layers.
In both cases, you'll need to configure your points layer in OpenLayers to use the "bbox" strategy, which will tell it to call your API url whenever the viewport changes enough for more features to be loaded. You will also need to set the minimum resolution for your layer so that it doesn't load too many features all at once when zoomed out.
Lastly, with Openlayers, you'll want to use a VectorImageLayer with a VectorSource for this layer, which will improve performance a lot while allowing you to query and edit your point data.
The above should help to improve your mapping performance.
Well, I went with the OpenLayers API, I think it is harder to implement stuff from docs but they have example applications for every feature. You might want to try that, way better performance if your only need is to put some markers and visualize data.

OpenLayers not letting me add Popup

So I have (or had) a working version of OpenStreetMaps, but now that I want to add popups onto the map, the whole thing breaks. This is the code pertaining to the issue of the popup. The crazy thing is that I copy and pasted the code from the official wiki in order to just get a working example.
function init() {
map = new OpenLayers.Map( 'heatmapArea');
var query = new OpenLayers.LonLat(-122.2928337167, 37.5549570333).transform(
new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
var popup = new OpenLayers.Popup.FramedCloud("Popup", query, null, "Text", null, true);
map.addPopup(popup, false);
var lat = 39.3138895;
var lon = -98.2233523;
var zoom = 4;
var position = new OpenLayers.LonLat(lon, lat).transform( EPSG_WGS84, EPSG_900913);
map.setCenter(position, zoom );
}
The issue as it appears in my browser console is:
I have removed the code which I don't think is relevant to this issue but I could provide more if that is necessary. I have googled around extensively and all of the examples that I find work fine on the website I visit, but breaks my map and every StackOverflow answer to somebody else seems to work fine for the original poster, but once again, breaks my map.
Here's one of the website I tried to copy:
http://www.rigacci.org/openlayers/other_examples/markers.html
I am very eager to get this problem solved and any help would be greatly appreciated. Thanks!
-C.J.
Someone who really knows their way around the OL API will be able to explain this properly, but basically, your code is fine, but you need to reorder it. You need to add a map layer, and zoom to an extent, before you can call addPopup. I think this is because addPopup doesn't need an explicit layer of its own; it uses the map layer; and therefore you need a map layer on your map before trying to use it. That makes sense, but I am not sure why you need also to have called a zoom/zoomToExtent function.
Here's a fiddle, I've tried to leave your code as unchanged as possible:
http://jsfiddle.net/sifriday/u3j6h97d/3/
And here's the JS with some comments:
function init() {
var map = new OpenLayers.Map( 'heatmapArea');
// Add a map layer before trying to use addPopup
map.addLayer(new OpenLayers.Layer.OSM());
// Call the zoom function before trying to use addPopup
var lat = 39.3138895;
var lon = -98.2233523;
// I've changed the zoom to 1 so you can immediately see the popup in the small fiddle window
var zoom = 1;
var position = new OpenLayers.LonLat(lon, lat).transform(
"EPSG_WGS84", "EPSG_900913"
);
map.setCenter(position, zoom);
// Finally here's your addPopup code
var query = new OpenLayers.LonLat(
-122.2928337167, 37.5549570333
).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
var popup = new OpenLayers.Popup.FramedCloud(
"Popup",
query,
// I added a size to make it fit in the small fiddle window
new OpenLayers.Size(100,100),
"Text",
null,
true
);
map.addPopup(popup);
}

Edit existing Google Maps element

For a website I'm using Google Maps to add polylines to a map to display a route. Some routes consist of multiple legs (stages) and I'm trying to add the polylines 'on request'. So only if a user chooses to show a leg, it will draw the polyline. Also the user might choose a completely different route and this new set of polylines should be drawn on the map as well.
My problem is that I can't seem to figure out or find how to select an existing map. I start out by creating a map using the following code:
qMap = new google.maps.Map(document.getElementById(mP.target), mapOptions);
mP.target contains a string with the canvas id and mapOptions is just a object with some options, nothing special.
So I do all kind of stuff with qMap, like adding markers, drawing polylines etc. And this shouldn't just be done at map initiation, but also when the user wants to add something. qMap isn't a global variable and I rather not have it being a global either.
I've tried qMap = google.maps.Map(document.getElementById(mP.target)) and other similar methods. With no success. I'm hoping you can help me out finding a way to this without global variables! Thanks!
There are a couple of things you could try.
1) Wrap your code in an immediately invoked function. This way any variables are contained within the function's scope and don't escape to pollute the global variable space which I guess is your main concern.
(function () {
var mapGlobal = new google.maps.Map(target, options);
function thatDoesSomething(){
// do something with mapGlobal
}
}());
2) Use a static object which might be handy for organising your code.
var Map = {
map: new google.maps.Map(target, options),
thatDoesSomething: function () {
// do something with this.map
}
};
3) Or combine them.
(function () {
var Map = {
map: new google.maps.Map(target, options),
thatDoesSomething: function () {
// do something with this.map
}
};
}());

Need to redraw a map with new data (in conjunction with CartoDB.js)

I seem to be having some trouble with reinitializing a Leaflet map object. I am running an init() function that starts by initializing a map, adding a tilelayer and layer with polygons, and then adding sublayers which color the polygons according to a ST_Intersects query. The issue is that this function is tied to an AJAX call that is caused by a click event but does not update the data according to the new parameters sent to the map. I don't think I am explaining this very well, so here is a bit of my code:
success: function(data) {
init(data);
}
function init(data){
// initiate leaflet map
alert("start");
var map = L.map('cartodb-map').setView([40.750028, -73.926768], 11);
alert("map made");
//create sublayers, etc
}
What happens is that the first time init is run, both 'start' and 'map made' alerts work, and the map is made according to the data. Any further calls to init simply alerts with "start" and "map made" is never alerted so I believe the problem is with reinitializing the leaflet map. What should I do to fix this?
Not sure the problem without seeing more of your code, but you could try calling map.remove(); the second time around. So:
if (map) {
map.remove();
// add in new map initialization here
} else {
var map = ...
}

Removing routes rendered on a Google Map

I'm trying to do something that I gather has been done quite a few times before, although I'm having some difficulty accomplishing it.
I have a webpage that displays three Google Maps.
For each of these google maps, I have a text box that accepts a post code / zip code, and a "get directions" button.
Clicking on each of these buttons uses the google.maps.DirectionsService object to display ONE set of directions in ONE panel centered at the bottom of the page.
My issue arises when I try to find a new route by searching again. As you can see in the image below, both routes are rendered.
I have one marker at the end which is in a markers collection.
I've read a few times now about how you can loop through this array and use marker.setMap(null) to clear this marker.
However, I can't seem to clear the actual routes after each specific search.
Has anybody had any problems with clearing markers from multiple maps?
Do you have to totally reset the map in some way?
If you have to clear markers, at what point in the lifecycle of the process should you do it so that your new journey appears after the search, but the old one is removed?
I use the same google.maps.DirectionsService object for all three Google maps, and they all call the same method to calculate directions, but passing in their own map object as a parameter.
function calcRoute(startPoint, location_arr) {
// Create a renderer for directions and bind it to the map.
var map = location_arr[LOCATION_ARR_MAP_OBJECT];
var rendererOptions = {
map: map
}
if(directionsDisplay != null) {
directionsDisplay.setMap(null);
directionsDisplay = null;
}
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
The gist being that if directionsDisplay != null, we not only pass null to setMap, we also nullify the whole object afterweards, and I found this fixed it.
I dont know the answer.... most likely all u need to do is depending on circumstances:
// put the codes after direction service is declared or run directionsService //
directionsDisplay.setMap(null); // clear direction from the map
directionsDisplay.setPanel(null); // clear directionpanel from the map
directionsDisplay = new google.maps.DirectionsRenderer(); // this is to render again, otherwise your route wont show for the second time searching
directionsDisplay.setMap(map); //this is to set up again
This is the only part you need:
// Clear past routes
if (directionsDisplay != null) {
directionsDisplay.setMap(null);
directionsDisplay = null;
}
This works for me
// on initiate map
// this listener is not necessary unless you use listener
google.maps.event.addListener(directionsRenderer, 'directions_changed', function () {
if(directionsRenderer.directions === null){
return;
}
// other codes
});
// on clear method
directionsRenderer.set('directions', null);

Categories