Drag and Drop interactions
In this guide we will
- display a route and an operation on the map
- add an operation to a route
- remove an activity from a route
Follow common setup steps
If not done already, follow common Introduction page.
Display a route and an operation on the map
First, send a Entities message with this payload
Payload for SDK_ENTITIES message
{
"sites": [
{
"id": "MOULINS",
"coordinates": {
"longitude": 3.327869,
"latitude": 46.559176
},
"isDepot": false
},
{
"id": "AXIOROUTE",
"coordinates": {
"longitude": -0.561642,
"latitude": 47.462544
},
"isDepot": false
},
{
"id": "CJM",
"coordinates": {
"longitude": -0.345602,
"latitude": 48.597481
},
"isDepot": false
},
{
"id": "COFISOFT",
"coordinates": {
"longitude": 1.697037,
"latitude": 46.816713
},
"isDepot": false
},
{
"id": "GPI",
"coordinates": {
"longitude": 4.740329,
"latitude": 45.752201
},
"isDepot": false
},
{
"id": "SINARI",
"coordinates": {
"longitude": -1.604869,
"latitude": 48.113197
},
"isDepot": true
},
{
"id": "XYRIC",
"coordinates": {
"longitude": 5.09304,
"latitude": 47.310967
},
"isDepot": false
}
],
"trucks": [
{
"id": "VEHICLE_01",
"availablePeriods": [
{
"id": "PERIOD_01",
"timeWindow": {
"start": "2022-11-01T04:30:00.000+01:00",
"end": "2022-11-02T12:00:00.000+01:00"
},
"departureSite": "SINARI",
"arrivalSite": "SINARI"
}
]
}
],
"operations": [
{
"id": "OPERATION_07",
"type": "DELIVERY",
"idSiteDestination": "MOULINS"
},
{
"id": "OPERATION_01",
"type": "DELIVERY",
"idSiteDestination": "AXIOROUTE"
},
{
"id": "OPERATION_02",
"type": "DELIVERY",
"idSiteDestination": "COFISOFT"
},
{
"id": "OPERATION_03",
"type": "DELIVERY",
"idSiteDestination": "CJM"
},
{
"id": "OPERATION_04",
"type": "DELIVERY",
"idSiteDestination": "GPI"
},
{
"id": "OPERATION_05",
"type": "DELIVERY",
"idSiteDestination": "XYRIC"
}
],
"referencePlanning": {
"vehicleRoutes": [
{
"truck": "VEHICLE_01",
"period": "PERIOD_01",
"routes": [
{
"id": "000ZYX1DH01",
"activities": [
{
"activity": "ROUTE_START",
"site": "SINARI"
},
{
"activity": "LOADING",
"site": "SINARI",
"operations": [
{
"id": "OPERATION_03",
"type": "LOADING"
},
{
"id": "OPERATION_05",
"type": "LOADING"
},
{
"id": "OPERATION_04",
"type": "LOADING"
},
{
"id": "OPERATION_02",
"type": "LOADING"
},
{
"id": "OPERATION_01",
"type": "LOADING"
}
]
},
{
"activity": "DELIVERY",
"site": "CJM",
"operations": [
{
"id": "OPERATION_03",
"type": "DELIVERY"
}
]
},
{
"activity": "DELIVERY",
"site": "XYRIC",
"operations": [
{
"id": "OPERATION_05",
"type": "DELIVERY"
}
]
},
{
"activity": "DELIVERY",
"site": "GPI",
"operations": [
{
"id": "OPERATION_04",
"type": "DELIVERY"
}
]
},
{
"activity": "DELIVERY",
"site": "COFISOFT",
"operations": [
{
"id": "OPERATION_02",
"type": "DELIVERY"
}
]
},
{
"activity": "DELIVERY",
"site": "AXIOROUTE",
"operations": [
{
"id": "OPERATION_01",
"type": "DELIVERY"
}
]
},
{
"activity": "ROUTE_END",
"site": "SINARI"
}
]
}
]
}
]
}
}
Map display
Add an operation to a route
Drag and drop the operation on the route
On the map, Drag and drop the operation "MOULINS" to the route segment between "COFISOFT" and "GPI".
A Drag and drop event message will be sent containing this payload
Payload for DRAG_END message
{
"draggedEntities": [
{
"entityType": "OPERATION",
"id": "OPERATION_07",
"idxSplit": 0
}
],
"draggedOnEntities": [
{
"entityType": "ITINERARY",
"id": "000ZYX1DH01"
}
],
"draggedType": "OPERATION",
"pos": {
"lonLat": [
2.97843718656093,
46.3762626761231
]
},
"tags": [],
"mptAction": {
"type": "SCHEDULE_OPERATIONS_ON_EXISTING_ROUTES",
"operations": [
{
"id": "OPERATION_07"
}
],
"to": {
"idRoute": "000ZYX1DH01"
}
},
"draggedFeatures": [],
"draggedOnFeatures": []
}
Run a route optimization
Send a Route optimization message with the mptAction received in the "DRAG_END" event message.
Payload for RUN_MPT message
{
"type": "SCHEDULE_OPERATIONS_ON_EXISTING_ROUTES",
"operations": [
{
"id": "OPERATION_07"
}
],
"to": {
"idRoute": "000ZYX1DH01"
}
}
Map display
When the route optimization, is finished, the map is updated.
Remove an activity from a route
Drag and drop the activity to the trashbin
On the map, Drag and drop the activity "COFISOFT" to the trashbin.
A Drag and drop event message will be sent containing this payload
Payload for DRAG_END message
{
"draggedEntities": [
{
"entityType": "ACTIVITY",
"id": "000ZYX1DH01",
"index": 12
}
],
"draggedOnEntities": [],
"draggedType": "ACTIVITY",
"pos": {
"lonLat": [
5.38703694991653,
45.4511027969834
]
},
"tags": [
"TRASHBIN"
],
"mptAction": {
"type": "UNSCHEDULE_OPERATIONS_FROM_EXISTING_ROUTES",
"operations": [
{
"id": "OPERATION_02"
}
]
},
"draggedFeatures": [],
"draggedOnFeatures": []
}
Run a route optimization
Send a Route optimization message with the mptAction received in the "DRAG_END" event message.
Payload for RUN_MPT message
{
"type": "UNSCHEDULE_OPERATIONS_FROM_EXISTING_ROUTES",
"operations": [
{
"id": "OPERATION_02"
}
]
}
Map display
When the route optimization, is finished, the map is updated.
