assets.js.instructions.js Maven / Gradle / Ivy

var translate = require('./translate.js');
var messages = require('./messages.js');

var routeSegmentPopup = null;

function addInstruction(mapLayer, main, instr, instrIndex, lngLat, useMiles, debug) {
    var sign = instr.sign;
    if (instrIndex === 0)
        sign = "marker-icon-green";
    else
        sign = messages.getSignName(sign);
    var title = instr.text;
    if (instr.annotation_text) {
        if (!title)
            title = instr.annotation_text;
        else
            title = title + ", " + instr.annotation_text;
    }

    var pathname = window.location.pathname;
    var dirname = pathname.substring(0, pathname.lastIndexOf('/'));

    var instructionDiv = $("");
    if (sign !== "continue") {
        var indiPic = "";
        instructionDiv.append("" + indiPic + "");
    } else {
        instructionDiv.append("");
    }

    var tdVar = $("");
    tdVar.text(title);

    instructionDiv.append(tdVar);
    var distance = instr.distance;
    if (distance > 0) {
        instructionDiv.append("" + translate.createDistanceString(distance, useMiles) + "
" + translate.createTimeString(instr.time) + "");
    }

    if (lngLat) {
        instructionDiv.click(function () {
            if (routeSegmentPopup)
                mapLayer.removeLayerFromMap(routeSegmentPopup);

            routeSegmentPopup = L.popup().setLatLng([lngLat[1], lngLat[0]]).setContent(title).openOn(mapLayer.getMap());

        });

        if (debug) {
            // Debug Turn Instructions more easily
            L.marker([lngLat[1], lngLat[0]], {
                icon: L.icon({
                    iconUrl: './img/marker-small-red.png',
                    // Made the instructions icon a bit bigger, as they are placed before the path details
                    iconSize: [16, 16]
                }),
                draggable: true,
                autoPan: true
            }).addTo(mapLayer.getRoutingLayer()).bindPopup(title);
        }
    }
    main.append(instructionDiv);
}

module.exports.create = function (mapLayer, path, urlForHistory, request) {
    var instructionsElement = $("");
    var debug = request.api_params.debug;

    var partialInstr = path.instructions.length > 100;
    var len = Math.min(path.instructions.length, 100);
    for (var m = 0; m < len; m++) {
        var instr = path.instructions[m];
        var lngLat = path.points.coordinates[instr.interval[0]];
        addInstruction(mapLayer, instructionsElement, instr, m, lngLat, request.useMiles, debug);
    }
    var infoDiv = $("");
    infoDiv.append(instructionsElement);

    if (partialInstr) {
        var moreDiv = $("");
        moreDiv.click(function () {
            moreDiv.remove();
            for (var m = len; m < path.instructions.length; m++) {
                var instr = path.instructions[m];
                var lngLat = path.points.coordinates[instr.interval[0]];
                addInstruction(mapLayer, instructionsElement, instr, m, lngLat, request.useMiles);
            }
        });
        instructionsElement.append(moreDiv);
    }

    var hiddenDiv = $("");
    hiddenDiv.hide();

    var toggly = $("");
    toggly.click(function () {
        hiddenDiv.toggle();
    });
    infoDiv.append(toggly);
    var infoStr = "points: " + path.points.coordinates.length;

    hiddenDiv.append("" + infoStr + "");

    var exportLink = $("#export-link a");
    exportLink.attr('href', urlForHistory);
    var osmRouteLink = $("
view on OSM");

    var osmVehicle = request.getVehicle();
    if (osmVehicle === "bicycle") {
        osmVehicle = "bike";
    } else if (osmVehicle.indexOf("truck") >= 0) {
        osmVehicle = "car";
    }

    osmRouteLink.attr("href", "http://www.openstreetmap.org/directions?engine=graphhopper_" + osmVehicle + "&route=" + encodeURIComponent(request.from.lat + "," + request.from.lng + ";" + request.to.lat + "," + request.to.lng));
    hiddenDiv.append(osmRouteLink);

    var osrmLink = $("OSRM");
    osrmLink.attr("href", "http://map.project-osrm.org/?z=13&loc=" + request.from + "&loc=" + request.to);
    hiddenDiv.append("
Compare with: ");
    hiddenDiv.append(osrmLink);
    var googleLink = $("Google ");
    var addToGoogle = "";
    var addToBing = "";
    if (request.getVehicle().toUpperCase() === "FOOT") {
        addToGoogle = "&dirflg=w";
        addToBing = "&mode=W";
    } else if ((request.getVehicle().toUpperCase().indexOf("BIKE") >= 0) ||
        (request.getVehicle().toUpperCase() === "MTB")) {
        addToGoogle = "&dirflg=b";
    }

    googleLink.attr("href", "https://maps.google.com/?saddr=" + request.from + "&daddr=" + request.to + addToGoogle);
    hiddenDiv.append(googleLink);
    var bingLink = $("Bing ");
    bingLink.attr("href", "https://www.bing.com/maps/default.aspx?rtp=adr." + request.from + "~adr." + request.to + addToBing);
    hiddenDiv.append(bingLink);
    if (metaVersionInfo)
        hiddenDiv.append(metaVersionInfo);

    infoDiv.append(hiddenDiv);
    return infoDiv;
};
 













© 2015 - 2024 Weber Informatics LLC | Privacy Policy