https://developer.apple.com/documentation/mapkitjs/mapkit/annotation/2973819-callout

Sorry for this might seem as a trivial question but I cannot get mapkit-react to show a proper map.
Token is valid and has been tested on the storybook page.
React is version 18.2.0.
My map page is just a simple Map tag with a proper token.

No special warniing when looking at the Chrome console apart from the following two warnings:

vTools failed to load source map: Could not load content for chrome-extension://lmbopdiikkamfphhgcckcjhojnokgfeo/src/tierces_parties/browser-polyfill.min.js.map: System error: net::ERR_BLOCKED_BY_CLIENT

vTools failed to load source map: Could not load content for https://mw-ci1-mapkitjs.geo.apple.com/admin/source-maps/5.75.95/source-maps/mapkit.min.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED

See the last bug reported in #35.

You've done an incredible work here, thanks for making the component available to everyone!

I was wondering if the displayPriority property could be added to Annotations?

Expand the existing Map component API to support passing a token callback instead of the token directly.

I would like to change the visible portion of the map after the map initially rendered.

https://github.com/Nicolapps/mapkit-react/blob/main/support.md#visible-portion-of-the-map-1

One example where this could be useful:
I render a map with only one marker, which is draggable.
On dragEnd, I would like to update the center of the map to be the position of the moved marker. Also I might want to adjust the zoom level and zoom back to the default level after the user finished moving the marker. I would like to also have the option to decide, if this changes happen with a animation of not.

https://developer.apple.com/documentation/mapkitjs/map/2973936-setregionanimated

Implement the MapKit Events as property of the map Element.

So the region-change-end event would be implemented as onRegionChangeEnd, ...

<Map onRegionChangeEnd={(event) => console.log('Region changed to', event)} />

I just figured out the unmounting of the callout elements implemented with #55 doesn't work.

I implemented the new feature into my app and whenever you navigate to some other view all the annotations overlay the screen. I first thought it would be something related to React Router having issues with Portals but seems like a rather general issue to me.

I will further investigate these days and probably also submit a PR to fix, though wanted to open this bug already if someone comes up with the same issue.

I noticed another bug implemented with #55

So the callout elements attached to the Markers are being rendered all the time, outside the active scroll area but within the user viewport: https://nicolapps.github.io/mapkit-react/?path=/story/components-marker--custom-marker-callout (just scroll down a bit)

I will try to investigate, I don't think it is related with #56 but also cannot fully deny. Sorry for the inconvenience introduced with this implementation.

Hey! Digging the project so far! The API and code organization are great. Was wondering if exporting MapContext or a useMapContext hook would be inline with the API you want to support. I'm trying to use refs per the storybook examples, but find it a little clunky and unreliable for certain use cases. Particularly I want to author an Annotation component for custom images instead of using Marker and noticed Marker is consuming the map context instead of refs which feels like a nicer API for extending or building on top of mapkit-react.

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

In the mapkit js has a funcion who makes possible to zoom using the mouse wheel, if we press the shift or ctrl key, so i ask if its possible to make the zoom enable by default, without the need of pressing other keys, maybe it can be fix by overriding the _handleWheelEvent.
Thanks

The currently used storybook still is on v6 whereas v7 is already out. Storybook v6 is based on React 17 (or at least the console warnings say so), not sure if this has any implications with the code running inside the storybook but it might need an update.

I am currently trying to implement the support for custom Callouts and none of my implementations so far worked as expected. Most likely this is because of my lack of experience embedding REACT components in Javascript libraries, though I would feel more confident knowing it is not the reason of the React version or something. You can find my current progress here but this still needs a significant amount of work to do: https://github.com/nikischin/mapkit-react/tree/feature/customCallout

Maybe @derekr has better experience in implementing REACT components in Javascript and could help out?

Thank you!

I am trying to implement this plugin into my application. First of all thank you so much for providing this library, this is great!

However, while playing around I ran into the following issue:

export default function LocationOverviewMap () {
    const locations = [ {
        id: 1,
        lat: 48,
        lon: 9,
        title: 'Test 1 48 9',
    },
    {
        id: 2,
        lat: 49,
        lon: 9,
        title: 'Test 2 49 9',
    },
    {
        id: 3,
        lat: 48,
        lon: 10,
        title: 'Test 3 48 10',
    } ];

    const [ selectedLocation, setSelectedLocation ] = useState();

    return (
        <><div className='window-split-main'>
            <Header />
            <div style={{ height: 'calc(100vh - 60px)' }}>
                <Map
                    token="my token ..."
                    isRotationEnabled={false}
                    isZoomEnabled={true}
                    showsCompass={0}
                    showsMapTypeControl={true}
                    showsUserLocation={true}
                    showsUserLocationControl={true}
                    showsPointsOfInterest={false}
                    mapType={0}
                >
                    {locations.map(location=> (<React.Fragment key={location.id}>
                        <Marker
                            latitude={location.lat}
                            longitude={location.lon}
                            color='#333'
                            glyphImage={{ 1: 'https://externalimageurl.com' }}
                            onSelect={()=> setSelectedLocation(location.id)}
                        />
                        <Annotation
                            latitude={location.lat}
                            longitude={location.lon}
                            title={location.title}
                            selected={selectedLocation === location.id}
                        />
                    </React.Fragment>))}
                </Map>
            </div>
        </div></>
    );
}

The error happens whenever I click on one of the markers and an Annotation is visible. Not sure if I am doing the implementation wrong or what is the issue here.

Also when playing around with the Storybook I often after some time get an error like this, not sure if this is similar to the first error in my error log and has something to do with this error:

The param showsPointsOfInterest is not considered in the initial load, however working if the param is refreshed. Easily reproducable at the Storybook.

Steps to reproduce:

1. Open Map > Empty or Map > Custom Appearance storybook.
2. Set showsPointsOfInterest to false
3. Press Remount Component button

Current behavior:
Points of interest are again visible

Expected behavior:
Points of interest are not visible

Disclaimer: This is not a feature offered natively by MapKit JS

I noticed, that the color scheme of the map always defaults to the light color scheme. This seems to be a design choice by Apple and is not natively supported by the framework.

However, I was wondering if we could introduce a ColorScheme.Auto, to automatically switch to the dark theme based on @media (prefers-color-scheme: dark).

Is this something the library should support or is it something the user should rather implement as a custom functionality?

When trying to view the storybook docs, the website doesn't load.
Tried on Safari and Chrome macOS.

Importing a module script failed.

I would like the customize the annotations used for clustering. Therefore I would recommend implementing annotationForCluster and possibly also memberAnnotations.

More Info: https://developer.apple.com/documentation/mapkitjs/map/2991319-annotationforcluster
And: https://developer.apple.com/documentation/mapkitjs/annotation/2991318-memberannotations