Using Maptiler for style of the map crash the app after warning

[gustaflindqvist]

Since I can't get map and Street style to work in my project, so now I use Maptiler style instead. I had the same issue as #1840. Maptiler style has support for Mapbox, so this workaround works until I encounter this warning message in the iOS Simulator and then the app will crash every time the view is loaded.

Mapbox warning [event]:ParseStyle [code]:-1 [message]:source must have tiles {"filePath": "virtual bool mbgl::MGLCoreLoggingObserver::onRecord(mbgl::EventSeverity, mbgl::Event, int64_t, const std::string &)", "level": "warning", "line": 27, "message": "[event]:ParseStyle [code]:-1 [message]:source must have tiles"}

I have cleared the cache deintegrate pods, and install pods again etc.

I have added hasFinishedLoadingStyle to see if that fix the problem and then apply the Camera and MapView:

 <MapboxGL.MapView
            ref={(c) => (this._map = c)}
            onLongPress={() => SheetManager.show(`map-${id}`)}
            style={style.maps}
            styleURL={`https://api.maptiler.com/maps/streets/style.json?key=${MAPTILER_TOKEN}`}
            logoEnabled={false}
            compassEnabled={false}
            pitchEnabled={false}
            onDidFinishLoadingMap={() => this.onDidFinishLoadingStyle()}>
            {this.state.hasFinishedLoadingStyle ? (
              <>
                <MapboxGL.Camera
                  animationDuration={1000}
                  animationMode={'linearTo'}
                  zoomLevel={14}
                  centerCoordinate={currentLocation}
                />
                <MapboxGL.MarkerView id={'marker'} coordinate={currentLocation}>
                  <View>
                    <View style={style.markerContainer}>
                      <View style={style.textContainer}>
                        <Text style={style.text}>{'Samling'}</Text>
                      </View>
                      <MapboxGL.PointAnnotation
                        id={'makerPoint'}
                        coordinate={currentLocation}
                      />
                      <Image
                        source={MapBikeWhiteUnselect}
                        style={{
                          width: 42,
                          height: 52,
                          backgroundColor: 'transparent',
                          resizeMode: 'cover',
                        }}
                      />
                    </View>
                  </View>
                </MapboxGL.MarkerView>
              </>
            ) : null}
          </MapboxGL.MapView>

Is there a way to use the setLogCallbackto ignore the messages to avoid the app to crash?

[mfazekas]

@gustaflindqvist this is a warning not a crash, and yes you can use setLogCallback to mute this warning. Just return true so rnmapbox will not process the log any further. See https://github.com/rnmapbox/maps/blob/main/docs/Logger.md#setlogcallbacklogcallback

[jjrise]

@gustaflindqvist I couldn't tell from your original question, but did you solve the issue with the View crashing? I have styleURL working on first render but crashes anytime View is re-rendered.

[gustaflindqvist]

@gustaflindqvist I couldn't tell from your original question, but did you solve the issue with the View crashing? I have styleURL working on first render but crashes anytime View is re-rendered.

Yeah, I removed the onDidFinishLoadingMap event and the boolean hasFinishedLoadingStyle I had as check. Got a invisible exception crashing the app from the lower levels, I guess.

[jjrise]

interesting... I'm not using onDidFinishLoadingMap nor hasFinishedLoadingStyle, but still getting a crash whenever MapView re-renders. Do you randomly have any insight here?

    <>
      <View style={styles.page}>
        <View style={styles.container}>
          <SettingsToggle />
          <MyLocation />
          <MapView
            style={styles.map}
            scaleBarEnabled={false}
            attributionPosition={{
              bottom: 50,
              left: 5,
            }}
            compassViewPosition={0}
            logoEnabled={false}
            styleURL={activeBasemap}
          >
            <UserLocation
              visible={true}
              showsUserHeadingIndicator={true}
              onUpdate={(location) => drawRoute(location)}
            />
            {terrainStatus && (
              <RasterDemSource
                id="mapbox-dem-2"
                url="mapbox://mapbox.mapbox-terrain-dem-v1"
                tileSize={514}
                maxZoomLevel={22}
              >
                <Terrain />
              </RasterDemSource>
            )}

            <Camera
              centerCoordinate={[
                currentLocation.longitude,
                currentLocation.latitude,
              ]}
              zoomLevel={14}
              followUserLocation={followStatus}
              followPitch={cameraPitchStatus ? 45 : 0}
              followZoomLevel={17}
              followUserMode={trackUpStatus ? "course" : "normal"}
              animationMode={"flyTo"}
            />
            <RouteLines />
          </MapView>
        </View>
      </View>
      <RecordSheet />
    </>

[jjrise]

to future readers: this issue was caused from using LineGradient in my LineLayer component.

[gustaflindqvist]

to future readers: this issue was caused from using LineGradient in my LineLayer component.

@jjrise Might also be good to check is app has permission before using <UserLocation />. Found this solution: #233 (comment)