勉強したことのメモ

webプログラマが勉強したことのメモ。

leaflet.jsとOSMでマーカーの画像をそれぞれ指定する

      2020/06/23

leaflet.jsとOpenStreetMapでマップ上にマーカーを複数設置し、それぞれマーカーの画像を指定したい。またマーカークリック時はフキダシが表示され、フキダシ内にはHTMLタグ含むテキストを表示させたい。以下に方法をメモ。

 

サンプル

http://sample.taitan916.info/osm/marker.php

 

ソース

以前に書いたmakeMarker関数よりこっちの方が見やすい気がする。以前の方はjsonがどうのこうの書いていたが恐らくそっちは外部ファイルとかのjsonを読み込んで使う時に便利なんだろう。

 - JavaScript ,

  関連記事

IE&javascriptの予約語

前にもひっかかった問題で、今日同じことで 時間をとられたのでメモ。 予約語? っ ...

日付入力のテキストフォームにカレンダープラグインを導入

やりたかった事と制限は下記の通り。 ・日付入力のテキストフォームにカレンダープラ ...

javascriptでゼロパティング

月日をゼロパディングしたかったけど PHPとは違い、そういった関数は無かったので ...

JavaScriptで多次元連想配列

JavaScriptで多次元の配列を作る際にいつも迷ってしまうのでメモ。 ■こう ...

JavaScriptだけでTOPへ戻るリンクの表示

ページ内をある程度スクロールするとTOPへ戻るリンクを 表示させたかった。 ただ ...

Highstockの使い方とカスタマイズ

株価などの値動きを図表とするローソク足のグラフを何らかの方法で描写したかった。調 ...

javascriptで月末日を取得

以前、PHPで月末日を取得したけれども javascriptで月末日を扱いたいケ ...

jQueryでドロワーメニューの作成

■やりたかった事 スマホ用サイトにドロワーメニューを設置したかった。 &nbsp ...

GoogleMapAPIで現在地を更新する方法

GoogleMapAPIを使って現在地を取得してその場所にマーカーを設置、その後 ...

chardin.jsを利用して注釈を入れる

簡易マニュアルとかでむっちゃ使えそう。 ■chardin.js http://h ...