割と便利な、ウェブサイトへのかんたん地図組み込み、csv-mapタグmap-viewタグ。 マーカー色を指定したいとのご要望と合わせて、オープソースleaflet.spriteを教えていただいたので、ESモジュール化して対応。

csv-map tag demo
タグのcolor属性か、csvのcolor項目が、下記7色に該当すればその色のマーカーとなります。

colors: "blue", "green", "orange", "yellow", "red", "purple", "violet"

csv-map、CSVファイルのsrc属性での指定に加え、タグ内部へのCSV直接記述にも対応しました(参考HTML

leaflet.sprite-esは、Leaflet.mjsと組み合わせて、自在な地図アプリにも組み込めます。 import L from "https://code4sabae.github.io/leaflet-mjs/leaflet.mjs"; import { LeafletSprite } from "https://taisukef.github.io/leaflet.sprite-es/src/sprite.js"; LeafletSprite.init(L); // const color = "red"; const icon = L.spriteIcon(color) const marker = L.marker(latlng, { icon }); // ご活用ください!

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS