Fork: 0
haya4 / www-root
Transfer to URL with SHA Find file
Newer
Older
www-root / coverage / index.html
@hayashi hayashi on 26 Oct 2017 3 KB fuel1.json, fuel2.json
Raw Blame History 
  1. <html>
  2.     <head>
  3.         <title>TODO supply a title</title>
  4.         <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  5.         <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  6.         <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  7.         <style type="text/css">
  8.             body { padding: 0px; margin: 0px;}
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <div id="map" style="height:100%;"></div>
  13.         <script type="text/javascript">
  14.             var map = L.map('map').setView([36.131, 140.241], 14);
  15.  
  16.             //OSMレイヤー追加
  17.             L.tileLayer(
  18.                 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  19.                 {
  20.                     attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
  21.                     maxZoom: 18
  22.                 }
  23.             ).addTo(map);
  24.  
  25.             var geojsonMarkerOptions0 = {
  26.                 radius: 8,
  27.                 fillColor: "#ff0000",
  28.                 color: "#000",
  29.                 weight: 1,
  30.                 opacity: 1,
  31.                 fillOpacity: 0.8
  32.             };
  33.  
  34.             var geojsonMarkerOptions1 = {
  35.                 radius: 8,
  36.                 fillColor: "#FF7800",
  37.                 color: "#000",
  38.                 weight: 1,
  39.                 opacity: 1,
  40.                 fillOpacity: 0.8
  41.             };
  42.  
  43.             var geojsonMarkerOptions2 = {
  44.                 radius: 8,
  45.                 fillColor: "#0000ff",
  46.                 color: "#000",
  47.                 weight: 1,
  48.                 opacity: 1,
  49.                 fillOpacity: 0.8
  50.             };
  51.  
  52.             var url = "/gitbucket/yuu/leaflet/raw/4e85cfc9db981da4c7b3b181ebe8d931184b79d4/public_html/fuel0.json";
  53.             //var url = "fuel0.json";
  54.             
  55.             $.getJSON(url, function(data) {
  56.                 var geojson = L.geoJson(data, {
  57.                     pointToLayer: function (feature, latlng) {
  58.                         return L.circleMarker(latlng, geojsonMarkerOptions0);
  59.                     }
  60.                 });
  61.                 geojson.addTo(map);
  62.             });
  63.             
  64.             $.getJSON("http://surveyor.mydns.jp/gitbucket/yuu/leaflet/raw/4e85cfc9db981da4c7b3b181ebe8d931184b79d4/public_html/fuel1.json", function(data) {
  65.                 var geojson = L.geoJson(data, {
  66.                     pointToLayer: function (feature, latlng) {
  67.                         return L.circleMarker(latlng, geojsonMarkerOptions1);
  68.                     }
  69.                 });
  70.                 geojson.addTo(map);
  71.             });
  72.             $.getJSON("http://surveyor.mydns.jp/gitbucket/yuu/leaflet/raw/4e85cfc9db981da4c7b3b181ebe8d931184b79d4/public_html/fuel2.json", function(data) {
  73.                 var geojson = L.geoJson(data, {
  74.                     pointToLayer: function (feature, latlng) {
  75.                         return L.circleMarker(latlng, geojsonMarkerOptions2);
  76.                     }
  77.                 });
  78.                 geojson.addTo(map);
  79.             });
  80.             
  81.         </script>
  82.     </body>
  83. </html>