Routing Example

Install

npm i -S @deepmap/hdm-web-map-sdk @deepmap/control-routing

code

            
<div style="height: 50%" id="deepMap-overviews"></div>
            
            

            
import '@deepmap/hdm-web-map-sdk/styles/index.scss';
import '@deepmap/control-routing/styles/control-routing.scss';
            
            

                    
import {DeepMapFactory} from '@deepmap/hdm-web-map-sdk';
import {ControlOverviewMap} from '@deepmap/control-overview-map';

const config = {
    projectName: 'campushd_mbstyle',
    mapServiceUrl: 'https://ssp.deepmap.de/geo',
    target: 'deepMap-routing'
};

let startPoint, endPoint, startFeature, endFeature;

function getRoutePointFromQueryPoint(queryPoint, level) {
    const coordinates = queryPoint.center.coordinates;
    return {
        lat: coordinates.latitude,
        lng: coordinates.longitude,
        level: level
    };
}

function routingTapHandler(queryPoint, level, features) {
    if (endPoint) {
        endPoint = null;
        startPoint = null;
    }
    if (!startPoint) {
        startPoint = getRoutePointFromQueryPoint(queryPoint, map.currentLevel);
    } else if (!endPoint) {
        endPoint = getRoutePointFromQueryPoint(queryPoint, map.currentLevel);
        routingControl.getRouteByRoutePoint(startPoint, endPoint, true, false, false).then((route) => {
            console.log('<--- route', route)
        });
    }
}

const map = DeepMapFactory.bootstrap(config);

const routingControl = new ControlRouting({
    projectName: config.projectName,
    routeServiceUrl: 'https://ssp.deepmap.de/routingservice',
    showDialog: true
});
const levelSwitchControl = new ControlLevelSwitch();

map.addControl(routingControl);
map.addControl(levelSwitchControl);

map.setMapViewControllerDidStart(function () {
    map.addTapHandler(routingTapHandler);
});