Build a route between two points
vanilla.html
react.html
vue.html
common.css
common.ts
variables.ts
sandbox.json
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>
<!-- To make the map appear, you must add your apikey -->
<script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>
<script
data-plugins="transform-modules-umd"
data-presets="typescript"
type="text/babel"
src="../variables.ts"
></script>
<script
data-plugins="transform-modules-umd"
data-presets="typescript"
type="text/babel"
src="./common.ts"
></script>
<script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
import type {LngLat, RouteFeature} from '@mappable-world/mappable-types';
import {getPointStr, fetchRoute, lineStyle, InfoMessage} from './common';
import {INITIAL_ROUTE_POINTS, LOCATION} from '../variables';
window.map = null;
main();
async function main() {
// Waiting for all api elements to be loaded
await mappable.ready;
const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapFeature, MMapControls, MMapControlButton} =
mappable;
const {MMapDefaultMarker} = await mappable.import('@mappable-world/mappable-default-ui-theme');
// Initialize the map
map = new MMap(
// Pass the link to the HTMLElement of the container
document.getElementById('app'),
// Pass the map initialization parameters
{location: LOCATION, showScaleInCopyrights: true, margin: [100, 100, 100, 100]},
[
// Add a map scheme layer
new MMapDefaultSchemeLayer({}),
// Add a layer of geo objects to display markers and line
new MMapDefaultFeaturesLayer({})
]
);
// Create and add route start and end markers to the map.
const pointA = new MMapDefaultMarker({
coordinates: INITIAL_ROUTE_POINTS[0],
draggable: true,
title: 'Point A',
subtitle: getPointStr(INITIAL_ROUTE_POINTS[0]),
onDragMove: onDragMovePointAHandler,
onDragEnd: onDragEndHandler
});
const pointB = new MMapDefaultMarker({
coordinates: INITIAL_ROUTE_POINTS[1],
draggable: true,
title: 'Point B',
subtitle: getPointStr(INITIAL_ROUTE_POINTS[1]),
onDragMove: onDragMovePointBHandler,
onDragEnd: onDragEndHandler
});
map.addChild(pointA).addChild(pointB);
// Create and add a route line to the map
const routeLine = new MMapFeature({geometry: {type: 'LineString', coordinates: []}, style: lineStyle});
map.addChild(routeLine);
// Get and process data about the initial route
fetchRoute(pointA.coordinates, pointB.coordinates).then(routeHandler);
/* Create and add a shared container for controls to the map.
Using MMapControls you can change the position of the control */
const topRightControls = new MMapControls({position: 'top right'});
map.addChild(topRightControls);
// Add a custom information message control to the map
topRightControls.addChild(new InfoMessage({text: 'Drag any marker to rebuild the route.'}));
const topLeftControls = new MMapControls({position: 'top left'}, [
new MMapControlButton({
text: 'Driving',
onClick: () => fetchRoute(pointA.coordinates, pointB.coordinates, 'driving').then(routeHandler)
}),
new MMapControlButton({
text: 'Truck',
onClick: () => fetchRoute(pointA.coordinates, pointB.coordinates, 'truck').then(routeHandler)
}),
new MMapControlButton({
text: 'Walking',
onClick: () => fetchRoute(pointA.coordinates, pointB.coordinates, 'walking').then(routeHandler)
}),
new MMapControlButton({
text: 'Transit',
onClick: () => fetchRoute(pointA.coordinates, pointB.coordinates, 'transit').then(routeHandler)
})
]);
map.addChild(topLeftControls);
// The handler functions for updating the coordinates and subtitle of the marker when dragging
function onDragMovePointAHandler(coordinates: LngLat) {
pointA.update({coordinates, subtitle: getPointStr(coordinates)});
}
function onDragMovePointBHandler(coordinates: LngLat) {
pointB.update({coordinates, subtitle: getPointStr(coordinates)});
}
// The handler function for updating route data after dragging the marker
function onDragEndHandler() {
fetchRoute(pointA.coordinates, pointB.coordinates).then(routeHandler);
}
/* A handler function that updates the route line
and shifts the map to the new route boundaries, if they are available. */
function routeHandler(newRoute: RouteFeature) {
// If the route is not found, then we alert a message and clear the route line
if (!newRoute) {
alert('Route not found');
routeLine.update({geometry: {type: 'LineString', coordinates: []}});
return;
}
routeLine.update({...newRoute});
if (newRoute.properties.bounds) {
map.setLocation({bounds: newRoute.properties.bounds, duration: 300});
}
}
}
</script>
<!-- prettier-ignore -->
<style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; } </style>
<link rel="stylesheet" href="./common.css" />
</head>
<body>
<div id="app"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<script crossorigin src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>
<!-- To make the map appear, you must add your apikey -->
<script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>
<script
data-plugins="transform-modules-umd"
data-presets="react, typescript"
type="text/babel"
src="../variables.ts"
></script>
<script
data-plugins="transform-modules-umd"
data-presets="react, typescript"
type="text/babel"
src="./common.ts"
></script>
<script data-plugins="transform-modules-umd" data-presets="react, typescript" type="text/babel">
import type {LngLat, RouteFeature} from '@mappable-world/mappable-types';
import {getPointStr, fetchRoute, lineStyle, InfoMessage} from './common';
import {INITIAL_ROUTE_POINTS, LOCATION} from '../variables';
window.map = null;
main();
async function main() {
// For each object in the JS API, there is a React counterpart
// To use the React version of the API, include the module @mappable-world/mappable-reactify
const [mappableReact] = await Promise.all([
mappable.import('@mappable-world/mappable-reactify'),
mappable.ready
]);
const reactify = mappableReact.reactify.bindTo(React, ReactDOM);
const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapFeature, MMapControls, MMapControlButton} =
reactify.module(mappable);
// Import the package to add a default marker
const {MMapDefaultMarker} = reactify.module(
await mappable.import('@mappable-world/mappable-default-ui-theme')
);
// Using mappable-rectify, we turn a custom InfoMessage into a React component
const {InfoMessage: InfoMessageR} = reactify.module({InfoMessage});
const {useState, useCallback, useEffect} = React;
function App() {
const [location, setLocation] = useState(LOCATION);
const [pointASubtitle, setPointASubtitle] = useState(getPointStr(INITIAL_ROUTE_POINTS[0]));
const [pointBSubtitle, setPointBSubtitle] = useState(getPointStr(INITIAL_ROUTE_POINTS[0]));
const [pointACoordinates, setPointACoordinates] = useState(INITIAL_ROUTE_POINTS[0]);
const [pointBCoordinates, setPointBCoordinates] = useState(INITIAL_ROUTE_POINTS[1]);
const [route, setRoute] = useState < RouteFeature > null;
// Get and process route data during the first rendering
useEffect(() => {
fetchRoute(pointACoordinates, pointBCoordinates).then(routeHandler);
}, []);
// The handler functions for updating the coordinates and subtitle of the marker when dragging
const onDragMovePointAHandler = useCallback((coordinates: LngLat) => {
setPointASubtitle(getPointStr(coordinates));
setPointACoordinates(coordinates);
}, []);
const onDragMovePointBHandler = useCallback((coordinates: LngLat) => {
setPointBSubtitle(getPointStr(coordinates));
setPointBCoordinates(coordinates);
}, []);
// The handler function for updating route data after dragging the marker
const onDragEndHandler = useCallback(() => {
fetchRoute(pointACoordinates, pointBCoordinates).then(routeHandler);
}, [pointACoordinates, pointBCoordinates]);
const buildDrivingRoute = useCallback(
() => fetchRoute(pointACoordinates, pointBCoordinates, 'driving').then(routeHandler),
[]
);
const buildTruckRoute = useCallback(
() => fetchRoute(pointACoordinates, pointBCoordinates, 'truck').then(routeHandler),
[]
);
const buildWalkingRoute = useCallback(
() => fetchRoute(pointACoordinates, pointBCoordinates, 'walking').then(routeHandler),
[]
);
const buildTransitRoute = useCallback(
() => fetchRoute(pointACoordinates, pointBCoordinates, 'transit').then(routeHandler),
[]
);
/* A handler function that updates the route line
and shifts the map to the new route boundaries, if they are available. */
const routeHandler = useCallback((newRoute: RouteFeature) => {
// If the route is not found, then we alert a message and clear the route line
if (!newRoute) {
alert('Route not found');
setRoute(null);
return;
}
setRoute(newRoute);
if (newRoute.properties.bounds) {
setLocation({bounds: newRoute.properties.bounds, duration: 300});
}
}, []);
return (
// Initialize the map and pass initialization parameters
<MMap
location={location}
showScaleInCopyrights={true}
margin={[100, 100, 100, 100]}
ref={(x) => (map = x)}
>
{/* Add a map scheme layer */}
<MMapDefaultSchemeLayer />
{/* Add a layer of geo objects to display markers and line */}
<MMapDefaultFeaturesLayer />
{/* Add route start and end markers to the map */}
<MMapDefaultMarker
coordinates={pointACoordinates}
title="Point A"
subtitle={pointASubtitle}
draggable
onDragMove={onDragMovePointAHandler}
onDragEnd={onDragEndHandler}
/>
<MMapDefaultMarker
coordinates={pointBCoordinates}
title="Point B"
subtitle={pointBSubtitle}
draggable
onDragMove={onDragMovePointBHandler}
onDragEnd={onDragEndHandler}
/>
{/* Add the route line to the map when it becomes available */}
{route && <MMapFeature {...route} style={lineStyle} />}
{/* Add a shared container for controls to the map.
Using MMapControls you can change the position of the control */}
<MMapControls position="top right">
{/* Add a custom information message control to the map */}
<InfoMessageR text="Drag any marker to rebuild the route." />
</MMapControls>
<MMapControls position="top left">
<MMapControlButton text="Driving" onClick={buildDrivingRoute} />
<MMapControlButton text="Truck" onClick={buildTruckRoute} />
<MMapControlButton text="Walking" onClick={buildWalkingRoute} />
<MMapControlButton text="Transit" onClick={buildTransitRoute} />
</MMapControls>
</MMap>
);
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('app')
);
}
</script>
<!-- prettier-ignore -->
<style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; } </style>
<link rel="stylesheet" href="./common.css" />
</head>
<body>
<div id="app"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<script crossorigin src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>
<script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>
<script
data-plugins="transform-modules-umd"
data-presets="typescript"
type="text/babel"
src="../variables.ts"
></script>
<script
data-plugins="transform-modules-umd"
data-presets="typescript"
type="text/babel"
src="./common.ts"
></script>
<script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel"></script>
<!-- prettier-ignore -->
<style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; } </style>
<link rel="stylesheet" href="./common.css" />
</head>
<body>
<div id="app"></div>
</body>
</html>
.infoWindow {
width: 250px;
padding: 15px;
padding-left: 50px;
position: relative;
border-radius: 15px;
background-color: rgba(255, 255, 255, 0.9);
font-size: 16px;
}
.infoIcon {
width: 30px;
height: 30px;
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
}
import type {LngLat, DrawingStyle, RouteOptions, TruckParameters} from '@mappable-world/mappable-types';
// An object containing the route line style
export const lineStyle: DrawingStyle = {
fillRule: 'nonzero',
fill: '#333',
fillOpacity: 0.9,
stroke: [
{width: 6, color: '#007afce6'},
{width: 10, color: '#fff'}
]
};
// Converting [Lng, Lat] coordinates to string format
export function getPointStr(point: LngLat) {
return point.map((c) => c.toFixed(4)).join('; ');
}
// The function for fetching a route between two points
export async function fetchRoute(
startCoordinates: LngLat,
endCoordinates: LngLat,
type: RouteOptions['type'] = 'driving'
) {
let truck: TruckParameters;
if (type === 'truck') {
// set truck with trailer by default
truck = {
weight: 40,
maxWeight: 40,
axleWeight: 10,
payload: 20,
height: 4,
width: 2.5,
length: 16,
ecoClass: 4,
hasTrailer: true
};
}
// Request a route from the Router API with the specified parameters.
const routes = await mappable.route({
points: [startCoordinates, endCoordinates], // Start and end points of the route LngLat[]
type, // Type of the route
bounds: true, // Flag indicating whether to include route boundaries in the response
truck
});
// Check if a route was found
if (!routes[0]) return;
// Convert the received route to a RouteFeature object.
const route = routes[0].toRoute();
// Check if a route has coordinates
if (route.geometry.coordinates.length == 0) return;
return route;
}
// Create a custom information message control
export let InfoMessage = null;
interface InfoMessageProps {
text: string;
}
// Wait for the api to load to access the entity system (MMapComplexEntity)
mappable.ready.then(() => {
class InfoMessageClass extends mappable.MMapComplexEntity<InfoMessageProps> {
private _element!: HTMLDivElement;
private _detachDom!: () => void;
// Method for create a DOM control element
_createElement(props: InfoMessageProps) {
// Create a root element
const infoWindow = document.createElement('div');
infoWindow.className = 'infoWindow';
infoWindow.textContent = props.text;
// Create an icon element
const infoIcon = document.createElement('img');
infoIcon.src = '../info-icon.svg';
infoIcon.className = 'infoIcon';
infoWindow.appendChild(infoIcon);
return infoWindow;
}
// Method for attaching the control to the map
_onAttach() {
this._element = this._createElement(this._props);
this._detachDom = mappable.useDomContext(this, this._element, this._element);
}
// Method for detaching control from the map
_onDetach() {
this._detachDom();
this._detachDom = undefined;
this._element = undefined;
}
}
InfoMessage = InfoMessageClass;
});
mappable.ready.then(() => {
mappable.import.registerCdn('https://cdn.jsdelivr.net/npm/{package}', [
'@mappable-world/mappable-default-ui-theme@latest'
]);
});
import type {MMapLocationRequest, LngLat} from '@mappable-world/mappable-types';
export const LOCATION: MMapLocationRequest = {
center: [55.44279, 25.24613], // starting position [lng, lat]
zoom: 9 // starting zoom
};
// The initial coordinates of the starting and ending points of the route
export const INITIAL_ROUTE_POINTS: LngLat[] = [
[55.43974, 25.23515],
[55.9502, 25.80471]
];
{"node": 20, "template": "static"}