The main control should provide at least 2 fields: one for origin and one for destination. Most probably they should also support geocoding.

If the steps request option is enabled, the control should also display the routing steps and allow to navigate through the waypoints.

To be continued...

For new contributors, it is nice to tell them which node / npm version is necessary. In GL JS, we have some documentation about using nvm use together with a .nvmrc file which we set to 16 I think. @smellyshovel can you add something like this here as well?

There's a new polyline package from Placemark:

• https://github.com/placemark/polyline
• https://github.com/mapbox/polyline

As highlighted in the readme, it is maintained, it uses [lon, lat] order, it doesn't have any depencencies and it is typed.

Using it would simplify the decoding process from decode(geometry).map((coordinate) => coordinate.reverse()) to decode(geometry).

I'd like to use it in my own codebase but I don't want to use both since Mapbox's package is a dependency of maplibre-gl-directions.

So it'd be great if you would consider switching packages.

Originally posted by @clementmas in #211

@smellyshovel can you implement GitHub Releases? I think they are a nice complement to the NPM registry. You can see how we did this in GL JS...

@wipfli How do feel about adding a live-demo link and maybe some tags to the repo as well as you do with Gl JS?

Currently the filters use the legacy filter-syntax. That makes it impossible to augment existing filters with the new expressions syntax (since the two can't be combined in a single statement). Therefore, all the existing filters should be rewritten using the new syntax.

On a touchscreen device, if you drag the the line or a vertex, then remove the directions (call destroy()), it will freeze the map and it won't pan anymore.

Here's the reproduction link:
https://codesandbox.io/s/maplibre-gl-directions-pan-error-s1giw7

• Open the devtools
• enable the mobile responsive mode (to simulate touchscreen events)
• drag the line to add a vertex
• click on the button "Remove direction"
  -> map is frozen

I think this has to do with with line: https://github.com/maplibre/maplibre-gl-directions/blob/main/src/directions/main.ts#L483

Disable the global onMove handlers for them not to interfere with the new ones which are added further down.

Somehow it stays disabled and creates this bug.

The most crucial lib's parts should be covered with unit tests. That's the very least requirement till v1.

Write tests for:

• The lib's public interface
• Util-methods
• Helper-methods

Accidentally saw the following at the insights. Seems like something's wrong with Dependabot. @wipfli, could you please check it out?

To put it all short:

With the existing implementation, everything works just fine as long as none of the coordinates are repeated in the input waypoints data:

        [7.137154, 49.319755], // 1
        [7.148604, 49.315962], // 2
        [7.149873, 49.319595],
        [7.140321, 49.30794],
        [7.153934, 49.317662],
        [7.144149, 49.310097], // 3
        [7.13242, 49.31679],
        [7.146392, 49.317763], // 4
        [7.156454, 49.322832], // 5
        [7.143664, 49.313397], // 6

        // [7.137154, 49.319755], // 1
        // [7.146392, 49.317763], // 4
        // [7.137154, 49.319755], // 1
        // [7.148604, 49.315962], // 2
        // [7.144149, 49.310097], // 3
        // [7.143664, 49.313397], // 6
        // [7.156454, 49.322832], // 5
        // [7.143664, 49.313397], // 6

Total route geometry:

iw_lHk~pj@sCkIw@qFj@gUbAk@fJuN~AhAzAcF?yApGiCRgAYkCK}Hg@aDEsCVcBcEiA_BmEsBrD?`B`CtGpDfFAlHiCnFmB`CqFgJ?_AmAaC_EoC_C^`H~PtJpHzAcF?yApGiCRgA[}Cl@@^cA`AMp@|DzAvArBT`DhJfEfInIxKhEpL|CpFdFrMZHbEiD_B_C}D}Ic`@qy@wAmNe@YmA^oCKkD_CqFqAu@u@a@^cBkCx@eAXhAfB|CpFpAjD~BnCJ~@t@nAvLz@ExRla@j@lAwEtG{BxO}@dR@zHu@nMcCzHe@pPWLeBw@k@|DoEnDoENqBjAi@ye@_A}g@Ri]k@qEoAyCeA_A^qA`AcDKcBsAxAaBtDyFcEeBuC_HmRk@oDQ_Gy@oDgBgCiBk@IaDNo@fAi@C[y@{C}BiC|BhCz@hDmAfA@`EhBj@fBfCx@nDP~Fj@nD~GlRhApBtJpHzAcF?yApGiCRgA[}Cl@@^cA`AMp@|DzAvArBT`DhJfEfI`DjEkApEkGqF]LEr@

Reference Valhalla:

Issues begin with uncommenting at least the 11th coordinate (which duplicates the first one):

        [7.137154, 49.319755], // 1
        [7.148604, 49.315962], // 2
        [7.149873, 49.319595],
        [7.140321, 49.30794],
        [7.153934, 49.317662],
        [7.144149, 49.310097], // 3
        [7.13242, 49.31679],
        [7.146392, 49.317763], // 4
        [7.156454, 49.322832], // 5
        [7.143664, 49.313397], // 6

        [7.137154, 49.319755], // 1
        // [7.146392, 49.317763], // 4
        // [7.137154, 49.319755], // 1
        // [7.148604, 49.315962], // 2
        // [7.144149, 49.310097], // 3
        // [7.143664, 49.313397], // 6
        // [7.156454, 49.322832], // 5
        // [7.143664, 49.313397], // 6

The built route looks the same

Though the total route's geometry's different:

iw_lHk~pj@sCkIw@qFj@gUbAk@fJuN~AhAzAcF?yApGiCRgAYkCK}Hg@aDEsCVcBcEiA_BmEsBrD?`B`CtGpDfFAlHiCnFmB`CqFgJ?_AmAaC_EoC_C^`H~PtJpHzAcF?yApGiCRgA[}Cl@@^cA`AMp@|DzAvArBT`DhJfEfInIxKhEpL|CpFdFrMZHbEiD_B_C}D}Ic`@qy@wAmNe@YmA^oCKkD_CqFqAu@u@a@^cBkCx@eAXhAfB|CpFpAjD~BnCJ~@t@nAvLz@ExRla@j@lAwEtG{BxO}@dR@zHu@nMcCzHe@pPWLeBw@k@|DoEnDoENqBjAi@ye@_A}g@Ri]k@qEoAyCeA_A^qA`AcDKcBsAxAaBtDyFcEeBuC_HmRk@oDQ_Gy@oDgBgCiBk@IaDNo@fAi@C[y@{C}BiC|BhCz@hDmAfA@`EhBj@fBfCx@nDP~Fj@nD~GlRhApBtJpHzAcF?yApGiCRgA[}Cl@@^cA`AMp@|DzAvArBT`DhJfEfI`DjEkApEkGqF]LEr@Sh@L|F`CvPjF_A}@dR@zHu@nMcCzHe@pPWLeBw@k@|DoEnDoENqBjAwAm_AeFfAwCdDaA`@WqDsA_F

What it should look like (ref)

If we uncomment all the waypoints, thus adding multiple duplicated waypoints, here's what the difference looks like:

Real: total mess with some weird straight lines here and there

Ref

In the build-flow there's currently a step that checks and auto-fixes all the code with eslint and prettier. The issue is that the changes are not commited and pushed by the actions bot and therefore they are ignored. This must be addressed at some point 'cause as it is now, it's a waste of resources.

@smellyshovel if I remember correctly, CI uses a personal access token somewhere. Is it secrets.GITHUB_TOKEN? It would be great if you could document somewhere what GitHub secrets are used in CI and maybe it would make sense give the personal access token a more explicit name like secrets.MAINTAINER_PAT or so. Thanks!

At the time being it's assumed that the user takes care of the failing routing-requests themselves. E.g. by wrapping the .addWaypoint inside the try-catch block.

Maybe it's worth of providing some default error-handling so that the whole thing doesn't fail in case it's not wrapper in try-catch?

If you've got no pre-saved information for the aforementioned example and click the Load button, then you won't be able to interact with the map anymore. Must check whether the data exists first, and if not, then disable/hide the button.

I updated a project, bumping maplibre-gl from 3.1.0 to 4.0.0. The package has a peer dependency to maplibre-gl@"^3.0.0" so npm install failed without the use of the --force flag.

• Note: Everything worked normally after the force installation (screenshot below)
  

I suppose the upgrade is already in-planning or underway, but I opened the issue in case somebody misses the fix.

See the description: https://docs.mapbox.com/api/navigation/directions/#:~:text=mapbox/driving.-,bearings,-integer

Need to figure out a way to introduce respective functionality into the plugin's UI.

Repro:

1. Enable interactivity
2. Place a waypoint
3. Place another waypoint
4. Before the routes are loaded, disable the interactivity
5. The plugin is still interactive!

Hello,

I'm actively developing a routing application using OSM data, maptiler, OSRM, and svelte. I've enjoyed using this package for just over a month!

I noticed that it would be useful to update some reactive aspects of my application when a user starts and or finishes moving a waypoint. However, I did not find an event like "fetchroutestart, or fetchrouteend" for this case.

Are there current developments to add to the event types? I would be interested in helping develop these enhancements.

At the time being if there's an ongoing routing request and the destroy() public method is called then after the server responds with the routing data, the plugin tries to updated the view accordingly, but there's no more view available (the instance is destroyed).

Also check the same thing for the clear() method.

(See https://javascript.info/fetch-abort#:~:text=To%20be%20able%20to%20cancel,how%20to%20work%20with%20AbortController%20.)

We'll probably need to host the demo images somewhere in order for them to be correctly displayed

.

Add respective attributions to the Demo maps.

The plugin's interactivity is automatically disabled whenever there's an ongoing Network-request. If the request takes longer than expected, the whole thing severely affects the UX of the plugin.

Therefore, we need to add an option that would allow the user to configure the maximal amount of time a Network-request is allowed to take before it's canceled and the plugin's interactivity is restored back.

It used to work before, but now it's necessary to manually make sure there's a correspondance between the last published to NPM version and the version set in package.json. After running the deployment job, make sure to update the version manually in the package.json or otherwise the next deployment would fail.

There are examples which are tailored specifically for the touch-enabled devices, but the Demo project actually does not provide a good support for the touch-enabled devices. This must be fixed.

If I setting directions.interactive = true the map can't be moved by dragging

ERROR MESSAGE:

Uncaught TypeError: Cannot read properties of undefined (reading 'source')
at He.onDragDown (main.ts:394:21)
at Map.fire (maplibre-gl.js:31:11764)
at fo._firePreventable (maplibre-gl.js:35:288967)
at fo.mousedown (maplibre-gl.js:35:288284)
at Yo.handleEvent (maplibre-gl.js:35:311286)

DEMO does not have this problem, is it an environment setting error? thx

Currently the section about the extensibility-interface is marked a WIP in the API docs. There's also no example for the full restyling.

• Restyling example
• Extensibility-interface API docs

When the destrtoy() method is called while the Directions is fetching the routes, that leads to multipleruntime errors. Seems like them come from the mousemove handler which is for some reason not detached after the plugin's layers are removed from the map (with destroy()).

The lib's main dist file is currently over 1MB.

We need to reduce it and, possibly, split the lib into chunks: main directions functionality and controls (maybe even each control separately).

Currently when a waypoint is removed, its related snappoint is removed along with it right away. It doesn't look very beautiful when the route is teared apart at the point where there was a snappoint.

See if maybe it would be possible to remove the related snappoint only after the routes are rebuilt after the server responds with a modified route.

Hello!

I'm trying to use this module with a vue project (nuxt 2).
I've installed and used maplibre-gl without problem.

I'm getting the error Cannot find module '@maplibre/maplibre-gl-directions' when I try to load my page.
Here is my code:

import maplibregl from 'maplibre-gl'
import MapLibreGlDirections, { LoadingIndicatorControl } from '@maplibre/maplibre-gl-directions'

export default {
  data() {
    return {
      map: {},
    }
  },
  mounted() {
    this.createMap()
  },
  methods: {
    // MAP INIT
    createMap() {
      this.map = new maplibregl.Map({
        container: 'map',
        style: `https://api.maptiler.com/maps/streets/style.json?key=${this.style_token}`,
        center: this.center,
        zoom: 11,
      })
      this.map.addControl(new maplibregl.NavigationControl(), 'top-left')
      // DIRECTIONS INIT
      this.initDirections()
    },

    initDirections() {
      const directions = new MapLibreGlDirections(this.map)
      directions.interactive = true
      this.map.addControl(new LoadingIndicatorControl(directions))
    },
  },
}

I've tried different ways of initializing the MapLibreGlDirections in the code but it won't change the Cannot find module error.

Thanks!

https://github.com/maplibre/maplibre-gl-directions/runs/5884525408?check_suite_focus=true currently fails

Must be related to updating the TypeDoc's version.