Strava Heatmap in Openlayers

64 views
Skip to first unread message

M1st1c G0h4n

unread,
Dec 27, 2019, 10:42:19 AM12/27/19
to OpenLayers Dev

Hello, I have a PHP website that loads an Openlayers map with different maps (ESRI, HERE, etc.) It also has some layers such as (Demography USA, Sea level of the Openlayers example itself)

When trying to integrate Strava's HeatMap as a map or layer, I get a CORS problem.
This is the code:

new ol.layer.Tile({
title: 'Satellite Heatmap',
type: 'base',
visible: true,
source: new ol.source.OSM({
url: 'https://heatmap-external-{a-c}.strava.com/tiles-auth/all/hot/{z}/{x}/{y}.png?Key-Pair-Id=
XXXXX',
tileOptions: {crossOriginKeyword: 'anonymous'},
transitionEffect: null,
serverType: 'geoserver',
crossOrigin: 'anonymous'
})
}),

In Chrome console say error:
Access to image at 'https://heatmap-external-a.strava.com/tiles-auth/all/hot/12/1606/2091.png?Key-Pair-Id=XXXXX' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
And firefox console say warning:
falta la cabecera CORS 'Access-Control-Allow-Origin').


With this function return I have Cors

function cors() {

// Allow from any origin
if (isset($_SERVER['HTTP_ORIGIN'])) {
// Decide if the origin in $_SERVER['HTTP_ORIGIN'] is one
// you want to allow, and if so:
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 86400'); // cache for 1 day
}

// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
// may also be using PUT, PATCH, HEAD etc
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");

if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

exit(0);
}

echo "You have CORS!";
}
cors();


I have put this code in the header of the document, but I think it is for the server not for the client.

header("Access-Control-Allow-Origin: *");


In the Firefox Network I can see that the images have been uploaded (See the IMG)


Can somebody help me, please?
Thanks



heatmap.png
Reply all
Reply to author
Forward
0 new messages