debug/sample-multiple.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Esri Leaflet Geocoder</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />

  <!-- Load Leaflet from their CDN -->
  <link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css" />
  <script src="../node_modules/leaflet/dist/leaflet-src.js"></script>

  <script src="../node_modules/esri-leaflet/dist/esri-leaflet-debug.js"></script>

  <link rel="stylesheet" href="../dist/esri-leaflet-geocoder.css" />
  <script src="../dist/esri-leaflet-geocoder-debug.js"></script>

  <!-- Make the map fill the entire page -->
  <style>
    #map {
      position: fixed;
      top: 100px;
      bottom: 0;
      left: 0;
      right: 0;
      height: 375px;
      width: 80%;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div id="map"></div>

  <script>
    var map = L.map("map").setView([37.74, -121.62], 9);
    // var tiles = L.esri.basemapLayer('Topographic').addTo(map);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var getProviders = function () {
      return [
        L.esri.Geocoding.arcgisOnlineProvider({
          // countries: ['USA', 'GUM', 'VIR', 'PRI'],
          // categories: ['Address', 'Postal', 'Populated Place', ],
          // maxResults: 3
          apikey: 'YOUR_API_KEY'
        }),
        L.esri.Geocoding.mapServiceProvider({
          label: "States and Counties",
          url:
            "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",
          layers: [2, 3],
          searchFields: ["NAME", "STATE_NAME"]
        })
      ];
    }

    // this is the geocoder control and behavior based on the original testing page "sample.html"
    var searchControl = L.esri.Geocoding.geosearch({
      providers: getProviders()
    }).addTo(map);

    var results = L.layerGroup().addTo(map);

    searchControl.on("results", function (data) {
      results.clearLayers();
      for (var i = data.results.length - 1; i >= 0; i--) {
        results.addLayer(L.marker(data.results[i].latlng));
      }
    });

    // add additional geocoder controls throughout the map control corners for testing
    L.esri.Geocoding.geosearch({
      position: "topleft",
      providers: getProviders()
    }).addTo(map);

    L.esri.Geocoding.geosearch({
      position: "topright",
      providers: getProviders()
    }).addTo(map);

    L.esri.Geocoding.geosearch({
      position: "topright",
      providers: getProviders()
    }).addTo(map);

    L.esri.Geocoding.geosearch({
      position: "bottomleft",
      providers: getProviders()
    }).addTo(map);

    L.esri.Geocoding.geosearch({
      position: "bottomleft",
      providers: getProviders()
    }).addTo(map);

    L.esri.Geocoding.geosearch({
      position: "bottomright",
      providers: getProviders()
    }).addTo(map);

    L.esri.Geocoding.geosearch({
      position: "bottomright",
      providers: getProviders()
    }).addTo(map);
  </script>
</body>

</html>