Ionic react not showing Mapbox map on Android emulator

Ionic Framework
1

Hello,

I was trying to create a simple map application using Ionic React and Mapbox. Everything works as expected in Chrome and Chrome developer tools if I switch it to mobile and choose Pixel 2. However when I create the build and try to run it with Android emulator the map just doesn’t show:

image
image.png407×846 54.5 KB

Any idea why?

Ionic info:

Ionic:

   Ionic CLI       : 5.4.1 (C:\Users\JP\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework : @ionic/react 4.8.0-rc.1

Capacitor:

   Capacitor CLI   : 1.3.0
   @capacitor/core : 1.3.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.16.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10
2

Post the .ts code of the mapbox implementation on your page. In the console, do you see any error messages?

3

Thanks for replying!

This is the only warning that I got in the console:

index.js:1437 Warning: Received `true` for a non-boolean attribute `text-center`.

If you want to write it to the DOM, pass a string instead: text-center="true" or text-center={value.toString()}.
    in div (at LoginComponent.tsx:54)
    in ion-col (created by IonCol)
    in IonCol (created by ForwardRef(IonCol))
    in ForwardRef(IonCol) (at LoginComponent.tsx:53)
    in ion-row (created by IonRow)
    in IonRow (created by ForwardRef(IonRow))
    in ForwardRef(IonRow) (at LoginComponent.tsx:52)
    in ion-grid (created by IonGrid)
    in IonGrid (created by ForwardRef(IonGrid))
    in ForwardRef(IonGrid) (at LoginComponent.tsx:51)
    in form (at LoginComponent.tsx:50)
    in ion-content (created by IonContent)
    in IonContent (created by ForwardRef(IonContent))
    in ForwardRef(IonContent) (at LoginComponent.tsx:49)
    in Login (created by Context.Consumer)
    in Route (at App.tsx:34)
    in ion-router-outlet (created by IonRouterOutlet)
    in IonRouterOutlet (created by ForwardRef(IonRouterOutlet))
    in ForwardRef(IonRouterOutlet) (at App.tsx:32)
    in div (created by IonPageInternal)
    in IonPageInternal (created by ForwardRef(IonPage))
    in ForwardRef(IonPage) (at App.tsx:31)
    in NavManager (created by RouteManager)
    in RouteManager (created by Context.Consumer)
    in RouteManager (created by IonReactRouter)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by IonReactRouter)
    in IonReactRouter (at App.tsx:30)
    in ion-app (created by IonApp)
    in IonApp (created by ForwardRef(IonApp))
    in ForwardRef(IonApp) (at App.tsx:29)
    in App (at src/index.tsx:5)

And this is the tsx file of the component:

import React,{ useState } from 'react'
import MapGL, {GeolocateControl } from 'react-map-gl'
import 'mapbox-gl/dist/mapbox-gl.css'

const TOKEN= ''


const MapViewer = () => {

  const [viewport, setViewPort ] = useState({
    width: "100%",
    height: 900,
    latitude: 9.957537,
    longitude: -84.196117,
    zoom: 6
  })

  const _onViewportChange = viewport => setViewPort({...viewport, transitionDuration: 1000 })
  
  return (
    <div style={{ margin: '0 auto'}}>
      <h1 style={{textAlign: 'center', fontSize: '25px', fontWeight: 'bolder' }}>GeoLocator: Click To Find Your Location or click <a href="/search">here</a> to search for a location</h1>
      <MapGL
        {...viewport}
        mapboxApiAccessToken={TOKEN}
        mapStyle="mapbox://styles/mapbox/streets-v11"
        onViewportChange={_onViewportChange}
      >
        <GeolocateControl
          style={{
            float: 'left',
            margin: '50px',
            padding: '10px'
          }}
          positionOptions={{enableHighAccuracy: true}}
          trackUserLocation={true}
        />
      </MapGL>
    </div>
  )
}

export default MapViewer;

Thanks in advance!

4

did you ever fix this issue? I’m having the same problem

1 Like