Yahoo!デベロッパーネットワークで提供しているYahoo! Open Local PlatformのAPI/SDK群の一つ、Yahoo! JavaScriptマップAPIを中心に作成されたWebアプリケーションのサンプルコード集です。

Yahoo!デベロッパーネットワークでアプリケーションIDを登録して下さい。

既に登録済みの方は、次へ進んで下さい。

• Gitを利用できる環境にある方は、次に示すコマンドでリポジトリを取得して下さい。
• Windows用のGitフロントエンドツールであるTortoiseGitを利用している方も、コマンド同様の場所から複製を入手して下さい。
• Gitを利用できる環境でない方は、ZIPアーカイブ形式で入手し、展開して下さい。

(リポジトリの取得)

$ git clone git://github.com/yahoojpYOLP/yolp-jsapi-samples.git

自分で登録・管理しているアプリケーションIDを、各サンプルコードのHTMLファイルに埋め込んで下さい。

各サンプルコードでは埋め込む箇所に「YourApplicationId」と記述されています。ご利用のテキストエディタ等で置換するか、UNIX系OSであれば、以下のように「登録したアプリケーションID(ここでは例としてOpenLocalPlatform)」へ書き変えてください。

(自分で登録したアプリケーションIDへの書き換え)

$ cd yolp-jsapi-samples
$ find . -type f -name "*.html" -print0 | xargs -0 perl -pi -e "s/YourApplicationId/OpenLocalPlatform/g"

アプリケーションIDを埋め込んだHTMLファイルを直接ウェブブラウザから開くことで動作が確認できます。

色々な箇所を書き変えて改造したり、これから作りたいWebアプリケーションの土台としたり、自由にお使い下さい。

白地図レイヤーの使い方を紹介したサンプルコードです。

白地図レイヤーを使うと、市区町村ごとに地図を塗り分けることができます。

GeoXml切り替えプラグインの使い方を紹介したサンプルコードです。

GeoXml切り替えプラグインを使うと、YDFでマークアップされた地点情報の集合度を視覚的な情報として地図上に表現できます。

経路探索プラグインの使い方を紹介したサンプルコードです。

経路探索プラグインを使うと、指定した地点間の経路探索をインタラクティブUIから指定して行えます。

スタイル地図レイヤーの使い方を紹介したサンプルコードです。

スタイル地図レイヤーを使うと、地図のベースカラーを変更したり、地図上から道路や建物を消したりといったスタイルを自由に変更できます。

株式会社翔泳社が運営するCodeZineへ寄稿したYOLP Hacks：API群を組み合わせてオリジナルWebアプリケーションを作るという記事に書かれた、Yahoo! JavaScriptマップAPIを利用して作るWebアプリケーションのサンプルコードです。

東京23区のうち、選択された地点を中心とするショップ情報分布をヒートマップで表示します。

株式会社翔泳社が運営するCodeZineへ寄稿したYOLP Hacks： APIの使い方～現在位置の常時表示／地図をなぞって距離を計測という記事に書かれた、Yahoo! JavaScriptマップAPIを利用して作るWebアプリケーションのサンプルコードです。

地図上のマウスでなぞられた部分に線を引き、その距離を計測できます。

このサンプルコードはGoogle Chromeブラウザに最適化されています。

株式会社翔泳社が運営するCodeZineへ寄稿したYOLPで挑戦～「マクドナルドはどこだ」アプリをHTML5で作る！という記事に書かれた、Yahoo! JavaScriptマップAPIを利用して作るWebアプリケーションのサンプルコードです。

現在地から最寄りのマクドナルドまでのルートと店舗の詳細情報を地図上に表示します。

このサンプルコードはiPhone Safariブラウザ、Android標準ブラウザに最適化されています。

オープンソースカンファレンス2012Nagoya、YOLP30分クッキング　Yahoo! JAPANのエンジニアがその場で作るスマホ地図サービスの中でコーディングした、Yahoo! JavaScriptマップAPIを利用して作るWebアプリケーションのサンプルコードです。

地図上をタップして作成したルートをLatLongLabのルートラボconnectから投稿できます。

このサンプルコードはiPhone Safariブラウザ、Android標準ブラウザに最適化されています。

イベント当日の資料は、以下のスライドをご覧下さい。ライブコーディング用の発表資料となりますので、スライドとソースコードを合わせて読み進めることをお薦めします。

• YOLP 30分クッキング(SlideShare)

このサンプルコードはMITライセンスにて提供しています。詳しくは LICENSE をご確認ください。

Yahoo! Open Local Platformチームでは、次の場所で開発者サポートを行っています。

• Yahoo!グループ: Yahoo!地図Web API
  • 投稿にはYahoo! JAPAN IDが必要です。
• @yahoojpYOLP
  • 投稿にはTwitter IDが必要です。