How to create a autocomplete lookup in MapKit JS similar to Google's Place Autocomplete

Question

I've managed to display maps and routes on a web page with Apple's MapKit JS, but I cannot fathom from the documentation how search and autocomplete works due to lack of sample code. I've tried every search term I can and can't seem to find any examples anywhere. If someone could show me an example of MapKit JS search / autocomplete code I can probably figure out the rest of it to wire up something similar to Google's Places Autocomplete.

Thanks in advance.

Answer 1

Ok, I've now figured it out and sharing the answer for the benefit of others.

With MapKit JS you create a new search object, and then call autocomplete on that object; so:

let search = new mapkit.Search({ region: map.region });
search.autocomplete('searchterm', (error, data) => {
    if (error) {
        return;
    }
        // handle the results
    });
});

MapKit JS send back the results as an object in data.results including:

coordinate.latitude
coordinate.longitude
displayLines ([0] contains the place name and [1] is the address)

So you just loop through the results and build a list.

And pulling all this together:

First so CSS to make the autocomplete tidy:

<style>
    .mapSearchWrapper {
        position: relative;
    }
    .mapSearchInput {
        width: 100%;
        padding: 4px;
    }
    .mapSearchResults {
        display: none;
        position: absolute; 
        top: 20px; 
        left: 0px;
        z-index:9999;
        background: #FFFFFF; 
        border: 1px #CCCCCC solid;
        font-family: sans-serif;
    }
    .mapSearchResultsItem {
        padding: 4px;
        border-bottom: 1px #CCCCCC solid;
    }
    .mapSearchResultsItem:hover {
        background: #EEEEEE;
    }
</style>

Then the HTML which will hold the input box, result results and actual map.

<div class="mapSearchWrapper">
    <input type="text" id="mapLookup" class="mapSearchInput">
    <div id="results" class="mapSearchResults">
    </div>
</div>

<div id="map"></div>

And then the actual JavaScript that will make the magic happen. Note I have JQuery loaded, so you'll need that library if you use this code.

<script type="text/javascript">
    // Initialise MapKit
    mapkit.init({
        authorizationCallback: function(done) {
        done('[REPLACE THIS WITH YOUR OWN TOKEN]');
        }
    });
    // Create an initial region. This also weights the search area 
    var myRegion = new mapkit.CoordinateRegion(
        new mapkit.Coordinate(55.9496320, -3.1866360),
        new mapkit.CoordinateSpan(0.05, 0.05)
    );
    // Create map on the id 'map'
    var map = new mapkit.Map("map");
    map.region = myRegion;
    // Listen for keyup in the input field
    $('#mapLookup').keyup(function(){
        // Make sure it's not a zero length string
        if($('#mapLookup').length>0) {
            let search = new mapkit.Search({ region: map.region });
            search.autocomplete($('#mapLookup').val(), (error, data) => {
                if (error) {
                    return;
                }
                // Unhide the result box
                $('#results').show();
                var results = "";
                // Loop through the results a build 
                data.results.forEach(function(result) {
                    if(result.coordinate) {
                        // Builds the HTML it'll display in the results. This includes the data in the attributes so it can be used later
                        results = results + '<div class="mapSearchResultsItem" data-title="' +result.displayLines[0] + '" data-latitude="'+result.coordinate.latitude+'" data-longitude="'+result.coordinate.longitude+'" data-address="'+result.displayLines[1]+'"><b>' + result.displayLines[0] + '</b> ' + result.displayLines[1] + '</div>';
                    }
                });
                // Display the results
                $('#results').html(results);
                // List for a click on an item we've just displayed
                $('.mapSearchResultsItem').click(function() {
                    // Get all the data - you might want to write this into form fields on your page to capture the data if this map is part of a form.
                    var latitude = $(this).data('latitude');
                    var longitude = $(this).data('longitude');
                    var title = $(this).data('title');
                    var address = $(this).data('address');
                    // Calc the new region
                    var myRegion = new mapkit.CoordinateRegion(
                        new mapkit.Coordinate(latitude, longitude),
                        new mapkit.CoordinateSpan(0.01, 0.01)
                    );
                    // Clean up the map of old searches
                    map.removeAnnotations(map.annotations);
                    map.region = myRegion;
                    // Add the new annotation
                    var myAnnotation = new mapkit.MarkerAnnotation(new mapkit.Coordinate(latitude, longitude), { 
                        color: "#9b6bcc", 
                        title: title,
                        subtitle: address
                    });
                    map.addAnnotation(myAnnotation);
                    // Hide the results box
                    $('#results').hide();
                });
            });
        } else {
            $('#results').hide();
        }
    });
</script>