KART

Locate the user
 
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:90%;height:800px; }
    </style>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidHJlcHN0YWQiLCJhIjoiY2pmeXplc250MmtjbjJ3cW51ejVqenpwbSJ9.YJeaDfL22yqEbgwV-aQ0Zw';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/trepstad/cjg6y4hzu67p32rruo35p3vdw', 
    center: [7.466666, 58.818605],
    zoom: 15
});


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

    // Add a single point to the map
    map.addSource('point', {
        "type": "geojson",
        "data": geojson
    });

    map.addLayer({
        "id": "point",
        "type": "circle",
        "source": "point",
        "paint": {
            "circle-radius": 10,
            "circle-color": "#3887be"
        }
    });

    // When the cursor enters a feature in the point layer, prepare for dragging.
    map.on('mouseenter', 'point', function() {
        map.setPaintProperty('point', 'circle-color', '#3bb2d0');
        canvas.style.cursor = 'move';
        isCursorOverPoint = true;
        map.dragPan.disable();
    });

    map.on('mouseleave', 'point', function() {
        map.setPaintProperty('point', 'circle-color', '#3887be');
        canvas.style.cursor = '';
        isCursorOverPoint = false;
        map.dragPan.enable();
    });

    map.on('mousedown', mouseDown);
});  
  
 // Add geolocate control to the map.
map.addControl(new mapboxgl.GeolocateControl({
    positionOptions: {
        enableHighAccuracy: true
    },
    trackUserLocation: true
})); 
  
map.addControl(new mapboxgl.NavigationControl());
  
  
  
</script>