Map is broken

[danwchan]

The map doesn't display anymore. It seems like the root of this issue is that the access token we're using for MapBox is no longer valid as

GET | https://api.mapbox.com/styles/v1/sabgaby/cj5wcdqw27a3l2srv56i6myxb?access_token=pk.eyJ1Ijoic2FiZ2FieSIsImEiOiJjamU2MzJocDAwMHg4MndtbnVkaHpvYmRsIn0.zup_BSBKGLimL_GnNs0WCw

returns a 401 error a JSON message: "Not Authorized - Invalid Token"

Is this your token @sabgaby and how could I got about trying to replace it with something functional. Thanks!

[100ideas]

I am working on fixes to the mapbox widget in the 'mapbox' branch; you can go to netlify and look at a preview build (if you are part of the netlify team) which are triggered automatically by pushing to the branch.

Currently I am checking to see if our extremely out of date 'mapbox-gl.js' script is the problem:

todo: see if updating the mapbox-gl script and link tags in the header fixes the problem - should look something like this

<link href="https://api.mapbox.com/mapbox-gl-js/v3.14.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.14.0/mapbox-gl.js"></script>

[100ideas]

You may be able to see the latest preview of the 'mapbox branch': https://mapbox--diybiosphere.netlify.app/.

Updating the 'mapbox-gl.js' and css scripts in 'head.html' did restore some functionality to the map, but geojson points are not showing up yet.

from the mapbox-gl docs:

Add a layer at runtime

To add a new layer to the map at runtime, start by adding a source using the Style’s addSource method. It is important that you add the source for a new layer after the map has loaded but before attempting to add the layer itself because the source is a required parameter for most layer types.

Then, you’ll use the addLayer method to add the layer to the style. When adding the style layer, you will specify:

• A unique id that you assign to the new layer
• The layer type (for example fill, line, or symbol)
• What data to use by referencing a source
• The appearance of the data by setting various properties (for example color, opacity, and language)

The sample code below illustrates how to add a GeoJSON source and then add and style a line layer that uses the data in that source.

map.on('style.load', () => {
  map.addSource('route', {
    type: 'geojson',
    data: {
      /* ... GeoJSON data ... */
    }
  });
  map.addLayer({
    id: 'route',
    type: 'line',
    source: 'route',
    paint: {
      'line-color': '#888',
      'line-width': 8
    }
  });
});

currently we are not using 'map.AddSource()...' so next step is to try it in sphere/assets/js/mapbox-gl.js

[100ideas]

Was able to recreate part of the original functionality in the mapbox style editor - preview link:

a lot of the following json is probably provided by the mapbox standard map style, which we want to use in mapbox-gl.js like so, but the following json block from the mapbox gui style editor shows some of the parameters re styles and geojson.

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/standard',  //<--------- like this
    config: {
        basemap: {
            theme: "monochrome"
        }
    },
    attributionControl: false,
    center: [10, 25],
    zoom: 1.2,
});

{
    "version": 8,
    "name": "diybiosphere",
    "metadata": {
        "mapbox:autocomposite": true,
        "mapbox:type": "template",
        "mapbox:sdk-support": {
            "js": "3.14.0",
            "android": "11.14.0",
            "ios": "11.14.0"
        },
        "mapbox:groups": {},
        "mapbox:thumb": "data:image/png;base64...TODO replace inline svg with link",
 "mapbox:uiParadigm": "layers",
        "mapbox:uiExpandedImports": ["basemap"]
    },
    "imports": [
        {
            "id": "basemap",
            "url": "mapbox://styles/mapbox/standard",
            "config": {
                "theme": "monochrome",
                "lightPreset": "day",
                "showPlaceLabels": true,
                "showAdminBoundaries": true,
                "showTransitLabels": false,
                "showPedestrianRoads": false,
                "showPointOfInterestLabels": true
            }
        }
    ],
    "sources": {
        "composite": {"url": "mapbox://100ideas.6lkoldvd", "type": "vector"}
    },
    "sprite": "mapbox://sprites/100ideas/cmexcv6t6000o01r47o3ahqqc/draft",
    "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
    "projection": {"name": "equirectangular"},
    "layers": [
        {
            "id": "labs",
            "type": "symbol",
            "source": "composite",
            "source-layer": "labs-2u2suy",
            "layout": {"icon-image": "labs_blue_marker"},
            "paint": {}
        }
    ],
    "created": "2025-08-29T21:39:17.178Z",
    "modified": "2025-08-29T21:51:31.291Z",
    "id": "cmexcv6t6000o01r47o3ahqqc",
    "owner": "100ideas",
    "visibility": "private",
    "protected": false,
    "draft": true
}

[100ideas]

Thanks ChatGPT5!

---

You’re right—the upgrade to GL JS v3 means you need to (1) add each GeoJSON as a source first, and (2) then add layers that reference those sources. Also, your old sprite-based icon names like '{collection}_{color}_{marker}' won’t resolve against the Mapbox Standard basemap—you either need to add those images programmatically with map.addImage(...) (one per icon name you’ll reference) or switch to a circle layer first to confirm the data is rendering. Docs show the v3 pattern uses style.load and addSource → addLayer. ([Mapbox]1)

Below is a drop-in rewrite for your /assets/js/mapbox-gl.js that:

1. uses style.load + addSource,
2. verifies points with a circle layer first, and
3. (optionally) shows how to add an image icon and a symbol layer that references it.

If you later want many different icons driven by feature properties, see the “Data-driven icons” note after the code.

---

Minimal fix (make points show up)

mapboxgl.accessToken = 'YOUR_TOKEN';

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/standard',
  // Standard style supports runtime config (e.g. monochrome theme):
  config: { basemap: { theme: 'monochrome' } },
  attributionControl: false,
  center: [10, 25],
  zoom: 1.2
});

// Your external GeoJSON files
const entries = "/assets/data/entries.geojson";
const projects = "/assets/data/projects.geojson";
// ...add the rest as needed

map.on('style.load', () => {
  // --- 1) Add sources ---
  map.addSource('entries', { type: 'geojson', data: entries });
  map.addSource('projects', { type: 'geojson', data: projects });
  // addSource for labs, groups, networks, incubators, startups, events...

  // --- 2) Add a simple circle layer so you can see data immediately ---
  map.addLayer({
    id: 'entries-circles',
    type: 'circle',
    source: 'entries',
    paint: {
      'circle-radius': 4,
      'circle-color': '#007aff',
      'circle-stroke-width': 1,
      'circle-stroke-color': '#ffffff'
    }
  });

  // (Optional) If you still want a symbol layer using a custom image:
  map.loadImage('/assets/img/sphere-logo-circle.png', (err, image) => {
    if (err) { console.error(err); return; }
    if (!map.hasImage('logo')) map.addImage('logo', image);

    // Symbol layer pointing at the same 'entries' source
    map.addLayer({
      id: 'entries-symbols',
      type: 'symbol',
      source: 'entries',
      layout: {
        'icon-image': 'logo',
        'icon-size': 1,
        'icon-allow-overlap': true,
        'icon-anchor': 'bottom'
      }
    },
    // place above labels or below, if you want precise ordering:
    // 'poi-label'
    );
  });

  // Click/hover interactions should reference an *existing* layer id.
  // If you keep the circle layer for hit-testing:
  map.on('click', 'entries-circles', (e) => handleEntryClick(e));
  map.on('mouseenter', 'entries-circles', () => map.getCanvas().style.cursor = 'pointer');
  map.on('mouseleave', 'entries-circles', () => map.getCanvas().style.cursor = '');

  function handleEntryClick(e) {
    const f = e.features[0];
    const coordinates = f.geometry.coordinates.slice();
    const { title, url, city, country, status, collection } = f.properties || {};
    const location = (city && city !== 'null') ? `${city}, ${country}` : country || '';
    const collectionType = collection ? collection.slice(0, -1) : '';

    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
      coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    }

    new mapboxgl.Popup()
      .setLngLat(coordinates)
      .setHTML(
        `<div style="font-family:source code pro;">
           <div><b><a href="${url}">${title ?? ''}</a></b></div>
           <div>${location}</div>
           <p class="xo text fairly smaller grey color">
             ${collectionType ? `${collectionType} with <em>${status ?? ''}</em> status` : ''}
           </p>
         </div>`
      )
      .addTo(map);
  }
});

// Controls
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.AttributionControl({ compact: true }));

---

Why your old symbol layer didn’t render

• No addSource: In v3 docs, you add a GeoJSON source first, then add a layer that references it. Your previous addLayer({ source: { type:'geojson', data }}) pattern from v0.44 is no longer valid. ([Mapbox]1)
• Icon name mismatch: icon-image: '{collection}_{color}_{marker}' assumes those sprite names exist in the current style’s sprite sheet. You’re now using Mapbox Standard (mapbox://styles/mapbox/standard), which ships with its own sprite; your custom icon names won’t exist there. Either add images at runtime (as shown) or host a custom style that imports Standard and includes your sprite. ([Mapbox]2)

Data-driven icons (if you need many different icons)

If each feature has a property like "icon": "labs_red_circle", you can use:

// First, addImage for every icon name you plan to use:
// map.addImage('labs_red_circle', imageBitmapOrImageData);
// map.addImage('projects_blue_pin', ...);  // etc.

map.addLayer({
  id: 'entries-symbols',
  type: 'symbol',
  source: 'entries',
  layout: {
    'icon-image': ['get', 'icon'], // resolves to a name you've added via addImage
    'icon-allow-overlap': true
  }
});

The key is: every icon name your data references must be registered with map.addImage(...) beforehand. Alternatively, build a custom style in Mapbox Studio that imports “Standard” and attach your own sprite there, then keep using icon-image with those sprite names. ([Mapbox]3)

A few other checks

• Network 200s: Confirm /assets/data/*.geojson return 200 OK (no 404/ CORS) in the browser Network tab. The external-file example shows this is supported. ([Mapbox]3)
• Event name: style.load is recommended (fires whenever the style is loaded/refreshed). load may still fire, but style.load is the one shown in current guides. ([Mapbox]1)
• Layer ordering: If symbols are hidden under labels or 3D layers, pass a second argument to addLayer to place it before an existing layer (e.g., before 'poi-label'). ([Mapbox]4)
• Standard style config: your config: { basemap: { theme: 'monochrome' } } usage matches the Standard style docs. You can also switch themes or light presets at runtime. ([Mapbox]2)

If you share the shape of your old icon scheme (list of names) I can sketch a quick preloader that calls addImage for each, or help you migrate to a Studio style that imports Standard + your sprite for a closer match to your v0.44 setup.

[100ideas]

it's a start - @danwchan want to take a crack at it? feel free, I'll be busy this weekend.