Markers are at not correct location in Mobile

[bsrinath4839]

Description

Hi,

This is my code

import "mapbox-gl/dist/mapbox-gl.css";
import MapBoxGL from "mapbox-gl";
import MapDotIcon from "../../assets/icons/MapDotIcon";
import React from "react";
import { filterByType } from "../../helpers/filterData";
import { mapConfig } from "../../constants/map.constants";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import ReactMapGl, { Marker, NavigationControl } from "react-map-gl";

const Map = () => {
  const nodes = useSelector((state) => state.data.nodes);
  const mapState = useSelector((state) => state.map.viewport);
  const navigate = useNavigate();
  const mapRef = React.useRef();

  const data = filterByType(nodes.data, nodes.filterBy);

  const handleMarkerClick = (address) => {
    navigate(`/nodes/${address}`);
  };

  React.useEffect(() => {
    if (mapRef && mapRef?.current) {
      mapRef.current?.flyTo({
        center: [mapState.longitude, mapState.latitude],
        duration: 8000,
        essential: true,
        zoom: mapState.zoom,
      });
    }
  }, [mapState.longitude, mapState.latitude, mapState.zoom]);

  const initialViewState = {
    bearing: 0,
    latitude: mapState.latitude,
    longitude: mapState.longitude,
    pitch: 0,
    zoom: mapState.zoom,
  };

  const settings = {
    doubleClickZoom: true,
    dragPan: true,
    dragRotate: false,
    interactive: true,
    maxPitch: 0,
    maxZoom: 14,
    minPitch: 0,
    minZoom: 2.5,
    renderWorldCopies: false,
    touchPitch: false,
    touchZoomRotate: false,
  };

  return (
    <ReactMapGl
      mapLib={MapBoxGL}
      mapboxAccessToken={mapConfig.token}
      ref={mapRef}
      maxBounds={[
        [-180, -90],
        [180, 90],
      ]}
      style={{ height: "100vh", width: "100vw" }}
      mapStyle={mapConfig.styles.custom}
      logoPosition="bottom-right"
      initialViewState={initialViewState}
      {...settings}
    >
      {data &&
        data.length > 0 &&
        data.map(({ location, address }, index) => (
          <Marker
            key={`marker-${index}`}
            onClick={() => handleMarkerClick(address)}
            latitude={location.latitude}
            longitude={location.longitude}
            style={{ cursor: "pointer" }}
            anchor="center"
          >
            <MapDotIcon />
          </Marker>
        ))}
      <NavigationControl position={"bottom-right"} zoomDiff={1} />
    </ReactMapGl>
  );
};

export default Map;

In Mobile view, the Markers are not showing at the correct place. They are showing a lot below the actual location.

Expected Behavior

When I open in Desktop the Markers are at the correct place, even in Mobile Dimensions. But When I open it on my mobile those are in the wrong place.

I am expecting this to get resolved.

Steps to Reproduce

I have provided the code above, let me know if any mistakes in it.

Environment

• Framework version: "react-map-gl": "^7.1.6",
• Map library: "mapbox-gl": "^2.15.0",
• Browser: Mobile, Chrome
• OS: Android, iOS

Logs

No response

[Pessimistress]

Hello, we cannot reproduce your issue from partial code. If you believe there is a bug, please create a Code Sandbox. Otherwise go to Discussions to get generic help with debugging your own application.

[bsrinath4839]

If you check in the provided video, the upper part of the map is going behind the address bar, and the markers are in the wrong location.

https://github.com/visgl/react-map-gl/assets/38185844/b2c2a1ba-b8b8-45ed-b02a-6e87822f064b

[bsrinath4839]

Hello, we cannot reproduce your issue from partial code. If you believe there is a bug, please create a Code Sandbox. Otherwise go to Discussions to get generic help with debugging your own application.

I have provided a video for your reference.

[Pessimistress]

We cannot debug from a video. If you are unable to provide reproduction I'm going to close this issue.

[bsrinath4839]

We cannot debug from a video. If you are unable to provide reproduction I'm going to close this issue.

Found the issue.

Removing this from public/index.html is causing misplacement of the Markers

Here is sandbox. https://codesandbox.io/p/devbox/serene-benji-4vgptf?file=%2Fpublic%2Findex.html%3A6%2C7-6%2C93

The thing is I don't want this for my app.

Any Idea how to tackle this??

[Pessimistress]

You can refer to mapbox's example for the correct meta tag to set. If you still have a problem with it, you should report the issue to mapbox-gl instead.