<!DOCTYPE html>
<html>
<head>
<title>leaflet-pulse-icon</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@0.7.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@0.7.3/dist/leaflet.js"></script>
<script src="https://rawgit.com/mapshakers/leaflet-icon-pulse/master/src/L.Icon.Pulse.js"></script>
<link rel="stylesheet" href="https://rawgit.com/mapshakers/leaflet-icon-pulse/master/src/L.Icon.Pulse.css" />
<style>
#map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
body { font: 16px/1.4 "Helvetica Neue", Arial, sans-serif; }
a { color: #0077ff; }
/* Forkミーのリンクのスタイル修正 */
.github-fork-ribbon {
z-index: 3000;
}
</style>
</head>
<body>
<!-- Forkミーのリンク -->
<a class="github-fork-ribbon" href="https://github.com/mapshakers/leaflet-icon-pulse" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
<!-- 地図を表示するための要素 -->
<div id="map"></div>
<script>
var map = L.map('map').setView([38.914678,139.836216], 15);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// 赤いパルスアイコン
var pulsingIcon = L.icon.pulse({iconSize:[14,14],color:'red'});
// 現在地を示すマーカー
function onLocationFound(e) {
L.marker(e.latlng, { icon: pulsingIcon, title: '現在地' }).addTo(map).bindPopup("現在地").openPopup();
}
// 位置の取得に失敗した場合の処理
function onLocationError(e) {
alert("現在地を取得できませんでした。" + e.message);
}
// 位置が取得されたときとエラーが発生したときのイベントリスナーを設定
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
// 現在の位置を取得する
map.locate({ setView: true, maxZoom: 16, timeout: 20000 });
$(document).ready(function () {
var map = L.map('map').setView([51.505, -0.09], 5);
map.zoomControl.setPosition('topright');
map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{attribution:'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'}
));
var searchboxControl=createSearchboxControl();
var control = new searchboxControl({
sidebarTitleText: 'Header',
sidebarMenuItems: {
Items: [
{ type: "link", name: "Link 1 (github.com)", href: "http://github.com", icon: "icon-local-carwash" },
{ type: "link", name: "Link 2 (google.com)", href: "http://google.com", icon: "icon-cloudy" },
{ type: "button", name: "Button 1", onclick: "alert('button 1 clicked !')", icon: "icon-potrait" },
{ type: "button", name: "Button 2", onclick: "button2_click();", icon: "icon-local-dining" },
{ type: "link", name: "Link 3 (stackoverflow.com)", href: 'http://stackoverflow.com', icon: "icon-bike" },
]
}
});
control._searchfunctionCallBack = function (searchkeywords)
{
if (!searchkeywords) {
searchkeywords = "The search call back is clicked !!"
}
alert(searchkeywords);
}
map.addControl(control);
});
function button2_click()
{
alert('button 2 clicked !!!');
}
</script>
</body>
</html>
