DEV Community: Nitin Yadav

Common Challenges of Benchmarking ETA Quality and How To Overcome Them

Nitin Yadav — Mon, 19 Jun 2023 13:08:26 +0000

The ability to provide accurate ETAs (Estimated Time of Arrival) is a crucial component of user experience across industries like ride hailing, field service, food delivery and logistics. Calculating ETAs using traditional methods (route planning + traffic information) and machine learning is very challenging; we won’t be covering that today. Instead, we will discuss one of the fundamentals of good ETAs — quantitatively measuring ETA quality.

This blog was originally published HERE

Being a traditional estimation problem, there are already some well-known metrics that are designed for measuring ETA accuracy. When it comes to transportation in particular, there are more factors that need to be taken into account. In this article, we’ll begin by exploring the traditional metrics and then talk about our learnings around ETA benchmarking at NextBillion.ai.

Traditional statistical metrics

Let’s look into some traditional estimation metrics that are widely used for ETA measurement.

MAPE: Mean Absolute Percentage Error

where At is the actual value and Et is the estimated value. A 10% MAPE means that if the Actual Time of Arrival (ATA) is 10 minutes, the original ETA was within the range of 9 – 11 minutes.

Pros and Cons of MAPE

Pros: MAPE is a normalized number that is comparable among different types of trips and regions. You can directly compare your MAPE metrics in Paris against those in London. It’s also a rather straightforward concept; you can easily understand the meaning of a 10% MAPE.
Cons: MAPE is too sensitive for short trips. Imagine a very quick trip that just takes a two-minute drive. The ETA for this trip could easily be anywhere from one to three minutes, but that leaves a MAPE of 50%. The impact of this 50% MAPE is equivalent to having a trip with an ETA of two hours that actually take three hours to complete.

A useful tip to use MAPE is to modify the formula to the following:

We’ve changed the denominator from the actual value At to the estimated value Et. This makes things simpler from a user experience perspective, as users usually see the ETA first, and only when the trip finally ends do they compare the actual time taken against the original estimation. A modified MAPE of 10% means that if you start with an ETA of 10 minutes, the ATA will be within 9 – 11 minutes.

RMSE: Root-Mean-Square Error

Pros and Cons of RMSE

Pros: RMSE is dimensionally consistent, making it easy to understand. It essentially weights trips based on duration, instead of just error percentages, which circumvents the issues that MAPE faces with short trips.
Cons: Similar to how MAPE is sensitive to short trips, RMSE is sensitive to outliers in terms of trip duration; extreme outliers may lead to a poor value. Since RMSE is correlated to the duration of trips, it’s difficult to compare different regions with each other. A normalization needs to be applied.

Both MAPE and RMSE are mathematical metrics that are great for complex calculations and can be used as objective functions in your machine learning algorithms. But can they measure how users feel about ETAs? It’s probably safe to say no. Nobody likes delayed trips, but people are much more tolerant of early arrivals. Also, the same margin of error could have differing impacts in different scenarios. For a short trip of 10 minutes, a 20% margin of error is just two minutes — some people may not even notice it. But in a 10-hour trip, a two-hour delay is hard to miss and can be intolerable. Clearly, these metrics can’t capture the whole picture. So let’s try to incorporate user experiences into our ETA measurements.

Design your own synthetic metrics for ETA experience

ETAs can mean different things to different users across varying scenarios. Proper user research can tell you what would be a reasonable threshold before your user notices an ETA went wrong. Based on the research, we can build a ‘Good Estimation %’ metric like below:

We can define a good estimation as follows:

For trips shorter than 24 hours, an error within the range of ±2 hours is considered a good estimation
For trips of 24 to 72 hours, an error of ±6 hours is considered a good estimation
For trips longer than 72 hours, an error of ±12 hours is considered a good estimation

You can build even more user experience factors into this synthetic metric. For instance:

Define thresholds based on urgency – For all trips during peak hours (7am-10am and 5pm-8pm), errors within 20% are considered good estimations; for all trips during non-peak hours, errors within 40% are considered good estimations.

Define thresholds based on customer type – For trips involving VIP customers, errors within 10% are considered good estimations, whereas the threshold is 20% for all other trips.

This Good Estimation % metric can be much better at showing what your users feel about their ETAs.

On the other hand, you can look into user complaints and find out what a bad estimation looks like. A metric for Bad Estimation % can be introduced in addition to its more positive counterpart, and you can optimize your operations around these metrics.

Find insights from visualization

All the metrics in the world are meaningless if you fail to draw any insights from them. Visualizations are extremely useful for doing just that. Let’s go over a few examples of drawing insights from data visualizations.

An ETA/Distance Error % Graph

This graph takes into account the distance factors of ETA. It helps us quickly understand if errors are caused by traffic or choice of route. In the above graph, we see an unusual group of samples where the distances are quite consistent, but the ETAs tend to be 200% off the actuals. Therefore, we can conclude that the errors are driven by traffic, and not route choice.

A Box Plot Graph

The box plot is a commonly used tool for visualizing the dispersion of data. It displays the minimum, first quartile, median, third quartile and maximum values of the data set. The whiskers extending from the boxes indicate the range of the data, while the individual points beyond the whiskers are outliers in the data. In the above figure, we can easily see that there’s a significant amount of deviation occurring within the 0-5 minute interval, which warrants a deeper look.

A 24-Hours ETA Graph

This is a 24-hours graph comparing over-estimated (yellow) vs. good-estimation (green) vs. under-estimated (red) ETAs. By laying the data out in this manner, it becomes obvious that there is a traffic problem. The traffic data being used to generate ETAs in this scenario is probably the average data for each day, which is usually faster than peak-hour traffic and slower than non-peak-hour traffic. This explains the poorly estimated ETAs.

Grouping Trips

This graph compares the errors of distance estimations with the actual distances. We see a significant group of longer trips showing a trend of underestimation, which is worth investigating. It could lead us to the underlying problem — perhaps a traffic issue, in this case.

Sometimes it’s an art to group your data creatively in such a manner that the truth behind the data reveals itself. In transportation, some useful groupings include:

Group by length of trips
Group by intra-city or intercity
Group by morning-peak, noon, evening-peak, night and midnight
Group by weekday or weekend
Group by urban-region or country-region
Group by vehicle types
Combinations of the above

It can also be quite useful to look at week-on-week or month-on-month tracks.

In the above image, we see ETA trends across different countries. Just from a glance, we can tell that in Country 2, traffic patterns became more unpredictable during the vacation season in July and August.

All in all, it’s probably fair to say that benchmarking your ETAs is rarely going to be an easy or effortless process. However, it is your very first step towards generating high-quality ETAs, and thus, an extremely valuable exercise. We hope that this article will help you take that important step with purpose and confidence.

The Ultimate Guide to Route Optimization: Boosting Efficiency and Reducing Costs

Nitin Yadav — Mon, 12 Jun 2023 13:52:04 +0000

Introduction

Vehicle route optimization is a process used by transportation and delivery-based businesses to plan and execute the most efficient and cost-effective routes for their vehicles. It involves using an API and algorithms to minimize travel time, reduce fuel consumption, and improve delivery efficiency.

This blog was originally published HERE

This blog post will explore the critical components of vehicle route optimization, its definition, optimization process, and benefits. We will also explore how it is used by various businesses to streamline their operations and provide better service to their customers.

What is vehicle route optimization?

Vehicle route optimization is crucial for transportation and delivery-based businesses. It uses API and algorithms to find the most efficient and cost-effective route for vehicles traveling from one location to another.

This optimization process considers multiple factors such as distance, traffic, road conditions, and delivery schedules to generate the quickest and most fuel-efficient route. Vehicle route optimization aims to minimize travel time, reduce fuel consumption, and increase delivery efficiency.

Optimizing vehicle routes is crucial in today’s fast-paced business environment, where time is of the essence, and customers demand quick and efficient delivery. Vehicle route optimization helps transportation and delivery-based businesses streamline operations, reduce costs, and provide better customer service.

One of the critical benefits of vehicle route optimization is that it minimizes travel time and reduces fuel consumption. By using an API to calculate the quickest and most efficient route, delivery and transportation, companies can save time and increase cost savings.

Vehicle route optimization can be particularly important for delivery companies, which must make multiple deliveries daily, and for field services, which must make numerous visits to different locations. Another benefit of this optimization task is that it helps increase delivery efficiency.

Using a route optimization API to plan and execute the optimal route, delivery and transportation companies can ensure that their vehicles take the most efficient route, reducing the number of miles driven and increasing delivery speed. This leads to better customer satisfaction, as deliveries are made on time with fewer issues.

Furthermore, vehicle route optimization can also help transportation and delivery-based businesses lower their carbon footprint by reducing fuel consumption.

Whether you’re a delivery company, courier service, or field service, vehicle route optimization is essential for optimizing your operations and taking your business to the next level.

The technology can help the transportation and delivery-based businesses plan and execute the most efficient and cost-effective routes for their vehicles, reducing travel time, fuel consumption, and costs while improving customer satisfaction and increasing efficiency.

Challenges faced when manually generating an optimal route

When manually generating an optimal route, the challenges become even more pronounced as the scale of operations increases. Here are some reasons why manually generating an optimal route can be challenging.

Time-consuming: Manually plotting the routes, considering all the factors, such as traffic, road conditions, and delivery schedules, can take a lot of time and effort. This can lead to inefficiencies and slowdowns in the delivery process.

Inconsistent results: Plotting routes manually takes time to achieve consistent results. Human error, such as misinterpreting maps or overlooking important information, can lead to incorrect route planning. This can lead to delays and higher fuel usage.

Lack of real-time updates: While manual route planning, accounting for real-time updates such as traffic changes or road closures can be difficult. This can lead vehicles to take longer routes, incur additional fuel costs, and ultimately impact delivery times.

Scalability: As the number of vehicles and deliveries grows, manually planning routes becomes more and more complex, making it hard to ensure consistent and efficient results.

The benefits of vehicle route optimization are not limited to on-demand delivery companies but extend to various industries such as field services, fleet management, and more.

By automating the route optimization process, companies can save time, reduce costs, and improve the overall efficiency of their operations. For instance, consider a field services company that needs to send technicians to various locations to perform maintenance and repair work.

Manual route planning makes it challenging to allocate technicians efficiently while considering real-time updates and multiple factors like traffic, road conditions, and appointment schedules. Manual route optimization can lead to longer response times, increased fuel consumption, and higher costs.

A company can promptly determine the most cost-effective and efficient route while factoring in all relevant considerations using vehicle route optimization API. This leads to faster and more efficient service, facilitating a company’s ability to scale operations and meet the surging demand for its services.

Also Read – End-to-End Route Optimization API: Vehicle Routing Problem Solver for Mobility-Driven Businesses

How vehicle route optimization helps in the following –

Last Mile Delivery

Last-mile delivery can be one of the most complex and time-consuming tasks for a delivery-based business. With the rise of e-commerce and the increasing demand for home delivery, companies face new challenges regarding last-mile delivery.

However, with the help of vehicle route optimization solutions, businesses can streamline their last-mile delivery operations, reduce delivery times, and provide better service to their customers.

One of the critical benefits of vehicle route optimization for last-mile delivery is reducing travel time. By considering real-time traffic and road conditions, an optimization API can generate the quickest route, helping delivery vehicles to reach their destination faster.

Route optimization API not only reduces delivery time but also helps to reduce fuel consumption, making last-mile delivery more efficient and cost-effective.

Another advantage of vehicle route optimization for last-mile delivery is improving delivery accuracy. By taking into account delivery schedules, appointment windows, and other scheduling constraints, the API can ensure that deliveries are made on time, improving operational efficiency and reducing the risk of missed deliveries.

For businesses that deal with large-scale, on-demand deliveries, vehicle route optimization is essential for scalability. Manually planning routes for many deliveries can be time-consuming and prone to errors. Vehicle route optimization APIs can quickly generate efficient and cost-effective routes for large-scale deliveries, making the process faster and more accurate.

NextBillion.ai’s Route Optimization API is a powerful tool that helps businesses optimize their last-mile delivery operations. The API uses machine learning algorithms and real-time data to determine the most efficient and cost-effective route for a delivery vehicle. By considering factors such as distance, traffic, road conditions, and delivery schedules, the API can generate the quickest and most fuel-efficient route for last-mile delivery.

On-demand delivery

On-demand delivery businesses face several challenges in optimizing their routes, including manual planning, real-time traffic, road conditions, delivery schedules, and scalability. NextBillion.ai’s Route Optimization API addresses these challenges and provides a fast, efficient, and cost-effective solution.

The API uses vital parameters such as distance, traffic, road conditions, delivery schedules, and scalability to optimize on-demand delivery routes. It calculates the shortest distance between two points by taking into account the following:

Real-time traffic data and road conditions to avoid congestion
Road closures and other obstacles to find alternative routes
Delivery deadlines and other scheduling constraints

By implementing NextBillion.ai’s Route Optimization API, businesses can save up to 30% on delivery costs and reduce delivery time by up to 20%, resulting in improved customer satisfaction and increased profits.

Fleet management

Vehicle route optimization helps fleet managers determine the most efficient and cost-effective routes for their vehicles, improving operational efficiency, reducing fuel consumption, and boosting profits.

NextBillion.ai’s Route Optimization API is designed to help fleet managers optimize their routes. The solution uses a variety of parameters to generate the most efficient routes, including

Distance: The solution calculates the shortest distance between two points, taking into account real-time traffic and road conditions to reduce travel time and fuel consumption.
Traffic: Real-time traffic data is used to avoid congestion and find alternative routes when necessary, helping to reduce travel time and fuel consumption.
Road Conditions: The solution takes into account road closures, construction zones, and other obstacles that could slow down delivery, allowing fleet managers to find alternative routes and avoid any potential delays.
Delivery Schedules: The solution considers delivery deadlines, appointment windows, and other scheduling constraints to ensure that deliveries are made on time, improving operational efficiency and providing customer service.
Load Capacity: The solution considers each vehicle’s load capacity, ensuring that the most efficient route is chosen for each vehicle and maximizing the use of each vehicle’s capacity.

By considering all of these factors, NextBillion.ai’s Route Optimization API generates the quickest and most fuel-efficient route, helping fleet managers streamline their operations and improve their bottom line. Businesses that use NextBillion.ai’s map data solutions have seen an average increase in profits of 15% within the first year.

Field service

Route optimization API can help field services companies to streamline their operations and improve their bottom line. With advanced algorithms and real-time data analysis, these APIs can help companies optimize their delivery routes, reduce fuel consumption, and improve customer satisfaction.

Here are some of the critical benefits that field services companies can realize by using route optimization API:

Efficient ETA management: By taking into account real-time traffic conditions and other factors, route optimization API can help companies estimate more accurate delivery times. This helps companies meet customer expectations and reduce the number of missed or late deliveries.
Efficient dispatch management: Route optimization API can help companies plan their delivery routes in the most efficient way possible, taking into account multiple factors such as delivery schedules, road conditions, and traffic. With this API, companies can reduce the time it takes to dispatch deliveries and minimize the number of miles traveled, reducing fuel consumption and improving delivery times.
Asset lives tracking: Many route optimization APIs also comes with live tracking features that allow companies to keep track of their vehicles and delivery drivers in real time. With this information, companies can monitor the progress of deliveries, ensure that drivers are following the optimal routes, and take action to resolve any issues that may arise.
Mileage-based reimbursement: Route optimization API can help companies calculate the mileage that their vehicles travel on each delivery, making it easier to process reimbursement claims for drivers. By accurately tracking the miles traveled, companies can reduce the time it takes to process these claims and minimize the risk of errors or discrepancies.

Also Read – Empower the Next Generation of Field Agents with Custom Map Solutions for Field Services

By using a route optimization API, field services companies can improve efficiency, reduce costs, and provide better customer service. The right API can help companies to optimize their delivery routes, minimize travel time, reduce fuel consumption, and increase delivery efficiency, ultimately leading to increased profitability and growth.

For these reasons, companies looking to streamline their operations and improve their bottom line should consider implementing a route optimization API like NextBillion.ai. With advanced algorithms, real-time data analysis, and user-friendly features, NextBillion.ai can help companies achieve their operational and financial goals, providing a powerful and effective solution for their delivery operations.

Why your business needs route optimization APIs

Route optimization is an essential component of modern logistics and delivery operations. It helps companies to optimize their routes, reduce fuel consumption, and improve operational efficiency, resulting in significant cost savings and increased profits. In today’s fast-paced and highly competitive business environment, route optimization is no longer a luxury but a critical requirement for companies looking to stay ahead of the curve.

For businesses, building a robust and sophisticated route optimization solution in-house can be a time-consuming and expensive process. It requires a significant resource investment, including software development, data collection and analysis, and infrastructure. Furthermore, it’s also challenging to keep pace with the constantly evolving market demands and technological advancements.

NextBillion.ai’s Route Optimization API provides a cost-effective and efficient solution for companies looking to optimize their routes. The API uses a variety of parameters to generate the most efficient ways, including distance, traffic, road conditions, delivery schedules, and load capacity. It leverages real-time data and advanced algorithms to provide businesses with the most up-to-date and accurate information, allowing them to make informed decisions and achieve their operational goals.

The API is designed to integrate easily with existing systems, providing companies with a seamless and streamlined solution. Businesses can optimize routes for various use cases, including fleet management, field services, on-demand delivery, and last-mile delivery. With NextBillion.ai, companies can focus on their core business while leaving complex routing and optimization tasks to the experts.

In addition to the time and cost savings, using NextBillion.ai’s Route Optimization API positively impacts a company’s bottom line. By optimizing routes, companies can reduce fuel consumption, improve delivery times, and enhance customer satisfaction. This leads to increased profits and a more competitive edge in the marketplace.

10 things to look for in route optimization API

When considering route optimization API for your business, it is essential to consider several factors to ensure that the solution meets your needs and delivers the desired results. The following are some of the critical elements that you should look for in a route optimization solution:

Essential Features:
Ensure that the API has the necessary features to meet your requirements. Some of the crucial elements to look for include route optimization, real-time traffic updates, real-time vehicle tracking, and delivery schedule.
Number of Parameters:
A good route optimization API should consider various parameters to generate the most efficient routes. The more parameters considered, the more accurate and effective the solution. Ensure that it can account for traffic, road conditions, delivery schedules, and load capacity.
Cost: Consider the cost, including both the initial cost and the ongoing costs, such as support and maintenance. Look for a solution that offers a competitive price without compromising quality and features.
Scalability: Ensure that it is scalable and can grow with your business. A scalable solution will allow you to add more vehicles, routes, and deliveries without needing additional hardware or software.
User-Friendly Interface: Ensure that it is easy to use and has a user-friendly interface. The solution should be intuitive so that even non-technical users can quickly get started with the API.
Integration: Ensure that it smoothly integrates with other systems used by your business, such as customer relationship management (CRM) and enterprise resource planning (ERP) systems.
Reliability: Ensure that it is reliable and that it operates 24/7. A reliable solution will ensure that you can rely on it to make critical decisions, even in challenging conditions.
Technical Support: Look for an API that offers comprehensive technical support, including online resources, email support, and telephone support. This will ensure that you can get help when you need it.
Customer Feedback: Opt for an API that other customers have reviewed and recommended. Read online reviews and customer feedback on trusted sites to better understand the solution and its capabilities.
ROI: Consider its return on investment (ROI). Look for a solution that provides a quick and measurable return on investment so that you can see a positive impact on your business as soon as possible.

Check NextBillion.ai – Route Optimization API

In conclusion, when looking for a route optimization API, it is essential to consider a range of factors, including important features, number of parameters supported, cost, scalability, user-friendly interface, integration, reliability, technical support, customer feedback, and return on investment.

Considering these factors, you can ensure that you choose a solution that meets your needs and delivers the desired results. NextBillion.ai’s Route Optimization API is extremely feature-rich, including a built-in custom map stack, the ability to account for real-time traffic updates, the ability to solve an array of routing problems with multiple constraints, and more.

Additionally, the solution offers a scalable platform, a user-friendly interface, and comprehensive technical support, making it an excellent choice for businesses of all sizes.

How to build a Swiggy like tracking experience with NextBillion.ai in VueJS

Nitin Yadav — Thu, 08 Jun 2023 13:35:38 +0000

Introduction

For products involving deliveries, ride-hailing, ecommerce, and logistics, it is important include an optimized last-mile delivery tracking experience. NextBillion.ai provides a set of mapping and location-based service APIs and SDKs that allow developers to easily integrate maps and last mile tracking into the product.

This blog was orginally published HERE

In this example, we will go through the steps to create a Swiggy like last mile delivery tracking experience with the NextBillion API and SDK using VueJS.

By the end of this tutorial you should be able to;

Create a Map using NextBillion SDK in VueJS
Add custom Markers on the NextBillion Map
Get location address and discover locations using NextBillion API
Use NextBillion Directions API to get and render directions for live order tracking.

Prerequisite

To follow this tutorial you must have

Basic understanding on Vue. VueJs Docs are a great place to start learning Vue.
NextBillion API host url and API key. Create a NextBillion account by visiting the Get API key page in NextBillion docs.

Setup

Now that we have NextBillion API host and API key, let us setup our Vue project with NextBillion SDK.

I’ll assume that as a foundation you have node.js installed on your system and you will use the node package manager (npm) to install the Vue CLI globally.
$ npm install -g vue

Create the default boilerplate project using Vue CLI in a directory where you want to manage your project.


1. npm init vue@latest

You will be prompted to add a project name and some project settings. Select the options as per your requirements. I will use nbai as my project name. After the project is created, change directory to the project, install dependencies and start the dev server.


1. npm install
2. npm run dev

Visit http://localhost:3000 from your browser and you should be able to see the default Vue application running.

Let us now add NextBillion SDK and some other dependencies to our project.


1. # NextBillion SDK
2. npm install nbmap-gl
3. 
4. # TailwindCSS for styling.
5. npm install -D tailwindcss postcss autoprefixer
6. 
7. # Fontawesome icons for map markers
8. npm i --save @fortawesome/fontawesome-svg-core
9. npm i --save @fortawesome/free-solid-svg-icons
10. npm i --save @fortawesome/free-regular-svg-icons
11. npm i --save @fortawesome/free-brands-svg-icons

Note: See TailwindCSS docs and FontAwesome docs for their respective setup documentation. You can use alternative styling and icon options as well.

Adding NextBillion SDK

Create a .env file with VITE_NEXTBILLION_API_KEY and VITE_NEXTBILLION_API_HOST values.

Now modify src/main.js file to integrate the NextBillion SDK.


1. javascript
2. import nextbillion from 'nbmap-gl'
3. nextbillion.setApiKey(import.meta.env.VITE_NEXTBILLION_API_KEY)
4. nextbillion.setApiHost(import.process.env.VITE_NEXTBILLION_API_HOST)

Now that our basic setup is complete, let’s start building.

Creating a Map Component

We will create a Vue Component (NBapiMAP) for our Map which will be responsible for:

Rendering the map using NextBillion SDK.
Given a geo-location, render Marker on the map.
Given origin and destination, render directions for order tracking.

Displaying the Map

Lets start with simple component which renders the map using NextBillion SDK when mounted to the DOM.


1. <template>
2. <div class="map-container" id="map"></div>
3. </template>
4. <script>
5. import nextbillion from "nbmap-gl";
6. import { decodePolyline } from "nbmap-gl/src/maps/decoder";
7. export default {
8. name: "NBaiMap",
9. props: {
10. center: {
11.     lat: 28.6139,
12.     lng: 77.209,
13. },
14. zoom: Number,
15. }
16. data() {
17. return {
18.     map: null
19. }
20. },
21. methods: {
22.     mapClicked: function(event) {
23.     this.$emit("update-location", event.lngLat);
24. },
25. _renderMap: function () {
26.     this.map = new nextbillion.maps.Map(document.getElementById("map"), {
27.     zoom: this.zoom || 12,
28.     center: this.center,
29. });
30. }
31.     this.map.on("click", this.mapClicked)
32. },
33. mounted() {
34.     this._renderMap();
35. }
36. }
37. </script> <style lang="postcss" scoped>
38. /* The map container will expand to its parent's height and width*/
39. .map-container {
40. @apply w-full min-h-full;
41. }
42. </style>

This component takes two props center and zoom for rendering the map. Notice that we have added a click event handler to the map. The component will emit a custom event update-location with LatLng whenever the map is click. We can use this to set user or store locations.

Lets use the NBaiMap in another component to render the Map. Create a file src/views/MapPage.vue and add following content to it.


1. <template>
2. <div class="h-screen flex flex-col flex-1">
3. <div class="h-full flex flex-1 flex-grow">
4. <NBaiMap ref="map" v-if="haveLocation" :center="userLocation"></NBaiMap>
5. </div>
6. </div>
7. </template>
8. <script>
9. import NBaiMap from "@/components/NBaiMap.vue";
10. export default {
11. name: "MapPage",
12. components: {
13. NbaiMap,
14. },
15. data() {
16. return {
17. haveLocation: false,
18. userLocation: {
19.     lat: null,
20.     lng: null,
21. },
22. };
23. },
24. methods: {
25. geolocationSuccess: function (geolocation) {
26.     this.haveLocation = true;
27.     const { latitude, longitude } = geolocation.coords;
28.     this.userLocation.lat = latitude;
29.     this.userLocation.lng = longitude;
30. },
31. },
32. mounted() {
33.     if (window.navigator.geolocation) {
34.     window.navigator.geolocation.getCurrentPosition(this.geolocationSuccess);
35. }
36. },
37. };

This page gets user location from window.navigator.geolocation.getCurrentPosition browser API.

Adding Markers to the Map

Let us now add a method to render Marker with custom font-awesome icon.


1. ...
2. methods: {
3. // ...
4. _renderMarker: function (postion, icon) {
5. const marker = new nextbillion.maps.Marker({
6. position: position,
7. map: this.map,
8. });
9. // Change the icon if provided
10. if (icon !== null){
11. const markerElement = marker.getElement();
12. markerElement.style.backgroundImage = null;
13. markerElement.innerHTML = ``;
14. }
15. return marker;
16. },
17. // ...
18. }
19. ...

The method _renderMarker takes position (Object with lat and lng keys) and icon (font-awesome icon class) and renders the icon on given position.

Lets render default Markers on map click by listenting to update-location event from NBaiMap,


1. <template>
2. ...
3. <NBaiMap @update-location="renderMarker"></NBaiMap>
4. ...
5. </template>
6. <script>
7. //...
8. methods: {
9. renderMarker: function (event) {
10. this.$refs.map._renderMarker({lat: event.lat, lng: event.lng})
11. }
12. }
13. //...
14. </script>

Now click on the map and a marker should be rendered where you clicked.

We can also render custom Markers by passing _renderMarker with font-awesome icon class as secondary argument. For example, let’s add multiple stores with fa-store icon.
this.$refs.map._renderMarker({lat: event.lat, lng: event.lng}, 'fa-store')

Fetching and displaying Directions

Add a method to render Directions given origin and destination coordinates. We will add a Polyline for route as we can use it to modify the strokeColor and strokeWidth of the route.


1. <script>
2. import { decodePolyline } from "nbmap-gl/src/maps/decoder";
3. //...
4. data() {
5. // ...
6. origin: null,
7. destination: null,
8. originMarker: null,
9. destinationMarker: null,
10. deliveryExecutiveMarker: null,
11. // ...
12. },
13. methods: {
14. _fitBounds: function (bounds, options) {
15. if (!options) {
16. options = {};
17. }
18. options.padding = 100;
19. this.map.map.fitBounds(bounds, options);
20. },
21. renderDirections: async function (origin, destination) {
22. const directions = await nextbillion.api.Directions({
23. origin,
24. destination,
25. steps: true,
26. });
27. const coords = decodePolyline(directions.routes[0].geometry, 5);
28. const path = [coords.map((item) => ({ lat: item[0], lng: item[1] }))];
29. new nextbillion.maps.Polyline({
30. path: path,
31. strokeWeight: 5,
32. map: this.map,
33. });
34. this.originMarker = this._renderMarker(origin);
35. this.destinationMarker = this._renderMarker(destination)
36. this._fitBounds([origin, destination], {});
37. this.origin = origin;
38. this.destination = destination;
39. this.$emit("update-path-duration", directions.routes[0].duration);
40. }
41. }
42. </script>

Let’s add some helper methods to our NBaiMap to add and remove custom origin, destination and live tracking Markers.


1. methods: {
2. // ...
3. _addOriginMarker: function (loc) {
4. if (this.originMarker === null) {
5. this.originMarker = this._renderMarker(loc, "fa-store");
6. }
7. },
8. _removeOriginMarker: function () {
9. if (this.originmarker !== null) {
10. this.originMarker.remove();
11. this.originMarker = null;
12. }
13. },
14. _addDestinationMarker: function (loc) {
15. if (this.destinationMarker === null) {
16. this.destinationmarker = this._renderMarker(loc, "fa-location-dot");
17. }
18. },
19. _removeDestinationMarker: function () {
20. if (this.destinationMarker !== null) {
21. this.destinationMarker.remove();
22. this.destinationMarker = null;
23. }
24. },
25. _addDeliveryMarker: function (loc) {
26. if (this.deliveryExecutiveMarker === null) {
27. this.deliveryExecutiveMarker = this._renderMarker(loc, "fa-moped");
28. }
29. },
30. _removeDeliveryMarker: function () {
31. if (this.deliveryExecutiveMarker !== null) {
32. this.deliveryExecutiveMarker.remove();
33. this.deliveryExecutiveMarker = null;
34. }
35. },
36. // ...
37. }

We can also change the route color by passing strokeColor: "#f59e0b" to nextbillion.maps.Polyline.

Add methods to move a marker. This will be used to move the live location marker and update the estimated delivery time.


1. methods: {
2.  // ...
3.  _moveMarker: function (markerRef, loc) {
4.  if (markerRef !== null) {
5.  markerRef.moveTo(loc);
6.  }
7.  },
8.  updateLiveLocation: function(loc) {
9.  this._moveMarker(this.deliveryExecutiveMarker, loc);
10.     const directions = await nextbillion.api.Directions({
11.     origin: loc,
12.     destination: this.destination,
13.     })
14.     this.$emit("update-path-duration", directions.routes[0].duration)
15.     }
16.     // ...
17.     }

You can see the complete component at github link.

Getting User and Store Location

Let us now use our NBaiMap component and create SetAddress component to get user and store location. I will use localStorage to save these locations. You would want to store these locations to your database using a backend server.

Add basic template and methods. Styles are removed for brevity.


1. <template>
2. <div class="h-screen flex flex-1 flex-col">
3. <div class="header">Set {{ addressKey }} Address</div>
4. <div class="address-controls-container">
5. <div v-if="!addressSet" class="search-container">
6. <div class="input z-index-50">
7. <input id="searchbox" class="input-box" v-model="q" />
8. <div class="suggestion-container" v-show="showSuggestions">
9. <div class="suggestion">
10. <div v-for="place in suggestions" :key="place" @click="flyToLocation(place)">{{ place.address.label }}</div>
11. </div>
12. </div>
13. </div>
14. <button class="search-btn" @click="discover">Search</button>
15. </div>
16. <div v-else class="flex my-auto">
17. <div class="selected-address">{{ address.address.label }}</div>
18. <button class="btn" @click="confirmLocation">Confirm</button>
19. <button class="btn" @click="resetLocation">Change</button>
20. </div>
21. </div>
22. <div class="">
23. <NBaiMap @update-location="setNewAddress" ref="map" :center="userLocation" :zoom="14"></NBaiMap>
24. </div>
25. </div>
26. </template>

1. <script>
2. import NBaiMap from "@/components/NbaiMap.vue";
3. export default {
4. name: "SetAddress",
5. components: {
6. NbaiMap,
7. },
8. props: {
9. addressKey: {
10. type: String,
11. default: "Home",
12. },
13. },
14. data() {
15. return {
16. q: "",
17. userLocation: {
18. lat: null,
19. lng: null
20. }
21. }
22. },
23. methods: {
24. confirmLocation: function () {
25. localStorage.removeItem(this.addressKey);
26. localStorage.setItem(this.addressKey, JSON.stringify(this.address));
27. this.$emit("address-set");
28. },
29. resetLocation: function () {
30. if (this.marker) {
31. this.marker.remove();
32. }
33. this.addressSet = false;
34. this.address = null;
35. },
36. renderMarker: function (loc) {
37. if (this.marker) {
38. this.marker.remove();
39. }
40. this.marker = this.$refs.map.renderMarker(loc);
41. },
42. geolocationSuccess: function (geolocation) {
43. const { latitude, longitude } = geolocation.coords;
44. this.userLocation.lat = latitude;
45. this.userLocation.lng = longitude;
46. },
47. flyToLocation: function (place) {
48. this.address = place;
49. this.addressSet = true;
50. this.showSuggestions = false;
51. this.$refs.map.map.flyTo({
52. center: place.position,
53. zoom: 14,
54. });
55. this.renderMarker(place.position);
56. },
57. },
58. mounted() {
59. if (window.navigator.geolocation) {
60. window.navigator.geolocation.getCurrentPosition(this.geolocationSuccess);
61. }
62. }
63. }
64. </script>

Let’s add the discover method to fetch address suggestions using NextBillion discover API.


1. methods : {
2.  // ...
3.  discover: async function () {
4.  const resp = await axios.get(`https://${import.meta.env.VITE_NEXTBILLION_API_HOST}/h/discover`, {
5.  params: {
6.  key: import.meta.env.VITE_NEXTBILLION_API_KEY,
7.  q: this.q,
8.  at: `${this.userLocation.lat},${this.userLocation.lng}`,
9.  },
10.     });
11.     this.suggestions = resp.data.items;
12.     this.showSuggestions = true;
13.     },
14.     // ...
15. }

We can select any suggested location to render a Marker on the Map and confirm the store or home location.

Creating the Order Tracking Component

Let us now put everything together and create an Order Tracking screen. We will use the NBaiMap component created in above section to create a live order tracking component. I am using the storeLocation and homeLocation saved to localStorage from previous step. You will want to save these loctions to your backend and fetch them to get Directions.

1. <template>
2. <div class="h-screen flex flex-col flex-1">
3. <div class="h-full flex flex-1 flex-grow">
4. <NBaiMap @update-path-duration="updatePathDuration" ref="nbaimap"></NbaiMap>
5. </div>
6. <div class="delivery-time-container">
7. <div class="delivery-time">
8. <div class="delivery-duration">{{ duration }}</div>
9. <div class="text-sm">mins</div>
10. </div>
11. <div v-if="homeAddress.address !== undefined" class="delivery-address">
12. Delivering to - {{ homeAddress.address.label }}
13. </div>
14. </div>
15. </div>
16. </template>
17. <script lang="ts">
18. import NBaiMap from "@/components/NBaiMap.vue";
19. export default {
20. name: "OrderTracking",
21. components: {
22. NBaiMap,
23. },
24. data() {
25. return {
26. duration: 0,
27. storeAddress: {},
28. homeAddress: {},
29. };
30. },
31. methods: {
32. updatePathDuration: function (duration) {
33. this.duration = Math.floor(duration / 60);
34. },
35. renderDirections: async function () {
36. this.$refs.nbaimap.renderDirections(
37. this.storeAddress.position,
38. this.homeAddress.position
39. );
40. },
41. updateLiveLocation: async function () {
42. // fetch live location from your backend
43. let liveLocationLatLng = await axios.get('backend-url');
44. this.$refs.nbaimap.updateLiveLocation(liveLocationLatLng)
45. }
46. },
47. mounted() {
48. const storeAddress = JSON.parse(localStorage.getItem("Store"));
49. const homeAddress = JSON.parse(localStorage.getItem("Home"));
50. // or fetch these locations from backend
51. if (storeAddress === null || homeAddress === null) {
52. this.$router.push({ name: "home" });
53. return;
54. }
55. this.storeAddress = storeAddress;
56. this.homeAddress = homeAddress;
57. this.renderDirections();
58. },
59. };</script>

Watch the demo on Youtube

Thats it! We can now use the OrderTracking component anywhere throughout our application for last mile delivery status.

Next Steps

The full code for this example project can be found at Github Repo URL. Clone the project and get mapping!

In our subsequent articles, we’ll be looking into optimizing delivery and delivery tracking using NextBillion Route Optimization

How to Embed Map on a Website or App Using NextBillion.ai API in 10 Minutes

Nitin Yadav — Wed, 31 May 2023 13:27:13 +0000

In this technical blog, we will guide you through the process of adding a map to your website or app using the NextBillion.ai API in just 10 minutes.

This content was originally posted HERE

We will cover the necessary steps to integrate the API, including obtaining an API key, and the code snippets required to display the map on your website or app.

By the end of this tutorial, you will have a fully functional map on your website or app, which you can customize to fit your needs. So, whether you’re a developer looking to embed a map feature to your project or a business owner looking to add a map to your website, this tutorial is for you.

Let’s get started!

How to embed a map on a website step-by-step guide

Embedding a map to a website can greatly enhance the user experience and provide valuable context for your content. One way to quickly and easily add a map to your website is by using NextBillion.ai’s API.

To add a map to your website within 10 minutes using NextBillion.ai API, you can follow these steps:

Sign up for a trial API key on the NextBillion.ai website. This key will be used to authenticate your requests to the API.
Include the NextBillion.ai API javascript library in the head of your HTML document:


1. <script src="https://maps-gl.nextbillion.io/maps/v2/api/js"></script>

This library provides the necessary functionality to interact with the API and display the map on your website.

Create a div element in your HTML document where you want the map to be displayed:


1. <div id="map"></div>

This div will act as a container for the map, and its ID should be set to “map” for the initialization function to work correctly.

Initialize the map in your javascript:


1. nb.maps.init(
2. { apiKey: 'YOUR_API_KEY', 
3.   elementId: 'map', 
4.   center: [LATITUDE, LONGITUDE], 
5.   zoom: ZOOM_LEVEL 
6. }
7. );

Initialize the map in your javascript by calling the nb.maps.init() function and passing in a configuration object containing your API key, the ID of the div element, and the desired center and zoom level for the map.

Replace ‘YOUR_API_KEY‘ with your actual API key, set the center to the latitude and longitude you want the map to center on, and set the zoom level to the desired value.
Add some styles to the div


1. #map{ 
2.   width:100%; 
3.   height:500px; 
4. }

You can use CSS to style the div element and adjust the size of the map to fit your website layout.

Overall, this is a simple and easy way to add a map to your website using NextBillion.ai API. With just a few lines of code, you can quickly and easily integrate a fully-functional map into your website, and customize it to suit your needs.

How to embed a map into an app using NextBillion.ai Maps API in just ten minutes (Step-by-step Guide)

In this section of this technical blog post, we will be discussing how to integrate a map into an app using NextBillion.ai Maps API in just ten minutes.

NextBillion.ai offers a wide range of mapping services and functionalities that can be easily integrated into any app, making it a great choice for developers.

Step 1: Sign up for a NextBillion.ai account and log in.

Step 2: Once logged in, navigate to the Maps API section and generate an API key. This key will be used to authenticate your app and allow it to access the mapping services provided by NextBillion.ai.

Step 3: Import the necessary libraries for the map functionality, such as NextBillion.ai Maps SDK, into your app. These libraries provide the necessary tools and functions to implement the map functionality.

Step 4: Initialize the map and set the API key in the appropriate configuration file. This will be done differently depending on the platform you are using (iOS or Android).

Step 5: Add a map view to the layout of your app and connect it to the code. This is typically done through the use of XML layout files or storyboards.

Step 6: Use the map’s functions, such as moveCamera and addMarker, to customize the map according to your needs. These functions allow you to control the camera’s position, add markers and other overlays to the map, and more.

Step 7: Test the map functionality in the app by simulating or running it on a device. This will allow you to ensure that the map is working as expected and that there are no issues with the implementation.

Step 8: Integrate any additional features or customization as needed. This could include adding custom markers, creating custom overlays, or adding additional map layers.

Step 9: You have successfully integrated NextBillion.ai Maps API in your app and now you can use maps in your app.

In conclusion, integrating a map into an app using NextBillion.ai Maps API is a straightforward process that can be completed in just ten minutes. The platform offers a wide range of mapping services and functionalities that can be easily integrated into any app, making it a great choice for developers. Keep in mind, the above steps may vary depending on the platform and specific implementation. This is just a general guide.

How to integrate a map into a Flutter app using NextBillion.ai Maps API in just ten minutes

Integrating a map into a Flutter app can greatly enhance the user experience, allowing for location-based features such as showing nearby locations or providing directions.

One option for adding a map to your app is using the NextBillion.ai Maps API. In this section of the blog post, we’ll show you how to integrate a NextBillion.ai map into your Flutter app in just ten minutes.

Before getting started, you’ll need to sign up for a trial API key on the NextBillion.ai website. Once you have your API key, you can begin the integration process.

Step 1: Install the package

First, you’ll need to add the nextbillion_maps package to your pubspec.yaml file. This package provides the necessary code to interact with the NextBillion.ai Maps API.


1. flutter pub add @nbai/nbmap-gl

Step 2: Import the package

Next, in your Dart code, you need to import the package:


1. import 'package:flutter/material.dart';
2. import 'package:nbmap_gl/nbmap_gl.dart';

Step 3: Add the NextBillionMap widget

In your app’s build method, you can add a NextBillionMap widget.


1. class MyApp extends StatefulWidget {
2.   @override
3.   _MyAppState createState() => _MyAppState();
4. }

It defines a Flutter widget called ‘MyApp’ which is a ‘StatefulWidget’.

In Flutter, a StatefulWidget is a widget that can change its state during the lifetime of the app. The MyApp widget creates an instance of a ‘separate _MyAppState’ class that holds the mutable state of the MyApp widget.

The @override annotation before the createState() method is a Dart feature that indicates that this method is intended to override a method with the same name that is defined in the parent class StatefulWidget.

The createState() method is a factory method that returns a new instance of the _MyAppState class. This method is called by the framework when the MyApp widget is first created.

In other words, this code creates a new class MyApp that extends StatefulWidget and is able to change its internal state, it also creates a new class _MyAppState that holds the internal mutable state of the MyApp class.

Step 4: Add some styles

Finally, you can add some styles to the map to ensure it fits well within your app’s layout.


1. class _MyAppState extends State {
2.   @override
3.   Widget build(BuildContext context) {
4.     return Scaffold(
5.       body: NBMap(
6.         apiKey: 'your-api-key',
7.         initialZoom: 12,
8.         styleJson: 'https://api.nextbillion.io/maps/streets/style.json',
9.         initialPosition: LatLng(34.08572, -118.324569),
10.       ),
11.     );
12.   }
13. }

The build method returns a Scaffold widget, which is a basic layout structure in Flutter. The body property of the Scaffold widget is set to an instance of the NBMap widget. The properties apiKey, initialZoom, styleJson, and initialPosition are passed as arguments to the NBMap widget to configure the map.

The ‘Scaffold’ widget provides a basic layout structure and can be used to create a consistent layout across an app. It can also be used to provide common functionality such as a drawer, bottom sheet, and app bar.

When the ‘build’ method is called, the framework uses the returned widget tree to create the elements on the screen, and it will automatically call the build method again if the state of the _MyAppState class changes.

In summary, the code snippet provided defines a stateful widget in Flutter, by creating a new class MyApp that extends StatefulWidget and is able to change its internal state, it also creates a new class _MyAppState that holds the internal mutable state of the MyApp class, and uses the build method to create the user interface of the widget.

Note that this is just an example and may require additional adjustments to work properly in your specific use case.