user16071820
user16071820

Reputation:

Mapbox GL JS with Directions. Disable setOrigin and setDestination on click

I'm using Mapbox GL JS with directions.

The default behavior for the directions feature is that it sets an origin and a destination for the directions where you click when you click on the map layer. I want to disable this feature.

How do I do so? What I'm doing now doesn't work.

    <script src='https://api.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />

    <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 id='map'></div> 

    <script>    
        mapboxgl.accessToken = 'token';
    
        var map = new mapboxgl.Map({
            container: 'map',
            center: [76, -122],
            zoom: 12
        });
    
        var directions = new MapboxDirections({
            accessToken: mapboxgl.accessToken
        });
    
        map.addControl(directions,'top-right');

        //Disable "onclick" directions
        map.directions.on('click', function(e) {
            e.preventDefault();
        });
        map.on('click', function(e) {
            e.preventDefault();
        });
        directions.on('click', function(e) {
            e.preventDefault();
        });
    </script>

Upvotes: 2

Views: 945

Answers (1)

Marcel Ray
Marcel Ray

Reputation: 1690

There's an interactive option in the MapboxDirections constructor which you can set to false:

    var directions = new MapboxDirections({
        accessToken: mapboxgl.accessToken,
        interactive: false
    });

See the API documentation here: https://github.com/mapbox/mapbox-gl-directions/blob/master/API.md#mapboxdirections

Upvotes: 2

Related Questions