Improved calculation of cost of delivery on Yandex Maps

446
Yandex map Calculate shipping cost by clicking

Calculation of shipping cost for the map is quite a popular task among our customers.

There is a special calculator from Yandex https://tech.yandex.ru/maps/jsbox/2.1/deliveryCalculatorthat allows you to insert a website widget code to calculate shipping cost

However, it is not easy that to select the endpoints ("where"), you must first activate the box on the map, and then put a label.

We need to eliminate the step of activating the fields and give the user the ability to immediately put a mark on the map.

Ready solution does not exist (at the moment), so we wrote our own procedure and have integrated it into the site for the construction of wooden houses.

Example:

Procedure code:

ymaps.ready(init);

function init() {

 var coords = [58.753399,42.688526],
 // Create the map.
 myMap = new ymaps.Map('map', {
 // The coordinates of the center of the map.
 center: coords,
 // Zoom level.
 zoom: 5
}),
 //Multimart on the map
 multiRoute = new ymaps.multiRouter.MultiRoute({
 //an array describing the plurality of reference points;
 referencePoints: [coords]
},{
 //When adding multimarket on the map allows you to automatically set the center and zoom ratio so that multimarket was fully visible.
 boundsAutoApply: false
});

 //Editor routes 
multiRoute.editor.start({
 //Add waypoints by clicking on the map
 addWayPoints: false
});
 //Zoom with mouse wheel
myMap.behaviors.disable('scrollZoom');

 //Add the geo - Route
 myMap.geoObjects.add(multiRoute);

 myMap.events.add('click', function (e) { 
 //Sets the reference point of multimarket.
multiRoute.model.setReferencePoints([coords,e.get('coords')]);
 //Sets routing options.
 multiRoute.model.setParams({ 
 //Type of routing.
/*
 * "auto" — car routing;
 * "masstransit" routing using public transport.
 * the "pedestrian" is a pedestrian routing.
 * "bicycle" - a Bicycle route.
*/
 routingMode:'auto', 
 //The maximum number of routes returned by multipartition.
 results:1, 
 //Whether to use reverse geocoding for route points, defined by coordinates.
 reverseGeocoding: true 
 },{ 
 //When adding multimarket on the map allows you to automatically set the center and zoom ratio so that multimarket was fully visible.
 boundsAutoApply:true 
 }, true);

 multiRoute.model.events.add('requestsuccess', function () {
 var activeRoute = multiRoute.getActiveRoute();
if(activeRoute){
 //Price per kilometer
 var price = 80,
 //The length of the route in meters
 length = multiRoute.getActiveRoute().properties.get("distance").value
 //Converting length from meters to kilometers
 km = Math.round(length / 1000);

 console.log('Distance: '+km+' km');
 console.log('shipping Cost: '+Math.ceil(km*price)+' RUB');
}

 console.log('sending: '+multiRoute.getWayPoints().get(0).properties.get('address'));
 console.log('delivery Address: '+multiRoute.getWayPoints().get(1).properties.get('address'));
});
});
}

 

<div id="map" style="width: 100%; height: 400px;"></div>
Share this post

Comment (0)

Comments are missing

Leave your comment



Want to get new knowledge and knowledge?Sign up for a useful newsletter!