Rudimentary MapKitJS demonstration, showing autocomplete and basic marker features

mapkitjs-demo.js

var map = null;

function initMapKit() {
    console.log("Initialising MapKit");
}

function showBasicMap() {
    const centerCoordinate = new mapkit.Coordinate(37.7749, -122.4194); // San Francisco
    const span = new mapkit.CoordinateSpan(0.1, 0.1);

    map = new mapkit.Map('map-container', { 
        region: new mapkit.CoordinateRegion(centerCoordinate, span),
    });
}

/**
 * Wireup an autocomplete search box
 */
function wireUpAutocomplete(input) {
    let search = new mapkit.Search();
    // Listen for input changes
    input.addEventListener("input", () => {
        const query = input.value;
        if (query.length > 2) {
            input.classList.remove("rounded-b-md");
            search.autocomplete(query, renderAutocompleteResults);
        }
    });
    // Add event listener for focus out
    // restore things back to looking like an input
    input.addEventListener("focusout", () => {
        input.classList.add("rounded-b-md");
    });
}

function renderAutocompleteResults(error, data) {

    if (error) {
        console.error(error);
        return;
    }

    // Get the results list
    const resultsList = document.getElementById("autocomplete-results");

    resultsList.classList.remove("hidden");
    resultsList.innerHTML = "";

    if (data.results.length > 0) {
        // No results
    }

    for (const result of data.results) {

        const li = document.createElement("li");

        // add p-2 class to li
        li.classList.add("p-2");
        li.classList.add("flex");
        li.classList.add("flex-col");
        li.classList.add("hover:bg-gray-50");
        li.classList.add("cursor-pointer");

        // add results.displayLines as spans
        for (const line of result.displayLines) {
            const span = document.createElement("span");
            span.textContent = line;
            li.appendChild(span);
        }

        li.addEventListener("click", () => {
            resultsList.classList.add("hidden");
            selectAutocompleteResult(result);

            // Get autocomplete=-result-line0
            const line1 = document.getElementById("autocomplete-result-line0")
            line1.textContent = result.displayLines[0];
            line1.classList.remove("text-gray-300");
            line1.classList.add("text-gray-500");
            
            const line2 = document.getElementById("autocomplete-result-line1")
            line2.textContent = result.displayLines[1];
            line2.classList.remove("text-gray-300");
            line2.classList.add("text-gray-500");

            // Update the form fields
            document.getElementById("autocomplete-latitude").value = result.coordinate.latitude;
            document.getElementById("autocomplete-longitude").value = result.coordinate.longitude;
            document.getElementById("autocomplete-address").value = result.displayLines[0];
            document.getElementById("autocomplete-city").value = result.displayLines[1];
        });
        resultsList.appendChild(li);

    }

}

/**
 * Selects an autocomplete result and centers the map on the result's coordinates.
 *
 * @param {Object} result - The autocomplete result object.
 * @param {Object} result.coordinate - The coordinate object of the result.
 * @param {number} result.coordinate.latitude - The latitude of the result's coordinate.
 * @param {number} result.coordinate.longitude - The longitude of the result's coordinate.
 */
function selectAutocompleteResult(result) {

    console.log(result)
    // Get the input box
    const input = document.getElementById("autocomplete-input");

    // The first line of the result is the address
    input.value = result.displayLines[0];

    const coordinate = new mapkit.Coordinate(
        result.coordinate.latitude,
        result.coordinate.longitude
    );

    const markerAnnotation = new mapkit.MarkerAnnotation(coordinate, {
        title: result.displayLines[0],
        subtitle: result.displayLines[1],
        color: "#FF0000" // Red marker
    });

    map.addAnnotation(markerAnnotation);
    map.setCenterAnimated(coordinate, true);

}