JavaScript

2020/8/31

Leafletで地図やマーカーを削除(remove、removeLayer)する方法

はじめに 地図データを扱うためのJavaScript ライブラリである「Leaflet」と「OpenStreetMap」を使い、地図やマーカーを削除する方法を紹介します。 スポンサーリンク 地図の表示イメージは次の通りです。ボタンを押下することで、地図の削除・再表示、マーカーの表示・削除をすることができます。 OpenStreetMapとLeafletで地図やマーカーを削除する方法 HTMLとJavaScriptの実装例は以下です。 <!DOCTYPE html> <html> & ...

2020/8/31

OpenStreetMapとLeafletで表示位置を変更する方法

はじめに 地図データを扱うためのJavaScript ライブラリである「Leaflet」と「OpenStreetMap」を使い地図の表示位置を変更する方法を紹介します。 地図の表示イメージは以下の通りです。ボタンを押下することで、地図の表示位置が変わります。 JavaScriptの実装例 <!DOCTYPE html> <html> <head> <title>OpenStreetMapとLeafletで表示位置を変更する</title> &lt ...

2020/8/31

【OpenStreetMap】Leafletでマーカーの色を変更する方法

はじめに 地図データを扱うためのJavaScript ライブラリである「Leaflet」と「OpenStreetMap」を使い、マーカー(ピン)の色を変更する方法を紹介します。 地図の表示イメージは以下の通りです。 Leafletでマーカーの色を変更する方法 スポンサーリンク 「leaflet.sprite.js」の読み込み マーカーの色を変更するには「leaflet.sprite.js」が必要です。「leaflet.sprite.js」はGitHubからダウンロードすることができます。 GitHub:h ...

2020/8/31

【OpenStreetMap】Leafletで複数のマーカを表示する方法

はじめに OpenStreetMapとLeafletで地図にマーカーを複数を表示する方法を紹介します。 地図の表示イメージは以下の通りです。(東京タワー、東京スカイツリー、六本木ヒルズ にマーカーを表示しています) Leafletで地図にマーカを複数表示する方法 スポンサーリンク JavaScriptの実装例 <!DOCTYPE html> <html> <head> <title>OpenStreetMapとLeafletで地図にマーカーを複数表示する&l ...

地図にピンを立てる

2020/8/31

OpenStreetMapとLeafletで地図にピン(マーカー)を立てる

はじめに OpenStreetMapとLeafletで地図にピン(マーカー)を立てる方法を紹介します。 地図の表示イメージは以下の通りです。 OpenStreetMapとLeafletで地図にピン(マーカー)を立てる スポンサーリンク 実装例 <!DOCTYPE html> <html> <head> <title>OpenStreetMapとLeafletで地図にピンを立てる</title> <meta charset="utf-8"&g ...

地図

2020/8/31

OpenStreetMapとLeafletで簡単に地図を表示する方法

Leafletとは Leafletとは、地図データを扱うためのJavaScript ライブラリです。 Leafletの公式サイト:https://leafletjs.com/ Leafletはあくまでも地図データを扱うためのライブラリなので、Leaflet単体では地図を表示させることはできません。地図を表示させるためにはLeafletとは別に、地図サービスを使う必要があります。 スポンサーリンク   本記事では、クレジット表記をすれば、無料で利用できる地図サービスである「OpenStreetMa ...

2020/8/19

【JavaScriptの判定】null、undefined、==、===の違い

JavaScriptの判定方法 JavaScriptには、様々な判定方法があります。例えば「if (値)」と 「if (値 != null)」、「==」と「===」など。この違いを理解せず使用していると、思わぬバグを作りこんでしまう危険性があります。 本記事では、JavaScritpの判定方法について紹介しています。 スポンサーリンク 「if (値)」と「if (値 != null)」の違い if (値)による判定 if (値)の判定では、以下の例の通り「null」「undefined」「空文字」「0」が ...

2020/8/19

【JavaScript】Cognitoでパスワードを変更する方法

はじめに JavaScript用のSDKでAmazon Cognitoのユーザープールを使い、パスワードを変更する方法を紹介します。 JavaScriptでユーザープールを使うには「amazon-cognito-identity-js」が必要です。「amazon-cognito-identity-js」はnpmコマンドでインストールすることができます。 <script src="node_modules/amazon-cognito-identity-js/dist/amazon-cognito-i ...

2020/8/27

【Cognito】getSessionでトークン情報を再取得する方法

はじめに JavaScript用のSDKでAmazon Cognitoのユーザープールを使いログイン処理を実装し、ログインに成功すると「アクセストークン」や「IDトークン」などが取得できます。 ただ、この「アクセストークン」や「IDトークン」には有効期限(デフォルトの設定は1時間と短い)があり、有効期限が切れるとトークン情報は無効になってしまいます。 そこで、更新トークン(refreshToken)を使い、トークン情報を再取得することができます。※JavaScript用のSDKでは「getSession」 ...

2020/8/27

【Amazon Cognito】JavaScriptでログイン処理を実装する方法

はじめに JavaScript用のSDKでAmazon Cognitoのユーザープールを使いログイン処理を実装する方法を紹介します。 事前準備として、次のライブラリが必要となるので、npmコマンドでインストールします。 amazon-cognito-identity.min.js スポンサーリンク npm install amazon-cognito-identity-js ※npmコマンドはNode.jsをインストールすることで使うことができます。 関連記事 【Windows】Node.jsのインストー ...

© 2020 ITを分かりやすく解説