独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

Making a Bosnian Wine Route using Mapbox Optimized Directions.

I thought it would be a fun project to create a bike wine route of Bosnia. The official wine route website lists the locations but has no route. It’s not very user friendly, plus the Mapquest OSM baselayer no longer exists. So I have decided to set about to try and to create a wine route for tourists and other wine enthusiasts to follow.

Time: 2 hours

We need to “borrow” the locations of the wineries. This Drupal website offered has no easy way to download the wine locations. It looks like it used a openlayers plugin which lead me to take a look in the source code. An easy way to do this is to hit Ctrl+U

I can use the search function Ctrl+F to find “Point.” After every Point a latitude and longitude of each winery is displayed. In the future we can expect to gather the rest of the info but for now the locations will be sufficient.

Using this method in a short time we were able to gather 24 winery locations.

Time: 1 hour

Doing a quick search on Mapbox’s website it looks like they already have a half decent code to get from point A to B and make it look pretty.

Time: 20 minutes

In lines 28–33 I have placed the directions for the mapbox style, location and zoom level.

Here we are going to change this to the area of the world we are looking at and the zoom level. Thankfully, the wine route website has done this for us.

When we look at our code now it will look like this.

We can also go ahead and add a new style in the map.

Time: 1 Hour

Let’s add that route. Now let’s analyze lines 39–42

From this code we will need to add each winery as a variable. We can do that by adding them in 1 by 1. I will leave in the var start and var end since eventually we would like to start/end at maybe a hotel or main tourist site.

The next step is to modify the routing code to add all the wineries.

This will take the lat and long of each of the variables. For the wineries it will read:

It worked! The next step is to add the other 21 more wineries.

Time: 40 minutes

Let’s also go ahead and add the wineries as dots on the map. If you look at the code that adds points we will need to add:

We get results that will look like this 23 times.

Time: 3 hours and some help from Patrick Niklaus at Mapbox!

The route is not optimized, we will need to modify the routing code to do so. For those not paying attention; this code gives us directions.

becomes

Thanks to insight from Patrick Niklaus at Mapbox! (If I win I will owe you a tadem bike ride thru the wine fields of southern BiH)

We will also need to change the following code.

to

Split the Maps

Time: 30 minutes

Because there are to many wineries to fit in just one wine route I went ahead and split them up into a northern and southern regions making prettier maps. This was easily done by removing the wineries in the directionsRequest variable. I also needed to remove a few wineries from the northern wine route to keep it down to 12. Thanks Mapbox for thinking that 12 glasses of wine is enough in one wine tour! The optimization api only allows 12 locations.

Time: 30 minutes

Time: 1 hour

The last step needed is to display the map on a website. The website that I would like to put this on is a Wordpress website. I will need to use the <iframe> html framework. An example of this code can be found on the Mapbox website.

My hosting platform uses Cpanel software to control the back end of the website. In Cpanel you would need to upload your html file.

Now that your html file is public you can insert iframe html code into your wordpress site.

In the end I was successful in creating a optimized wine route.

Happy Mapping

Here is a video of drones, people riding bikes, and drinking wine in the Bosnian countryside.

Color the Routes

Let’s also make the lines nicer using the Paint attribute:

Add the Ciro Trail

Time: 1 hour

We can then color it and add it to the map. We can then add a label for it (by duplicating one of the pre-existing road labels) and set it to the name of the bike trail.

The End!

Add a comment

What is your view?

Send

Related posts:

Will McAvoy versus Ethical Journalism

Truth. Impartiality. Humanity. Accuracy. These principles are four of the core fundamentals of ethical journalism. They are not debatable or negotiable. Taking that into consideration when analyzing…

key factors for successful document management system

Have you ever considered how document handling and processing can impact your business and the effect this can have on an employee’s average working day? If you’ve ever lost important documents, you…

How to Customize Visual Studio Code Theme Colors

Since I started using VS Code, I have tried at least a thousand color themes, and I constantly feel like a jerk for never committing to any of them. A few days ago, I announced on Twitter that I…