[Bug]: MarkerView not shown in IOS

[rochijacob]

Mapbox Implementation

Mapbox

Mapbox Version

default

Platform

iOS

@rnmapbox/maps version

10.0.0-beta.11

Standalone component to reproduce

{
"expo":  {
"plugins": [
      [
        "@rnmapbox/maps",
        {
          "RNMapboxMapsImpl": "mapbox",
          "RNMapboxMapsDownloadToken": "MY_TOKEN"
        }
      ]
      ]
}
}

import { LinearGradient } from 'expo-linear-gradient';
import React, { useEffect, useRef, useState } from 'react';
import { Button, Image, StyleSheet, Text, Touchable, TouchableOpacity, View } from 'react-native';
import MapboxGL, { Camera, MapView, MarkerView, offlineManager } from '@rnmapbox/maps';
import geoViewport from '@mapbox/geo-viewport';
import { useWindowDimensions } from 'react-native';
import PropTypes from 'prop-types';

export const FONTS = {
  bold: 'OpenSansBold',
  extraBold: 'OpenSansExtraBold',
  semiBold: 'OpenSansSemiBold',
  medium: 'OpenSansMedium',
  regular: 'OpenSansRegular',
  light: 'OpenSansLight',
  envision: 'Envision',
  moret: 'MoretBook',
  MoretBold: 'MoretBold',
  MoretItalic: 'MoretItalic',
  MoretItalicBold: 'MoretItalicBold',
  icons: 'icons',
  iconsCalendar: 'iconsCalendar'
};

export const SIZES = {
  base: 10,
  small: 12,
  font: 14,
  subtitle: 15,
  medium: 18,
  large: 21,
  extraLarge: 24,
  title: 26
};

MapboxGL.setWellKnownTileServer('mapbox');
MapboxGL.setAccessToken('MY_TOKEN');

const CENTER_COORD = [-83.7680103841464, 9.183611130691833];
const MAPBOX_VECTOR_TILE_SIZE = 512;
const STYLE_URL = 'mystyle' 

export const data = [
{
"name": "Datapoint 1",
    "location": {
        "type": "point",
        "coordinates": ["-83.770389", "9.185861"]
    },
}
]

const MapModal = ({ selectedPoint, setSelectedPoint }) => {
    return (
        <MarkerView anchor={{ x: 0.5, y: 1 }} coordinate={selectedPoint.coords} a>
            <TouchableOpacity style={styles.modalView} onPress={() => setSelectedPoint(null)}>
                <Text style={[styles.modalTitle, styles.textSettings]}>{data[selectedPoint.index].name}</Text>
            </TouchableOpacity>
        </MarkerView>
    )
}

MapModal.propTypes = {
  selectedPoint: PropTypes.shape({
    coords: PropTypes.arrayOf(PropTypes.string),
    index: PropTypes.number,
  }).isRequired,
  setSelectedPoint: PropTypes.func.isRequired,
};

const MapScreen = () => {
  const { width, height } = useWindowDimensions()
  const camera = useRef(null);
  const [packName, setPackName] = useState('envision-pack');
  const [selectedPoint, setSelectedPoint] = useState(null);
  const [markerScale, setMarkerScale] = useState(0);
  const mapview = useRef(null);
  const marker = useRef(null);

  const handlePinClick = (coordinate) => {
    setSelectedPoint(coordinate);
  };


  const getPack = async () => {
    const pack = await offlineManager.getPack(packName);
    if (pack) {
      console.log(
        'pack:',
        pack,
        'name:',
        pack.name,
        'bounds:',
        pack?.bounds,
        'metadata',
        pack?.metadata,
      );

      console.log('=> status', await pack?.status());
    }
  }

  const cratePack = async () => {

    const bounds = geoViewport.bounds(
      CENTER_COORD,
      12,
      [width, height],
      MAPBOX_VECTOR_TILE_SIZE,
    );

    const options = {
      name: packName,
      styleURL: STYLE_URL,
      bounds: [
        [bounds[0], bounds[1]],
        [bounds[2], bounds[3]],
      ],
      minZoom: 10,
      maxZoom: 20,
      metadata: {
        whatIsThat: 'foo',
      },
    };

    offlineManager.createPack(options, (region, status) =>
      console.log(
        'status: ',
        status,
      ),
    );

  }

  useEffect(() => {
    MapboxGL.locationManager.start();
    getPack();


    const bounds = geoViewport.bounds(
      CENTER_COORD,
      12,
      [width, height],
      MAPBOX_VECTOR_TILE_SIZE,
    );

    console.log('=> bounds', bounds);

    return () => {
      MapboxGL.locationManager.stop();
    };
  }, []);

  useEffect(() => {
    if (camera.current) {
      camera.current.setCamera({
        centerCoordinate: [-83.7680103841464, 9.183611130691833],
        zoomLevel: 16,
      });
      camera.current.flyTo([-83.7680103841464, 9.183611130691833], 2000);
      setMarkerScale(1);
    }


  }, [camera]);

  const getZoom = async () => {
    const zoom = await mapview.current?.getZoom();
    if (zoom <= 13) {
      setMarkerScale(0);  // El marcador se oculta completamente.
    } else if (zoom <= 14) {
      const scale = zoom - 13;  // Esto dará un valor entre 0 y 0.7.
      setMarkerScale(scale);
    } else {
      setMarkerScale(1);  // Tamaño normal del marcador.
    }
  }

  return (
      <View style={styles.page}>
        {/* <Button title="Create Pack" onPress={cratePack} /> */}
        <View style={[styles.container, { width: width }]}>
          <MapView
            style={styles.map}
            ref={mapview}
            styleURL='MY_STYLE_URL'
            scaleBarEnabled={true}
            // onRegionWillChange={getZoom}
            onRegionIsChanging={getZoom}
          >
            <Camera zoomLevel={15} centerCoordinate={CENTER_COORD} />

            {data.map((venue, index) => {
              return (
                <MarkerView key={index} coordinate={data?.location?.coordinates} allowOverlap={false}>
                  <TouchableOpacity style={{ alignItems: 'center' }} onPress={() => handlePinClick({ coords: data?.location?.coordinates, index: index })}>
                    <Text style={{ fontFamily: FONTS.medium, fontSize: SIZES.small * markerScale }}>{data.name}</Text>
                  </TouchableOpacity>
                </MarkerView>
              );
            })}
            {selectedPoint && selectedPoint.coords ?
              (
                <MapModal selectedPoint={selectedPoint} setSelectedPoint={setSelectedPoint} />
              ) : null
            }
          </MapView>
        </View>
      </View>
  );
};


export default MapScreen;


const styles = StyleSheet.create({
  page: {
    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',
  },
    modalView: {
        width: '80%',
        margin: 20,
        backgroundColor: 'white',
        borderRadius: 10,
        padding: 15,
        alignItems: 'center',
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 4,
        elevation: 5,
    },

  container: {
    height: '100%',
  },

  map: {
    flex: 1,
  },
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

Observed behavior and steps to reproduce

Hi!!

I am having a huge problem as markers are not being show in IOS (yet they do in android). I am using Expo (development build) for my app. The code corresponds to my plugin specification and my component.

Markers are perfectly shown in Android yet not in IOS

Expected behavior

Markers should show in IOS

Notes / preliminary analysis

I have tried with point annotations and shapesource and they don't appear in my IOS Device

Additional links and references

[MichaelDanielTom]

I've also been having issues recently related to MarkerView with recent beta versions (@rnmapbox/maps at 10.1.0-beta.18 with $RNMapboxMapsVersion = '11.0.0-rc.1').

The markers seem to disappear and reappear when panning, zooming, rotating, and/or changing the pitch in certain amounts. The behavior seems to be deterministic but I can't yet determine what the pattern is. One way it has been consistently is the views disappearing when they go in the bottom quarter or so of the viewport, so maybe there's something funky going on with the camera?

Also fwiw this issue did not seem to be occurring with @rnmapbox/maps at 10.1.0-beta.4 and $RNMapboxMapsVersion = '11.0.0-beta.4'.

RPReplay_Final1699442445.mov

[MichaelDanielTom]

Update: I reverted to MapboxMaps 11.0.0-beta.5 (while staying at same @rnmapbox/maps version) and the issue went away, I'm guessing that it's related to changes in the View Annotation API introduced in 11.0.0-beta.6

[rochijacob]

@MichaelDanielTom Thank you for your answer!

I managed to solve the issue! The issue was that the coordinates I was passing down to MarkerView component were in the string format (not number). Once I changed this, they appeared in IOS!

I also have the same issue you do, that I zoom out and some markers seem to disappear.

I will close the issue given it was solved, yet I will be paying close attention to the fix of these markers that appear/disappear.

Best Regards
Rocio