Strava heat mapping images returned from API - javascript

https://labs.strava.com/heatmap/#7.65/-75.95197/41.17804/blue/ride
Does anyone know how Strava have achieved this. By the looks of the network tab strava request overlay images using the API.
I have geo data, but how can I turn those geo data to heatmap images on a nodejs side ?
Thanks.

The simplest way is probably doing it in the frontend by loading a third-party map (such as Google Maps, which also has heatmaps capability) and then loading the heatmap layer with your data.
As for the way they are doing it, since it's such a specialized case, they're probably rendering the overlays on the server side and serving it as images, as you mentioned, which is also considerably harder to do than loading a map with data and letting it do it's thing.

Related

Is it possible to force the Google Maps API to use a specific Transit Provider

I am writing an app (in react) that provides an ETA to a user on a train for when they will reach the next NJTransit station based on their location.
I would like to use Google Maps, but I do not see a way to ensure it will only use NJTransit. For instance, if I were to ask for directions from Newark to New York, it is possible Google Maps would give a route using the Path.
I have the GTFS data, but calculating it off of that would be inaccurate due to lack of delay information. NJTransit seems to have a real-time GTFS feed, but it is designed for servers and this has to be completely client based.
From my experience using google maps api, you have limited ways that you can form a request. To make routes you will have to use gooole routes so you can take a look over there on how you can tweak your request to have the best response. Hope it helps, if not let me know

Leaflet adding markers on map and data security

I'm looking into using Leaflet to make maps and place markers in an internal application (i.e. not a web-site, but a simple desktop application), but I'm wondering which data is sent and which is not. Do the following command send any data or is it only plotted locally?
marker = L.marker([51.5, -0.09]).addTo(mymap);
Needless to say, I want to keep my data confidential and not send it away over the web.
(If this is the case, then any recommendation on a good alternatives).
It's all local (I use leaflet offline all the time). If you want to check the source code for markers and look for yourself, feel free to check it out here
As an in-browser javascript library, I've never come across a situation where leaflet sent data. In fact, the only thing you really need an internet connection for in leaflet is to get map tiles/images.

Meteor: Is there a way to cache map tiles for offline usage on the client (minimongo)?

I'm asking if there is a way to cache map tiles on the client side (Leaflet or OpenLayers, doesn't matter) with Meteor.
As far as i know tiles are saved as pngs. Is it possible to save these images on the client side (minimongo) or any other web-technology that fits to Meteor? These data files don't need to be synced with the server! I read that Mongo uses BSON which maximum document size is 16MB. Maybe vector tiles might fit better in the JSON pattern?!
I read about offline usage on this github-entry: https://github.com/awwx/meteor-offline-data and there are still some problem with offline data, but it sounds viable.
Looking for ideas -
Thanks in advance!

Caching Google maps routes

I've got a geojson file with a bunch of points. I use Google Maps to get routing information between these points (using the JS API v3). Unfortunately I'm getting the OVER_QUERY_LIMIT error status back because I'm doing too many routing requests at a time.
For now I've solved it by delaying my routing requests. But that is not a long term solution. It takes too long to draw the full route now.
What I want to do is cache the routes. The only time I'd need to invalidate the cache is when the geojson file is updated (let's say this happens once a week maybe).
It's a static site. So all the logic is client side JavaScript. The site is hosted as a GitHub project page.
Any ideas on how I could implement the caching? Could Jekyll (github pages tool) help in any way? I don't know exactly what it does. Or some Travis-CI script?
EDIT: Just to clarify; It'd be enough to cache just the polyline and then draw that. I don't need the actual driving directions. I also don't need to be able to edit the route by drag-n-drop.
You can choose to use cookies for client side data storage.
Store a date and the polypoints array in cookie and when no cookie/ out of date, make a request, otherwise just draw poly on the map.
I would say use php or something and store it on server, I know You don't want that.
What I ended up doing was to write a node.js script that generates a polyline file with the route. Then I just draw that polyline on the map. The route changes seldom enough that I don't mind that it's a manual step.
It's been a year, but I think this is the final version of the script that generates the polyline: https://github.com/Tobbe/highpointing/blob/master/lib/route_creator.js

Best practices for fleet tracking using google maps v3?

I want to develop fleet tracking app using HTML5,JavaScript, Couch DB for a construction site.I ll get live lat,long of moving vehicles in json format.I dont want to use Direction Services of google since lat,long coming from our own GPS devices.I ll display vehicles as markers.how can i do this in a best way regarding following issues:
Performance
Do i need to maintain separate instance for each vehicle(if 100
vehicles are moving).
Low network speed(since construction sites locates in forest).
Please give me suggestions I ve searched in NET for 1 week but dint get anything useful.
Note:I am well aware of google terms and conditions for business.
Google maps api encourages you to use ajax which addresses performance and reduced network loads itself. If you make all the markers identical, you'll reduce the number of images that must load, but your client will not be able to distinguish the vehicles from one another. Therefore, when the locations are updated, you won't be able to tell which vehicles moved where, it'll just be a bunch of markers that randomly move. In my app, I draw marker images on the client side via canvas. This eliminates the network latency of waiting on marker images to load. I have maps where 100 different icons, each with different numbers(labels), load seemingly immediately. Another performance improvement would be to use websockets to send the updated data. You could set up an algorithm on the server side that detects movement of the vehicles and only sends data messages for vehicles that have moved. If each vehicle is given an ID in your JSON feed, you can loop through your markers(vehicles) and update the locations based on matching IDs.

Categories

Resources