let plannedRouteMapData = {
    points: {
        thessaloniki: {
            coordinates: [40.63175, 22.95233],
            legacy: "Starting point"
        },
        athens: {
            coordinates: [37.97545, 23.73550],
            legacy: "<b>Athens</b>"
        },
        nisyros: {
            coordinates: [36.61416, 27.13868],
            legacy: "Nisyros"
        },
        tilos: {
            coordinates: [36.41724, 27.38590],
            legacy: "Tilos"
        },
        astypalaia: {
            coordinates: [36.54705, 26.35533],
            legacy: "Astypalaia"
        },
        amorgos: {
            coordinates: [36.82671, 25.86380],
            legacy: "Amorgos"
        }
    }
}

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());