ES6 module support

[tomvanenckevort]

I noticed that v3.2.9 contained an ESM version in the dist folder, but this seems to have disappeared from releases since then. What was the purpose of that file and why was it removed?

The reason for asking is that I'm trying to use Leaflet and LRM with ES6 modules, using Rollup to transpile and bundle them into normal JS for my website.

With Leaflet v1.4.0 and LRM v.3.2.9 I've got the following code that isn't quite working:

import { Map, TileLayer, GeoJSON, CircleMarker } from 'leaflet/dist/leaflet-src.esm';
import Routing from 'leaflet-routing-machine/dist/leaflet-routing-machine.esm';

const map = new Map('my-map');

const osm = new TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

map.addLayer(osm);

const gridOverlay = new GeoJSON(gridOverlayJson, { color: '#174d7b', opacity: 0.8, weight: 2, fillColor: '#dbc84e', fillOpacity: 0.1 });

map.addLayer(gridOverlay);

map.fitBounds(gridOverlay.getBounds());

const waypoints = [];
const markers = [];

const route = new Routing.components.Control({
    waypoints: waypoints,
    waypointMode: 'snap',
    router: new Routing.components.OSRMv1({
        serviceUrl: 'https://api.mapbox.com/directions/v5',
        useHints: false,
        requestParameters: {
            access_token: 'my-token'
        },
        profile: 'mapbox/cycling' 
    })
});

route.on('routesfound', function (e) {
    waypoints.length = 0;
    waypoints.push(e.routes[0].waypoints.map(function (w) {
        return w.latLng;
    }));

    markers.forEach(function (m) {
        map.removeLayer(m);
    });
});

route.addTo(map);

gridOverlay.on('click', function (e) {
    let marker = new CircleMarker(e.latlng, { radius: 2, color: '#174d7b', fillColor: '#174d7b', fillOpacity: 1 });

    marker.addTo(map);

    markers.push(marker);

    waypoints.push(marker.getLatLng());

    route.setWaypoints(waypoints);
});

Before I start diving into the error and figuring out what is not working, I just wanted to check if LRM supports being used in ES6 modules. And if so, is this the right way to use or should I upgrade to a more recent version and import it differently?

[docloulou]

Up... My bundle size is very high, any tips about import LRM ? Thanks

[docloulou]

I found a solution:

I dont use itinerary step instructions, so i delete require("osrm-text-instructions") (+500kb) from osrm-v1.js and i rebuild the .js

dont forget to comment to avoid bugs...: stepToText = L.bind(osrmTextInstructions.compile, osrmTextInstructions, this.options.language);

and

                    modifier = this._maneuverToModifier(step.maneuver);
                    //text = stepToText(step, {legCount: legCount, legIndex: i});

                    if (type) {
                        if ((i == 0 && step.maneuver.type == 'depart') || step.maneuver.type == 'arrive') {
                            waypointIndices.push(index);
                        }

                        result.instructions.push({
                            type: type,
                            distance: step.distance,
                            time: step.duration,
                            road: step.name,
                            direction: this._bearingToDirection(step.maneuver.bearing_after),
                            exit: step.maneuver.exit,
                            index: index,
                            mode: step.mode,
                            modifier: modifier,
                            text: null
                        });
                    }