MapKitのさらなる活用

MapKitのさらなる活用

MapKitとMapKit JSの最新アップデートをご確認ください。新しい経路のタイプである「サイクリング」と、3D Look Around画像をWebで有効にする方法について解説します。新しいGeocoding APIで座標／住所の変換をサポートする方法や、Address Representations APIで各地域に最適な住所を取得する方法を紹介します。最後に、アプリをApp Intentとシームレスに連携させるための新しい場所参照の方法にも触れます。

関連する章
- 0:00 - イントロダクション
- 0:45 - 場所の特定
- 9:34 - 場所の表示
- 14:14 - 移動のナビゲーション
リソース
関連ビデオ

WWDC24
- MapKitによる場所の可能性の実現
WWDC23
- SwiftUI向けのMapKitについて
WWDC22
- MapKitの最新情報
こんにちは Alexです MapKitチームでエンジニアをしています Appleマップは道案内として利用できデバイスから世界中の様々な場所を探索できます歴史的な建物から居心地の良いカフェ地元のお店魅力的なハイキングコースまで様々なものを発見できますここではアプリやWebサイトにマップ機能を取り入れる MapKitとMapKit JSの最新情報を説明しますまず場所を見つけて参照する新しい方法の PlaceDescriptorから始めます次にジオコーディングとそれを使用して場所に関する情報を表示する方法について説明します最後に Directions APIと Look Around APIを使ってユーザーを目的地に導く方法を説明しますでは場所を見つけて参照する方法から始めましょう昨年 Appleは MapKitフレームワークのマップアイテムや MapKit JSのPlaceによって表された場所を参照できる識別子を導入しましたこの参照は一意であり長期にわたって有効です MapsチームがWebサイトのURLなど場所のデータを更新するたびに場所IDを使用しているアプリにその最新情報を表示できますこれらの識別子は一意なのでそれぞれのデータ構造で場所IDをキーとして使用できます識別子は永続化と共有が可能です Appleではこのデータを追跡しているのでアプリでいつでも参照できます MapKitで見つけた特定の場所への参照を永続化する場合場所IDは依然として最良の選択ですしかしそれが最適ではない場合もあります識別子がない場合でも特定の場所に関する MapKitの豊富なデータを見つけたい場合があります例えばすべての事業所の名前と住所を提供するWeb APIやCRMがある場合や特定の場所の名前と座標がある場合がそうですこのような場合 1つの場所を正確に見つける必要がありますそのため複数の結果を返すローカル検索のようなAPIは最適ではありませんまた自分のものではないコードとの間で場所の参照をやり取りしたい場合もありますフレームワークから土地を販売するなどですまたは App Intentを使用している場合 Intentのパラメータとして場所を取得し Intentの結果として場所を返したり場所をApp Entityのプロパティとして含めたりすることがありますこのような場合 MapKitをまったく使用していない他のアプリとのやり取りも考えられます CLLocationのような純粋に地理的な表現を渡すことができますが MapKit識別子を使用する場合と違い興味のある場所の詳細情報を見つける適切な方法はありませんこれらの場合に対処できるよう新たに PlaceDescriptorを導入しますこれは新しいフレームワーク GeoToolboxに含まれています PlaceDescriptorにより構造化された方法で場所を記述する情報を提供できます
MapKitまたは他のマッピングサービスプロバイダで PlaceDescriptorを使用するとその場所に関する詳細なデータを探すことができます PlaceDescriptorには3つの上位レベルの情報があります 1つ目はcommonNameという文字列です PlaceDescriptorを使用する場合 Guggenheim Museumや Sydney Opera Houseなどのよく知られた名前を指定してくださいこの項目は「母の家」のようなプライベートなデータ用ではなく含めてもMapKitで場所を見つける役には立ちません
PlaceDescriptorには表現の配列もありますこれらの表現は地理的情報を扱うアプリやフレームワークが理解できる一般的な形式です PlaceRepresentationsには 3つの選択肢があります 1つ目は封筒に記載するような住所の文字列ですなるべく詳細な住所を提供すると MapKitでその場所が見つかる可能性が高まります次は既知の歴史的建造物や事業所など固定された明確な場所にある座標です最後は CLLocationを使用する deviceLocationですこれは受信したGPSデータでの使用に適していて精度タイムスタンプ進行方向速度など追加の値を使用することもできます表現の配列には少なくとも1つの表現が含まれていて先に現れたものから順に並んでいる必要があります例えば連絡先アプリで使用する PlaceDescriptorの場合座標はその場所の住所から得られている可能性がありますその場合住所が元の情報であるため住所が先頭に来て座標が次に来ます最後に PlaceDescriptorにはサポート表現の配列がありますこれらの表現はアプリによって使用できず必須ではありません supportingRepresentations配列は空にできます supportingRepresentationsでできることは後で詳しく説明します PlaceDescriptorと今後登場するAPIについて説明するためにサンプルアプリを使いますこれは噴水好きが世界中の遠く離れた場所にある噴水を見つけるためのものです最初に魅力的な訪問地であるダブリンの噴水を集めそれらをマップ上に配置しましょう
SwiftUIのMapKitが登場してから座標を使ってマップ上に簡単なマーカーを作れますがここでは場所IDがないものの噴水に関する充実したAppleマップデータをアプリの他のすべてのMapKit APIと組み合わせて活用しますこれはPlaceDescriptorを使用する絶好の機会ですこの噴水を参照する PlaceDescriptorを作りますまず GeoToolboxをインポートしますこの座標に噴水があることがわかっているので PlaceDescriptorを作成するときそれを使用して座標表現を指定します最後に噴水の名前 Anna Livia Fountainが既知なのでその名前を指定しますこれだけで有効な PlaceDescriptorを作成できますさらにMapKitをインポートしマップアイテム要求を私のPlaceDescriptorを使用して作成します要求を準備できたらそれを実行してその場所の MKMapItemを取得できます MapItemはMapKitの場所に関するコアタイプであり様々な種類のAPIで使用できます
例えばマップ上でMapItemを使用できますマーカーにはこの場所の名前や色 Appleマップ用のアイコンが表示されることがわかります
マップに2番目の場所を追加しましょう今回は住所を使用して記述子を作成しますこの噴水のできるだけ詳細な住所を指定する必要があります次にその住所と噴水の名前を使用して PlaceDescriptorを作れます前と同じようにMKMapItemRequestを使用しそれを他の噴水と一緒にマップに追加しますとても簡単です PlaceDescriptorの名前座標住所の PlaceRepresentationsを使用して場所を見つけることができることを示しました PlaceDescriptorのもう1つの最上位プロパティを使用できますサポート表現にはサービス識別子という1つの種類がありますサービス識別子の表現は辞書でありキーは特定のマッピングサービスのバンドル識別子で値はそのマッピングサービスでの場所を表す識別子です
例えばある場所のMapKit 場所IDがわかっている場合キーがcom.apple.mapKitで値がその識別子である辞書を作成できますさらに serviceIdentifiers表現を作成し PlaceDescriptorイニシャライザの supportingRepresentationsに渡します別のマッピングサービスプロバイダが提供する場所の識別子がわかる場合はそれをここで指定できます MapKitは他の識別子を使用しませんが指定すると MapKitを使用しない別のアプリに PlaceDescriptorを提供できる App Intentなどのシナリオで役立ちます識別子は必要に応じていくつでも指定できます MapKit APIを使用する場合サービス識別子を使用するのが適切です PlaceDescriptorのMapKit識別子が存在する場合 MKMapItemRequestはそれらを使用して場所を取得します MapKit識別子がない場合や指定された識別子の使用に何らかの理由で失敗した場合 PlaceDescriptorの他の表現を使用して場所を見つけます同様に別の方法で得られたMapItemを使用してPlaceDescriptorを作成する場合 PlaceDescriptorに識別子を含む必要なすべての表現が設定されていることを確認します PlaceDescriptorと MKMapItemRequestを使用して私の知っているダブリンの残りの噴水をアプリに追加します PlaceDescriptorを指定して要求した MapItemを様々なMapKit APIで使用すると識別子やMKLocalSearchを使用して取得したものと同様の詳細なマップデータを表示できます
例として場所カードを考えます PlaceDescriptorで要求した場所の場所カードを提示する場合営業時間などの詳細な最新データや Appleへのリンクを表示できますたった1行のコードでユーザーがアプリ内で噴水を選択したとき場所カードを提示できます場所カードは場所に関する種々の有用な情報を表示する簡単な方法です詳細についてはWWDC2024の「Unlock the power of places with MapKit」をご確認ください
場所カードと言えば今年の MapKit JSの場所カードでは Appleマップへのユニバーサルリンクも提供されますマップアプリがインストールされているデバイスではリンクからマップが開きますまたマップアプリがないデバイスでは場所カードは maps.apple.comにリンクします昨年の夏にパブリックベータ版を公開していますこれでアプリやWebサイトが Appleマップにリンクされている場合 Appleプラットフォーム以外でもWeb上のマップを使用してさらに探索できます iOS 18.4のロールアウトに伴いマップでのURLの処理が更新されておりこのようなユニバーサルリンクを自信を持って作成できます例えばこのURLでは検索を実行しますパラメータの一貫性シンプルさ読みやすさが向上しました
また多数のパラメータを追加しておりマップ内でより多くの機能にリンクできます「統一されたマップのURLを導入する（英語）」を確認してくださいこのビデオの資料にリンクされていますユニバーサルなマップのリンクをアプリで使用できます
場所が見つかりました次にジオコーディングと住所表現を使用してアプリ内で場所の詳細な情報を表示する方法を説明します
説明すると正ジオコーディングとは住所を取得してそれが参照する座標を見つけるプロセスですこの一例は連絡先アプリで住所をタップしたときにマップに移動するものです
逆ジオコーディングはその逆です座標が提供されると住所を返しますこの一例はマップアプリにピンをドロップする場合でその場所の住所情報が表示されます
iOS 18以前は CoreLocationを使用してジオコーディングタスクを実行していました今年はCLGeocoderを非推奨とし CLPlacemarkをソフトな非推奨としてジオコーディングをMapKitに導入しました
私のアプリでは自分で見つけて見事な写真を撮った噴水を追跡できるようにしたいと思いますこれらの写真にはジオタグつまり撮影された場所を示す座標はありますが名前などのサポート情報がありませんそのためPlaceDescriptorでは場所の詳細がわかりませんあるのは座標だけですそこで MapKitで逆ジオコーディングを使用して写真の横に表示するコンテキストを見つけます
最初の噴水の写真を逆ジオコーディングしてみましょう
写真を撮影した座標から始めます次にその場所を使用して MKReverseGeocodingRequestを作成しますすでに説明した PlaceDescriptorを使用する MKMapItemRequestとは異なり MKReverseGeocodingRequestsのイニシャライザはオプショナル型を返します CLLocationに無効な座標を指定した場合 MapKitは要求を実行できません要求が結果を返すとマップアイテムの配列が得られます大部分のジオコーディング要求ではこの配列のエントリは1つなので最初のものを選択しますなおこのマップアイテムは Geocoding APIから得られたので関心のある場所の詳細な情報は含まれませんこのmapItemには住所の地点に関する情報のみが含まれていますこれでマップアイテムが得られたので住所を表示できます
MKReverseGeocoding要求を使用して残りの写真の住所を取得しそれらをリスト表示します私のアプリは良くなっていますがこの画面では完全な住所は詳しすぎる可能性がありますそこで他の選択肢を確認してみます MKMapItemには住所情報にアクセスするためのオプションプロパティが2つあります
1つ目はMKAddressです独自のMKMapItemを作成するときに独自のMKAddressをインスタンス化できますまた MapKitではジオコーディングローカル検索 PlaceDescriptorの解決などのAPIからMapItemを返す際にも MKAddressを提供します 2つ目はイニシャライザを持たない MKAddressRepresentationsです住所表現はMapKit APIから返されたマップアイテムでのみ使用できます
まず MKAddressについて説明しますこれにはfullAddressとshortAddressの 2つの文字列プロパティがあります
FullAddressは最も詳細な郵便用または行政上の住所です一方 shortAddressは住所の最も重要な部分のみを提供します
場合によっては提供する住所が非常に簡潔なことがあります例えば海の真ん中の座標の逆ジオコードはわずか1行になる可能性があります
独自のMapItemをインスタンス化する場合住所プロパティがMapKitの場所カードで使用され独自の住所情報を表示できます
MKAddressは住所のシンプルバージョンを提供しますが MKAddressRepresentationsはアプリ内で住所情報を表示する強力な方法を数多く提供します例えば詳細な住所の一覧を表示する場合すべて同じ国の住所だとわかっていればアプリUIで地域を省略できますそれには fullAddressの includingRegionをfalseに設定しますまたは都市とその場所についての追加コンテキストを表示したい場合や場合によっては州名や都道府県名を提供したい場合がありますさらにまたフランスのパリのように国名を含めたい場合もあります MapKitでは住所に適したものを選択したりマップアイテムを要求しているデバイスのロケールや地域情報を選択したりすることでこれを簡単に実現しますこれで私のアプリに使用できる様々な住所表現について理解できたので cityWithContextを選択して写真と一緒に表示する住所情報をより簡潔にしますアプリに適切な詳細度で住所を表示でき見た目が改善されました
正ジオコーディングのAPIは逆ジオコーディングとよく似ています MKGeocodingRequestを使用すると住所に対するMapItemを返すことができますこれにより座標へのアクセスやマップへの座標の追加が非常に簡単になりますまた先ほど説明した住所情報に関するオプションもすべて含まれているためジオコーディングを要求する前にはなかった住所についての様々な表示表現を取得できます
場所を見つけてそれらに関する情報を表示できたので道案内に役立つ MapKit APIを紹介します MapKitには徒歩や車など複数の交通手段による出発地から目的地までのルートを見つけることができる Directions APIがあります Directions APIは目的地までの時間と距離の推定値や着くまでの流れなどの詳細情報を提供します
ダブリンのマップビューに戻り私が厳選した噴水への道順を構築したいと思いますマップ上での選択を有効にするためにマップのイニシャライザでマップアイテムのバインディングを指定しますその後選択したアイテムが変更されたときルートを計算できますマップの選択を処理する方法の詳細については WWDC 2023の「Meet MapKit for SwiftUI」をご覧くださいルートを取得するにはまず道順要求を作成します次にデバイスの現在地を出発地として設定し選択されているマップアイテムを目的地として設定しますさらに道順オブジェクトを作成し最後にルートを計算しますエラーを処理してから応答を処理します道順要求の応答には何が含まれているでしょうか
ここでは求めているルートに一致した出発地と目的地を返しますこれらは要求で提供したものとは多少異なる場合があります例えば運転の道順では駐車場が考慮される場合があり徒歩の道順では建物の入口まで直接誘導する場合があります
また要求を満たす1つ以上のルートを持つ配列も含まれています
ルートには強力な情報が多数含まれていますルートのタイトルとして使用できるローカライズされた名前通行止めなどルートに関連する通知の配列そのルートを移動するのに必要なメートル単位の距離そのルートを移動するにかかる時間マップ上での描画に適したルートの形状などがあります
Appleは今年 MapKitに自転車の道順のサポートを追加しました私のアプリではサイクリングがダブリンの噴水を訪れるのに最適な方法ですこれは簡単に使用でき道順要求で 1つのプロパティを変更するだけです道順として有望な自転車ルートを表示したいので応答から最初のルートを取得し MapPolylineを使用してそれをマップに追加します道順を表示するのはとても簡単です
MapKitを使った自転車ルートは強力です自動車では利用できない小道やサイクリングロードを利用し自転車に適さない特定の道路を除外しますまた MapKit JSを使用して自転車の道順や到着予定時刻を取得することもできます Swiftの場合と同様に必要な作業は既存の道順要求に 1行の構成を追加し交通手段タイプとして自転車を指定するだけです
また今回初めてwatchOSで MapKitを使用して道順を取得できるようになりました実際最新のwatchOS SDKにより 20を超えるMapKit APIを Apple Watchで利用できます
私の噴水ツアーに適した自転車ルートができたので事前にルートを詳しく調べることができればより快適に走れるでしょうマップのLook Around機能を有効にすると360度のインタラクティブなストリート画像を取得でき道路自転車レーン駐輪場目標物を簡単に確認できます
当社はiOS 16のMapKitアプリに Look Aroundを導入しましたこれには画像が特定の場所にあるかどうかを確認するAPI 周囲の画像を確認するAPI 全画面で表示するAPIが含まれます詳細はWWDC 2022の「What’s new in MapKit session」をご覧ください
今年は MapKit JSに Look Aroundを導入したので WebサイトやWebアプリで Look Aroundを有効にできます 2種類のLook Aroundビューを追加できます
1つ目はインタラクティブな Look Aroundです独自のUI内にユーザーが操作できるLook Aroundビューを埋め込むことができます 2つ目はLook Aroundプレビューです目的の場所に画像の静的スナップショットを提供できますプレビューをクリックすると全画面表示でインタラクティブな体験が起動しますインタラクティブなLook Aroundビューを追加するにはplaceオブジェクトが必要です placeLookup search geocodingなどの場所を返す任意のMapKit JS APIを使用できますこの場合は識別子があるので placeLookupを使用します次に含まれているDOM要素を渡す lookAroundオブジェクト placeオブジェクト options辞書を作成します Look Aroundビューでは 3つのオプションがサポートされています 1つ目はopenDialogですこのオプションがtrueの場合 Look Aroundビューはブラウザウィンドウ全体をカバーします 2つ目はshowsDialogControlですこれがtrueの場合ボタンが Look Aroundビューに表示されますこのボタンで全画面表示を開始または終了できます最後はshowsCloseControlです trueの場合 Look Aroundビューを閉じるボタンが表示されます MapKit JSはLook Aroundビューに関連する様々なイベントを発生させますイベントリスナーを追加して応答したりデフォルトの動作を変更したりできます例えばユーザーが閉じるボタンをタップすると closeイベントが送信されますこのコールバックを使用してアニメーションを実行したりアプリに応じた状態の変更を実行したりできます
このイベントのデフォルト動作をキャンセルしない場合 Look Aroundビューは DOMから削除されます他に次のようなイベントを扱えます loadイベントはビューが完全に読み込まれたときディスパッチされます errorイベントは問題がある場合にディスパッチされます例えば画像を利用できない場合やブラウザがビューを表示できない場合がこれに該当します MapKit JSはエラーUIを提供しますが独自のエラー体験またはフォールバック体験を用意することができます最後に Look Aroundはreadystatechange イベントを発生させますこれを使用するとビューのライフサイクルを監視できます準備完了状態はビューの読み込み中読み込みの完了時ビューでのエラー発生時 DOMからのビューの削除時に変化します Look Aroundビューに加えて Look Around Preview APIを使用するとよりシンプルな体験を実現できます Look Aroundプレビューはインタラクティブではなくユーザーはビューの視点を変更できません Look Aroundプレビューをクリックするとウィンドウ全体に表示されます MapKit JSでLook Aroundを使うと Webサイトをレベルアップできますこのセッションの内容は以上ですとても盛りだくさんでした MapKitとMapKit JSで場所を見つけ場所の情報を表示しマップを世界中の場所の道案内として使用する方法を説明しました
最後に皆さんに宿題です PlaceDescriptorを使用して識別子がある場合とない場合に場所を見つけて場所の参照を他のアプリに送信してください Appleマップへのリンクを更新して新しい統一されたURL形式を使用してください
ジオコーディングを使用するためアプリを CoreLocationからMapKit APIに移行し素晴らしい住所表現を活用してください最後に自転車の道順とLook Aroundをアプリに追加して人々の移動を支援してください
ご視聴いただきありがとうございました

4:49 - Putting Marker on the Map with a coordinate

// Putting Marker on the Map with a coordinate

let annaLiviaCoordinates = CLLocationCoordinate2D(
    latitude: 53.347673,
    longitude: -6.290198
)
var body: some View {
    Map {
       Marker(
            "Anna Livia Fountain",
            coordinate: annaLiviaCoordinates
        )
    }
}

5:07 - Creating and resolving a PlaceDescriptor with coordinate PlaceRepresentation

// Creating and resolving a PlaceDescriptor with coordinate PlaceRepresentation

import GeoToolbox
import MapKit

let annaLiviaCoordinates = CLLocationCoordinate2D(
    latitude: 53.347673,
    longitude: -6.290198
)
let annaLiviaDescriptor =  PlaceDescriptor(
    representations: [.coordinate(annaLiviaCoordinates)],
    commonName: "Anna Livia Fountain"
)

let request = MKMapItemRequest(placeDescriptor: annaLiviaDescriptor)
do {
    annaLiviaMapItem = try await request.mapItem
} catch {
    print("Error resolving placeDescriptor: \(error)")
}

5:56 - Creating and resolving a PlaceDescriptor with address PlaceRepresentation

// Creating and resolving a PlaceDescriptor with address PlaceRepresentation

import GeoToolbox
import MapKit

let address = "121-122 James's St, Dublin 8"
let descriptor =  PlaceDescriptor(
    representations: [.address(address)],
    commonName: "Obelisk Fountain"
)

let request = MKMapItemRequest(placeDescriptor: descriptor)
do {
    obeliskFountain = try await request.mapItem
} catch {
    print("Error resolving placeDescriptor: \(error)")
}

6:45 - Creating a PlaceDescriptor with identifiers

// Creating a PlaceDescriptor with identifiers

import GeoToolbox

let annaLiviaCoordinates = CLLocationCoordinate2D(
    latitude: 53.347673,
    longitude: -6.290198
)
let identifiers = ["com.apple.MapKit" : "ICBB5FD7684CE949"]
let annaLiviaDescriptor =  PlaceDescriptor(
    representations: [.coordinate(annaLiviaCoordinates)],
    commonName: "Anna Livia Fountain",
    supportingRepresentations: [.serviceIdentifiers(identifiers)]
)

7:28 - Fetching a MapItem from a PlaceDescriptor

// Fetching a MapItem from a PlaceDescriptor

let request = MKMapItemRequest(placeDescriptor: descriptor)
let mapitem = try await request.mapItem

7:43 - Getting a PlaceDescriptor from a MapItem

// Getting a PlaceDescriptor from a MapItem

let descriptor = PlaceDescriptor(mapItem: mapitem)

8:10 - Place Card

// Place Card

var body: some View {
    Map {
        ForEach(fountains, id:\.name) { fountain in
            Marker(item: fountain)
                .mapItemDetailSelectionAccessory(.callout)
        }
    }
}

10:45 - Reverse geocode with MapKit

// Reverse geocode with MapKit

import MapKit

let millCreekCoordinates = CLLocation(latitude: 39.042617, longitude: -94.587526)
if let request = MKReverseGeocodingRequest(location: millCreekCoordinates) {
    do {
        let mapItems = try await request.mapItems
        millCreekMapItem = mapItems.first
    } catch {
        print("Error reverse geocoding location: \(error)")
    }
}

13:50 - Forward geocoding with MapKit

// Forward geocoding with MapKit

var body: some View {
    Map {
        if let mapItem {
            Marker(item: mapItem)
        }
    }
    .task {
        let request = MKGeocodingRequest(
            addressString: "1 Ferry Building, San Francisco"
        )
        do {
            mapItem = try await request?.mapItems.first
        } catch {
            print("Error geocoding location: \(error)")
        }
    }
}

14:38 - Allowing Map Selection

// Allowing Map Selection

@State var selectedItem: MKMapItem?

var body: some View {
    Map(selection: $selectedItem) {
       UserAnnotation()
       ForEach(fountains, id: \.self) { item in
          Marker(item: item)
       }
    }
    .onChange(of: selectedItem) {
       // Compute Route
    }
}

15:00 - Fetch a route

// Fetch a route

let request = MKDirections.Request()
request.source = MKMapItem.forCurrentLocation()
request.destination = selectedItem
let directions = MKDirections(request: request)
do {
    let response = try await directions.calculate()
    returnedRoutes = response.routes
} catch {
    print("Error calculating directions: \(error)")
}

16:06 - Fetch a cycling route

// Fetch a cycling route

let request = MKDirections.Request()
request.source = MKMapItem.forCurrentLocation()
request.destination = selectedItem
request.transportType = .cycling
let directions = MKDirections(request: request)
do {
    let response = try await directions.calculate()
    returnedRoutes = response.routes
} catch {
    print("Error calculating directions: \(error)")
}

16:25 - Display a route on the Map

// Display a route on the Map

Map {
    if let mapRoute {
        UserAnnotation()
        MapPolyline(mapRoute)
            .stroke(Color.blue, lineWidth: 5)
    }
}

16:40 - Cycling directions in MapKit JS

// Cycling directions in MapKit JS

let directions = new mapkit.Directions();
directions.route ({
    origin: safariPlayground,
    destination: cherryHillFountain,
    transportType: mapkit.Directions.Transport.Cycling
}, (error, { routes: [{ polyline }] }) => {
    polyline.style.lineWidth = 5;
    map.showItems([
        new mapkit.PlaceAnnotation(place),
        new mapkit.PlaceAnnotation(
          place2,
          { selected: true }
        ),
        polyline
    ]);
});

17:26 - Look Around

// Look Around

var body: some View {
    Map {
        ForEach(fountains, id:\.name) { fountain in
            Marker(item: fountain)
       }
    }
    .overlay(alignment: .bottomLeading) {
        if (lookAroundScene != nil) {
            LookAroundPreview(scene: $lookAroundScene)
                .frame(width: 230, height: 140)
                .cornerRadius(10)
                .padding(8)
        }
    }
}

18:10 - Look Around View in MapKit JS

// Look Around View in MapKit JS

const placeLookup = new mapkit.PlaceLookup();
const place = await new Promise(
    resolve => placeLookup.getPlace(
        "IBE1F65094A7A13B1",
        (error, result) => resolve(result)
    )
);

// Create an interactive look around view.
const lookAround = new mapkit.LookAround(
    document.getElementById("container"),
    place,
    options
);

18:35 - Look Around Options

// Look Around Options for MapKit JS

const options = {
    // Enters a full window experience
    // immediately on load
    openDialog: true,
    
    // Provides a button to enter and
    // exit full window.
    showsDialogControl: true,
    
    // Provides a button to destroy
    // the look around view.
    showsCloseControl: true,
};

19:10 - Handle MapKit JS Look Around events

// Handle MapKit JS Look Around events

lookAround.addEventListener(
    "close",
    event => {
        app.closeView();
        event.preventDefault();
    }
);

lookAround.addEventListener(
    "load",
    event => app.fadeInView()
);

lookAround.addEventListener(
    "error",
    event => app.fadeOutView()
);

lookAround.addEventListener(
    "readystatechange",
    event => console.log(lookAround.readyState)
);

20:01 - MapKit JS Look Around Preview

// MapKit JS Look Around Preview

const lookAround = new mapkit.LookAroundPreview(
    document.getElementById("container"),
    place
);

関連する章

リソース

関連ビデオ

WWDC24

WWDC23

WWDC22