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>

CSS

body {
			margin: 0;
			padding: 0;
		}

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

JavaScript

mapboxgl.accessToken = 'PASTE HERE YOU TOKEN';
		var map = (window.map = new mapboxgl.Map({
		  container: 'map',
		  zoom: 0.1,
		  center: [0, 0],
		  style: 'mapbox://styles/mapbox/light-v10',
		  antialias: true // create the gl context with MSAA antialiasing, so custom layers are antialiased
		}));



		// add the custom style layer to the map
		map.on('load', function() {
		  canvas = map.getCanvas();
		  map.getCanvasContainer().style.cursor = 'default';
		  var flashingSquare = {
		    width: 64,
		    height: 64,
		    data: new Uint8Array(64 * 64 * 4),

		    onAdd: function(map) {
		      this.map = map;
		    },

		    render: function() {
		      // keep repainting while the icon is on the map
		      this.map.triggerRepaint();

		      // alternate between black and white based on the time
		      var value = Math.round(Date.now() / 1000) % 2 === 0 ? 255 : 0;

		      // check if image needs to be changed
		      if (value !== this.previousValue) {
		        this.previousValue = value;

		        var bytesPerPixel = 4;
		        for (var x = 0; x < this.width; x++) {
		          for (var y = 0; y < this.height; y++) {
		            var offset = (y * this.width + x) * bytesPerPixel;
		            this.data[offset + 0] = value;
		            this.data[offset + 1] = value;
		            this.data[offset + 2] = value;
		            this.data[offset + 3] = 255;
		          }
		        }

		        // return true to indicate that the image changed
		        return true;
		      }
		    }
		  }

		  map.addImage('flashing_square', flashingSquare);
		});