<!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>*--^Cg--*</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/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">

<!-- plugin -->
//   <script src="js/leaflet.sprite.js"></script>

<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 + "F" + prop[name] + "<br>";
    }
  }
  return s;
}


*--ExifPGeoJson--*
;

*--GpxPGeoJson--*
;

*--GpxLGeoJson--*
;

*--GpxNPGeoJson--*
;



*--var exifLayer--*
;


*--var gpx_pLayer--*
;


*--var gpx_lLayer--*
;

*--var gpx_npLayer--*
;


//win}ݒ
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'>n@^CiWn}j</a>", 
    maxNativeZoom: 18,
    maxZoom: 18,
    opacity:1
  }
);


var map = L.map('mapdiv', {
  center: [*--Z^[ܓxAox--*], zoom: 15, layers: [*--\C[--*]
});


var marker =  L.marker([0,0]).addTo(map);
//var marker = L.marker([37.305,138.64], {icon: L.spriteIcon()}).addTo(map); // default blue.

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

var baseLayers = {"n@^CiWn}j": std};


var overlays = {*--I[o[C{^--* };
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: "ܓx", // default lat
  longitudeText: "ox", // 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 = 'k';
    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 = 'o';
    dox = -xd;
  } else {
    xd = Math.floor (longitude);
    xdh = (longitude-xd) * 60;
    ew = 'o';
    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 + 'x' + yf + '' + yb + 'b' + yfraction;
  var revx = dox + 'x' + xf + '' + xb + 'b' + 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 = 'ܓx ' + e.latlng.lat.toFixed(6) + 'i' + ns + revy + 'j<br>ox ' + e.latlng.lng.toFixed(6) + 'i' + ew + revx + 'j<br>W ' + 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 "Z^[̈ܓx "  + lat + " ox " + lng;
                   }
}
L.control.mapCenterCoord(options).addTo(map);

</script>
</body>

</html>
