Route not showing up. How to use with react-map-gl?

[861]

Hi, I am trying to use MapPrivder and useMap Hook with maplibre-gl-directions, but the route not showing up.

Any suggestions?

Thanks in advance!

[smellyshovel]

@861

Hi. Not sure what are those. useMap hook is something from react? What's MapPrivder?

[861]

@smellyshovel Thanks for your reply.

I am trying to use maplibre-gl-directions with react-map-gl

Both useMap and MapProvider are from react-map-gl.

Here is an example:

import {MapProvider, Map, useMap} from 'react-map-gl/maplibre';

function Root() {
  return (
    <MapProvider>
      <Map id="myMapA" ... />
      <Map id="myMapB" ... />
      <NavigateButton />
    </MapProvider>
  );
}

function NavigateButton() {
  const {myMapA, myMapB} = useMap();

  const onClick = () => {
    myMapA.flyTo({center: [-122.4, 37.8]});
    myMapB.flyTo({center: [-74, 40.7]});
  };

  return <button onClick={onClick}>Go</button>;
}

full example: https://github.com/visgl/react-map-gl/tree/7.1-release/examples/get-started/hook

[smellyshovel]

@861 this react library I'm not familiar with it. It must be just a wrapper over the regular MapLibre. As long as it provides the enwrapped instance of the Map, you should be able to use it with no issue.

I'd suggest to first try to make it work with MapLibre directly (with no react wrappers). If it works, then ask the wrapper's maintainers for help. If it doesn't than open a ticket here. Preferably, with a minimal reproduction.

[861]

In case anyone meets the same problem, here is the solution:

import * as React from "react";
import { useEffect } from "react";
import { useMap } from "react-map-gl/maplibre";
import MapLibreGlDirections from "@maplibre/maplibre-gl-directions";

export default function Directions() {
  const { mymap } = useMap();
  useEffect(() => {
    if (!mymap) return;
    mymap.on("load", () => {
      const directions = new MapLibreGlDirections(mymap.getMap());
      directions.interactive = true;

      directions.setWaypoints([
        [-87.6987661, 42.0054874],
        [-87.76756155000001, 41.531964550000004],
      ]);
    });
  }, [mymap]);
}