I am trying to use the non-proprietary basemap style from openmaptiles.org (https://openmaptiles.org/docs/website/mapbox-gl-js/) with Deck.gl. In my example I am using the 'Dark matter' style.
deckgl = new deck.DeckGL({
container,
map: mapboxgl,
mapboxApiAccessToken: mapboxAccessToken,
// mapStyle: "mapbox://styles/mapbox/dark-v9",
mapStyle:
"https://openmaptiles.github.io/dark-matter-gl-style/style-cdn.json",
longitude: -98.58,
latitude: 39.82,
zoom: 4
});
When I run this code, I am getting this error 'Failed to load resource: the server responded with a status of 403 () [https://maps.tilehosting.com/data/v3.json?key=SymbVzXrAD6Jmqe6yBOS]'. What am I doing wrong here?
When I run this code with the mapbox style (commented out), it works fine.
Thanks
Kiran
As you'll see when you go to that URL directly, tilehosting.com is telling you that you don't have the right API key to access that resource.
Related
Our requirement is to load Map using ArcGIS JS in the Salesforce. I tried to implement the sample code mentioned at the link (https://developers.arcgis.com/javascript/latest/display-a-map/) using LWC. After implementing the code in LWC , when I was trying to load the map, it was giving me the errors like shown below.
enter image description here
In the Javascript file of LWC bundle, there is a logic like below.
require(["esri/config","esri/Map","esri/views/View"], function (esriConfig,map1,view1) {
esriConfig.apiKey = "AAPK5f40f4c3fea2450bab57cb033d6730dfV4SOorOlBpDGRBnkbgikiNIP2kSnYcybTJ9qkTSHPBegoYNlxKYLqMSnSo0fDtjZ";
const map2 = new map1({
basemap: "arcgis-topographic" // Basemap layer service
});
console.log('viewDiv Node');
console.log(viewDiv);
const view2 = new view1({
map: map2,
center: [-118.805, 34.027], // Longitude, latitude
zoom: 13, // Zoom level
container: viewDiv
});
console.log('all the lines are executed successfully inside the require callback function');
});
All the function inside the require callback function seems to be working fine in the LWC because I am able to get the line 'all the lines are executed successfully inside the require callback function' printed successfully in the console. when the map view is about to get rendered in the UI, it shows the error message as shown in the above screenshot attached.
How can I fix the issue?
Here is my code and the result is none.
import React, {Component} from 'react';
import ReactMapBox from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
class MapExample1 extends Component {
state = {
viewport: {
width: "100vw",
height: "100vh",
latitude: 42.430472,
longitude: -123.334102,
zoom: 16
}
};
render() {
console.log("Entering console.log in MapExample1.js ");
return (
<ReactMapBox
{...this.state.viewport}
onViewportChange={(viewport => this.setState(viewport))}
mapboxApiAccessToken=
'pk.eyJ1Ijoicm95Y2VtYXJ0aW4iLCJhIjoiY2wzODk0bmp3MDc4YjNpbnphNzRzODR1YSJ9.peCCwkWoX_RHseUf2WI1Xw'
/>
);
}
}
export default MapExample1;
But the resulted error is [Error: A valid map box access token is required to use map box GL JS.] in console inspect.
It looks like versions earlier that 7.0 used: mapboxApiAccessToken=YOUR_ACCESS_TOKEN. to set the API key.
v7.0 uses: mapboxAccessToken=YOUR_ACCESS_TOKEN.
As described here[https://github.com/visgl/react-map-gl/blob/29aa2098febf1e6b8bbfd2caecb3745b3d4d82a9/docs/upgrade-guide.md]
That change fixed it for me.
Sadly, Mapbox decided that some of their libraries need to use Mapbox access token for all map views.
This is the case for the famous Mapbox GL JS.
More info could be found at the 2.0.0 release page: https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0
The concrete paragraph where this is stated is this one:
Beginning with v2.0.0, a billable map load occurs whenever a Map
object is initialized. Before updating an existing implementation from
v1.x.x to v2.x.x, please review the pricing documentation to estimate
expected costs.
And I believe, based on what I read on react-map-gl GIT page, is the same for that other library, which I think is the one you're using.
The related paragraph on react-map-gl GIT page:
About Mapbox Tokens
To show maps from a service such as Mapbox you will need to register
on their website in order to retrieve an access token required by the
map component, which will be used to identify you and start serving up
map tiles. The service will be free until a certain level of traffic
is exceeded.
I have created a Mapbox style using Mapbox Studio and set it to be used over WMTS. The URL of the style is:
https://api.mapbox.com/styles/v1/username/styleId/wmts?access_token=token
where styleId, username and token are variable fields.
When I try to create a WMTS layer in OpenLayers using the url above, the tileGrid is created successfully using createFromCapabilitiesMatrixSet but I get a response error Invalid query param layer from Mapbox.
After some investigation, I noticed that:
The response error persists for all query parameters that are appended from OpenLayers when creating the tile load function. It looks like that Mapbox does not recognise them properly.
OpenLayers website and Mapbox also give examples on using XYZ layers for integration between them.
So, is this some kind of unsupported feature of OpenLayers or do I need to configure anything additional when creating the WMTS OpenLayers?
It's much simpler to set up as a standard OpenLayers XYZ layer using
url: 'https://api.mapbox.com/styles/v1/username/styleId/tiles/{z}/{x}/{y}?access_token=token'
as in the examples.
Mapbox provides WMTS support for compatibility with some other systems. It can also be used in OpenLayers, the setup would be
var parser = new ol.format.WMTSCapabilities();
fetch('https://api.mapbox.com/styles/v1/username/styleId/wmts?access_token=token').then(function(response) {
return response.text();
}).then(function(text) {
var layer = new ol.layer.Tile({
source: new ol.source.WMTS(
ol.source.WMTS.optionsFromCapabilities(parser.read(text), {
layer: 'styleId',
matrixSet: 'EPSG:3857'
})
)
});
....
....
....
....
});
Both methods will ultimately load the same tile urls, so there's no advantage in using WMTS where XYZ is supported.
I created a very minimal codepen, but I am getting an error when trying to create the draw control.
See: https://codepen.io/DrYSG/pen/QgmVZg
I assume it is something simple that I doing wrong. But I looked at the CDN I am using , and I see nothing obvious:
https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.9/leaflet.draw-src.js
These are the errors I am seeing in the console:
Util.js:15 Uncaught TypeError: Cannot add property segmentsIntersect, object is not extensible
at Object.extend (Util.js:15)
at LineUtil.Intersect.js:6
at EditToolbar.Delete.js:145 extend # Util.js:15 (anonymous) # LineUtil.Intersect.js:6 (anonymous) # EditToolbar.Delete.js:145 pen.js:11 Uncaught TypeError: L.Control.Draw is not a constructor
at pen.js:11
var map = L.map("root").setView([42, -71], 7);
L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'© OpenStreetMap contributors'
}).addTo(map);
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
Indeed, Leaflet.draw is not working with Leaflet 1.1.0 . It has been reported. As long as this issue is not closed, consider the problem still there.
Apparently I can't comment until I have more reputation.
Leaflet.Draw 0.4.10 has been released that limits the ceiling version of Leaflet to 1.0.x rather than 1.1.x. Leaflet 1.1.x introduced ES6 and Rollup which Leaflet.Draw was not prepared for, and that is being actively pursued to be resolved.
I'm learning how to use Leaflet to make online interactive maps for public health purposes (experienced ArcGIS user, Mapbox TileMill). I'm taking it slow so I understand each piece of code, and I'm working from the Leaflet choropleth example as I want to make choropleth maps. The current task I'm stuck on is how to correctly add topoJSON data to a Leaflet map. I've tried the following code to convert the us states geoJSON to topoJSON, but it hasn't worked. Any suggestions?
var geojson;
var test = topojson.feature(us-states-topo, us-states-topo.objects.layer1 );
geojson = L.geoJson(test, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
I've reviewed the topoJSON API reference, but I'm sure I must be making a simple error as I am a beginner to JavaScript in general. Thank you all for your help!
Best
Eli
I'd recommend using your browser debug tools to start through debugging this.
var test = topojson.feature(us-states-topo, us-states-topo.objects.layer1 );
This is not valid JavaScript: us-states-topo is not a valid variable name, since -s are not permitted.