Utilize Mapbox-GL.JS to animate several points along designated routes

Question

Utilize Mapbox-GL.JS to animate several points along designated routes

I'm encountering issues with the following example:
Animate a point along a route My goal is to add another point and routes in the same map container.
Here's what I've tried so far:

mapboxgl.accessToken = 'pk.eyJ1IjoicGFwYWJ1Y2t0IiwiYSI6ImNqa2k3azQ1dzA1Zmgza3B1czIxOGhhaW4ifQ.h5OT3NaQf0vcxx3g1q1cXw';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [118.0148634, -2.548926],
    zoom: 4.1
});
/**
* Similar routes and points code from original text goes here...
*/
// A single point that animates along the route.
// Coordinates are initially set to origin.
/**
* More points and routes code from original text goes here...
*/

// Calculate distance between start/end points in kilometers.
for(i=0;i<2;i++) {
   var lineDistance = turf.lineDistance(route.features[0], 'kilometers');
}
   console.log(lineDistance) 

/**
* Animation and other map functionalities code from original text goes here...
*/

.overlay {
    position: absolute;
    top: 10px;
    left: 30px;
}

.overlay button {
    font:600 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    background-color: #3386c0;
    color: #fff;
    display: inline-block;
    margin: 0;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 3px;
}

.overlay button:hover {
    background-color:#4ea0da;
}
body { margin:0; padding:0; }
#map { top:0; bottom:0; width:100%;height: 600px }

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Animate a point along a route</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

   
</head>
<body>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js' charset='utf-8'></script>
<div class="col-md-12">
    <div class="card text-white">
      <h5 class="card-header bg-info">Featured</h5>
      <div class="card-body">
        <div class="col-md-12">
            <div id='map'></div>
            <div class='overlay'>
                <button id='replay'>Replay</button>
            </div>
        </div>    
      </div>
    </div>
</div>

</body>
</html>

Nevertheless, after numerous attempts, Point 1 and Line 1 reach the end successfully while Point 2 and Line 2 stop after Point 1 and Line 1 reach the end. This is my 10th attempt and in previous attempts there were errors in the loop structure. What steps should I take next?

javascript html maps mapbox mapbox-gl-js

Answer 1

Answer №1

One issue arises from the difference in lengths between the two routes, causing a deviation in the coordinates for the shorter route while still progressing through the longer one. The modification I made below addresses this problem and upon testing it, my edit was successful without any errors.

To achieve uniform speeds between the routes, adjustments are needed. Currently, the shorter route completes much faster and moves at a quicker pace than the longer one. To equalize their speeds, fewer steps should be used for the shorter route. If aiming for completion in the same timeframe, more points must be added to the shorter route or decrease the refresh rate of the shorter one.

mapboxgl.accessToken = 'pk.eyJ1IjoicGFwYWJ1Y2t0IiwiYSI6ImNqa2k3azQ1dzA1Zmgza3B1czIxOGhhaW4ifQ.h5OT3NaQf0vcxx3g1q1cXw';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [118.0148634, -2.548926],
    zoom: 4.1
});
var route = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                   // Coordinates for the first route
                ]
            }
        },
        {
          "type": "Feature",
          "properties": {},
          "geometry": {
                "type": "LineString",
                "coordinates": [
                      // Coordinates for the second route
                ]
            }
        }
    ]
};

// Additional JavaScript code provided...

// CSS styles for overlay button

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Animate a point along a route</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
    // Other included libraries...
   
</head>
<body>
    <div id='map'></div>
    <div class='overlay'>
        <button id='replay'>Replay</button>
    </div>
    <!-- Additional HTML body content here -->

</body>
</html>

Answer 2

One issue arises from the difference in lengths between the two routes, causing a deviation in the coordinates for the shorter route while still progressing through the longer one. The modification I made below addresses this problem and upon testing it, my edit was successful without any errors.

To achieve uniform speeds between the routes, adjustments are needed. Currently, the shorter route completes much faster and moves at a quicker pace than the longer one. To equalize their speeds, fewer steps should be used for the shorter route. If aiming for completion in the same timeframe, more points must be added to the shorter route or decrease the refresh rate of the shorter one.

mapboxgl.accessToken = 'pk.eyJ1IjoicGFwYWJ1Y2t0IiwiYSI6ImNqa2k3azQ1dzA1Zmgza3B1czIxOGhhaW4ifQ.h5OT3NaQf0vcxx3g1q1cXw';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [118.0148634, -2.548926],
    zoom: 4.1
});
var route = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                   // Coordinates for the first route
                ]
            }
        },
        {
          "type": "Feature",
          "properties": {},
          "geometry": {
                "type": "LineString",
                "coordinates": [
                      // Coordinates for the second route
                ]
            }
        }
    ]
};

// Additional JavaScript code provided...

// CSS styles for overlay button

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Animate a point along a route</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
    // Other included libraries...
   
</head>
<body>
    <div id='map'></div>
    <div class='overlay'>
        <button id='replay'>Replay</button>
    </div>
    <!-- Additional HTML body content here -->

</body>
</html>

Utilize Mapbox-GL.JS to animate several points along designated routes

Answer №1

Similar questions

What is the technique to transfer the value from collection_select to the onchange method in Rails?

A guide on adjusting a function to pause execution until a line is complete

Having difficulties in storing the checkbox selections

Tips for refreshing views with Angular JS

Initialization of Angular provider $get is missing

Tips for maintaining an open ng-multiselect-dropdown at all times

How to change class names dynamically in Vue.js?

How can you move away from using the url:port scheme with socket.io?

The mark-compacts were not efficient enough, they approached the heap limit and as a result, the allocation failed. The JavaScript

Imagine a complex JSON structure with multiple levels of nesting

What is the best way to manipulate and update individual counters in React components?

Is it a wise decision to provide the client with a new token just one minute before the expiration of the old one?

Assigning index values to child rows in AngularJS: a step by step guide

Cool ways to showcase HTML content in AngularJS

Using the attribute data-ng-repeat along with the <option> tag allows for dynamic iteration and

How can I ensure that my HTML form inputs are consistently displayed in the browser when using jQuery/AJAX and SQL queries without needing to

Dynamically loading an iFrame source and automatically populating input forms using Javascript explained

Having difficulty generating dynamic rows and tree dropdowns in AngularJS

What could be causing issues with angularjs ng-include not functioning properly in Chrome at times?

The html() method is not functioning correctly in ajax requests