const aufgabe1 = () => {
    const map = L.map('map').setView([53.0, 14.0], 4)
    const levels = [
        1_000_000, 5_000_000, 10_000_000, 20_000_000,
        30_000_000, 50_000_000, 80_000_000, 100_000_000
    ]
    let geojson;

    const getColor = population => {
        switch (true) {
            case population > levels[7]:
                return {color: '#800026', name: '100 Mio'}
            case population > levels[6]:
                return {color: '#BD0026', name: '80 Mio'}
            case population > levels[5]:
                return {color: '#E31A1C', name: '50 Mio'}
            case population > levels[4]:
                return {color: '#FC4E2A', name: '30 Mio'}
            case population > levels[3]:
                return {color: '#FD8D3C', name: '20 Mio'}
            case population > levels[2]:
                return {color: '#FEB24C', name: '10 Mio'}
            case population > levels[1]:
                return {color: '#FED976', name: '5 Mio'}
            case population > levels[0]:
                return {color: '#ffdb83', name: '1 Mio'}
            default:
                return {color: '#ffdea1', name: ''}
        }
    }

    // Add the legend to the map
    const legend = L.control({position: 'bottomright'})

    legend.onAdd = () => {
        const legend = L.DomUtil.create('div', 'info legend')
        const labels = []

        for (let i = 0; i < levels.length; i++) {
            let from = getColor(levels[i] + 1).name
            let to = getColor(levels[i + 1] + 1).name
            labels.push('<i style="background:' + getColor(levels[i] + 1).color + '"></i> ' + from + (to ? '&ndash;' + to : '+'))
        }

        legend.innerHTML = labels.join('<br>')
        return legend
    }

    legend.addTo(map)

    // Control that shows state info on hover
    const info = L.control()

    info.onAdd = () => {
        info._div = L.DomUtil.create('div', 'info')
        info.update()
        return info._div
    }

    info.update = props => {
        info._div.innerHTML = '<h4>European Population</h4>'
        if (props) {
            let formattedPeople = new Intl.NumberFormat('de-DE').format(props.pop_est)
            info._div.innerHTML += `<b>${props.name}</b><br>${formattedPeople} people`
        } else {
            info._div.innerHTML += 'Hover over a country'
        }
    }

    info.addTo(map);

    // Hover over feature
    const onEachFeature = (feature, layer) => {
        layer.on({
            mouseover: event => {
                event.target.setStyle({
                    weight: 5,
                    color: '#666',
                    dashArray: '',
                    fillOpacity: 0.7
                })

                if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
                    event.target.bringToFront()
                }
                info.update(event.target.feature.properties)
            },
            mouseout: event => {
                geojson.resetStyle(event.target)
                info.update()
            },
            click: event => map.fitBounds(event.target.getBounds())
        })
    }

    // Default style for each feature
    const getStyle = feature => ({
        stroke: true,
        fill: true,
        fillColor: getColor(feature.properties.pop_est).color,
        fillOpacity: 1,
        dashArray: '3',
        weight: 2,
        color: 'black'
    })

    // Load data in
    $.getJSON('europe.geo.json', data => {
        geojson = L.geoJson(data, {style: getStyle, onEachFeature}).addTo(map)
    })
}

aufgabe1()