Map charts have blank background although I provided MAPBOX_API_KEY (docker compose 4.0.2)

pesekon2 commented 2 weeks ago

Bug description

I provided my MAPBOX_API_KEY in docker/.env and ran docker compose using the 4.0.2 docker-compose-image-tag.yml. Yet, whenever I open superset GUI in the browser and open any of the example map charts (e.g., deck.Polygons), I can see the polygons but not the Mapbox background.

The token has been validated through https://api.mapbox.com/tokens/v2?access_token=pk.blabla with result {"code":"TokenValid","token":{"usage":"pk","user":"pesekon2","authorization":"ckmuxt81k007e2opf8n5gt1fh"}}

How to reproduce the bug

Provide MAPBOX_API_KEY
Run export TAG=4.0.2
Run docker compose -f docker-compose-image-tag.yml up
Get to the charts - open any of the example map (e.g., deck.Polygons) charts

Screenshots/recordings

Capture

Superset version

4.0.2

Python version

Not applicable

Node version

Not applicable

Browser

Firefox

Additional context

No response

Checklist

[X] I have searched Superset docs and Slack and didn't find a solution to my problem.
[X] I have searched the GitHub issue tracker and didn't find a similar bug report.
[X] I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

dosubot[bot] commented 2 weeks ago

Hey there, @pesekon2! I'm here to help you with any issues you're experiencing. I can assist with bug fixes, answer your questions, and guide you on becoming a contributor.

The blank background issue in map charts in Superset 4.0.2, despite providing the MAPBOX_API_KEY in docker/.env and validating the token, could be due to the mapStyle prop not being set correctly. The mapStyle prop is used to define the style of the map, and if it is not set or is set incorrectly, the map may not render properly.

In the transformProps function of the MapBox plugin, the mapStyle is derived from the formData:

const {
  clusteringRadius,
  globalOpacity,
  mapboxColor,
  mapboxStyle,
  pandasAggfunc,
  pointRadius,
  pointRadiusUnit,
  renderWhileDragging,
} = formData;

Ensure that the mapboxStyle in your form data is correctly set to a valid Mapbox style URL. For example:

const mapboxStyle = 'mapbox://styles/mapbox/streets-v11';

If the mapboxStyle is not provided or is incorrect, the map will not render, resulting in a blank background. Additionally, make sure that other required properties such as mapboxApiKey are correctly passed and validated in the transformProps function.

Furthermore, ensure that the mapboxStyle is validated using the validateMapboxStylesUrl function, as shown in the shared control configurations for the DeckGL viz plugin:

export const mapboxStyle = {
  name: 'mapbox_style',
  config: {
    type: 'SelectControl',
    label: t('Map Style'),
    clearable: false,
    renderTrigger: true,
    freeForm: true,
    validators: [validateMapboxStylesUrl],
    choices: [
      ['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: 'mapbox://styles/mapbox/light-v9',
    description: t(
      'Base layer map style. See Mapbox documentation: %s',
      'https://docs.mapbox.com/help/glossary/style-url/',
    ),
  },
};

By ensuring the mapboxStyle is correctly set and validated, you can resolve the blank background issue in your map charts ^[1]^[2]^[3].

To continue talking to Dosu, mention @dosu.

pesekon2 commented 2 weeks ago

@dosu: I don't want to offend you but maybe talking to a real person (wow, what a strange term we've reached in our society) would be better.

But to clarify what I said (maybe you will be able to solve the issue then): I am using the official demo charts, I did not touch any code at all besides setting MAPBOX_API_KEY. So I would guess that the code issues you are mentioning should not be there.

dosubot[bot] commented 2 weeks ago

This issue seems to need your specialized knowledge, @rusackas, could you please provide your guidance?

To continue talking to Dosu, mention @dosu.

pesekon2 commented 2 weeks ago

I have tried it on another machine that is not behind proxy and there it seems to work. Any idea how to make it work on a machine behind proxy? I know that with docker build you can do e.g. --build-arg HTTP_PROXY=http://xxx:8888 and with docker run you can set also things like NO_PROXY. But with docker compose in the case of superset? And why do I see the data (polygons, tables) and not the Mapbox background?

dosubot[bot] commented 2 weeks ago

To configure docker compose for Superset to work behind a proxy, you can set the HTTP_PROXY, HTTPS_PROXY, and NO_PROXY environment variables in the docker-compose.yml file. This is similar to using --build-arg HTTP_PROXY with docker build and setting NO_PROXY with docker run.

Here is how you can modify the docker-compose.yml file to include these environment variables:

services:
  nginx:
    image: nginx:latest
    container_name: superset_nginx
    restart: unless-stopped
    ports:
      - "80:80"
    extra_hosts:
      - "host.docker.internal:host-gateway"
    volumes:
      - ./docker/nginx/nginx.conf:/etc/nginx/nginx.conf:ro
    environment:
      - HTTP_PROXY=http://your-proxy:port
      - HTTPS_PROXY=http://your-proxy:port
      - NO_PROXY=localhost,127.0.0.1

  redis:
    image: redis:7
    container_name: superset_cache
    restart: unless-stopped
    ports:
      - "127.0.0.1:6379:6379"
    volumes:
      - redis:/data
    environment:
      - HTTP_PROXY=http://your-proxy:port
      - HTTPS_PROXY=http://your-proxy:port
      - NO_PROXY=localhost,127.0.0.1

  db:
    env_file:
      - path: docker/.env # default
        required: true
      - path: docker/.env-local # optional override
        required: false
    image: postgres:15
    container_name: superset_db
    restart: unless-stopped
    ports:
      - "127.0.0.1:5432:5432"
    volumes:
      - db_home:/var/lib/postgresql/data
      - ./docker/docker-entrypoint-initdb.d:/docker-entrypoint-initdb.d
    environment:
      - HTTP_PROXY=http://your-proxy:port
      - HTTPS_PROXY=http://your-proxy:port
      - NO_PROXY=localhost,127.0.0.1

  superset:
    env_file:
      - path: docker/.env # default
        required: true
      - path: docker/.env-local # optional override
        required: false
    build:
      <<: *common-build
    container_name: superset_app
    command: ["/app/docker/docker-bootstrap.sh", "app"]
    restart: unless-stopped
    ports:
      - 8088:8088
    extra_hosts:
      - "host.docker.internal:host-gateway"
    user: *superset-user
    depends_on: *superset-depends-on
    volumes: *superset-volumes
    environment:
      - HTTP_PROXY=http://your-proxy:port
      - HTTPS_PROXY=http://your-proxy:port
      - NO_PROXY=localhost,127.0.0.1
      - CYPRESS_CONFIG="${CYPRESS_CONFIG:-}"

  # Repeat the environment settings for other services as needed

Replace http://your-proxy:port with the actual proxy URL and port you are using. This configuration will ensure that all the services in your docker-compose.yml file are aware of the proxy settings ^[1].

To continue talking to Dosu, mention @dosu.

pesekon2 commented 2 weeks ago

That didn't help. I will ask the admin if they can whitelist mapbox, maybe the issue could be connected to that.

mnewnham commented 1 week ago

In superset/Dockerfile try adding your API information to the end of the ENV setting. This fixed the same problem for me

ENV LANG=C.UTF-8 \
    LC_ALL=C.UTF-8 \
    SUPERSET_ENV=production \
    FLASK_APP="superset.app:create_app()" \
    PYTHONPATH="/app/pythonpath" \
    SUPERSET_HOME="/app/superset_home" \
    SUPERSET_PORT=8088\
    MAPBOX_API_KEY="your_api_key"

apache / superset