Adding my own style is not working in MapBox Javascript

Question

In a previous question, someone asked about image overlays with map styles:

How do I add a simple image overlay in Mapbox Javascript?

I got it to work with their example, but I want to use my own style.

Here's a link to my map style.

This is the style they use that works:

mapbox://styles/mapbox/satellite-v9

This is my style, it doesn't work:

mapbox://styles/nittyjee/ck0fasve30an21cpalmwct518

Below is the code that works, you can run it yourself. My style is commented out.

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>Add an image</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>

    <div id='map'></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1Ijoibml0dHlqZWUiLCJhIjoid1RmLXpycyJ9.NFk875-Fe6hoRCkGciG8yQ';


        var map = new mapboxgl.Map({
            container: 'map',
            maxZoom: 5.99,
            minZoom: 4,
            zoom: 5,
            center: [-75.789, 41.874],
            //Style from Stack Overflow:
            style: 'mapbox://styles/mapbox/satellite-v9'
            //My style does not work:
            //style: 'mapbox://styles/nittyjee/ck0fasve30an21cpalmwct518'
        });

        map.on('load', function() {
            map.addSource("myImageSource", {
                "type": "image",
                "url": "https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif",
                
                "coordinates": [
                    [-80.425, 46.437],
                    [-71.516, 46.437],
                    [-71.516, 37.936],
                    [-80.425, 37.936]
                ]
            });

            map.addLayer({
                "id": "overlay",
                "source": "myImageSource",
                "type": "raster",
                "paint": {
                "raster-opacity": 0.85
                }
            });
        });
    </script>

</body>

</html>

Manish · Accepted Answer · 2019-09-24 14:40:25Z

3

You need to bump up mapbox-gl version. You're using a way older SDK.

Change your script/css definition to this:

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css' rel='stylesheet' />

answered Sep 24, 2019 at 14:40

Manish

5,2631 gold badge32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nittyjee Over a year ago

Manish. You. Are. WONDERFUL. Thank you so much. By the way - is there a way to have it link to the latest sources, instead of me looking it up and updating it every time?

Manish Over a year ago

Linking to latest isn't a good idea because newest version of the library may introduce breaking changes. You should instead watch for releases manually and upgrade the library version as and when required. That said, you can use these link to get the latest version of mapbox-gl: https://cdn.jsdelivr.net/npm/mapbox-gl/dist/mapbox-gl.min.js and https://cdn.jsdelivr.net/npm/mapbox-gl/dist/mapbox-gl.css

BDD · Accepted Answer · 2019-09-23 14:34:15Z

1

When you're in Studio looking at your style, you can click on Share in the top right corner.

Then from there, you should see a panel that will have a section called Your style url. If you copy that link and paste it into your code, your style should come through.

You can also click on the 3 dots by your style and copy the style id at the bottom of the panel that appears:

answered Sep 23, 2019 at 14:34

BDD

73517 silver badges34 bronze badges

6 Comments

nittyjee Over a year ago

Oh no! I meant to show this. Editing my original question. Here's my style ID: mapbox://styles/nittyjee/ck0fasve30an21cpalmwct518

nittyjee Over a year ago

I edited my code snippet to what can run, with my style that's not working commented out. See above.

BDD Over a year ago

@nittyjee based on this jsfiddle, it looks like you're getting errors with the actual style itself. Looks like a layer doesn't have the correct properties in it. image

nittyjee Over a year ago

I would have thought that a style made in MapBox online would be fine as is. Just to make sure, did you look at the link I gave in the revised question? That link to the map style works and it has my access token and style ID in it, so I would have thought it should work fine. What kind of properties would be incorrect (not necessarily with mine, perhaps just examples)?

BDD Over a year ago

@nittyjee Yes, that fiddle is pulling the new style URL you put in. Actually, I just realized that your libraries are super old, but when you bump up your mapbox gl version from 0.45.0 to 1.3.1, your style loads. updated fiddle

|

AndrewHarvey · Accepted Answer · 2019-09-23 13:58:49Z

0

That doesn't look like a style URL https://docs.mapbox.com/help/glossary/style-url/

You'd need to create a style in Mapbox Studio and grab the style ID.

answered Sep 23, 2019 at 13:58

AndrewHarvey

3,07313 silver badges22 bronze badges

2 Comments

nittyjee Over a year ago

Oh no! I meant to show this. Editing my original question. Here's my style ID: mapbox://styles/nittyjee/ck0fasve30an21cpalmwct518

nittyjee Over a year ago

I edited my code snippet to what can run, with my style that's not working commented out. See above.

Collectives™ on Stack Overflow

Adding my own style is not working in MapBox Javascript

3 Answers 3

2 Comments

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related