CODEWITHSUNDEEP
javascriptleafletgis
Brandon Noll
Brandon Noll

Reputation: 53

How to filter and show properties of features when clicked using leaflet?

So, I'm mapping some features using leaflet and want to be able to filter by date of the feature and also, when clicked, the feature will display some properties about it. I have yet to implement the date portion so I'm using a static date to filter through my data set and I'm struggling with getting each point to display information about it when clicked.

All other solutions that I've looked through use the portion where I've implemented the filter but I need that.

        <html>
    <head>
        <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>
        <div id="mapid">
    
        </div>
        <style type="text/css">
            #mapid { 
                height: 650px; 
                width: 650px;
                }
    
        </style>
        <script type="text/javascript">
    
            var map = L.map('mapid').setView([33.7490, -84.3880], 13);
            L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1,
            accessToken: 'pk.eyJ1IjoiYnJhbmRvbm5vbGwiLCJhIjoiY2tpdDd6YWk4MDY5dzJ1cGhvaXkzNDB5diJ9.F9L1fxelJr61uJHB7VJ9DA'
            }).addTo(map);
    
            var myPoints = {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [
              -84.42313,
              33.72328
            ]
          },
          "properties": {
            "report_number": "153572281",
            "occur_date": "2015-12-22",
            "shift_occurence": "Evening Watch",
            "ucr_literal": "BURGLARY-RESIDENCE",
            "neighborhood": "Oakland City",
            "lat": "33.72328",
            "long": "-84.42313"
          }]};


        /* this is just a snippet of the data */

   var filtered_points = L.geoJson(myPoints, {filter: dateFilter}).addTo(map);
   filtered_points.bindPopup(filtered_points.properties.report_number);
   
   
    

    function dateFilter(feature) {
        if (feature.properties.occur_date === "2015-12-22") return true
        /* finished product will take input for the date */
    }


    </script>
</head>
<body>
</body>
</html>

I've gotten all of the points to display "Hello" when clicked using:

filtered_points.bindPopup("Hello);

But I haven't been able to get them to display properties about each respectively.

Upvotes: 0

Views: 925

Answers (1)

Falke Design
Falke Design

Reputation: 11348

Look into the offical Leaflet Tutorials.

In the onEachFeature function you can bind a popup to each layer

function onEachFeature(feature, layer) {
    if (feature.properties && feature.properties.report_number) {
        layer.bindPopup(feature.properties.report_number);
    }
}

function dateFilter(feature) {
   if (feature.properties.occur_date === "2015-12-22") return true
   /* finished product will take input for the date */
}

var filtered_points = L.geoJSON(myPoints, {
    onEachFeature: onEachFeature,
    filter: dateFilter
}).addTo(map);

Upvotes: 2

Related Questions