javascriptmapboxmapbox-gl-js

"Uncaught TypeError: Cannot read property 'property' of undefined" when loading style with mapbox

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.com/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.com/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>
Solution

  • The problem here appears to be an incompatibility 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.com/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.com/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 compatible with your style is via the settings drop down in Studio:

    studio screenshot

    ⚠️ disclaimer: I currently work for Mapbox ⚠️