Attribute Assingment/Analysis on Leaflet Map

Question

At the moment I'm struggling to combine attributes of my markers and polygons on my leaflet map. In my map I have bavarian government districts with the name of the districs as attribute. And I have 70 markers to show the location of some mountains in these districts, these points are from an csv table I made.
What I wanted to do now is that each point should be assigned the attribute of the corresponding district within it lies. So that the marker popup also shows the name of the district. I don't know whats the easiest way to do this? So I thought about using the turf points within polygon function but I'm not sure how to start.
Map with Marker and Polygons.

The second thing I wanted to do, is to highlight the highest mountain. The mountain with the largest number in the second column. Mountain height.

My table is looking like this: (mountain name;mountain height;area;landscape;lat;long)

Bergname;Berghoehe;Landkreis;Gebirge_Landschaft;Latitude;Longitude
Hesselberg;689;Ansbach;Wörnitztal_Fränkische Alb;49.06861780;10.52610990
Dürrenberg;656; Weißenburg-Gunzenhausen;Hahnenkamm; 49.01647480; 10.76511290
...
I hope someone can help me out here, would be much appreciated :)

<!DOCTYPE html>
<html lang="de">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      <title>Leaflet Map"</title>
      <!-- leaflet.css, leaflet.js, turf.js von externer Quelle einbinden -->
      <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />   
      <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> <!-- Load Leaflet code library-->
      <script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet-omnivore/0.3.4/leaflet-omnivore.min.js'></script>  <!-- Load Omnivore to convert CSV to GeoJSON format -->
      <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script><!-- Load jQuery and PapaParse to read data from a CSV file -->
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/papaparse.min.js"></script>
      <script src='https://unpkg.com/@turf/turf/turf.min.js'></script>
      <script src='https://unpkg.com/shpjs@latest/dist/shp.js'></script>
      
     
   </head>
   <body>
      <div id='Karte' style='height: 800px; width: 100%;'></div> 
     
     
    <script type='text/javascript'>
         
        var Karte = L.map('Karte').setView([48.896465, 10.996526], 7);  
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         'attribution':  'Kartendaten &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende',
         'useCache': true
         }).addTo(Karte); 
         
         
    //Leaflet Erweiterung für shp file https://github.com/calvinmetcalf/shapefile-js
    
    (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','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-40454900-1', 'calvinmetcalf.github.io');
        ga('send', 'pageview');
    
    
      var geo = L.geoJson({features:[]},{onEachFeature:function popUp(f,l){
            var out = [];
            if (f.properties){
                for(var key in f.properties){
                out.push(key+": "+f.properties[key]);
        }
        l.bindPopup(out.join("<br />"));
        }
        }}).addTo(Karte);
        var base = './Regierungsbezirke_by.zip';
        shp(base).then(function(data){
        geo.addData(data);
        })


        //Papaparse Erweiterung für CSV Tabelle
        $.get('./turf.csv', function(csvString) {

        // Use PapaParse to convert string to array of objects
        var data = Papa.parse(csvString, {header: true, dynamicTyping: true}).data;
        
        // For each row in data, create a marker and add it to the map
        // For each row, columns `Latitude`, `Longitude`, and `Title` are required  
        for (var i in data) {
        var row = data[i]

        var marker = L.marker([row.Latitude, row.Longitude], {
        opacity: 1
        }).bindPopup(row.Bergname + '; ' + row.Berghoehe + '; ' + row.Landkreis + '; ' + row.Gebirge_Landschaft + '; ' + row.Latitude + '; ' + row.Longitude)
      
        marker.addTo(Karte)
        }
    });
   
        
        var searchWithin = turf.polygon([[

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

Falke Design Falke Design · Accepted Answer · 2021-01-05T14:05:25

You can use turf.booleanContains(district.toGeoJSON(16), marker.toGeoJSON(16)) to check if the marker is in the district and then add the popup.

Add your markers to a FeatureGroup to get it later for the loop

var fg = L.featureGroup().addTo(Karte);

//Papaparse Erweiterung für CSV Tabelle
$.get('./turf.csv', function(csvString) {

            // Use PapaParse to convert string to array of objects
            var data = Papa.parse(csvString, {
                header: true,
                dynamicTyping: true
            }).data;

            // For each row in data, create a marker and add it to the map
            // For each row, columns `Latitude`, `Longitude`, and `Title` are required  
            for (var i in data) {
                var row = data[i]
                var marker = L.marker([row.Latitude, row.Longitude], {
                    opacity: 1
                });
                marker._mountainData = row;
                marker.addTo(fg)
            });

And then loop through all districts:

fg.eachLayer((layer) => {
        var districts = geo.getLayers();
        districts.forEach((district) => {
          if (turf.booleanContains(district.toGeoJSON(16), layer.toGeoJSON(16))) {
            var row = layer._mountainData;
            layer.bindPopup(district.feature.properties.YOUR_DISTRICT_NAME_PROPERTY + ";" + row.Bergname + '; ' + row.Berghoehe + '; ' + row.Landkreis + '; ' + row.Gebirge_Landschaft + '; ' + row.Latitude + '; ' + row.Longitude)
            return;
          }
        })

Demo: https://jsfiddle.net/falkedesign/kgwcrLpq/

Attribute Assingment/Analysis on Leaflet Map

1 Answers