Measure distances

Click points on a map to create lines that measure distanced using turf.length. See the example: https://docs.mapbox.com//mapbox-gl-js/example/measure/

by jscastro76

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<script src="https://npmcdn.com/@turf/[email protected]/turf.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css">



<div id="map"></div>
<div id="distance" class="distance-container"></div>
<div id="coords" class="distance-container coords"></div>

CSS

body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

    .distance-container {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1;
    }
    
    .distance-container.coords {
        position: absolute;
        top: 40px;
        left: 10px;
        z-index: 1;
    }

    .distance-container > * {
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 11px;
        line-height: 18px;
        display: block;
        margin: 0;
        padding: 5px 10px;
        border-radius: 3px;
    }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoianNjYXN0cm8iLCJhIjoiY2s2YzB6Z25kMDVhejNrbXNpcmtjNGtpbiJ9.28ynPf1Y5Q8EyB_moOHylw';
		var map = new mapboxgl.Map({
		  container: 'map',
		  style: 'mapbox://styles/mapbox/streets-v11',
		  center: [2.3399, 48.8555],
		  zoom: 19
		});

		var distanceContainer = document.getElementById('distance');
		var coordsContainer = document.getElementById('coords');

		// GeoJSON object to hold our measurement features
		var geojson = {
		  'type': 'FeatureCollection',
		  'features': []
		};

		// Used to draw a line between points
		var linestring = {
		  'type': 'Feature',
		  'geometry': {
		    'type': 'LineString',
		    'coordinates': []
		  }
		};

		map.on('load', function() {
		  map.addSource('geojson', {
		    'type': 'geojson',
		    'data': geojson
		  });

		  // Add styles to the map
		  map.addLayer({
		    id: 'measure-points',
		    type: 'circle',
		    source: 'geojson',
		    paint: {
		      'circle-radius': 5,
		      'circle-color': '#000'
		    },
		    filter: ['in', '$type', 'Point']
		  });
		  map.addLayer({
		    id: 'measure-lines',
		    type: 'line',
		    source: 'geojson',
		    layout: {
		      'line-cap': 'round',
		      'line-join': 'round'
		    },
		    paint: {
		      'line-color': '#000',
		      'line-width': 2.5
		    },
		    filter: ['in', '$type', 'LineString']
		  });

		  map.on('click', function(e) {
		    var features = map.queryRenderedFeatures(e.point, {
		      layers: ['measure-points']
		    });

		    // Remove the linestring from the group
		    // So we can redraw it based on the points collection
		    if (geojson.features.length > 1) geojson.features.pop();

		    // Clear the Distance container to populate it with a new value
		    distanceContainer.innerHTML = '';

		    // If a feature was clicked, remove it from the map
		    if (features.length) {
		      var id = features[0].properties.id;
		      geojson.features = geojson.features.filter(function(point) {
		       ...