admin管理员组

文章数量:1403516

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>
  • javascript
  • mapbox
  • mapbox-gl-js
Share Improve this question edited Aug 13, 2019 at 13:17 C. Roux asked Aug 12, 2019 at 13:46 C. RouxC. Roux 1331 gold badge3 silver badges9 bronze badges 3
  • 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
Add a ment  | 

2 Answers 2

Reset to default 5

The 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.

本文标签：

版权声明：本文标题：javascript - &quot;Uncaught TypeError: Cannot read property &#39;property&#39; of undefined&quot; when loading s 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744402096a2604516.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。