<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<style type="text/css">
<!--
div#map {height: 700px;}
-->
</style>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<!-- <script src="https://raw.githubusercontent.com/mpetazzoni/leaflet-gpx/master/gpx.js"></script> -->
<script src="https://www.yatex.org/libcache/gpx.js"></script>
<title>Photo Map</title>
<script type="text/javascript">
<!--
function init() {
var useOSM = true;
var latlon = [38.915813, 139.84443449999998];
var map = L.map('map')
var tileLayer;
var gmapLayer;
if (L.Google) {
gmapLayer = new L.Google("ROADMAP");
map.addLayer(gmapLayer);
}
tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution : '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors | Generated with <a href="http://www.gentei.org/~yuuji/software/gpx-photo/">gpx-photo</a>'
});
tileLayer.addTo(map);
L.control.scale().addTo(map);
// Add marker
function addPopUp(lat, lon, imgs) {
var latlon = [lat, lon];
var marker = L.marker(latlon).addTo(map);
var msg, cmt, link, w, h;
if (!imgs.length) {
imgs = [imgs];
}
msg = ""; cmt = "";
for (var i=0, cmt=""; i < imgs.length; i++) {
img = imgs[i];
msg = comments[img][0];
link = comments[img][1];
w = comments[img][2];
h = comments[img][3];
cmt += "<p>" + (msg ? msg : img) + "<br>" +
'<a target="_blank" href="'+link+'"><img src="'+
img+'" width="'+w+'" height="'+h+'"></a></p>'
}
marker.bindPopup(
cmt,
{maxWidth: 500, maxHeight: 400});
}
var comments = new Array();
var gpxlayers = {};
function addGPX(title, gpx, color, lon0, lat0) {
var baseurl = 'https://rawgithub.com/mpetazzoni/leaflet-gpx/master/';
var gpxLayer = new L.GPX(gpx, {
async: true,
marker_options: {
startIconUrl: null, // baseurl+'pin-icon-start.png',
endIconUrl: null, // baseurl+'pin-icon-end.png',
shadowUrl: baseurl+'pin-shadow.png'
},
polyline_options: {
color: color,
weight: 8,
}
// }).on('loaded', function(e) {
// var gpx = e.target;
// map.fitBounds(gpx.getBounds());
}).addTo(map);
gpxlayers[title] = gpxLayer;
}
comments['ondoru1.jpg'] = ['2016-06-20 18:15:38<br>', 'ondoru1.jpg', 300, 400];
comments['ondoru2.jpg'] = ['2016-06-20 18:15:07<br>', 'ondoru2.jpg', 300, 400];
comments['pukuchon2.jpg'] = ['2016-07-08 14:54:56<br>', 'pukuchon2.jpg', 400, 300];
comments['techunamu2.jpg'] = ['2016-06-20 18:21:46<br>', 'techunamu2.jpg', 300, 400];
addPopUp(38.920300, 139.834800, ["ondoru1.jpg", "ondoru2.jpg"]);
addPopUp(38.910000, 139.854100, ["pukuchon2.jpg"]);
addPopUp(38.921700, 139.844900, ["techunamu2.jpg"]);
map.fitBounds([[38.909953, 139.834800], [38.921673, 139.854069]]);
var baseMaps;
if (gmapLayer) {
baseMaps = {"GoogleMaps": gmapLayer, "OSM": tileLayer};
} else {
baseMaps = {"base": tileLayer};
}
L.control.layers(baseMaps, gpxlayers).addTo(map);
}
// -->
</script>
</head>
<body onload="init();">
<p></p>
<div id="map"></div>
</body>
</html>
HIROSE Yuuji