Newer
Older
www-root / coverage / index.html
@hayashi hayashi on 26 Oct 2017 3 KB fuel1.json, fuel2.json
  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. $.getJSON(url, function(data) {
  55. var geojson = L.geoJson(data, {
  56. pointToLayer: function (feature, latlng) {
  57. return L.circleMarker(latlng, geojsonMarkerOptions0);
  58. }
  59. });
  60. geojson.addTo(map);
  61. });
  62. $.getJSON("http://surveyor.mydns.jp/gitbucket/yuu/leaflet/raw/4e85cfc9db981da4c7b3b181ebe8d931184b79d4/public_html/fuel1.json", function(data) {
  63. var geojson = L.geoJson(data, {
  64. pointToLayer: function (feature, latlng) {
  65. return L.circleMarker(latlng, geojsonMarkerOptions1);
  66. }
  67. });
  68. geojson.addTo(map);
  69. });
  70. $.getJSON("http://surveyor.mydns.jp/gitbucket/yuu/leaflet/raw/4e85cfc9db981da4c7b3b181ebe8d931184b79d4/public_html/fuel2.json", function(data) {
  71. var geojson = L.geoJson(data, {
  72. pointToLayer: function (feature, latlng) {
  73. return L.circleMarker(latlng, geojsonMarkerOptions2);
  74. }
  75. });
  76. geojson.addTo(map);
  77. });
  78. </script>
  79. </body>
  80. </html>