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>

score 2 · Accepted Answer · answered Sep 24 '19 at 14:40

2

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 '19 at 14:40

Manish

4,903
1
29
39

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? – nittyjee Sep 24 '19 at 17:20
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` – Manish Sep 25 '19 at 18:02

score 0 · Answer 2 · answered Sep 23 '19 at 13:58

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 '19 at 13:58

AndrewHarvey

2,867
11
21

Oh no! I meant to show this. Editing my original question. Here's my style ID: mapbox://styles/nittyjee/ck0fasve30an21cpalmwct518 – nittyjee Sep 23 '19 at 19:24
I edited my code snippet to what can run, with my style that's not working commented out. See above. – nittyjee Sep 23 '19 at 20:00

score 0 · Answer 3 · answered Sep 23 '19 at 14:34

0

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 '19 at 14:34

BDD

665
17
31

Oh no! I meant to show this. Editing my original question. Here's my style ID: mapbox://styles/nittyjee/ck0fasve30an21cpalmwct518 – nittyjee Sep 23 '19 at 19:25
I edited my code snippet to what can run, with my style that's not working commented out. See above. – nittyjee Sep 23 '19 at 20:00
@nittyjee based on this [jsfiddle](https://jsfiddle.net/2qv1jxLp/), 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](https://i.stack.imgur.com/Sfcpw.png) – BDD Sep 24 '19 at 13:34
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)? – nittyjee Sep 24 '19 at 14:30
@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](https://jsfiddle.net/bddavidson/m6u2a1ws/) – BDD Sep 24 '19 at 16:52
BDD - Thank you! You're updated fiddle didn't work by the way, you didn't change the versions haha. Manish wrote the corrected lines in his answer. 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? – nittyjee Sep 24 '19 at 17:23

Adding my own style is not working in MapBox Javascript

3 Answers3