CODEWITHSUNDEEP
javascriptleafletrepeatmarkersesri-leaflet-geocoder
Adam Brish
Adam Brish

Reputation: 3

Leaflet .Repeated Markers in combination with esri-leaflet-geocoder

Hi I am new in Leaflet and I am trying to combine the Esri Geocoding control with the Leaflet.RepeatedMarkers. Actually, I need the markers to be repeated over [-180,180] of the first map. The below codes works fine. Unfortunately, when I try a new search with the Esri Geocoding control the "old" markers remain.

Any suggestion on how to clear/remove the "old" markers when I try a new search.

Thanks in Advance!

Adam

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>leaflet-geosearch</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

  <!-- Load Leaflet from CDN-->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>

    <!-- Load Leaflet from CDN -->
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>  

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"
    integrity="sha512-ucw7Grpc+iEQZa711gcjgMBnmd9qju1CICsRaryvX7HJklK0pGl/prxKvtHwpgm5ZHdvAil7YPxI1oWPOWK3UQ=="
    crossorigin=""></script>


<!-- Load Esri Leaflet Geocoder from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/esri-leaflet-geocoder.css"
    integrity="sha512-IM3Hs+feyi40yZhDH6kV8vQMg4Fh20s9OzInIIAc4nx7aMYMfo+IenRUekoYsHZqGkREUgx0VvlEsgm7nCDW9g=="
    crossorigin="">
    
   <link rel="stylesheet" href="C:/Users/Nikos/Desktop/LEAFLET/TEST_FIELD/leaflet-icon-pulse-master/dist/L.Icon.Pulse.css" />
    
  <script src="https://unpkg.com/[email protected]/dist/esri-leaflet-geocoder.js"
    integrity="sha512-HrFUyCEtIpxZloTgEKKMq4RFYhxjJkCiF5sDxuAokklOeZ68U2NPfh4MFtyIVWlsKtVbK5GD2/JzFyAfvT5ejA=="
    crossorigin=""></script>

   <script src='https://unpkg.com/leaflet.repeatedmarkers@latest/Leaflet.RepeatedMarkers.js'></script>

    

   
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

</head>
<body>
  <div id="map"></div>
  <script>
    const map = L.map('map', {
      center: [0, 0],
      zoom: 2,
     // minZoom:3,
     // maxZoom:13
    });



 L.esri.basemapLayer('ShadedRelief').addTo(map);

var Esri_WorldShadedRelief = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri &mdash; Source: Esri',
    //maxZoom: 11,
   // minZoom: 5
}).addTo(map);

    var searchControl = L.esri.Geocoding.geosearch().addTo(map);
        var results = L.layerGroup().addTo(map);
        
        searchControl.on('results', function (data) {
        results.clearLayers();
        
        
        var repeats = L.gridLayer.repeatedMarkers().addTo(map);
        
        for (var i = data.results.length - 1; i >= 0; i--) {
            //console.log(data.results[i].latlng);
            marker = L.marker(data.results[i].latlng);      
            repeats.addMarker(marker);
            //console.log(marker);
            //repeats.removeMarker(marker);
            
                }       
        });



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

Upvotes: 0

Views: 189

Answers (1)

Falke Design
Falke Design

Reputation: 11338

Add the repeated Markerto the result Layergroup instead to the map:

 var repeats = L.gridLayer.repeatedMarkers().addTo(results);

Upvotes: 0

Related Questions