<!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.92030644444444, 139.841645];
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['p1010243.jpg'] = ['2016-07-10 16:59:35<br>', 'p1010243.jpg', 400, 300];
comments['p1010245.jpg'] = ['2016-07-10 17:00:57<br>', 'p1010245.jpg', 400, 300];
comments['p1010251.jpg'] = ['2016-07-31 19:47:39<br>', 'p1010251.jpg', 400, 300];
comments['p1010252.jpg'] = ['2016-06-25 16:38:47<br>', 'p1010252.jpg', 300, 400];
comments['p1010256.jpg'] = ['2016-08-06 11:38:46<br>', 'p1010256.jpg', 400, 300];
comments['p1010259.jpg'] = ['2016-08-06 11:41:21<br>', 'p1010259.jpg', 300, 400];
comments['p1010293.jpg'] = ['2016-08-15 10:46:28<br>', 'p1010293.jpg', 400, 300];
comments['p1010299.jpg'] = ['2016-08-15 10:49:47<br>', 'p1010299.jpg', 400, 300];
comments['p1010301.jpg'] = ['2016-08-24 12:24:36<br>', 'p1010301.jpg', 400, 300];
comments['p1010302.jpg'] = ['2016-08-24 12:25:06<br>', 'p1010302.jpg', 400, 300];
addPopUp(38.917100, 139.834400, ["p1010243.jpg", "p1010245.jpg"]);
addPopUp(38.935800, 139.848900, ["p1010251.jpg", "p1010252.jpg"]);
addPopUp(38.906700, 139.840000, ["p1010256.jpg", "p1010259.jpg"]);
addPopUp(38.904800, 139.844400, ["p1010293.jpg", "p1010299.jpg"]);
addPopUp(38.916300, 139.836400, ["p1010301.jpg", "p1010302.jpg"]);
map.fitBounds([[38.904789, 139.834376], [38.935824, 139.848914]]);
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