Untitled

<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8 />
  <title>TriM Nav Test</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
  <link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
  <!-- Leaflet Map -->

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.12/leaflet-routing-machine.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.12/leaflet-routing-machine.min.js"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />

  <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>
  <script src="accurate.js"></script>
  <!-- end Leaflet map -->
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id='map'></div>

  <script>
    L.mapbox.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';

    var mapboxTiles = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=' + L.mapbox.accessToken, {
      attribution: '© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      tileSize: 512,
      zoomOffset: -1
    });

    var pocetna;

    var map = L.map('map')
      .addLayer(mapboxTiles)
      .setView([45.21171795488509, 13.673071282214277], 18);

    setInterval(function() {
      map.findAccuratePosition({
        maxWait: 5000, // defaults to 10000
        desiredAccuracy: 10 // defaults to 20
      })
    }, 5000);

    function onAccuratePositionFound(e) {
      newLatLng = e.latlng;

      console.log(newLatLng);

      map.panTo(newLatLng, {animte: true})

      myroute.spliceWaypoints(0, 1, newLatLng);
    }

    map.on('accuratepositionfound', onAccuratePositionFound);


    myroute = L.Routing.control({
      router: L.Routing.mapbox(L.mapbox.accessToken, {
        profile: 'mapbox/walking',
        language: 'en',
        waypointMode: 'snap',
      }),
      waypoints: [
        L.latLng(map.findAccuratePosition({
          maxWait: 5000, // defaults to 10000
          desiredAccuracy: 10 // defaults to 20
        })),
        L.latLng(45.211425972583775, 13.750376470840317)
      ],
    }).addTo(map);
  </script>
</body>

</html>
Editor is loading...