view sakataMap/kenta/sanpo.html @ 2392:38c09930eed4

Add sakataMap
author MURAKAMI Masaki <c112124@h.koeki-u.ac.jp>
date Mon, 17 Nov 2014 22:17:58 +0900
parents
children
line wrap: on
line source

<!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>sanpo(8.8km)</title>
<script type="text/javascript">
<!--
function init() {
    var useOSM = true;
    var latlon = [38.90358, 139.824025];
    var map = L.map('map')
    var tileLayer;
    if (true) {
      tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution : '&copy; <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("sanpo(8.8km)", "26d-7ty11.ogpx", "red", 139.819820, 38.895340);

    map.fitBounds([[38.894890, 139.810620], [38.912270, 139.837430]]);


    var baseMaps = {"base": tileLayer}  
    L.control.layers(baseMaps, gpxlayers).addTo(map);
}
// -->
</script>
</head>

<body onload="init();">
    <p><span style="border: thick solid red">sanpo(8.8km)</span>
</p>
    <div id="map"></div>
</body>
</html>

yatex.org