{"id":123380,"date":"2022-01-04T09:00:19","date_gmt":"2022-01-04T09:00:19","guid":{"rendered":"https:\/\/developer.apple.com\/news\/?id=ftkfxb8m"},"modified":"2022-01-04T09:00:19","modified_gmt":"2022-01-04T09:00:19","slug":"add-a-maps-web-snapshot-to-your-online-content","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2022\/01\/04\/add-a-maps-web-snapshot-to-your-online-content\/","title":{"rendered":"Add a Maps Web Snapshot to your online content"},"content":{"rendered":"
<\/div>\n

Maps Web Snapshots let you visually share important points of interest and details including business locations, geographic boundaries, and routes \u2014 simply by loading a URL. Snapshots work well when you\u2019d like to replace a static image on your website, within an email, or in another location where JavaScript isn\u2019t available and you don’t have need for a fully interactive map.<\/p>\n

\"You\u2019ve<\/p>\n

You\u2019ve probably seen Maps Web Snapshots in action if you\u2019ve used DuckDuckGo as your search engine.<\/p>\n<\/div>\n

To function, a Snapshot URL requires basic account information \u2014 including your Team ID and a Key ID you\u2019ll create specifically for accessing Apple Maps \u2014 along with a physical location to center the map. You\u2019ll also append a signature to ensure that the map request isn\u2019t altered anywhere between your server and Apple Maps.<\/p>\n

https:\/\/snapshot.apple-mapkit.com\/api\/v1\/snapshot?center=[location name or coordinates]&teamId=[Team ID]&keyId=[Maps Key ID]&signature=[base64_url_encoded_signature]<\/code><\/pre>\n
The center point of a map is the only required parameter for the URL, and can be either a comma-separated latitude and longitude pair or a physical address. For example, use center=\"Apple Park\"<\/code> to request a snapshot centered on Apple Park in California.<\/p>\n
<\/div>\n
Add query parameters<\/h3>\n
Maps Web Snapshots can be further customized by adding query parameters to display different annotations and overlay styles, alternate map types, and a choice of light or dark color schemes to better match your embedded content.<\/p>\n
Create a Maps Web Snapshot<\/a><\/p>\n
Add map annotations<\/strong> To add one or more annotations, use the annotations parameter and include an array of JSON Annotation objects representing the bottom center-point of each. To place the default style, append annotations=[\"point\":\"37.33489990234375,-122.00901794433594\"]<\/code> to your snapshot URL.<\/p>\n
You can additionally customize an annotation object to alter its color, style, size, or add a custom image.<\/p>\n
Set the color scheme<\/strong> Using the colorScheme<\/code> parameter, you can generate Maps Web Snapshots to match the content and the Appearance setting of a person’s device. For example, to fetch and display a snapshot of Apple Park when the device is set to Dark Appearance, you can append colorScheme=dark<\/code> to your snapshot URL.<\/p>\n
<\/div>\n
Choose your terrain<\/strong> To display a particular type of map, append the parameter with correct map value: standard<\/code>, satellite<\/code>, or hybrid<\/code>. For example, to fetch the satellite rendition of the Apple Park map, append t=satellite<\/code> to your snapshot URL.<\/p>\n
<\/div>\n
Explore Snapshots Studio<\/h3>\n
Now that you understand the fundamentals of Maps Web Snapshots, the best way to become familiar with the full extent of capabilities is by experimenting with Snapshots Studio.<\/p>\n
Visit Snapshots Studio<\/a><\/p>\n
Start a snapshot<\/strong> To preview a snapshot, begin by selecting an address or point of interest and choose your desired image dimensions and language.<\/p>\n
<\/div>\n
Then, click the Show Snapshot<\/strong> button to see the default representation of your chosen location.<\/p>\n
<\/div>\n
To modify results, you can use the snapshot map preview to customize the default annotation, choose a map type, and set the zoom factor.<\/p>\n
<\/div>\n
Create your own snapshots<\/strong> Want to build embeddable Maps Web Snapshots? You\u2019ll want to make sure you have the appropriate credentials. If you haven’t already created a Maps ID and MapKitJS private key, here\u2019s how to do so:<\/p>\n
    \n
  1. Create a new identifier (Maps ID) in your developer account. Like a bundle ID, a Map ID is created in reverse domain name notation. *maps.*<\/code> will be prepended to the string you enter. With your Map ID created, you\u2019ll next create your MapKitJS private key.<\/li>\n
  2. Create and register a MapKitJS Private Key in your developer account. First, enter a unique name in the Key Name<\/strong> field, select the checkbox next to MapKit JS, and click Continue<\/strong>.<\/li>\n
  3. Pick the Configure<\/strong> button. You\u2019ll link the key to the Maps ID you created previously by selecting it from the Maps ID<\/strong> dropdown menu.<\/li>\n
  4. Click the Save<\/strong> button.<\/li>\n
  5. Press Continue<\/strong>.<\/li>\n
  6. Click Register<\/strong> on the next screen. <\/li>\n
  7. When finished, click to download your MapKitJS Private key. Remember, after you\u2019ve downloaded your key, it cannot be re-downloaded as the server copy is removed. Be sure to save a backup in a secure place. <\/li>\n
  8. With your key downloaded, click the Done<\/strong> button and you\u2019re ready to create your own Maps Web Snapshots.<\/li>\n<\/ol>\n
    Learn how to create an identifier for your developer account<\/a><\/p>\n
    Learn how to create and register a private key<\/a><\/p>\n
    With the above credentials ready, head back to Snapshots Studio. Enter your developer team ID, MapKitJS key information, the domain you\u2019ll refer the Snapshot from, then press the OK<\/strong> button to validate your credentials.<\/p>\n
    <\/div>\n
    After validation, click the Show Snapshot<\/strong> button one more time.<\/p>\n
    Now, your map preview image will include a URL that can be placed on your website and linked to from wherever you wish.<\/p>\n
    <\/div>\n
    Explore Dynamic Snapshots<\/strong> While the generated Maps URL contains all the maps details you configured in Snapshots Studio, it\u2019s actually a flexible template with customizable parameters you can adjust each time the snapshot is requested. To explore all the options you can customize, check out the Maps Web Snapshots documentation for more information.<\/p>\n
    Maps Web Snapshots<\/a><\/p>\n
    Learn more about MapKitJS<\/a><\/p>\n
    Make the most of your Maps Web Snapshots<\/h3>\n
    By default, you can display up to 25,000 unique Maps Web Snapshots requests free with your Apple Developer Program membership. <\/p>\n
    To avoid accesses that count toward your service limit, we recommend retrieving, storing, then embedding the rendered image rather than serve a link that retrieves the image at display time. If you need additional capacity for your implementation, please contact Developer Relations.<\/p>\n
    Request a MapKit JS Capacity Increase<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    Maps Web Snapshots let you visually share important points of interest and details including business locations, geographic boundaries, and routes \u2014 simply by loading a URL. Snapshots work well when you\u2019d like to replace a static image on your website, within an email, or in another location where JavaScript isn\u2019t available and you don’t have […]<\/p>\n","protected":false},"author":2,"featured_media":123381,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[55],"tags":[],"class_list":["post-123380","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-apple-developer-news"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/123380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=123380"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/123380\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/123381"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=123380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=123380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=123380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}