Tracking Issue: Migrating from Mapbox to MapLibre [Approved SIP-130]

[birkskyum]

This is tracking the implementation of the Approved SIP-130

• #28356

1. Step - Update legacy mapbox/deckgl plugins

The legacy Mapbox / DeckGL plugins use react-map-gl v6. In react-map-gl v7, this library has dual support for mapbox and maplibre, and updating will thus bring immediate improvements, and reduce the gap when transition to MapLibre:

• [x] Update supercluster to v8 - #30305
• [ ] Swap viewport-mercator-project for @math.gl/web-mercator - #30651
• [ ] Update react to v18
• [ ] Update react-map-gl to v7

Switching to the Plugin on the new Plugin:

• [ ] New MapLibre plugin

[StarkillerGDN]

Is it possible to have a configuration field in the UI to set a custom URL for a mapbox style ?

[birkskyum]

@StarkillerGDN , do you mean something like "mapbox://styles/mapbox/light-v9" url? If the mapbox license permits, I believe you could technically source the style from "https://api.mapbox.com/styles/v1/mapbox/light-v9". The mapbox:// protocol is to my understanding a simple url shorthand syntax for "https://api.mapbox.com", and this rewrite is not hardcoded into maplibre-gl.

[StarkillerGDN]

@birkskyum For example I have a Tileserver which serve mapbox styles. But to apply this new URI I must redeploy the superset instance with my hardcoded URI. Tell me if I'm wrong. It will be nice if we can provide a URI in a config file :)

[birkskyum]

Absolutely, you be be able to use your own tile server like you do already - that won't change. You can see here how some projects actually select maplibre specifically to obtain full control over the render stack. What tile server technology do you use?

[datasc24]

Hello @birkskyum ! I agree with @StarkillerGDN, currently the tile server URL is hardcoded in the source code, which can make it difficult to customize for specific use cases. Indeed, to use our own tile server, we are obliged (if i understand correctly) to rebuild the entire project whereas we would like to use the Docker image directly instead.

It would be great if this URL could be configured via the superset_config.py file or as an alternative directly when building a chart (like in metabase).

Thank you for your work !

[birkskyum]

@datasc24 , @StarkillerGDN , it seems like this is important to get right, and I still don't fully understand the situation unfortunately, but I'll make sure to reach out and double check when it's time to tackle this.

Right now, I'm taking some preparation steps focused around modernizing the legacy mapbox/deckgl plugins in backwards compatible ways (already landed some perf improvements like #30305 ), as I believe having things cleaned up will benefit existing users now, and also ease the eventual migration to MapLibre.

[rusackas]

Heya! Are you still planning to tackle more of this effort, or is there no longer a need to keep this particular issue open? We can still consider the SIP in-progress separately (those just get closed when they're voted through).

[saulfrr]

Hello

How is the work for the migration to MapLibre going? are there any news?

Thanks.

[rolies106]

For anyone that want to move to Carto or MapLibre can try this hack while waiting for the official release, I'm using 4.1.2 tag and modify this script.

go to superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/Shared_DeckGL.jsx and edit this section:

export const mapboxStyle = {
  name: 'mapbox_style',
  config: {
    type: 'SelectControl',
    label: t('Map Style'),
    clearable: false,
    renderTrigger: true,
    freeForm: true,
    // validators: [validateMapboxStylesUrl], // Comment out this and dont forget to remove it from the import part at the beginning of this file
    choices: [
      [
        'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
        'Carto Light',
      ], // Add this
      [
        'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
        'Carto Dark',
      ], // Add this
      ['https://demotiles.maplibre.org/style.json', 'MapLibre OSM'], // Add this
      ['mapbox://styles/mapbox/streets-v9', t('Streets')],
      ['mapbox://styles/mapbox/dark-v9', t('Dark')],
      ['mapbox://styles/mapbox/light-v9', t('Light')],
      ['mapbox://styles/mapbox/satellite-streets-v9', t('Satellite Streets')],
      ['mapbox://styles/mapbox/satellite-v9', t('Satellite')],
      ['mapbox://styles/mapbox/outdoors-v9', t('Outdoors')],
    ],
    default: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json', // Change default value
    description: t(
      'Base layer map style. See Mapbox documentation: %s',
      'https://docs.mapbox.com/help/glossary/style-url/',
    ),
  },
};

go to superset/config.py to allow the new style by edit the TALISMAN_CONFIG and TALISMAN_DEV_CONFIG:

TALISMAN_CONFIG = {
    "content_security_policy": {
        "base-uri": ["'self'"],
        "default-src": ["'self'"],
        "img-src": [
            "'self'",
            "blob:",
            "data:",
            "https://apachesuperset.gateway.scarf.sh",
            "https://static.scarf.sh/",
            # "https://avatars.slack-edge.com", # Uncomment when SLACK_ENABLE_AVATARS is True
        ],
        "worker-src": ["'self'", "blob:"],
        "connect-src": [
            "'self'",
            "https://api.mapbox.com",
            "https://events.mapbox.com",
            "https://basemaps.cartocdn.com", // Add this line
            "https://demotiles.maplibre.org", // Add this line
            "https://*.basemaps.cartocdn.com", // Add this line
        ],
        "object-src": "'none'",
        "style-src": [
            "'self'",
            "'unsafe-inline'",
        ],
        "script-src": ["'self'", "'strict-dynamic'"],
    },
    "content_security_policy_nonce_in": ["script-src"],
    "force_https": False,
    "session_cookie_secure": False,
}

Inside superset-frontend run:

• npm install
• npm run build

In the parent folder run build docker again:

• docker compose up -d --build

Edit the map style using Carto or MapLibre, and this is the preview when I'm using Carto Light Style

I hope this can help someone, since I've been working on this for three days.

[saulfrr]

Hi @rolies106 Thanks for your answer, I'll give it a try.

The main difference is that I'm not using the Docker version, I install things with pip

pip install --upgrade pip setuptools wheel
pip install apache-superset gunicorn gevent pymysql superset-pdf-report psycopg2-binary mysqlclient Pillow fdb prophet redis
pip install flask-cors

[rolies106]

Hi @rolies106 Thanks for your answer, I'll give it a try.

The main difference is that I'm not using the Docker version, I install things with pip

pip install --upgrade pip setuptools wheel pip install apache-superset gunicorn gevent pymysql superset-pdf-report psycopg2-binary mysqlclient Pillow fdb prophet redis pip install flask-cors

Well that is a bump, since you need to edit the source to customize it and its impossible to do when you use pip install.

[rusackas]

Looks like this hasn't ben touched in quite a while... any progress happening here? Or has this thread served its purpose?