-1

My script returns a value of a geojson dataset to a popup, from which the markers I filtered using an attribute in my dataset. For some reason I can not get the markers custom (and when it works all the markers reappear, even when clicking on one layer.) This is my script and I hope you people can help me fix this problem:

{
<!DOCTYPE html><html><head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>KAART DEN FOOD BOSCH</title>
    <meta name="description" content="Een interactieve kaart voor Project Den Food Bosch"/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css"/>
    <link href="kaart.css" rel="stylesheet"/>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
    <script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
    html {
    background: #e6e9e9;
    background-image: linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%);
    -webkit-font-smoothing: antialiased;
}

body {
    background: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    color: #545454;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 800px;
    padding: 2em 2em 4em;
}

h1, h2, h3, h4, h5, h6 {
    color: #222;
    font-weight: 600;
    line-height: 1.3;
}

h2 {
    margin-top: 1.3em;
}
#kaart {
    height: 500px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    background-color: lightgray;
}
    </style>

        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-75065234-3', 'auto');
            ga('send', 'pageview', '/af609d1d-7555-439c-8106-bdb828f1cf73.html');
        </script></head>
<body>
    <h1>
        Den Food Bosch
    </h1>
    <h2>
        Een interactieve kaart
    </h2>
    <div id="kaart">
    </div>
    <script>
    $(document).ready(function () {
    var map = L.map('kaart').setView([51.636, 5.325], 18);
    var osmLaag = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    });
    var yellowIcon = L.icon({
        iconUrl: '5.png',
        iconSize: [10, 10], // size of the icon
        iconAnchor: [5, 5], // point of the icon which will correspond to marker's location
        popupAnchor: [0, -5] // point from which the popup should open relative to the iconAnchor
    });
    var orangeIcon = L.icon({
        iconUrl: '6.png',
        iconSize: [10, 10], // size of the icon
        iconAnchor: [5, 5], // point of the icon which will correspond to marker's location
        popupAnchor: [0, -5] // point from which the popup should open relative to the iconAnchor
    });
    var jsonLaag5 = L.geoJSON(geojson, {
        pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {
                icon: yellowIcon
            });
        }
    } && {
        filter: categorie5
    }).bindPopup(function (layer) {
        if (layer.feature.properties.categorie == '5')
            return 'Hoogstamfruit';
    });

    function categorie5(feature) {
        if (feature.properties.categorie == '5') return true
    }
    var jsonLaag6 = L.geoJSON(geojson, {
        pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {
                icon: orangeIcon
            });
        }
    } && {
        filter: categorie6
    }).bindPopup(function (layer) {
        if (layer.feature.properties.categorie == '6')
            return 'Laagstamfruit';
    });

    function categorie6(feature) {
        if (feature.properties.categorie == '6') return true
    }
    var achtergrond = {
        "Open Street Map": osmLaag,
    };
    var voorgrond = {
        "Categorie 5": jsonLaag5,
        "Categorie 6": jsonLaag6
    };
    L.control.layers(achtergrond, voorgrond).addTo(map);
});

    </script>
    <script>
    var geojson = {
    "type": "FeatureCollection",
    "crs": {
        "type": "name",
        "properties": {
            "name": "EPSG:4326"
        }
    },
    "features": [{
        "type": "Feature",
        "id": 1,
        "geometry": {
            "type": "Point",
            "coordinates": [5.3241117360000203, 51.635810709000054]
        },
        "properties": {
            "_Project1_OBJECTID": 1,
            "_Project1_Soort": "Medlar",
            "OBJECTID": 1,
            "databaseid": 10,
            "categorie": 5,
            "nederlands": "Mispel",
            "engels": "Medlar",
            "latijn": "Mespilus germanica",
            "continentvanorigine": "Eurazie",
            "eetbaarheid": "Fruit (vrucht)",
            "bruikbaarheid": "Niet",
            "smaak": "Zoet en zuur",
            "hoogte": "8 meter",
            "boslaag": "Subcanopy laag",
            "duurzaamheid": "45 jaar"
        }
    }, {
        "type": "Feature",
        "id": 2,
        "geometry": {
            "type": "Point",
            "coordinates": [5.3241509080000355, 51.635812514000065]
        },
        "properties": {
            "_Project1_OBJECTID": 2,
            "_Project1_Soort": "Lime",
            "OBJECTID": 2,
            "databaseid": 9,
            "categorie": 6,
            "nederlands": "Limoen",
            "engels": "Lime",
            "latijn": "Citrus aurantifolia",
            "continentvanorigine": "Azie",
            "eetbaarheid": "Fruit (vrucht)",
            "bruikbaarheid": "Olie",
            "smaak": "Zuur",
            "hoogte": "3 meter",
            "boslaag": "Subcanopy laag",
            "duurzaamheid": "25 jaar"
        }
    }]
};

    </script>


</body></html>}

closed as off-topic by PolyGeo Jan 10 at 22:05

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "When seeking help to debug/write/improve code always provide the desired behavior, a specific problem/error and the shortest code (as formatted text, not pictures) needed to reproduce it in the question body. Providing a clear problem statement and a code attempt helps others to help you." – PolyGeo
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    welcome to GIS Stack Exchange. Thanks for providing the script - but a better way to get responses is to simplify the script to show just the key part of your question. For example, your script seems to contain 6 separate filters, but really the question is "how can I get a filter to work", so it's only necessary to prove the point with one filter. Write the simplest possible script which demonstrates the problem and paste it directly into GIS Stack Exchange, and we'll be able to help you debug it – Stephen Lead Jan 10 at 21:39
  • Welcome to GIS SE! We're a little different from other sites. We're a Q&A site, not a discussion forum. For questions that involve code we ask that you show us where you are stuck with your own code by including a code snippet in your question. There is an edit button beneath your question which will enable you to do that and a {} button that enables you to format any highlighted code nicely. Please check out our short tour for more about how the site works. Thanks. – PolyGeo Jan 10 at 22:05
  • If your just trying to use different colored markers here is some instructions: indicator.extension.iastate.edu/projects/tasksheets/reports/… indicator.extension.iastate.edu/projects/tasksheets/reports/… This may help with other questions. indicator.extension.iastate.edu/projects/tasksheets/… – Bill Chappell Jan 11 at 16:18
  • I have one geojson layer which needs both a custom marker and filter. – Sean van Beurden Jan 14 at 1:39