Feature Request: Implement Search and Geocoder #39

Activity

1. nikischin commented on Aug 22, 2023

   

   nikischin

   on Aug 22, 2023

   ContributorAuthor

   More actions

   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!
2. Nicolapps

   added

   enhancementNew feature or requestNew feature or request

   on Sep 3, 2023
3. Nicolapps commented on Sep 3, 2023

   

   Nicolapps

   on Sep 3, 2023

   Owner

   More actions

   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 ↩
4. nikischin commented on Sep 3, 2023

   

   nikischin

   on Sep 3, 2023

   Last edited by nikischin

   ContributorAuthor

   More actions

   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?
5. Nicolapps commented on Sep 6, 2023

   

   Nicolapps

   on Sep 6, 2023

   Owner

   More actions

   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.

   👍React with 👍1Reacted by Tim Nikischin