<!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@0.7.3/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@0.7.3/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 -->




<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;}
</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;
}


var gpx_ldata = 
*--GpxLGeoJson--*
;



//X^C 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));
  }
});



//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: 20,
    opacity:1
  }
);



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


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

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


var overlays = {'GpxC': gpx_lLayer};
//L.control.layers(baseLayers, overlays,{position:'topright',collapsed:false}).addTo(map);


map.addControl(new L.Control.Fullscreen({
  title: {
    'false': 'ő剻',
    'true': 'ɖ߂'
  }
}));


</script>
</body>

</html>

