Get Optimized pickup route from source to destination by using Mapbox and Angular 5/6
07 Oct 2018
Let’s say you are building one app and you want to show the efficient path for collecting garbage from multiple location and then disposing it off at the destination. So in short it’s like waste management app which is being used by worker.
Ok so right now for this kind of feature we will be making use of Optimization API which is provided by Mapbox and it is really convenient to use it. Documentation is very well documented and flexibility is there in terms of work. Here Optimization API let’s you use 12 location in maps (not more than that) and then it will give you the most efficient path which the driver needs to follow. So you need to just make an API request and make use of the response so that you can show it in Mapbox map.
It is quite easy to replicate in simple HTML file but here we will try to do it in Angular 6 so that you can understand how it will work (not much of a change but for example).
Step 1: Creating Angular Project
Skip this step if you have Angular project already setup. So we will start by creating simple project by doing:
ng new garbage
Great, now after setting up this project, we will create one component:
ng generate component map
Now you have basic project set up. Let’s start by installing dependencies
That’s it, make sure you have these things in package.json and properly installed.
Step 3: Setting up Initial Map view
Let’s see how we can make use of mapbox-gl and show one simple map in our component. So we’ll start with editing the map.component.ts:
First make sure you import mapbox-gl in your component by doing:
Then import environments so that we can have access-token from there:
Since we are import environment then we need to add access token there. Make sure you get access token from mapbox and then paste it in environment.ts and environment.prod.ts
Example:
After declaring the access token we need to tell mapbox that which access token we need to use and we generally declare this in our constructor by:
Now our mapbox is ready to do some work. Our next step is to figure out which map we need to use. With mapbox you have freedom to use any type of map, dark, street, satellite and more and we do this in Mapbox Studio where you can customize your map or restrict your map view to any state or country which is pretty nice thing. Once decided we define our style. So our typescript must look like this (with additional changes):
Here you can see we have one style defined which I got from Mapbox Studio and here I am using it. Also we have latitude and longitude defined so that we can use it later.
Now in ngOnInit we initialized our map where we defined one container as ‘map’ which tells that we need to show our map in id map defined in html. Same style is defined, zoom is set (low - highest, 0-14), and there I defined center of map from where it will start loading. Note that it is not showing your present location right now but showing some random location with center defined.
Now in map.component.html file paste this:
Now your map must be visible. To view this map just edit app.component.html and use:
With this you should be able to see your map in root path. Now serve your application and you should be able to see your map as shown in image:
Great, now we can see our map. Now our next step is to define our position and the destination position. Again we need to understand that we are creating optimized path from source location to destination by picking garbage from random locations that’s why source and destination needs to be defined from start.
Step 4: Having Source and destination
In mapbox when we customize any map or add anything, for that what we usually do is that we add layers. It means that you add layers on top of map one by one to show them. So now if we need source location (your real location) then first you will get your coordinates and then you will add one layer with customize icon on map with the given lat/lon. To get location we will use navigator.geolocation . Once you get the location you need to move to that location, so we will use ‘flyTo’ function.
So in your map-box.component.ts we will add these things in our ngOnInit function. There will be many things to add so bear with me while reading this:
We added 2 layers: First for circle and other for symbol with given styling.
Record geolocation of the user then update that in map
Add div with truck class so that we can show the position of truck
Now since we are adding html dynamically we need to use ViewEncapsulation so that we can add css styling on the go.
We used turf featureCollection for truck location
Once this is done, make sure you save and then serve your project and you should be able to see the map with warehouse and truck location. Make sure you change the warehouse location near your location and you should see something like this:
Step 5: Using Optimization API
Now we will make use of Optimization API, but before that we need some random map location from where truck will pick up the garbage. So originally we must use API and get data from server but here we will hard code those locations in our code.
To get random location we will use our function:
Now in newDropoff we will define our GeoJSON data in proper format and save it in our variable and also update the map based on that. This will written as:
Now we need to write one assembleQueryUrl which main motive is to make a request to that API url and get the response based on that.
Now at last we need to add the layer to show the path on the path, so we will add our custom layer named as ‘road-label’, also make sure that this ‘road-label’ layer is preset in our mapbox styling (when we edit in mapbox studio) so that it can show those path in maps. So to summarize our map.component.ts should look like:
Once you save this and serve your application you should be able to see your updates on map. Now in production level you can get random location through REST API and then show it. With mapbox feature you can even add navigation button navigate the driver based on route. Final view:
And now you got this working. Now this is very simple view showing these optimized route but with your skills you can highly customize it to show many things at the same time like distance, time and many more things which I have no discussed here. Obviously the official documentation is much more descriptive and here I simply showed the easy way of how we can get it working.