I am using mapbox-gl-js to render a map on my website. I made a map style in mapbox studio, also using other tilesets. I recently updated these (quite big) tilesets and changed some styling. In mapbox studio, the style worked perfectly well, but when I try to see the map on my website (which didn't change), I get several errors like "Uncaught TypeError: Cannot read property 'type' of undefined" (or with other properties), and the map doesn't render.
I already checked the token and the style address, but I guess the problem is my map style... Here is its URL :
mapbox://styles/clemapbox/cjml1byyjq6jt2rni6wbjn3lt
Here's a minimal code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href='.45.0/mapbox-gl.css' rel='stylesheet' />
<title>MINIMAL TEST</title>
</head>
<body>
<section id='map' style="width:500px;height:500px;"></section>
<script src='.45.0/mapbox-gl.js'></script>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2xlbWFwYm94IiwiYSI6ImNqOHVsbjdpdDBxM2wyd3JwcnVjZGtsZmsifQ.cv3w8BmCJAy0f0YF1ZFSTA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/clemapbox/cjml1byyjq6jt2rni6wbjn3lt',
});
</script>
</body>
</html>
I am using mapbox-gl-js to render a map on my website. I made a map style in mapbox studio, also using other tilesets. I recently updated these (quite big) tilesets and changed some styling. In mapbox studio, the style worked perfectly well, but when I try to see the map on my website (which didn't change), I get several errors like "Uncaught TypeError: Cannot read property 'type' of undefined" (or with other properties), and the map doesn't render.
I already checked the token and the style address, but I guess the problem is my map style... Here is its URL :
mapbox://styles/clemapbox/cjml1byyjq6jt2rni6wbjn3lt
Here's a minimal code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href='https://api.tiles.mapbox./mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<title>MINIMAL TEST</title>
</head>
<body>
<section id='map' style="width:500px;height:500px;"></section>
<script src='https://api.tiles.mapbox./mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2xlbWFwYm94IiwiYSI6ImNqOHVsbjdpdDBxM2wyd3JwcnVjZGtsZmsifQ.cv3w8BmCJAy0f0YF1ZFSTA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/clemapbox/cjml1byyjq6jt2rni6wbjn3lt',
});
</script>
</body>
</html>
- If the style is working in Studio, then it should be just fine (as Studio relies on GL JS under the hood to do a lot of its map rendering). Can you include an mcve of your GL JS implementation so that the munity can better help you troubleshoot? – riastrad Commented Aug 12, 2019 at 14:16
- Yes but I can use my code to display other styles... and it worked before that. Anyway, here is a minimal code : – C. Roux Commented Aug 13, 2019 at 13:16
- Thank you for the example! I see the issue and will post it as an answer. – riastrad Commented Aug 13, 2019 at 15:26
2 Answers
Reset to default 5The problem here appears to be an inpatibility with your style and the version of GL JS that you are using. Specifically, because your style is using the text-radial-offset style property which is not supported by GL JS until +v0.54.0.
When I update the version of GL JS your example is using, I am able to produce the expected result:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href='https://api.tiles.mapbox./mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet' />
<title>MINIMAL TEST</title>
</head>
<body>
<section id='map' style="width:500px;height:500px;"></section>
<script src='https://api.tiles.mapbox./mapbox-gl-js/v0.54.0/mapbox-gl.js'></script>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2xlbWFwYm94IiwiYSI6ImNqOHVsbjdpdDBxM2wyd3JwcnVjZGtsZmsifQ.cv3w8BmCJAy0f0YF1ZFSTA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/clemapbox/cjml1byyjq6jt2rni6wbjn3lt',
});
</script>
</body>
</html>Any easy way to check for which client side library is patible with your style is via the settings drop down in Studio:
⚠️ disclaimer: I currently work for Mapbox ⚠️
Add a key to your mapbox that should make it work.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744402096a4572440.html
评论列表（0条）