コトの発端
地図上に座標指定でマーカーを配置するとき、場合によってはデフォルトのマーカーだと、大きすぎたり、デザイン面で使いづらいことがあるよね。
現在地情報とは別に「しるし」をLeaflet地図につけたいときがあり、画像を使用せず、円などの図形を指定するような方法でマーカーを配置したかった。
円・丸形のマーカーを配置するcircleMarker
まずは描画したい円を定義し、circleMakerメソッドとaddメソッドを使ってマップに追加する。
//描画する丸形マーカーの定義
var gpsMarkerOptions = {
radius: 10, //半径
fillColor: "#ff7800", //塗りつぶし色
color: "#000000", //外枠の線の色
weight: 1, //外枠の線の太さ
opacity: 1, //外枠の線の不透明度
fillOpacity: 0.8 //塗りつぶしの不透明度
};
//座標の指定とマーカーの追加。オブジェクトもついでに取得。
var P1 = [34.649394, 135.001478];
var objP1 =
L.circleMarker(P1,
gpsMarkerOptions
).addTo(map);
var P2 = [34.648747, 134.993264];
var objP2 =
L.circleMarker(P2,
gpsMarkerOptions
).addTo(map); サンプル作ってみた。
サンプルHTML全文
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
<style>
#map{
width:640px;
height:480px;
}
</style>
<title>マップ</title>
</head>
<body>
<div id='map'></div>
<script>
//初期化
var map = L.map('map').setView([34.649394, 134.998000], 16);;
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© OpenStreetMap'
}).addTo(map);
//描画する丸形マーカーの定義
var gpsMarkerOptions = {
radius: 10, //半径
fillColor: "#ff7800", //塗りつぶし色
color: "#000000", //外枠の線の色
weight: 1, //外枠の線の太さ
opacity: 1, //外枠の線の不透明度
fillOpacity: 0.8 //塗りつぶしの不透明度
};
//座標の指定とマーカーの追加。オブジェクトもついでに取得。
var P1 = [34.649394, 135.001478];
var objP1 =
L.circleMarker(P1,
gpsMarkerOptions
).addTo(map);
var P2 = [34.648747, 134.993264];
var objP2 =
L.circleMarker(P2,
gpsMarkerOptions
).addTo(map);
</script>
</body>
</html>いつもの
記事の正確性については無保証です。
