Post not yet marked as solved
Hello! MapKit JS sample code is now available at https://maps.developer.apple.com/sample-code.
Here's a list of the samples that are currently available:
Embedded Map Demonstrates simply displaying a map with minimal code.
Annotations & Reverse Geocoding Demonstrates adding/removing annotations, using the Reverse Geocoding API to find place data.
Annotations with a Custom Callout Demonstrates how to add custom styles to annotation callouts.
US Population By State Overlays Demonstrates displaying, transforming, and interacting with GeoJSON-based map overlays.
Callout Accessory Views Demonstrates displaying additional customized elements within a callout.
Region and Zoom Limits Demonstrates limiting a map's viewport's zoom levels and latitude/longitude constraints.
Animated Polyline Overlays Demonstrates animating an overlay property in a request animation frame loop.
Posted
by
Frameworks Engineer.
Last updated
.
Available today, you can now use custom images for annotations on Maps Web Snapshots.
The full list of available annotation styles for Maps Web Snapshots is now: dot (a small circle)
balloon (default balloon-style annotation)
large (a selected balloon)
*NEW* img (your own custom image)
To use: Specify the images that you want to use in the imgs array. Each item in imgs should be an Image - https://developer.apple.com/documentation/snapshots/image JSON object, which lets you specify parameters like url, height, and width.
Set markerstyle=img on your Annotation - https://developer.apple.com/documentation/snapshots/annotation object. Use imgIdx to choose an image within imgs for this annotation.
To get the full story on creating static map images to use on websites, in email, and more, check out the Maps Web Snapshots - https://developer.apple.com/documentation/snapshots documentation.
Posted
by
Frameworks Engineer.
Last updated
.
Post not yet marked as solved
New this week, MapKit JS version 5.45 and later supports gradients and animation for polyline overlays.
Gradients can be helpful for conveying additional information along a path, such as elevation or speed changes. To add a gradient to a polyline, first create a mapkit.LineGradient - https://developer.apple.com/documentation/mapkitjs/mapkit/linegradient object and add color stops with addColorStop and/or addColorStopAtIndex. Then set lineGradient on the overlay Style - https://developer.apple.com/documentation/mapkitjs/mapkit/style class to this object.
To animate a line, use the strokeStart and strokeEnd properties on the overlay Style - https://developer.apple.com/documentation/mapkitjs/mapkit/style class. These properties are observable and regulate the start and the end point of the polyline rendering. By updating the properties with a timer loop and your own timing function, you can animate a polyline overlay however you like.
These features are also available in MapKit for a consistent experience in your apps and websites. For more information, see the documentation on MapKit Overlays - https://developer.apple.com/documentation/mapkit/mapkit_overlays.
Posted
by
Frameworks Engineer.
Last updated
.
