RouteFinder.svelte

  $: {
        if (mainMap && lastActivities && lastActivities.length) {
            console.log('Reactive map creation firing...',mainMap,lastActivities,tlat,tlon)
            let n = 0
            let last = lastActivities[n];
            while (!last.start_latlng && n < lastActivities.length) {
                n+=1;
                last = lastActivities[n];
            }
            let coord = last.start_latlng || [0,0];
            tlat = coord[0];
            tlon = coord[1];
            MapboxGL.accessToken = "MAPBOX_TOKEN";            
            console.log('!!!!! New map!')
            mapReady = false;
            map = new MapboxGL.Map({
                container: mainMap,
                style: "mapbox://styles/tmhinkle/ckkcnw1l25c8u17nthwt1amxc",
                center: [coord[1], coord[0]],
                zoom: 10,
            });
            marker = new MapboxGL.Marker({
                color: "#FFFFFF",
                draggable: true,
            })
                .setLngLat([coord[1], coord[0]])
                .addTo(map);

            marker.on("dragend", (e) => {                
                let location = marker.getLngLat();
                tlon = location.lng;
                tlat = location.lat;
            });
            map.on('dblclick', (e)=>{
                marker.setLngLat(e.lngLat);
            });
            map.on('style.load',()=>mapReady=true)
            //loadMoreActivities(lastActivities);
        }
    }