Feature Request: Implement Search and Geocoder

[nikischin]

I would like to offer the user the possibility to Search for addresses or Points of Interests and would be cool to also do this with this library!

Might this be something we could add to the library? What would be the best way to do so? Maybe implement as a React hook? I would be willing to put some effort in this if you would give me some guidance on how the preferred implementation could look like.

I could also do a quick implementation in plain Javascript with the MapKit JS framework if this would help?

Thank you so much!

Edit: For the Geocoder there is a sample implementation in the Apple Developer portal at https://maps.developer.apple.com/sample-code/add-annotations/
For the search I could build something if this would help

[nikischin]

Samples.zip

I prepared two samples for both search and autocomplete attached. Would be super cool to implement something like this in the library! Let me know if this would be something you would want to support!

[Nicolapps]

Thank you for the feature request! Since these APIs are not UI-related, how would you expect mapkit-react to help you to use them?

I think that it should be possible to directly use the MapKit JS APIs without the need for a React-specific wrapper. But there is one rough edge: mapkit-react loads and initializes MapKit JS for you, but currently does not expose the mapkit object. It is currently possible to retrieve it from the global scope and use it when you’re sure that MapKit is already initialized at this point (e.g. map event handlers)¹, but this is brittle and does not work if you’re not sure that MapKit is loaded.

Something that we could do would be to provide a useMapkit hook, which would return the same mapkit instance used by mapkit-react (or null if mapkit isn’t loaded yet). We would need to give it the MapKit token, since it is not guaranteed that MapKit has already been initialized at this point. Usage would look like this:

function MyComponent() {
    const mapkit = useMapkit(token);

    return (
        <input
            type="text"
            …
            onChange={(e) => {
                if (!mapkit) return;
                const search = new mapkit.Search({});
                search.autocomplete(e.target.value, (error, data) => {
                    if (error) return;
                    // …
                });
            }}
        />
    );
}

What do you think? Would an API like this one help for your use case?

Footnotes

1. In fact, I’m doing it in one of my own projects: https://github.com/Nicolapps/cmumap/blob/main/src/pages/%5B%5B...slug%5D%5D.tsx#L225 ↩

[nikischin]

Thank you for the feature request! Since these APIs are not UI-related, how would you expect mapkit-react to help you to use them?

I think that it should be possible to directly use the MapKit JS APIs without the need for a React-specific wrapper. But there is one rough edge: mapkit-react loads and initializes MapKit JS for you, but currently does not expose the mapkit object. It is currently possible to retrieve it from the global scope and use it when you’re sure that MapKit is already initialized at this point (e.g. map event handlers)1, but this is brittle and does not work if you’re not sure that MapKit is loaded.

Something that we could do would be to provide a useMapkit hook, which would return the same mapkit instance used by mapkit-react (or null if mapkit isn’t loaded yet). We would need to give it the MapKit token, since it is not guaranteed that MapKit has already been initialized at this point. Usage would look like this:

function MyComponent() {
    const mapkit = useMapkit(token);

    return (
        <input
            type="text"
            …
            onChange={(e) => {
                if (!mapkit) return;
                const search = new mapkit.Search({});
                search.autocomplete(e.target.value, (error, data) => {
                    if (error) return;
                    // …
                });
            }}
        />
    );
}

What do you think? Would an API like this one help for your use case?

Footnotes

1. In fact, I’m doing it in one of my own projects: https://github.com/Nicolapps/cmumap/blob/main/src/pages/%5B%5B...slug%5D%5D.tsx#L225 ↩

Hi @Nicolapps,

thank you so much! I wasn't yet thinking too deep of an exact implementation on this though generally speaking I was thinking of using all the autoloading of the library and calling the MapKit JS APIs via individual hooks (e.g. useMapkitSearch, ...) maybe?

We could even consider some implementation like this:

function MyComponent() {
    const search = useMapkitSearch(token, {});

    return (
        <input
            type="text"
            …
            onChange={(e) => {
                search.autocomplete(e.target.value, (error, data) => {
                    if (error) return;
                    // …
                });
            }}
        />
    );
}

What do you think? (I still think an additional useMapkit hook would be helpful for other implementations)

Is this something easy or rather challenging to implement?

[Nicolapps]

Thank you for your reply! In my opinion, having a useMapkitSearch hook would be more complex and wouldn’t provide a better experience than simply exposing mapkit and let the user use the same APIs that MapKit JS provides.

Also, it is not clear how the API you proposed handles the case when MapKit hasn’t finished loading yet.