milemaker-js v0.0.17

It's the MileMaker JS SDK.

It will be useful to show routes on the NDrive Map.

Install

• Add the npm registry .npmrc file (in the root folder of your project, there is package.json file). It's needed to install the private @ndrive/nmaps-gl module . Contact the owner of milemaker-js project about it.

• Run the command in the terminal (in the root folder of your project, there is package.json file) yarn add milemaker-js or npm install milemaker-js

Example of how it can be used in Vanilla JS

import {
    addRoute,
    addTruckMarker,
    initMap,
    moveTruckMarker,
    removeRoute,
    removeRoutes,
    removeTruckMarker,
    Map,
    RoutePlanResponse,
    decodeRouteShapes
} from "milemaker-js";
import {NDRIVE_BASE_API_URL, NDRIVE_TOKEN} from "../env.ts"; // this stuff you should receive from the owner of this library.
import {MOCK_PLAN_ONE, MOCK_PLAN_TWO} from "./mock/plan.ts"; // these mocked plan responses you can replace with the true ones received from the planning request.


/**
 * Run this function after HTML DOM is mounted
 */
export const review = async () => {
    const {map} = await initMap({
        id: "app", // the `id` of dom element where Map should be mounted
        ndriveBaseApiUrl: NDRIVE_BASE_API_URL,
        ndriveToken: NDRIVE_TOKEN
    });
    // ROUTE 1
    handleRoute({color: "yellow", routeId: "1", id: "route1", map, plan: MOCK_PLAN_ONE});

    // ROUTE 2
    handleRoute({color: "blue", routeId: "2", id: "route2", map, plan: MOCK_PLAN_TWO});

    handleHideAllRoutes(map);
};

const handleHideAllRoutes = (map?: Map) => {
    const routesHideButton = document.getElementById("routesHide");

    if (routesHideButton) {
        routesHideButton.onclick = () => {
            map && removeRoutes({map})
        };
    }
};

const handleRoute = ({
                         color,
                         routeId,
                         id,
                         map,
                         plan
                     }: {
    color: string;
    id: string;
    routeId: string;
    map: Map | undefined;
    plan: RoutePlanResponse;
}) => {
    const routeShowButton = document.getElementById(`${id}show`);
    const routeHideButton = document.getElementById(`${id}hide`);
    const routeTruckShowButton = document.getElementById(`${id}truckShow`);
    const routeTruckHideButton = document.getElementById(`${id}truckHide`);
    const routeTruckMoveButton = document.getElementById(`${id}truckMove`);

    if (routeShowButton) {
        routeShowButton.onclick = () => {
            addRoute({map, plan, routeId, color});
        };
    }

    if (routeHideButton) {
        routeHideButton.onclick = () => {
            removeRoute({routeId, map});
        };
    }

    const lonLatTupleArray = decodeRouteShapes(plan.legs);
    const every100coordinates = lonLatTupleArray.filter((_: unknown, itemIndex: number) => itemIndex % 100 === 0);
    let step = 0;

    if (routeTruckShowButton && map) {
        routeTruckShowButton.onclick = () => {
            addTruckMarker({map, coordinates: every100coordinates[step], color, routeId});
        };
    }

    if (routeTruckMoveButton && map) {
        routeTruckMoveButton.onclick = () => {
            ++step;
            moveTruckMarker({routeId, coordinates: every100coordinates[step]});
        };
    }

    if (routeTruckHideButton) {
        routeTruckHideButton.onclick = () => {
            removeTruckMarker({routeId});
        };
    }
};