Trying my hand at creating a custom Map component includes the task of designing a unique Map Annotation. Here's an example of how a MapAnnotation component appears in the render function:
<MapAnnotation title='Annotation' latitude={ 12.345678 } longitude={ 12.345678 }>
<div style={{width: '100px', height: '100px', backgroundColor: 'lightblue'}} />
</MapAnnotation>
The method for transforming the MapAnnotation component into a map object is straightforward:
createAnnotation(child) {
const { latitude, longitude, title } = child.props
var coordinate = new global.mapkit.Coordinate(latitude, longitude)
if ('children' in child.props) {
var newAnnotation = new global.mapkit.Annotation(coordinate, function(coordinate, options) {
var domElement =
return ReactDOMServer.renderToString(<div>{child.props.children}</div>)
}, { title: title })
return newAnnotation
} else {
var newAnnotation = new global.mapkit.MarkerAnnotation(coordinate, { title: title })
return newAnnotation
}
}
Encountering difficulty with returning the DOM element from children within the MapAnnotation is presenting a challenge. Currently receiving the following error message:
Error: [MapKit] Annotation element factory must return a DOM element, got
instead.<div data-reactroot=""><div style="width:100px;height:100px;background-color:lightblue"></div></div>
My background mainly lies in ReactNative, so tackling these nuances in React.js can be tricky. Any guidance or solutions to explore would be greatly appreciated :)