1

Hi I'm making an ionic app and can't get my mapbox component to work on my android emulator despite working in the browser. I tried to make a really simplified version of my mapbox component here:

import React, {useState} from 'react';
import ReactMapGL from 'react-map-gl';
import './studioMap.css';
import { IonPage, IonContent } from '@ionic/react';


export default function StudioMap() {

  let [viewport, setViewport] = useState({
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 8,
  });

  return (
      <IonPage>
      <IonContent>
      <ReactMapGL 
        mapStyle="mapbox://styles/pobblebonk/cksjvglar47ri17pe8idxehk6"
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
        {...viewport} 
        width="100%"
        height="100%"
        onViewportChange={(viewport) => setViewport(viewport)}
      >
      </ReactMapGL>
      </IonContent>
      </IonPage>
  )
}

It has a really basic css file:

body {
  padding:0;
  margin:0;
}

This is in my index.html file:


<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css" rel="stylesheet"/>

<meta
      name="viewport"
      content="viewport-fit=cover, width=device-width, initial-scale=1.0"
    />

All I get is a beige screen with the mapbox logo at the bottom left. Any idea why this doesn't work on the android emulator?

As a side note, when I don't have width='100%' height='100%' included the mapbox logo disappears and I'm just left with a beige screen. I felt like I was getting closer once I added that but I still have no map.

Thanks!

filifunk
  • 543
  • 1
  • 6
  • 18

1 Answers1

0
npm i --save-dev worker-loader

then adding

import mapboxgl from "mapbox-gl";

// eslint-disable-next-line import/no-webpack-loader-syntax 
(mapboxgl as any).workerClass = require("worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker").default;

worked for me

DomeQ
  • 9
  • 4