Markers / shapeSource not showing when offline.

[386sx]

Describe the bug
Markers not showing while viewing the map offline

To Reproduce

Run this component, one time connected with featureCollection commented out (so the shapesource / markers won't be loaded and cached, but the mapstyle is loaded), then uncomment featureCollection and go offline. Relaunch the app, and the shapeSource won't be rendered. If you now connect, the shapesource will appear and render the markers.

import React, {Component} from 'react';
import {View, Platform} from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';
import {mapScreenStyles as styles} from '../styles';

import pinpaid from '../assets/pinpaid.png';
import pinpoiblue from '../assets/pinpoiblue.png';
import pinpoired from '../assets/pinpoired.png';
import pinpoigrey from '../assets/pinpoigrey.png';

const IS_ANDROID = Platform.OS === 'android';

class MapScreen extends Component {
 render() {
   const featureCollection = {
     type: 'FeatureCollection',
     features: [
       {
         type: 'Feature',
         id: 59242,
         properties: {icon: 'free', place_id: 59242, text: 'P'},
         geometry: {type: 'Point', coordinates: [5.301958, 60.38595]},
       },
       {
         type: 'Feature',
         id: 59405,
         properties: {icon: 'blue', place_id: 59405, text: 'P'},
         geometry: {type: 'Point', coordinates: [5.331669, 60.38566]},
       },
       {
         type: 'Feature',
         id: 8651,
         properties: {icon: 'paid', place_id: 8651, text: 'S'},
         geometry: {type: 'Point', coordinates: [5.358708, 60.35445]},
       },
       {
         type: 'Feature',
         id: 27276,
         properties: {icon: 'paid', place_id: 27276, text: 'S'},
         geometry: {type: 'Point', coordinates: [5.361255, 60.35024]},
       },
     ],
   };

   return (
     <View style={styles.container}>
       <MapboxGL.MapView
         ref={c => (this._map = c)}
         showUserLocation={true}
         style={styles.matchParent}
         regionDidChangeDebounceTime={10}>
         <React.Fragment>
           <MapboxGL.Camera
             animationMode="moveTo"
             animationDuration={1000}
             centerCoordinate={[5.361255, 60.35024]}
             zoomLevel={13}
           />
           <MapboxGL.UserLocation />
           <MapboxGL.Images
             images={{
               free: require('../assets/pinfree.png'),
               paid: require('../assets/pinpaid.png'),
               red: pinpoired,
               grey: pinpoigrey,
               blue: pinpoiblue,
               userPoi_blue: pinpaid,
               nativeAssetImages: [
                 'pinfree',
                 'pinpaid',
                 'pinpoired',
                 'pinpoigrey',
                 'pinpoiblue',
               ],
             }}
           />
           <MapboxGL.ShapeSource
             id="symbolLayerSource"
             shape={featureCollection}
             cluster
             clusterRadius={30}>
             <MapboxGL.SymbolLayer
               minZoomLevel={3}
               id="pointCount"
               style={layerStyles.clusterCount}
             />

             <MapboxGL.CircleLayer
               id="clusteredPoints"
               minZoomLevel={3}
               belowLayerID="pointCount"
               filter={['has', 'point_count']}
               style={layerStyles.clusteredPoints}
             />

             <MapboxGL.SymbolLayer
               sourceLayerID="symbolLayerSource"
               id="symbolLocationSymbols"
               minZoomLevel={3}
               filter={['!has', 'point_count']}
               style={mapStyles.parameterIcon}
             />
           </MapboxGL.ShapeSource>
         </React.Fragment>
       </MapboxGL.MapView>
     </View>
   );
 }
}

const mapStyles = {
 parameterIcon: {
   iconImage: ['get', 'icon'],
   iconSize: IS_ANDROID ? 0.3 : 0.06,
   iconAllowOverlap: true,
   textOffset: [0, -0.4],
   textField: '{text}',
   textSize: 14,
   textPitchAlignment: 'map',
   backgroundColor: 'red',
 },
};

const layerStyles = {
 singlePoint: {
   circleColor: 'green',
   circleOpacity: 0.84,
   circleStrokeWidth: 2,
   circleStrokeColor: 'white',
   circleRadius: 5,
   circlePitchAlignment: 'map',
 },

 clusteredPoints: {
   circlePitchAlignment: 'map',

   circleColor: [
     'step',
     ['get', 'point_count'],
     '#51bbd6',
     10,
     '#f1f075',
     20,
     '#f28cb1',
   ],

   circleRadius: ['step', ['get', 'point_count'], 20, 10, 30, 50, 40],

   circleOpacity: 0.8,
   circleStrokeWidth: 3,
   circleStrokeColor: 'white',
 },

 clusterCount: {
   textField: '{point_count}',
   textSize: 16,
   textPitchAlignment: 'map',
   lineWidth: 2,
 },
};

export default MapScreen;

It doesn't seem to be a linking problem, any other image asset is showing in the app and the markers don't show the text either, so somehow the shapeSource need net connection to get rendered. Although the images are locally imported / required it tries to pull them apparently over http (see screenshot).

Expected behavior
Markers should be visible online and offline.

Screenshots
If applicable, add screenshots to help explain your problem.

Versions (please complete the following information):

• Platform: Android / iOS
  

• Device: Pixel 3XL (and any other), iPhone 11x

• Emulator/ Simulator: no

• OS: Android 7 - 10 / iOS 13

• react-native-mapbox-gl Version 7.2.0 / 8.0 rc

• React Native Version 0.60.5

Additional context
As soon as I switch on the connection the pins show up without any action.
I set up a fresh react-native application, the behaviour is the same. The shapeSource is not being rendered when I'm not connected.

[mfazekas]

@386sx thank for the report. I think this is an upstream issue. Mapbox has a default styleURL even if you don't specify it. I think if the url is not reachable then the map renders nothing at all, you should get a onDidFailLoadingMap error.

https://docs.mapbox.com/android/maps/overview/styling-map/#style-object

You can create offlinePacks to work around this.

I'm closing this as this is the documented behavior of the libraries we use, not much we can do about it.

[386sx]

I specify a mapstyle url, I just didnt post it here since it is my private server. The problem occurs on any map style.
And of course I work on offlinePacks and the map is properly rendered. Just not the markers.

[386sx]

I would really appreciate if you reopened the issue and looked properly at it. What you are describing has nothing to do with the issue reported here.

[mfazekas]

@386sx sorry i might have misreaded the original issue.

It seems that you're in dev mode and you cannot access the RN Bundler that serves the assets in dev mode. See the pinpaid.png warning screen you posted above.

[386sx]

@386sx sorry i might have misreaded the original issue.

It seems that you're in dev mode and you cannot access the RN Bundler that serves the assets in dev mode. See the pinpaid.png warning screen you posted above.

No, this also happens on the release build from the store. This is just a clue that iOS is giving here, on Android there is no error or warning whatsoever. (That is how I learned about it. Users reported it)

[mfazekas]

@386sx so there are 2 known issues:

1. If you're in dev mode, and cut connection to asset server to icons cannot be rendered as they are sourced from the asset server.
2. If you don't use offlinePacks and you try to render a map with styleURL that is not reachable the map will not load, and you'll get an onDidFailLoadingMap and nothing will render.

So in your case the map is rendered but symbols are not shown?! So not (2.), but running in prod mode so not (1.)?!

[mfazekas]

I'm reopened the issue but we need reproduction steps, that's not demonstrating either of the 2 known issue mentioned above.

If you want to reproduce the issue in dev mode, probably the best way to run in emulator and disable wifi on the machine, so the connection to asset bundler is still alive, but no connection to mapbox servers.

[386sx]

@386sx so there are 2 known issues:

1. If you're in dev mode, and cut connection to asset server to icons cannot be rendered as they are sourced from the asset server.

2. If you don't use offlinePacks and you try to render a map with styleURL that is not reachable the map will not load, and you'll get an onDidFailLoadingMap and nothing will render.

So in your case the map is rendered but symbols are not shown?! So not (2.), but running in prod mode so not (1.)?!

Yes, I am aware of both those issues, but this is something else. I am used to sometimes not seeing markers because of lacking connection to the asset server, and of course without a mapstyle or offline pack you wouldn't see the map at all. And, if it was the first issue, I would still see the text rendered in the markers, without the png. In my case, nothing is appearing.

Would the problem be expected behaviour when used on a cached map view? So if I did not load a offline pack and used the map view that was cached from just viewing it?
I don't think so, so it is easy to reproduce.

• Set up an AwesomeProject (initial react native project)
• replace App.js with:

 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';
import pinpaid from './assets/pinpaid.png';
import pinpoiblue from './assets/pinpoiblue.png';
import pinpoired from './assets/pinpoired.png';
import pinpoigrey from './assets/pinpoigrey.png';

const IS_ANDROID = Platform.OS === 'android';
import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App: () => React$Node = () => {
  MapboxGL.setAccessToken(
    ACCESSTOKEN,
  );
  const featureCollection = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        id: 59242,
        properties: {icon: 'free', place_id: 59242, text: 'P'},
        geometry: {type: 'Point', coordinates: [5.301958, 60.38595]},
      },
      {
        type: 'Feature',
        id: 59405,
        properties: {icon: 'blue', place_id: 59405, text: 'P'},
        geometry: {type: 'Point', coordinates: [5.331669, 60.38566]},
      },
      {
        type: 'Feature',
        id: 8651,
        properties: {icon: 'paid', place_id: 8651, text: 'S'},
        geometry: {type: 'Point', coordinates: [5.358708, 60.35445]},
      },
      {
        type: 'Feature',
        id: 27276,
        properties: {icon: 'paid', place_id: 27276, text: 'S'},
        geometry: {type: 'Point', coordinates: [5.361255, 60.35024]},
      },
    ],
  };
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <View style={{flex: 1}}>
        <MapboxGL.MapView
          showUserLocation={true}
           style={{flex: 1}}
          regionDidChangeDebounceTime={10}>
          <React.Fragment>
            <MapboxGL.Camera
              animationMode="moveTo"
              animationDuration={1000}
              centerCoordinate={[5.361255, 60.35024]}
              zoomLevel={13}
            />
            <MapboxGL.Images
              images={{
                free: require('./assets/pinfree.png'),
                paid: require('./assets/pinpaid.png'),
                red: pinpoired,
                grey: pinpoigrey,
                blue: pinpoiblue,
                userPoi_blue: pinpaid,
                nativeAssetImages: [
                  'pinfree',
                  'pinpaid',
                  'pinpoired',
                  'pinpoigrey',
                  'pinpoiblue',
                ],
              }}
            />
            <MapboxGL.ShapeSource
              id="symbolLayerSource"
              shape={featureCollection}
              cluster={false}>
            

              <MapboxGL.SymbolLayer
                sourceLayerID="symbolLayerSource"
                id="symbolLocationSymbols"
filter={['!has', 'point_count']}
                style={mapStyles.parameterIcon}
              />
            </MapboxGL.ShapeSource>
          </React.Fragment>
        </MapboxGL.MapView>
      </View>
    </>
  );
};

const mapStyles = {
  parameterIcon: {
    iconImage: ['get', 'icon'],
    iconSize: IS_ANDROID ? 0.3 : 0.06,
    iconAllowOverlap: true,
    textOffset: [0, -0.4],
    textField: '{text}',
    textSize: 14,
    textPitchAlignment: 'map',
    backgroundColor: 'red',
  },
};

const layerStyles = {
  singlePoint: {
    circleColor: 'green',
    circleOpacity: 0.84,
    circleStrokeWidth: 2,
    circleStrokeColor: 'white',
    circleRadius: 5,
    circlePitchAlignment: 'map',
  },

  clusteredPoints: {
    circlePitchAlignment: 'map',

    circleColor: [
      'step',
      ['get', 'point_count'],
      '#51bbd6',
      10,
      '#f1f075',
      20,
      '#f28cb1',
    ],

    circleRadius: ['step', ['get', 'point_count'], 20, 10, 30, 50, 40],

    circleOpacity: 0.8,
    circleStrokeWidth: 3,
    circleStrokeColor: 'white',
  },

  clusterCount: {
    textField: '{point_count}',
    textSize: 16,
    textPitchAlignment: 'map',
    lineWidth: 2,
  },
};
// });

export default App;

./assets/:

[386sx]

On very important thing when running this:
On first launch (connected, so you get the map bit cached), replace the featureCollection with
const featureCollection = {
type: 'FeatureCollection',
features: [],
}```
so, the markers don't get loaded and cached as well.
Then,

• kill the app
• disconnect
• uncomment / change featureCollection to have items
• open the app (offline)
  Markers are not being displayed, (also no text in the markers - which is a hint that it is not just an asset server porblem)

[mfazekas]

@386sx but does the map loads?!
I think you just reproduced known issue #2 mentioned in my comment above
https://github.com/react-native-mapbox-gl/maps/issues/774#issuecomment-609618833

[386sx]

@386sx but does the map loads?!
I think you just reproduced known issue #2 mentioned in my comment above
#774 (comment)

Yes sure, the map loads. And the issue occurs with offlinePacks installed and working. In the code above the map shows because it is cached but I would assume that the style gets cached es well. There is no difference in behaviour with or without offlinePacks intalled, but of course I tried both, as mentioned even as a packed and signed release app.

[mfazekas]

@386sx i think i was able to reproduce with our example app too on iOS simulator. A quick debugging showed no issue from our side, so likely it's coming from upstream.

Not related but you don't need nativeAssetImages as those are different see https://github.com/react-native-mapbox-gl/maps/blob/master/docs/Images.md

[386sx]

Ok, thanks for the info. Yeah, nativeAssetImages was just a desperate attempt :)
So, if this is an upstream issue, what is the way ti proceed? I mean this renders offlinePacks more or less useless.

[mfazekas]

@386sx well actually for me it seems what I could reproduce is a 3.-rd issue:

#3. If a SymbolLayer has text and the map is offline, and the font used to render the symbol label has not been cached then the symbols will not be displayed. It seems that even symbols without label will be omitted.

See mapbox/mapbox-gl-native#12167, mapbox/mapbox-plugins-android#970

I've used the example bellow.
Remove the app from device, then install/start the app. Do not show labels and exit the app.
Stop the app, set show labels to true.
Then start the app, no symbols will appear.
Press hide labels => symbols should render.

import React from 'react';
import {Button} from 'react-native';
import {
  MapView,
  ShapeSource,
  SymbolLayer,
  Camera,
  Images,
} from '@react-native-mapbox-gl/maps';

const features = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      id: 'a-feature',
      properties: {
        icon: 'example',
        text: 'example-icon-and-label',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.00597, 40.71427],
      },
    },
    {
      type: 'Feature',
      id: 'b-feature',
      properties: {
        text: 'just-label',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.001097, 40.71527],
      },
    },
    {
      type: 'Feature',
      id: 'c-feature',
      properties: {
        icon: 'example',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.00697, 40.72427],
      },
    },
  ],
};

const featuresWoLabel = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      id: 'a-feature',
      properties: {
        icon: 'example',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.00597, 40.71427],
      },
    },
    {
      type: 'Feature',
      id: 'c-feature',
      properties: {
        icon: 'example',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.00697, 40.72427],
      },
    },
  ],
};

class BugReportExample extends React.Component {
  state = {
    showSymbols: true,
    showLabels: false,
    key: true,
  };

  render() {
    return (
      <>
        <Button
          title={this.state.showSymbols ? 'Hide symbols' : 'Show symbols'}
          onPress={() => this.setState({showSymbols: !this.state.showSymbols})}
        />
        <Button
          title={this.state.showLabels ? 'Hide labels' : 'Show labels'}
          onPress={() => this.setState({showLabels: !this.state.showLabels})}
        />
        <Button
          title={this.state.key ? 'Key: b' : 'Key a'}
          onPress={() => this.setState({key: !this.state.key})}
        />
        <MapView style={{flex: 1}}>
          <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
          <Images
            images={{
              example:
                'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGEAYAAAAhvj7HAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAABGAAAARgBq8Lz7AAAE4UlEQVR42u2dTWhcVRiG7512tBNI2kxptU1ji7/0T8WFRNKo7UKjJI2ltNFFoW4EF/4tbJtV68aNuBJdNcGCCFIXUiWFklARhohC/SEVU9G0o4RWdGw7JZMwmRkX71uQYpJL7jnnOzP3ezYvZ/Odc97vyz1nzv1JECiKoiiKoiiKoiiKoiiK4h2h9ABcU6sFQRAErWitmIRm+6kt0OZ2aHoUWu6EFvPQwiz1FHRmQwgn/5aen7JEUBgrX4V2/wodPAutXaDWzGilAj2+C/r0JPtvl/ZBuQUkJvUo9PE10NFOswURV0c+gna9z/GulvYtMcDwsA/aM82/8EE/CiOqVgegvVs4n2ekfW04YOzWK9BLL/qReFOaXwXddkLa57qFl+6HoEfO+5FYV3r4DOe/RToP3sPN4mpobo8fCZTS3A1oyw3pvHgHjFk3S8MabMmJveehH+vfkc6TODTiZT8SUy+6Tuy8JyXVMS+119H64wmpcdQnU2u5dN/tumfnBcPN3CNonT4HDftdj6POmYMM8/wp9YD0gKzBXwE/+XFpbxQd2CidV+PwnOGQHwY3qm79xXYerS9JmEjYjdbwrO3+ks1wN/3ea6sH63erMYHeLFqn9G6uE3Yvx93zzyumI1srGG7G1qI1x918OGarP+W/VD+Epk+gcKpfmopseUnqfBuqheKW1EHojqrxyHYHfrTJbnxlYY52mI5ofEnigdJ2tK7+aNsSJQqr9mNpunYybiRLV5gOLRSveKzXVCRLBbPvFVdWKFHYVzQVydiShKUoWINWdQPDn3PoijI/X0DCA3xY/epSAxkumEwGrelpKWeUhcjkUTAzS76VYHhJan1B1hBlYbKx9zKGCya7UsoKJQrZdNwIhgum+R4pK5QoNN8ZN4Lhgkl/LWWFEoX0m3EjGC6Y8k4pK5QolGOf/BoumOJvUlYoUSj+EDeC4YIp/CllhRKFQuwHrEyfwzDetPG7pIoJmjbjHKb081IjGL7ClPgZjeA1MU+U/6F2BloqxI1krGB45MwBDZUFXFHmZWgT8xN7y2Dp5uPJ3U79UBbh00OmIlkqmLHvHTmhRGJshfQIFgWb4NEmP16/SKqO5Ezn1fIjmscu242vLMxbJekRRIZvDTwIrXzsx19cUrQyQf83mc6rtSsMX2/go5p9+kkup/S10f+LpiM7epEt7EHr4gHoXftt95tMfufzSBuvoWBqp0334Ow7vXz3l18dGF/mqt9ksf1hFMp47HtG8+Hscx+YyPnlaA2856rfZDBwn+1CEYObsQ5obq8fm8R61Ry/hpF6Sjqv1uELb7fTgG/9SEDd6PPQFuc/m8U+WcY38fj5j7YuqXHUJ20T8O96xnXPYgVzE0x8aoZG8NdUbU56XJ7xFaSNP5envpMekDfwUlvkGv2BJ0uA1B7lIP3Q54sWg5u5HdDDs34k0JUe6ef8d0nnoW6Bgdueg+bP+pFYU3qpzPnpfzkxDU+O+S23Xrary/xIfFSt8H8J9BQ4n2elfU0MvHSvh3Z9Ah35zI/CuKkjeY5vnOO9X9o35RZ4zrMT2n0v9PgQr0ivGy6MFuhgO/s7xv7fkPbBNEn9n493oJW5Ddr6EjTLV0mbN0PT30DLT0KLE9DCJPSfd6GlkM/M/iU9P0VRFEVRFEVRFEVRFKUx+Bf7EbtqCt8N3QAAACV0RVh0Y3JlYXRlLWRhdGUAMjAwOC0wMy0xNFQxOToyOTo0Mi0wNDowMD++m78AAAAldEVYdG1vZGlmeS1kYXRlADIwMDgtMDMtMTRUMTk6Mjk6NDItMDQ6MDBgD+2LAAAAAElFTkSuQmCC',
            }}
          />
          {this.state.showSymbols && (
            <ShapeSource
              id={`shape-source-id-${this.state.key ? 'a' : 'b'}`}
              key={`key-${this.state.key ? 'a' : 'b'}`}
              shape={this.state.showLabels ? features : featuresWoLabel}>
              <SymbolLayer
                id="symbol-id"
                style={{
                  iconImage: ['get', 'icon'],
                  textField: ['get', 'text'],
                }}
              />
            </ShapeSource>
          )}
        </MapView>
      </>
    );
  }
}

export default BugReportExample;

[mfazekas]

I'm closing this these are the known issues, let me know if this is something else:

1. If you're in dev mode, and cut connection to asset server to icons cannot be rendered as they are sourced from the asset server.
2. If you don't use offlinePacks and/or cache and you try to render a map with styleURL that is not reachable the map will not load, and you'll get an onDidFailLoadingMap and nothing will render
3. If a SymbolLayer has a symbol with text and the map is offline, and the font used to render the symbol label has not been cached then the symbols will not be displayed. It seems that even symbols without label will be omitted from such layer.

[386sx]

Ok, thanks for the effort. The most likely issue here is imho no. 3, will investigate that further.

[386sx]

Just a heads-up on that issue. It is this problem: mapbox/mapbox-gl-native#12167
As soon as I remove the text property from the cluster bubbles' SymbolLayer style, the problem goes away. There is a workaround apparently, you need to explicitly add the fonts used in the map style to the SymbolLayer displaying the cluster bubbles. (textFont property)

[386sx]

One more thing, that finally solved this:
geoutils is going to be extracted, so I experimentally removed MapboxGL.geoUtils.makeFeatureCollection() from my initial state. This in the end caused the whole problem. Defaulting the featureCollection with an empty one: { type: 'FeatureCollection', features: [] } (which is what makeFeatureCollection does) solved the whole issue.

[NathanNovak]

We are also having issue #3 and am looking for advice and/or a solution to have map symbols appear when offline.
Why are the fonts not included in the library? is there a way to initiate the fonts when the device is offline?

[Kayre-Scott-Primon]

I'm also having a problem on n3, does anyone have an example?

[ferdicus]

@NathanNovak , @Kayre-Scott-Primon, please open a new ticket while following the issue ticket in order for this to get looked at.
You are commenting underneath a ticket that is marked as known/ won't fix.