Leftlet for Geocode

by LandsD Map API

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/esri-leaflet-geocoder.css">
<script src="https://unpkg.com/[email protected]"></script>
<div id="mapid"></div>

CSS

#mapid { height: 450px; }

JavaScript

var map = L.map('mapid').setView([22.29227, 114.20847], 16);

  L.tileLayer('https://mapapis01.blob.core.windows.net/tileservices/basemap/WGS84/2016/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://mapapis01.blob.core.windows.net/tileservices/disclaimer.html">LandsD</a>',
	minZoom: 10,
	maxZoom: 19
  }).addTo(map);
  
  L.tileLayer('https://mapapis01.blob.core.windows.net/tileservices/label/WGS84/2016/tc/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://mapapis01.blob.core.windows.net/tileservices/disclaimer.html">LandsD</a>',
	minZoom: 10,
	maxZoom: 19
  }).addTo(map);
var api_key = '9a2a90e889f54199b47356d44f9a5dc2';

  var geocodeBdg = L.esri.Geocoding.geocodeServiceProvider({
	  url: 'https://landsd.azure-api.net/geocode/BuildingName/GeocodeServer',// + api_key,
	  label: 'Building Names'
	});
	
  var geocodePlace = L.esri.Geocoding.geocodeServiceProvider({
	  url: 'https://landsd.azure-api.net/geocode/Placename/GeocodeServer',//?key=' + api_key,
	  label: 'Place Names'
	});

  var geocodeSite = L.esri.Geocoding.geocodeServiceProvider({
	  url: 'https://landsd.azure-api.net/geocode/SiteName/GeocodeServer',//?key=' + api_key,
	  label: 'Site Names'
	});

  var geocodeGeocomm = L.esri.Geocoding.geocodeServiceProvider({
	  url: 'https://landsd.azure-api.net/geocode/GeoComm/GeocodeServer',//?key=' + api_key,
	  label: 'Geo Communities'
	});
	
  var searchControl = L.esri.Geocoding.geosearch({providers: [geocodeBdg, geocodePlace, geocodeSite, geocodeGeocomm], useMapBounds: false}).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--) {
	console.log(data.results[i]);
      results.addLayer(L.marker(data.results[i].latlng).bindPopup(data.results[i].properties.Descr));
    }
  });