blalond/arcgisgeocode.html

## arcgisgeocode.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ArcGIS Geocoding Example</title>
    <link rel="stylesheet" href="almond.lite.min.css" />
    <script>
        function debounce(func, wait) {
            let timeout;
            return function(...args) {
                const context = this;
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(context, args), wait);
            };
        }

        function onSuggestionSelected(address) {
            fetch('https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: `SingleLine=${encodeURIComponent(address)}&f=json`
            })
            .then(response => response.json())
            .then(data => {
                if (data && data.candidates && data.candidates[0]) {
                    document.getElementById('addressContainer').value = JSON.stringify(data.candidates[0]);
                } else {
                    console.error("No location found");
                }
            })
            .catch(error => console.error('Error:', error));
        }

        function handleInputChange(event) {
            const query = event.target.value;
            if (!query) {
                document.getElementById('suggestionsContainer').innerHTML = ''; // Clear suggestions
                return;
            }
            fetch(`https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest?text=${encodeURIComponent(query)}&f=json`)
            .then(response => response.json())
            .then(data => {
                if (data && data.suggestions) {
                    const suggestionsContainer = document.getElementById('suggestionsContainer');
                    suggestionsContainer.innerHTML = ''; // Clear previous suggestions
                    data.suggestions.forEach(suggestion => {
                        const button = document.createElement('button');
                        button.textContent = suggestion.text;
                        button.addEventListener('click', () => onSuggestionSelected(suggestion.text));
                        suggestionsContainer.appendChild(button);
                        suggestionsContainer.appendChild(document.createElement('br'));
                    });
                } else {
                    console.error("No suggestions found");
                }
            })
            .catch(error => console.error('Error:', error));
        }

        const debouncedHandleInputChange = debounce(handleInputChange,  600);
    </script>
</head>
<body>
    <h1>ArcGIS Geocoding Example</h1>
    <a href="https://developers.arcgis.com/rest/geocode/api-reference/geocoding-suggest.htm">https://developers.arcgis.com/rest/geocode/api-reference/geocoding-suggest.htm</a>
    <p>Get suggestions from endpoint GeocodeServer/suggest:</p>
    <input type="text" id="addressInput" placeholder="Enter an location to search..." oninput="debouncedHandleInputChange(event)" />
    <div id="suggestionsContainer" style="height:188px"></div>
    <p>Address candidate from endpoint GeocodeServer/findAddressCandidates:</p>
    <textarea id="addressContainer" style="height:365px; width: 610px; font-family: monospace; font-size: smaller;"></textarea>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ArcGIS Geocoding Example</title>
	<link rel="stylesheet" href="almond.lite.min.css" />
	<script>
	function debounce(func, wait) {
	let timeout;
	return function(...args) {
	const context = this;
	clearTimeout(timeout);
	timeout = setTimeout(() => func.apply(context, args), wait);
	};
	}

	function onSuggestionSelected(address) {
	fetch('https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/x-www-form-urlencoded'
	},
	body: `SingleLine=${encodeURIComponent(address)}&f=json`
	})
	.then(response => response.json())
	.then(data => {
	if (data && data.candidates && data.candidates[0]) {
	document.getElementById('addressContainer').value = JSON.stringify(data.candidates[0]);
	} else {
	console.error("No location found");
	}
	})
	.catch(error => console.error('Error:', error));
	}

	function handleInputChange(event) {
	const query = event.target.value;
	if (!query) {
	document.getElementById('suggestionsContainer').innerHTML = ''; // Clear suggestions
	return;
	}
	fetch(`https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest?text=${encodeURIComponent(query)}&f=json`)
	.then(response => response.json())
	.then(data => {
	if (data && data.suggestions) {
	const suggestionsContainer = document.getElementById('suggestionsContainer');
	suggestionsContainer.innerHTML = ''; // Clear previous suggestions
	data.suggestions.forEach(suggestion => {
	const button = document.createElement('button');
	button.textContent = suggestion.text;
	button.addEventListener('click', () => onSuggestionSelected(suggestion.text));
	suggestionsContainer.appendChild(button);
	suggestionsContainer.appendChild(document.createElement('br'));
	});
	} else {
	console.error("No suggestions found");
	}
	})
	.catch(error => console.error('Error:', error));
	}

	const debouncedHandleInputChange = debounce(handleInputChange, 600);
	</script>
	</head>
	<body>
	<h1>ArcGIS Geocoding Example</h1>
	<a href="https://developers.arcgis.com/rest/geocode/api-reference/geocoding-suggest.htm">https://developers.arcgis.com/rest/geocode/api-reference/geocoding-suggest.htm</a>
	<p>Get suggestions from endpoint GeocodeServer/suggest:</p>
	<input type="text" id="addressInput" placeholder="Enter an location to search..." oninput="debouncedHandleInputChange(event)" />
	<div id="suggestionsContainer" style="height:188px"></div>
	<p>Address candidate from endpoint GeocodeServer/findAddressCandidates:</p>
	<textarea id="addressContainer" style="height:365px; width: 610px; font-family: monospace; font-size: smaller;"></textarea>
	</body>
	</html>