Leaflet Reverse Geocode

Reverse Geocode Samples

by LandsD Map API

HTML

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

<div id="mapid"></div>

CSS

#mapid {
  height: 530px;
}

JavaScript

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

var apikey = 'f4d3e21d4fc14954a1d5930d4dde3809';
L.esri.Geocoding.Suggest.prototype.params.key = apikey;
L.esri.Geocoding.Geocode.prototype.params.key = apikey;
L.esri.Geocoding.ReverseGeocode.prototype.params.key = apikey;


L.tileLayer('https://landsd.azure-api.net/tileservices/basemap/WGS84/2017/{z}/{x}/{y}.png?key=' + apikey, {
  attribution: '<a href="https://mapapis01.blob.core.windows.net/info/disclaimer.html"  target="_blank">&copy;Lands Department, HKSARG</a>',
  maxZoom: 19,
}).addTo(map);

L.tileLayer('https://landsd.azure-api.net/tileservices/label/WGS84/2017/tc/{z}/{x}/{y}.png?key=' + apikey, {
  attribution: '<a href="https://mapapis01.blob.core.windows.net/info/disclaimer.html"  target="_blank">&copy;Lands Department, HKSARG</a>',
  maxZoom: 19,
}).addTo(map);

var geocodeAddress = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://landsd.azure-api.net/geocode/AddressPoint/GeocodeServer',
  label: 'Address Point',
  maxResults: 15
});

var geocodeBdg = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://landsd.azure-api.net/geocode/BuildingName/GeocodeServer',
  label: 'Building Names',
  maxResults: 15
});

var geocodePlace = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://landsd.azure-api.net/geocode/Placename/GeocodeServer',
  label: 'Place Names',
  maxResults: 15
});

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

var geocodeGeocomm = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://landsd.azure-api.net/geocode/GeoComm/GeocodeServer',
  label: 'Geo Communities',
  maxResults: 50
});

var searchControl = L.esri.Geocoding.geosearch({
  collapseAfterResult: true,
  providers: [geocodeBdg, geocodePlace, geocodeSite, geocodeGeocomm, geocodeAddress],
  useMapBounds: false,
  zoomToResult: true
}).addTo(map);
var results =...