Test MapBox

by aidankirrane

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css">
<script src="https://master.fieldtec.com/vendor/custom-component-modules/car_tracking_animation/scripts/turf.min.js"></script>
<body>
  <div id='map'></div>
  <div class='overlay'>
    <button id='addCar'>Add Car</button>
  </div>
</body>

CSS

body {
   margin: 0;
   padding: 0;
 }
 
 #map {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
 }
 
 .overlay {
   position: absolute;
   top: 10px;
   left: 10px;
 }
 
 .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;
 }

JavaScript

/**
 * Util.js
 */




/**
 * Car.js
 */






/**
 * MapBoxTest.js
 */

var style = 'mapbox://styles/mapbox/streets-v9';
//var style = '/TestEmptyProject/mapbox-gl-styles-master/styles/basic-v8.json';
//var style = 'http://localhost:8080/styles/osm-bright.json';
//var style = 'http://localhost:8080/styles/fiord-color-gl.json';
//var style = 'http://localhost:8080/styles/klokantech-basic.json';

mapboxgl.accessToken = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx';
var map = new mapboxgl.Map({
    container: 'map',
    style: style,
    center: [132.133333, -23.116667],
    zoom: 3
});

// Used to increment the value of the point measurement against the linesData.
var counter = 0;
var linesData = {};

function addCar() {
    var car = new Car("Car_" + counter, map, linesData);
    cars.push(car);
    ++counter;

    console.log(counter);
}

var previousTimeStamp = 0;
// Add a source and layer displaying a point which will be animated in a circle.
function animate(timeStamp) {
    if (timeStamp <= previousTimeStamp) {
        console.log("Wrong timeStamp, now: " + timeStamp + "\t previous: " + previousTimeStamp);
        return;
    }

    var newFeatures = {
        "type": "FeatureCollection",
        "features": []
    };

    var i;
    var frameInfo = {
        "timeStamp": timeStamp,
        "previousTimeStamp": previousTimeStamp,
        "deltaTime": (timeStamp - previousTimeStamp) / 1000
    };
    previousTimeStamp = timeStamp;

    for (i = 0; i < cars.length; ++i) {
        var car = cars[i];
        newFeatures.features.push(car.animate(frameInfo));
    }

    points = newFeatures;
    var source = map.getSource('cars');
    if(source !== undefined) {
        source.setData(points);
    }
    requestAnimationFrame(animate);
}

map.on('load', function () {

    console.log("map load");

    map.loadImage('https://maxcdn.icons8.com/office/PNG/40/Transport/railroad_car-40.png', function (error, image) {
        if (error) throw error;
        map.addImage('car', image);
...