ソースファイルを表示
sample/sample_crs_svg.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
<title>Leafletで矢印のSVGデータを表示</title>
<link rel="stylesheet" href="js/leaflet.css" />
<script src="js/leaflet.js"></script>
<style type="text/css">
#map_container {
background: #fff7e7;
position:absolute;
top:0; left:0; right:0; bottom:0;
cursor: default;
}
#btn_container {
position:absolute;
left:12px; bottom:12px;
z-index: 1000;
}
</style>
<script type="text/javascript" charset="UTF-8">
var map; // leaflet地図
var bound; // 表示領域（全体表示で表示される範囲）
function init() { // 初期処理
map = L.map('map_container', {crs: L.CRS.Simple, minZoom: 5, maxZoom: 12, zoomControl: false});
L.control.zoom({position:'bottomright'}).addTo(map); // ズーム制御
bound = L.latLngBounds([-1.396, -3.266], [5.699, 8.133]); // 表示領域の設定
map.fitBounds(bound);
L.imageOverlay('img/plan01.png', bound).addTo(map); // 背景画像の表示
let lay = L.layerGroup().addTo(map); // ベクターデータ表示領域
L.marker([2.0, 2.0], {icon: L.divIcon({ // SVGマーカを登録
html: '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><path \
d="M0,-10 L50,-10 L50,-30 L90,0 L50,30 L50,10 L0,10 Z" \
stroke="#ff0000" stroke-width="2" \
fill="#ff7777" fill-opacity="0.3" \
transform="translate(150, 150) rotate(0) scale(1)" \
></path></svg>', // SVGデータ
iconSize: [0, 0], iconAnchor: [150, 150]
}) }).addTo(lay);
L.marker([2.0, 2.0], {icon: L.divIcon({ // SVGマーカを登録
html: '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><path \
d="M0,-10 L50,-10 L50,-30 L90,0 L50,30 L50,10 L0,10 Z" \
stroke="#0000ff" stroke-width="2" \
fill="#7777ff" fill-opacity="0.3" \
transform="translate(150, 150) rotate(-135) scale(0.8)" \
></path></svg>', // SVGデータ
iconSize: [0, 0], iconAnchor: [150, 150]
}) }).addTo(lay);
}
</script>
</head>
<body onload="init()">
<div id="map_container"></div>
<div id="btn_container">
<input type="button" onclick="map.fitBounds(bound)" value="全体表示" />
</div>
</body>
</html>