Openlayers map implemented in react does not work on mobile

I have an implementation of the OpenLayers map in react which looks like this:

const Map = ({ children }) => {
  const mapRef = useRef();
  const [map, setMap] = useState(null);
  const [mapReady, setMapReady] = useState(false);

  useEffect(() => {
    const zoom = 7;
    const center = [0, 0];
    const options = {
      view: new View({ zoom, center }),
      layers: [],
      controls: [],
      overlays: [],
    };
    const mapObject = new OLMap(options);

    mapObject.setTarget(mapRef.current);
    setMap(mapObject);
    mapObject.on('rendercomplete', () => setMapReady(true));

    return () => mapObject.setTarget(undefined);
  }, []);

  return (
    <MapContext.Provider value={{ map }}>
      <StyledDiv innerRef={mapRef}>
        {mapReady && children}
      </StyledDiv>
    </MapContext.Provider>
  );
};

The map works very well on the pc browser, the map can be dragged, zoomed-in / zoomed out without any problems. The markers are displayed properly and so on.

The issue is that it is not responding to any touch event on mobile. So it cannot be dragged in order to navigate properly where you want. It behaves like it cannot respond at all to touch events. The only things that work are the zoom-in and zoom-out controls. I think the problem is related to its implementation in React because the OpenLayers map should work properly on mobile.

Did someone encounter a similar issue with ol? Any ideas are very helpful. Thank you.

Answer

Not all browsers support Pointer events natively and Openlayers removed Pointer polyfill since v6.4. If you are targeting older browsers (on iPad) that do not support Pointer events, you now need to include a pointer events polyfill (elm-pep or pepjs) in your application.

Advertisement

Answer