Leaflet Geocoding PLugin Implementation

leaflet_geocoding.txt

    <!-- CSS -->
    <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@2.3.3/dist/esri-leaflet-geocoder.css"
          integrity="sha512-IM3Hs+feyi40yZhDH6kV8vQMg4Fh20s9OzInIIAc4nx7aMYMfo+IenRUekoYsHZqGkREUgx0VvlEsgm7nCDW9g=="
          crossorigin="">
          
          
          
    <!-- JS -->
    <script src="https://unpkg.com/esri-leaflet-geocoder@2.3.3/dist/esri-leaflet-geocoder.js"
            integrity="sha512-HrFUyCEtIpxZloTgEKKMq4RFYhxjJkCiF5sDxuAokklOeZ68U2NPfh4MFtyIVWlsKtVbK5GD2/JzFyAfvT5ejA=="
            crossorigin=""></script>
            
                
<script>
  $(function () {
  
        const initialCoordinates = [-22.865523, -43.368974]; // Rio de Janeiro
        const initialZoomLevel   = 13;

        // create the map
        let leafletMap = L.map('mapRoteiro').setView(initialCoordinates, initialZoomLevel);

        // Map theme. Others at: https://leaflet-extras.github.io/leaflet-providers/preview/
        L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
            attribution: '© OpenStreetMap contributors',
            maxZoom: 17,
        }).addTo(leafletMap);


        // create the geocoding control and add it to the map
        let searchControl = L.esri.Geocoding.geosearch({
            useMapBounds: false,
        }).addTo(leafletMap);

        // create an empty layer group to store the results and add it to the map
        let results = L.layerGroup().addTo(leafletMap);

        // listen for the results event and add every result to the map
        searchControl.on("results", function (data) {
            results.clearLayers();

            // optional - create markers on the search results
            for (let i = data.results.length - 1; i >= 0; i--) {
                results.addLayer(L.marker(data.results[i].latlng));
            }
        });

  });
</script>