overlayMaps and markers in Leaflet

53 views
Skip to first unread message

Alessandro Vallin

unread,
Dec 31, 2019, 5:55:32 AM12/31/19
to Leaflet
I am using Leaflet to show two sets of markers on a map. Let's call them "trip 1" and "trip 2". The markers information (lat, lon, description, etc.) is stored in two separate geojson files.

I would like to show each trip separately, using two L.layerGroup, one for each trip.

The code below is the page I have written: so far this is what I have.

The problem is that all markers are already shown on the map before selecting each trip (top right corner - see attached image).
I would like the markers to be shown after selection.

Istantanea_2019-12-31_10-36-56.png


<!DOCTYPE html>
    <html>
     <head>
     </head>
     <body>


      <center>
       <div id="map" class="embed-container"></div>
      </center>


    <script>
    var viaggio1 = L.layerGroup([
    <?php
    $url = 'docs/guardini.geojson'; // path to your JSON file
    $dati = file_get_contents($url); // put the contents of the file into a variable
    $result = json_decode($dati, true); // decode the JSON feed
    $data = $result['features'];
    foreach($data as $key => $row) {
        $numero = $row['id'];
        $nome = $row['name'];
        $lat = $row['lat'];
        $lon = $row['lon'];
        $text = $row['text'];
        $pic = $row['pic'];
        $link = $row['link'];
    ?>
    L.marker(['<?=$lat;?>', '<?=$lon;?>']),
    <?php
    }
    ?>
    ]);
    </script>


    <script>
    var viaggio2 = L.layerGroup([
    <?php
    $url2 = 'docs/guardini2.geojson'; // path to your JSON file
    $dati2 = file_get_contents($url2); // put the contents of the file into a variable
    $result2 = json_decode($dati2, true); // decode the JSON feed
    $data2 = $result2['features'];
    foreach($data2 as $key2 => $row2) {
        $numero2 = $row2['id'];
        $nome2 = $row2['name'];
        $lat2 = $row2['lat'];
        $lon2 = $row2['lon'];
        $text2 = $row2['text'];
        $pic2 = $row2['pic'];
        $link2 = $row2['link'];
    ?>
    L.marker(['<?=$lat2;?>', '<?=$lon2;?>']),
    <?php
    }
    ?>
    ]);
    </script>


    <script>
    var overlayMaps = {
        "viaggio 1": viaggio1,
        "viaggio 2": viaggio2
    };


    var map = L.map('map').setView([48.3585, 10.86135], 6);
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        {
          attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
          maxZoom: 19,
          minZoom: 4
        }).addTo(map);
    L.control.scale({imperial: false}).addTo(map);


    var pol = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        minZoom: 4,
        maxZoom: 19
      }).addTo(map);


    var sat = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
      {
        attribution: 'Tiles &copy; Esri &mdash; Source: Esri, IGN, IGP, UPR-EGP, and the GIS User Community',
        minZoom: 4,
        maxZoom: 19
      });


    var arte = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}',
      {
        attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: 'abcd',
        minZoom: 4,
        maxZoom: 19,
        ext: 'png'
    });


    var baseMaps = {
        "politica": pol,
        "satellitare": sat,
        "artistica": arte
    };
    //L.control.layers(baseMaps).addTo(map);
    L.control.layers(baseMaps, overlayMaps).addTo(map);


    var stile = {
        "color": "#ff3385",
        "weight": 4,
        "opacity": 0.65
    };
    </script>


    <?php
    $url = 'docs/guardini.geojson'; // path to your JSON file
    $dati = file_get_contents($url); // put the contents of the file into a variable
    $result = json_decode($dati, true); // decode the JSON feed
    $data = $result['features'];
    foreach($data as $key => $row) {
        $numero = $row['id'];
        $nome = $row['name'];
        $lat = $row['lat'];
        $lon = $row['lon'];
        $text = $row['text'];
        $pic = $row['pic'];
        $link = $row['link'];
    ?>
    <div id="sidebar<?=$numero;?>" align="left"></div>
    <script>
            var sidebar<?=$numero;?> = L.control.sidebar('sidebar<?=$numero;?>', {
                closeButton: true,
                position: 'left'
            });
            sidebar<?=$numero;?>.setContent('<br>luogo nr. <?=$numero;?><br><br><b><?=$nome;?></b><br><br><?=$text;?><br><br><img src="<?=$pic;?>"><br><br><a href="<?=$link;?>" target="_blank"><?=$link;?></a><br>');
            map.addControl(sidebar<?=$numero;?>);
            setTimeout(function () {
                sidebar<?=$numero;?>.hide();
            }, 700);


            var marker<?=$numero;?> = L.marker(['<?=$lat;?>', '<?=$lon;?>']).addTo(map).on('click', function () {
                sidebar<?=$numero;?>.toggle();
            });
    </script>
    <?php
    }
    ?>
    <?php
    $url2 = 'docs/guardini2.geojson'; // path to your JSON file
    $dati2 = file_get_contents($url2); // put the contents of the file into a variable
    $result2 = json_decode($dati2, true); // decode the JSON feed
    $data2 = $result2['features'];
    foreach($data2 as $key2 => $row2) {
        $numero2 = $row2['id'];
        $nome2 = $row2['name'];
        $lat2 = $row2['lat'];
        $lon2 = $row2['lon'];
        $text2 = $row2['text'];
        $pic2 = $row2['pic'];
        $link2 = $row2['link'];
    ?>
    <div id="sidebar<?=$numero2;?>" align="left"></div>
    <script>
            var sidebar<?=$numero2;?> = L.control.sidebar('sidebar<?=$numero2;?>', {
                closeButton: true,
                position: 'left'
            });
            sidebar<?=$numero2;?>.setContent('<br>luogo nr. <?=$numero2;?><br><br><b><?=$nome2;?></b><br><br><?=$text2;?><br><br><img src="<?=$pic2;?>"><br><br><a href="<?=$link2;?>" target="_blank"><?=$link2;?></a><br>');
            map.addControl(sidebar<?=$numero2;?>);
            setTimeout(function () {
                sidebar<?=$numero2;?>.hide();
            }, 700);


            var markerr<?=$numero2;?> = L.marker(['<?=$lat2;?>', '<?=$lon2;?>']).addTo(map).on('click', function () {
                sidebar<?=$numero2;?>.toggle();
            });
    </script>
    <?php
    }
    ?>
    </div>
    </div>


    </body>
    </html>

Pat Keller

unread,
Jan 2, 2020, 9:49:51 AM1/2/20
to Leaflet
It looks like you are adding the markers to the map:
L.marker(['<?=$lat2;?>', '<?=$lon2;?>']).addTo(map)


And I think what you want to do is add the markers to the layerGroups:
L.marker(['<?=$lat2;?>', '<?=$lon2;?>']).addTo(viaggio2)


Alessandro Vallin

unread,
Jan 2, 2020, 10:55:03 AM1/2/20
to leafl...@googlegroups.com
Thank you Pat.
I'll give it a try and I will let you know.
Alessandro

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/090a2bc8-3aba-4ed3-a3a1-cd3c047c0a07%40googlegroups.com.

Alessandro Vallin

unread,
Jan 2, 2020, 1:08:06 PM1/2/20
to leafl...@googlegroups.com
This piece of advice by Pam works perfectly.
I actually loaded my markers twice.
Alessandro
Reply all
Reply to author
Forward
0 new messages