I'm trying render a simple map using Polymaps, but CORS issue is getting in the middle:
Server Side
For the server, I am using TileStache with the following configuration file:
{
"cache":
{ "name": "Test", "path": "/home/jose/data/maps", "umask": "0000" },
"layers":
{ "local": {
"provider": {"name": "mbtiles", "tileset": "mundo.mbtiles" }
},
"arpt": {
"allowed origin": "*",
"provider": { "name": "vector", "driver": "GeoJSON",
"parameters": {"file": "/home/user/data/data.geojson"},
"properties": ["ICAO"] }
}
}
}
I am executing such server by means of:
$ tilestache-server.py -c config.cfg -i localhost -p 8080
This server seems to work properly given that I am able to actually see the map tiles and I'm able to get geojson tiles.
Client Side
Here is where I am having the issue. Firefox complains about:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8080/arpt/5/15/12.geojson. This can be fixed by moving the resource to the same domain or enabling CORS.
(repeated for every GeoJSON tile requested)
The JavaScript code that I am running is:
<!DOCTYPE html>
<head>
<title></title>
<script type="text/javascript" src="polymaps.min.js"></script>
<link rel="points" type="application/json" href="http://localhost:8080/arpt">
<style type="text/css">
@import url("example.css");
#map {
background: #E6E6E6;
}
.layer use {
stroke: #ccc;
stroke-opacity: .5;
}
#copy {
color: #000;
opacity: .5;
}
#copy a {
color: #000;
}
</style>
</head>
<body>
<h1>Comienzo</h1>
<p>Fin</p>
<!--Polymaps Build-->
<!--div id="map"></div -->
<script>
//curl -H "Origin: http://example.com" -H "Access-Control-Request-Methos: POST" -H "Access-Control-Request-Headers: X-Requested-With" -X OPTIONS --head --verbose http://localhost:8080/arpt/3/2/0.geojson
//window.document.domain = 'http://localhost';
var po = org.polymaps;
//Add Image tiles as base
var map = po.map()
//.container( document.getElementById("map").appendChild(po.svg("svg")) )
.container( document.body.appendChild(po.svg("svg")) )
.zoom(5)
.zoomRange([1,5])
.center({lat: 37.76, lon: 0 })
.add( po.interact() );
// Control de zoom sin control de dirección
map.add( po.compass().pan("none") );
// Tile que vienen de mbtiles.
map.add( po.image().url( "http://127.0.0.1:8080/local/{Z}/{X}/{Y}.png") );
// Tile GeoJSON
map.add( po.geoJson()
.url("http://127.0.0.1:8080/arpt/{Z}/{X}/{Y}.geojson")
.tile(true)
//.zoomRange([3,5])
.on("load", load) );
function load (e) {
for (var i=0;i<e.featureslength;i++) {
console.log(e.properties.ICAO,e.features[i].geometry.coordinates);
}
/* po.stylist()
//.attr("stroke", function(d) { return "blue"; })
.title(e.properties.ICAO; });*/
}
</script>
<!-- script type="text/javascript" src="ex01.js">
</script -->
</body>
</html>
I'm just a newbie learning JavaScript and playing with these technologies. I don't really understand the CORS issue given that I'm running all localhost within a virtual machine.
Any clue about what I did wrong will be appreciated.
Kind regards,
José M.