Access to image at 'https://c.tile.openstreetmap.org/1/1/0.png' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I was working on making a map, and for the first few days I had no trouble viewing OpenStreetMap without any problems. However, after a few days, I started getting the error indicated above.
Using tile server, this problem is easily resolveable.
I used the "ol" npm package to integrate openstreetmap into my react application.
The method below allows us to change the tile server with ease.
const tileLayer = new TileLayer({
preload: 4,
source: new OSM({url: 'https://a.tile.openstreetmap.de/{z}/{x}/{y}.png'}),
});
Related
I am using react-leaflet with tile provider Stadia OSM bright. when I run it locally Is showing tiles but when I make build and upload to server It stops loading tiles and starts giving request 403 forbidden error. I have an API key but not finding any solution where to put it in the component. here is a code sample
render() {
const headeris = {"Authorization": "Stadia-Auth "+this.state.authkey}
return (
<LeafletMaps
center={[this.state.lat, this.state.lng]}
zoom={12}
maxZoom={17}
attributionControl={true}
zoomControl={true}
doubleClickZoom={true}
scrollWheelZoom={true}
dragging={true}
animate={true}
easeLinearity={0.5}
>
<TileLayer
url="https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png"
attribution= '© Stadia Maps, © OpenMapTiles © OpenStreetMap contributors'
/>
{this.state.markers.map((position, index) => (
<Marker
key={`marker-${index}`}
position={[position[0][4], position[0][5]]}
>
<Popup>
<p>{position[0][0]}</p>
<a href={`/admin/calender/${position[0][2]}`}>Book now</a>
</Popup>
</Marker>
))}
</LeafletMaps>
);
Section for other people
As mentioned you need to first register to get an API key if not developing locally. From your question I can see that you have done that and are asking where to insert the key once you have it.
Once registered you can
Add your website domain to the Stadia whitelist using the dashboard presented
However if like me you are not using a specific website, or location you may instead append the API key to the URL. NOTE: Rather than the usual ?apikey= syntax Stadia opts for the use of an underscore ?api_key= (this caught me out too!).
This means you need to change your code in the following way to get it to work:
<TileLayer
url="https://tiles.stadiamaps.com/tiles/osm_bright/
{z}/{x}/{y}{r}.png?api_key=your_api_key_goes_here"
<... rest of code ...>
Hopefully, that should solve your problem - good hacking!
general description and alternative solution (for quite complete solution regarding Api insertion see user2589273 answer below),
i've also been tricked at first but all resolved now. As Stadia Maps States in their Api keys page, "You can get started developing locally without any effort or cost. You can get started right away with a web server running on localhost or 127.0.0.1. Once you're ready to deploy, you can sign up for free". please refer to https://docs.stadiamaps.com/#api-keys ,
so you need to signup if you are using it in production, they have a free plan (up to 2500 requests per day for non commericals).
note that you don't need an api key, as they have another solution includes providing your domain name so they can track your traffic.
Stadiamaps also supports adding a domain next to API keys. When you create a property, you have the option to generate an API key or add a domain. When serving your website with javascript opt for the domain. As you generally don't want to expose your keys.
FCC provides a style id from their website which is
https://api.mapbox.com/styles/v1/fcc/ck07351k218h31cp7om3z4bka.html?fresh=true&title=true&access_token=pk.eyJ1IjoiZmNjIiwiYSI6ImNqY2h2MnAxbDJhZjIycXBnN3cxb3FnYzAifQ.-JIKXvGZ-ZI2m7L8f92Lew#3.0/37.000000/-95.000000/0
However, when I tried to embed the style into my website, it is not working.
My code is
mapboxgl.accessToken = 'myowntoken';
var map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/fcc/ck07351k218h31cp7om3z4bka",
center: [-121.064242, 36.922103], // starting position
zoom: 5
});
I wonder why this happened?
It's likely that FCC only allows using this style with their token. The note on their documentation website says:
Note: In order to access these layers, in the various formats below, you need a Mapbox access token. We are including a public access token in the links below since we want to make it easy for people to access broadband data in whatever format is most useful. However, if we find that the access token is being abused, and in particular being used to access maps unrelated to the broadband map, we will have no choice but to deactivate the token, and require end users to get their own token.
While it implies that you could use your own token, it seems like they didn't actually enable this functionality.
You can use the token they provided for the time being.
I'm trying to use the following URL to export a map image and I'm not getting anything other than a blank image...
http://demographics6.arcgis.com/arcgis/rest/services/USA_Demographics_and_Boundaries_2016/MapServer/export?f=json&format=png&bbox=-82.728110%2C27.719379%2C-82.532320%2C27.816795&size=600,600&token=[my-token]
Any ideas?
Are you constructing this url yourself or is that request coming from a layer added to the map?
After logging in to ArcGIS Online, I was able to use the export endpoint just fine with this url:
http://demographics6.arcgis.com/arcgis/rest/services/USA_Demographics_and_Boundaries_2016/MapServer/export?bbox=-2.601910765504469E7%2C4619421.289780159%2C1199812.3691861853%2C1.6262309438175105E7&size=600%2C600&format=png&f=json
My hunch is you are supplying an invalid bounding box, it looks like it may be in a different spatial reference than the service, the service is expecting web mercator (102100) and looks like you may be giving it geographic (4326)
I'm using mapbox studio to produce custom map and accessing that style in js. but I'm not able to access that style when calling api. it simply returns with {"message":"Not Found"}
I can directly access the api link through mapbox studio. In mapbox studio in styles we have map style id and api link. so i can access it using that link but when I actually use in my application it's not working.
here is the code where I'm getting error:
map.addSource('parcels', {
"type": "vector",
"url": "mapbox://styles/ch*****/ci****************"
});
Hoping to get some good help.
thanks
Akshay
There are two potential causes for Not Found errors:
You are looking at an area of the map where there is no data. The Mapbox API responds with a 404 status code to indicate "no data" for vector tiles. These messages can be ignored. Try panning to an area where there is data.
You are using the wrong access token. Make sure you are using an access token from the account used to create the map. You can read more about Mapbox access tokens here https://www.mapbox.com/help/define-access-token
i am using Bing map tiles in my Android application. I download tiles from http://h0.ortho.tiles.virtualearth.net/tiles/h<quadkey>.jpeg?g=131 and it works fine, but i understand that i need to append a token to this URL in order to make this operation legal (and ask some kind of special permission from Microsoft). It is all well explained here: http://blogs.msdn.com/b/virtualearth/archive/2008/04/29/tracking-virtual-earth-tile-usage.aspx. But this post is from 2008 and i found on msdn site that in 2012, token-auth system will be replaced with key auth system.
Does anybody know how can i perform the direct tile access with this new auth system?
Thanks in advance
Accessing tiles directly with key-based authentication can be accomplished like so:
Using the REST ‘Get Imagery Metadata’ service to obtain the tile URL format for the type of tiles you wish to display:
http://msdn.microsoft.com/en-us/library/ff701716.aspx
- For example, if you wish to display Road tiles, the following request could be used (taken from the above documentation): http://dev.virtualearth.net/REST/V1/Imagery/Metadata/Road?mapVersion=v1&output=xml&key=BingMapsKey
Within the response, the URL for tiles is returned, with a placeholder for the tile quadkey.
A new REST request should be issued each time the map viewer in the application is instantiated, or whenever the map type is changed (eg. You wish to switch to aerial or hybrid map style)
Your platform usage can then be tracked based on the calls to the REST service.