<!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>
<!-- // If you prefer gmaps, activate two lines below and set useOSM to false.
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script src="https://rawgithub.com/shramov/leaflet-plugins/master/layer/tile/Google.js"></script>
-->
<title>2014-07-15-15-12-58(7.2km)</title>
<script type="text/javascript">
<!--
function init() {
var useOSM = true;
var latlon = [38.901512499999995, 139.83325000000002];
var map = L.map('map')
var tileLayer;
if (true) {
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);
} else {
tileLayer = new L.Google("ROADMAP");
map.addLayer(tileLayer);
}
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;
}
addGPX("2014-07-15-15-12-58(7.2km)", "26d-56f1i.ogpx", "red", 139.819410, 38.894627);
comments['NCM_0586.JPG'] = ['2014-07-15 15:21:45<br>;fdhsskljfa', 'NCM_0586.JPG', 400, 300];
comments['NCM_0587.JPG'] = ['2014-07-15 15:26:39<br>', 'NCM_0587.JPG', 400, 300];
comments['NCM_0588.JPG'] = ['2014-07-15 15:31:08<br>', 'NCM_0588.JPG', 400, 300];
comments['NCM_0589.JPG'] = ['2014-07-15 15:33:10<br>', 'NCM_0589.JPG', 400, 300];
comments['NCM_0590.JPG'] = ['2014-07-15 15:34:15<br>', 'NCM_0590.JPG', 400, 300];
addPopUp(38.908700, 139.835300, ["NCM_0586.JPG"]);
addPopUp(38.904400, 139.846400, ["NCM_0587.JPG"]);
addPopUp(38.903300, 139.847400, ["NCM_0588.JPG"]);
addPopUp(38.902800, 139.847500, ["NCM_0589.JPG"]);
addPopUp(38.902800, 139.847100, ["NCM_0590.JPG"]);
map.fitBounds([[38.894337, 139.818980], [38.908688, 139.847520]]);
var baseMaps = {"base": tileLayer}
L.control.layers(baseMaps, gpxlayers).addTo(map);
}
// -->
</script>
</head>
<body onload="init();">
<p><span style="border: thick solid red">2014-07-15-15-12-58(7.2km)</span>
</p>
<div id="map"></div>
</body>
</html>
MURAKAMI Masaki