Caching Google maps routes - javascript

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

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

Strava heat mapping images returned from API

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.

Automatically access my Google Analytics and display chart publicly on my website

I'm having some difficulties in figuring out the best way to do this:
Using Google Analytics API, or similar Google API, I would like to track a user's activity from the moment they access the page until they reach an end page, which is gonna show them back some charts with THEIR activity on my website. (Nothing too detailed, just how long they've been on each page, how many session etc.)
So far, I've managed follow the Embed API example to access THE USER's Google Analytics account and draw a chart by asking for permission, however when it comes to showing data from MY account I just can't seem to figure it out.
I want my website to automatically use my account (or service account) and draw some charts from my google analytics data and show it to every user.
What would be the best way to approach this? I've read something about access tokens but I don't know if that's the solution. Moreover, my hosting is a shared host and I don't think it allows installing Python Modules like in this example.
Cheers for the help!
If you want to show the user your data, you will have to perform the authentication on the server side. There is no way around this. It is after all, your account's data that they are accessing.
If you are unable to install Google's client library, you need to:
Get an access token using cURL (see how here)
Use that access token to perform server side authentication for the user (see how here)
The user should now be able to access your site without logging in, and see YOUR data.

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.

Data security highcharts

Just starting to use Highcharts. If I include data in an array within the javascript the data is available for anyone to download when they view the source. This would be the same when data is called, say, from a csv file. Is there a way of protecting the data against copying/download?
No, since HighCharts is a client-side JavaScript library, data available to it is also potentially available to the end user. There really is no way to "secure" it once the data reaches the user's browser, although you can use HTTPS, server-side authentication, etc to at least guarantee in principle that only the intended user receives the data.
If you need to visualize your data while keeping the actual raw data secure, the obvious solution is to render the data on the server and just (in the end) serve up an image or other static content to the user. But then you lose the nice, interactive charts.
You might be able to use Flash or Silverlight to retrieve the data, to make part of the process harder to reverse engineer. This is not securing anything, just making it a bit harder for a determined user.
On the other hand, a user can see the data anyway in the final chart. If they really want to download the data they could painstakingly identify each data point and create their own CSV file, right? You need to figure out what is good enough for your particular use case, and strike the appropriate balance.
Being that HighCharts is a client-side JS system, I don't believe there is a way to get data to it securely. If you just attempt an AJAX call to get data at runtime, a user can see that call and the response. As you said you cannot just populate a variable in the source, as it is visible there.
Try the render charts on server feature:
http://www.highcharts.com/docs/export-module/render-charts-serverside

Categories

Resources