How To Create Navigation Direction MAP Using MAPBOX

Introduction

In this article, we will learn how to create navigation direction map (route by route) using MAPBOX.

If you have not seen the Mapbox Integration then I recommend you to refer that first.

Let’s Begin.

Find Current Location Option In Map

    map.addControl(new mapboxgl.GeolocateControl({
          positionOptions: {
              enableHighAccuracy: true
          },
          trackUserLocation: true
      }));

Output:

Create Navigation Direction Map

Calculate optimal driving, walking, and cycling
Instructions turn-by-turn

Open the Index.cshtml and add the below code in it.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Display buildings in 3D</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 70%;
            height: 50%;
            margin-top: 130px;
        }
    </style>
</head>
<body>
    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.min.js"></script>
    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.css" type="text/css">
    <!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 -->
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.js"></script>
    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.css" type="text/css">
    <div class="row">
        <div id="map"></div>

    </div>

    <script>
        mapboxgl.accessToken = "Your Default Public Token";
        var map = new mapboxgl.Map({
            style: 'mapbox://styles/mapbox/light-v10',
            center: [-80.3256, 27.4467],
            zoom: 15.5,
            pitch: 45,
            bearing: -17.6,
            container: 'map',
        });

        var labelLayerId;
        map.on('load', function () {
            // Insert the layer beneath any symbol layer.
            var layers = map.getStyle().layers;

            for (var i = 0; i < layers.length; i++) {
                if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
                    labelLayerId = layers[i].id;
                    break;
                }
            }

            // The 'building' layer in the Mapbox Streets
            // vector tileset contains building height data
            // from OpenStreetMap.

            map.addLayer(
                {
                    'id': 'add-3d-buildings',
                    'source': 'composite',
                    'source-layer': 'building',
                    'filter': ['==', 'extrude', 'true'],
                    'type': 'fill-extrusion',
                    'minzoom': 15,
                    'source': 'any',
                        'paint': {
                        'fill-extrusion-color': '#aaa',

                        // Use an 'interpolate' expression to
                        // add a smooth transition effect to
                        // the buildings as the user zooms in.
                        'fill-extrusion-height': [
                            'interpolate',
                            ['linear'],
                            ['zoom'],
                            15,
                            0,
                            15.05,
                            ['get', 'height']
                        ],
                        'fill-extrusion-base': [
                            'interpolate',
                            ['linear'],
                            ['zoom'],
                            15,
                            0,
                            15.05,
                            ['get', 'min_height']
                        ],
                        'fill-extrusion-opacity': 0.6
                    }
                },

                labelLayerId
            );

        });
        map.addControl(
            new MapboxDirections({
                accessToken: mapboxgl.accessToken
            }),
            'top-right'
        );
        map.addControl(new mapboxgl.GeolocateControl({
            positionOptions: {
                enableHighAccuracy: true
            },
            trackUserLocation: true
        }));
    </script>

</body>
</html>

Output:

If you have any questions or issues about this article, please let me know and you can check more information here.

Sagar Rana

Sagar Rana is a Web Developer in Vision Infotech. He has strong skills and knowledge of ASP.NET C#, ASP.NET MVC, .Net Core, Jquery, JavaScript, WEB API, React.js, ADO.Net, Entity Framework, SQL and different integration like Xero, Stripe, Zoho CRM, Square, PayTM, PayKUN, RazorPay, Quickbook Desktop etc.