let plannedRouteMapData = {
    points: {
        thessaloniki: {
            coordinates: [40.63175, 22.95233],
            legacy: "Starting point"
        },
        athens: {
            coordinates: [37.97545, 23.73550],
            legacy: "Athens"
        },
        amorgos: {
            coordinates: [36.82825, 25.865969],
            legacy: "Amorgos"
        },
        patmos: {
            coordinates: [37.32332, 26.54458],
            legacy: "Patmos"
        },
        leipsoi: {
            coordinates: [37.29577, 26.76677],
            legacy: "Leipsoi"
        },
        arkioi: {
            coordinates: [37.38213, 26.73631],
            legacy: "Arkioi"
        },
        tilos: {
            coordinates: [36.41724, 27.38590],
            legacy: "Tilos"
        },
        fournoi: {
            coordinates: [37.57724, 26.47993],
            legacy: "Fournoi"
        },
        ikaria: {
            coordinates: [37.63037, 26.17884],
            legacy: "Ikaria"
        }
    }
}

let mapOptions = {
    zoomControl: false,
    center: [39.34, 24.60],
    zoom: 6.4,
    zoomSnap: 0.2,
    zoomDelta: 0.5
}
let plannedRouteMapElement = document.getElementById('planned-route-map');
plannedRouteMapElement.style.display = 'block'
let plannedRouteMap = L
    .map('planned-route-map', mapOptions);

L
    .tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 13,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    })
    .addTo(plannedRouteMap);

let markerCustomIcon = L.divIcon({
    html: '<span class="map-marker-icon">🚩</span>',
    iconSize: [24, 24],
    iconAnchor: [22, 40],
    className: 'map-marker'
});

let markerOptions = {
    icon: markerCustomIcon
};

let popupOptions = {
    offset: [0, -16]
}

let locationMarkers = Object
    .keys(plannedRouteMapData.points)
    .map(key => L
        .marker(plannedRouteMapData.points[key].coordinates, markerOptions)
        .bindPopup("<b>" + plannedRouteMapData.points[key].legacy + "</b>", popupOptions));

let routePathLinePoints = [
    locationMarkers.map(value => value.getLatLng())
];

let routePathLine = L.polyline(routePathLinePoints, {color: 'orange'});

let allFeatures = [...locationMarkers, routePathLine];

let allFeatureGroup = L
    .featureGroup(allFeatures)
    .addTo(plannedRouteMap);

// Zoom the map to the polyline
plannedRouteMap.fitBounds(allFeatureGroup.getBounds());