<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>*--タイトル--*</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>



<!-- plugin -->
    <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
    <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />

<!-- plugin -->
    <link rel="stylesheet" href="../../static/css/Control.Coordinates.css" />
    <script src="../../static/js/Control.Coordinates.js"></script>

<!-- plugin -->
    <link rel="stylesheet" href="../../../static/css/L.Control.MapCenterCoord.css" />
    <script src="../../static/js/L.Control.MapCenterCoord.js"></script>

<!-- plugin -->
    <style type="text/css">


<style>
  body {padding: 0; margin: 0}
  html, body, #mapdiv {height: 100%; width: 100%;}
  .leaflet-container {background: #fff;}
  .leaflet-div-icon {background: none;white-space: nowrap;border:none;}
  .leaflet-container.crosshair-cursor-enabled{cursor:crosshair;}
  
</style>
</head>


<body>
<div id="mapdiv">

<script>
function geojson_style(prop) {
  var s = {};
  for(name in prop) {
    if(name.match(/^_/) && !name.match(/_markerType/)){
      if( prop['_markerType']=='Circle' && name =='_radius'){continue;}
      s[name.substr(1)]=prop[name];
    }
  }
  return s;
}

function popup_properties(prop) {
  var s = ''
  for(name in prop) {
    if(!name.match(/^_/)){
      s += name + "：" + prop[name] + "<br>";
    }
  }
  return s;
}


var gpx_pdata = 
*--GpxPGeoJson--*
;

var gpx_ldata = 
*--GpxLGeoJson--*
;


//スタイルつき GeoJSON読み込み
var gpx_pLayer = L.geoJson(gpx_pdata, {
  pointToLayer: function (feature, latlng) {
    var s = geojson_style(feature.properties);
    if(feature.properties['_markerType']=='Icon'){
      var myIcon = L.icon(s);
      return L.marker(latlng, {icon: myIcon});
    }
    if(feature.properties['_markerType']=='DivIcon'){
      var myIcon = L.divIcon(s);
      return L.marker(latlng, {icon: myIcon});
    }
    if(feature.properties['_markerType']=='Circle'){
      return L.circle(latlng,feature.properties['_radius'],s);
    }
    if(feature.properties['_markerType']=='CircleMarker'){
      return L.circleMarker(latlng,s);
    }
  },
  style: function (feature) {
    if(!feature.properties['_markerType']){
      var s = geojson_style(feature.properties);
      return s;
    }
  },
  onEachFeature: function (feature, layer) {
    layer.bindPopup(popup_properties(feature.properties));
  }
});


//スタイルつき GeoJSON読み込み
var gpx_lLayer = L.geoJson(gpx_ldata, {
  pointToLayer: function (feature, latlng) {
    var s = geojson_style(feature.properties);
    if(feature.properties['_markerType']=='Icon'){
      var myIcon = L.icon(s);
      return L.marker(latlng, {icon: myIcon});
    }
    if(feature.properties['_markerType']=='DivIcon'){
      var myIcon = L.divIcon(s);
      return L.marker(latlng, {icon: myIcon});
    }
    if(feature.properties['_markerType']=='Circle'){
      return L.circle(latlng,feature.properties['_radius'],s);
    }
    if(feature.properties['_markerType']=='CircleMarker'){
      return L.circleMarker(latlng,s);
    }
  },
  style: function (feature) {
    if(!feature.properties['_markerType']){
      var s = geojson_style(feature.properties);
      return s;
    }
  },
  onEachFeature: function (feature, layer) {
    layer.bindPopup(popup_properties(feature.properties));
  }
});



//背景地図設定
var std = L.tileLayer(
  'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
  {
    attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル（標準地図）</a>", 
    maxNativeZoom: 18,
    maxZoom: 18,
    opacity:1
  }
);



var map = L.map('mapdiv', {
  center: [*--センター緯度、経度--*], zoom: 12, layers: [std, gpx_pLayer, gpx_lLayer]
});


L.control.scale({imperial: false}).addTo(map);

var baseLayers = {"地理院タイル（標準地図）": std};


var overlays = {'Gpxポイント': gpx_pLayer, 'Gpxライン': gpx_lLayer};
L.control.layers(baseLayers, overlays,{position:'topright',collapsed:false}).addTo(map);


map.addControl(new L.Control.Fullscreen({
  title: {
    'false': '最大化',
    'true': '元に戻す'
  }
}));

// Coordinates Control
var options = {
  latitudeText: "緯度", // default lat
  longitudeText: "経度", // default lon
  precision: 10 // default 4
}

var cCtrl = new L.Control.Coordinates(options);
cCtrl.addTo(map);

map.on('click', function(e) {
	cCtrl.setCoordinates(e);
});

L.DomUtil.addClass(map._container,'crosshair-cursor-enabled');
function onMapClick(e) {
  var latitude = e.latlng.lat;
  var longitude = e.latlng.lng;
  var doy, dox, yd, ydh, ns;
  var pmlat = String (latitude);
  if (pmlat.charAt(0) == '-') {
    yd = Math.ceil (latitude);
    var yminus = -yd;
    latitude = -latitude;
    ydh = (latitude - yminus) * 60;
    ns = '南緯';
    doy = -yd;
  } else {
    yd = Math.floor (latitude);
    ydh = (latitude - yd) * 60;
    ns = '北緯';
    doy = yd;
  }
  var yf = Math.floor (ydh);
  var yfh = (ydh - yf) * 60;
  var yb = Math.floor (yfh);
  var ybh = (yfh-yb) * 1000;
  var yfraction = Math.floor (ybh);
  var xd, xdh, ew;
  var pmlng = String (longitude);
  if (pmlng.charAt(0) == '-') {
    xd = Math.ceil (longitude);
    var xminus = -xd;
    longitude = -longitude;
    xdh = (longitude - xminus) * 60;
    ew = '西経';
    dox = -xd;
  } else {
    xd = Math.floor (longitude);
    xdh = (longitude-xd) * 60;
    ew = '東経';
    dox = xd;
  }
  var xf = Math.floor (xdh);
  var xfh = (xdh - xf) * 60;
  var xb = Math.floor (xfh);
  var xbh = (xfh - xb) * 1000;
  var xfraction = Math.floor (xbh);
  var revy = doy + '度' + yf + '分' + yb + '秒' + yfraction;
  var revx = dox + '度' + xf + '分' + xb + '秒' + xfraction;
  var script = document.createElement('script');
  script.src = 'https://cyberjapandata2.gsi.go.jp/general/dem/scripts/getelevation.php?lon=' + e.latlng.lng + '&lat=' + e.latlng.lat + '&callback=myfunc';
  document.getElementsByTagName('head')[0].appendChild(script);
  window.myfunc = function(results){
    var elev = results.elevation;
    var popup = L.popup();
    var cont = '緯度＝ ' + e.latlng.lat.toFixed(6) + '（' + ns + revy + '）<br>経度＝ ' + e.latlng.lng.toFixed(6) + '（' + ew + revx + '）<br>標高＝ ' + elev + ' m'
    popup.setLatLng(e.latlng).setContent(cont).openOn(map);
  };



}



map.on('click', onMapClick);
function convertCalc (){
  var lat = parseInt(document.conv.lat.value);
  var latfun = parseInt(document.conv.latfun.value);
  var latbyo = parseInt(document.conv.latbyo.value);
  var lathasu = parseInt(document.conv.lathasu.value);
  var lng = parseInt(document.conv.lng.value);
  var lngfun = parseInt(document.conv.lngfun.value);
  var lngbyo = parseInt(document.conv.lngbyo.value);
  var lnghasu = parseInt(document.conv.lnghasu.value);
  var latresult = lat+(latfun/60.0)+(latbyo/3600.0)+(lathasu/3600000.0);
  var lngresult = lng+(lngfun/60.0)+(lngbyo/3600.0)+(lnghasu/3600000.0);
  yradio = document.getElementsByName('ns');
  if (yradio[0].checked) {
    latresult = latresult;
  } else if (yradio[1].checked) {
    latresult = -latresult;
  }
  xradio = document.getElementsByName('ew');
  if (xradio[0].checked) {
    lngresult = lngresult;
  } else if (xradio[1].checked) {
    lngresult = -lngresult;
  }
  map.setView ([latresult, lngresult]);
  var marcador = new L.Marker([latresult, lngresult]).addTo(map);
  
  
}


// MapCenterCoord
var options = {
  position: 'bottomright', // 'topleft', 'topright', 'bottomleft' (default) ,'bottomright'
  latLngFormatter: function (lat, lng) {
                       return "センターの緯度＝ "  + lat + " 経度＝ " + lng;
                   }
}
L.control.mapCenterCoord(options).addTo(map);

</script>
</body>

</html>

