chrisdrackett / react-mapkit

React wrapper for Apple's mapkit.js.
https://chrisdrackett.github.io/react-mapkit/?selectedStory=all%20props&full=0&addons=1&stories=1&panelRight=1&addonPanel=storybooks%2Fstorybook-addon-knobs
MIT License
76 stars 26 forks source link

Support autocomplete functionality #42

Open rahulravindran0108 opened 4 years ago

rahulravindran0108 commented 4 years ago

I was interested in using the autocomplete functionality. Looks like it isn't implemented yet ? Would the process be as simple as making a new component inside src that makes use of the map context ?

Are there any plans to support it soon ?

chrisdrackett commented 4 years ago

I plan to put a lot of work into this library within the next 6 weeks. I'm not sure if it will include autocomplete, but depending on how involved it is I'm happy to take a look. PR's are also welcome!

rahulravindran0108 commented 4 years ago

I don't think you need to specifically implement autocomplete, that would be scope creep into the project. For now, I am just using the map provider context and using the mapkit object to instantiate search and use it.

The search functionality can also end up using the same region as the map too. I would suggest creating hooks for some of the top level components mentioned here - https://developer.apple.com/documentation/mapkitjs/mapkit

const search = useSearch();

should give back the mapkit.Search object back here with the context being provided by the MapkitProvider. Thoughts ?

chrisdrackett commented 4 years ago

yeah, I think this is getting to the best way to handle this. Maybe ever something like const { search } = useMapkit() so we can provide other things via the same hook!

justindavies commented 2 years ago

Hi there, I'm trying to use search through useMap and calling market directly as so:

const { map, mapProps, mapkit } = useMap()

useEffect(() => {

    if (mapkit ) {

        var search =   mapkit.Search({});

        search("coffee shop", function (error, data) {
            if (error) {
                console.log(error)
                // Handle search error
                return;
            }
            console.log(data)
            var annotations = data.places.map(function (place) {
                var annotation = mapkit.MarkerAnnotation(place.coordinate);
                annotation.title = place.name;
                annotation.subtitle = place.formattedAddress;

                console.log(place.name, place.formattedAddress)
                annotation.color = "#9B6134";
                return annotation;
            });
            // map.showItems(annotations);
        });

    }
}, [mapkit]);

But I keep getting: TypeError: undefined is not a function (near '...search...')

I have the MapProvider in the top level of my hierarchy, and Maps are working, so it seems like it's hanging together for Maps, just not instantiation of mapkit search initialisation. I may well be doing something stupid that this isn't working.