Dzień dobry

Nie znam kompletnie ani JavaScriptu, ani nic związanego z frontendem. Pech chciał, że muszę przerobić apkę która używa biblioteki leaflet js. Apka to mapa, ma znaczniki z miastami, musze dopisać funkcjonalność filtrującą te miasta wg województw. Jestem wdzięczny za każdą pomoc

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    <script src="js/leaflet-geometryutil.js"></script>
    <script src="js/leaflet-arrowheads.js"></script>
    <title>titletitle>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .leaflet-popup-content-wrapper {
            background: beige;
            color: darkolivegreen;
        }

        a{
           text-decoration: none;
        }

        a:hover{
            color: darkred;
        }

        .foto{

        }

    </style>
</head>

<body>
    <div id="map" style="width: auto; height: 1500px"></div>
    <script>
        // Creating map options
        var mapOptions = {
            center: [46.7986771, 19.6500625],
            zoom: 6
        }

        // Creating a map object
        var map = new L.map('map', mapOptions);

        // Creating a Layer object
        var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

        // Adding layer to the map
        map.addLayer(layer);


        var greenIcon = L.icon({
            iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
            shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
            shadowSize: [41, 41]
        });

        function capitalizeFirstLetter(string) {
            return string.charAt(0).toUpperCase() + string.slice(1);
        }

        fetch('/api/points').then(response => {
            return response.json()
        }).then(data => {
            data.forEach(function(element) {
                let popupHtml = `
                <section>
                    <table style="width:100%">
                        <tr>
                                <hr>
		<h3 align="center">${capitalizeFirstLetter(element.province)}</h3><h3 align="center">${element.city}</h3> <h3 align="center">
        <img class = "foto" src = "https://images.unsplash.com/photo-1593818681410-e7b0b567d036?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=100" alt="live"/><br>
        <a href="${element.link}" target="_blank"> Link </a> </h3><hr></th>
                        </tr>
                    </table>
                </section>
            `;

                L.marker([element.lat, element.lng], {
                    icon: greenIcon
                }).bindPopup(popupHtml).addTo(map);
            });
        });
    </script>

</body>

Wstyd mi , że tego nie potrafię :(