| |
---|
| | </head> |
---|
| | <body> |
---|
| | <div id="wrap"> |
---|
| | <div class="header"> |
---|
| | <div id="map" style="height: 720; width: 100%;"></div> |
---|
| | <script type="text/javascript"> |
---|
| | var map = L.map('map').setView([36.131, 140.241], 8); |
---|
| | |
---|
| | //OSMレイヤー追加 |
---|
| | L.tileLayer( |
---|
| | 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', |
---|
| | { |
---|
| | attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>', |
---|
| | maxZoom: 18 |
---|
| | } |
---|
| | ).addTo(map); |
---|
| | |
---|
| | var geojsonMarkerOptions0 = { |
---|
| | radius: 8, |
---|
| | fillColor: "#ff0000", |
---|
| | color: "#000", |
---|
| | weight: 1, |
---|
| | opacity: 1, |
---|
| | fillOpacity: 0.8 |
---|
| | }; |
---|
| | |
---|
| | var geojsonMarkerOptions1 = { |
---|
| | radius: 8, |
---|
| | fillColor: "#FF7800", |
---|
| | color: "#000", |
---|
| | weight: 1, |
---|
| | opacity: 1, |
---|
| | fillOpacity: 0.8 |
---|
| | }; |
---|
| | |
---|
| | var geojsonMarkerOptions2 = { |
---|
| | radius: 8, |
---|
| | fillColor: "#0000ff", |
---|
| | color: "#000", |
---|
| | weight: 1, |
---|
| | opacity: 1, |
---|
| | fillOpacity: 0.8 |
---|
| | }; |
---|
| | |
---|
| | var url = "/gitbucket/yuu/leaflet/raw/4e85cfc9db981da4c7b3b181ebe8d931184b79d4/public_html/fuel0.json"; |
---|
| | $.getJSON(url, function(data) { |
---|
| | var geojson = L.geoJson(data, { |
---|
| | pointToLayer: function (feature, latlng) { |
---|
| | return L.circleMarker(latlng, geojsonMarkerOptions0); |
---|
| | } |
---|
| | }); |
---|
| | geojson.addTo(map); |
---|
| | }); |
---|
| | $.getJSON("/gitbucket/yuu/leaflet/raw/4e85cfc9db981da4c7b3b181ebe8d931184b79d4/public_html/fuel1.json", function(data) { |
---|
| | var geojson = L.geoJson(data, { |
---|
| | pointToLayer: function (feature, latlng) { |
---|
| | return L.circleMarker(latlng, geojsonMarkerOptions1); |
---|
| | } |
---|
| | }); |
---|
| | geojson.addTo(map); |
---|
| | }); |
---|
| | $.getJSON("/gitbucket/yuu/leaflet/raw/4e85cfc9db981da4c7b3b181ebe8d931184b79d4/public_html/fuel2.json", function(data) { |
---|
| | var geojson = L.geoJson(data, { |
---|
| | pointToLayer: function (feature, latlng) { |
---|
| | return L.circleMarker(latlng, geojsonMarkerOptions2); |
---|
| | } |
---|
| | }); |
---|
| | geojson.addTo(map); |
---|
| | }); |
---|
| | </script> |
---|
| | <div id="map" style="height: 720px; width: 100%;"></div> |
---|
| | <hr/> |
---|
| | </div> |
---|
| | |
---|
| | <div id="inner"> |
---|
| |
---|
| | count++ ; |
---|
| | }); |
---|
| | }); |
---|
| | </script> |
---|
| | <script type="text/javascript"> |
---|
| | var map = L.map('map').setView([36.131, 140.241], 8); |
---|
| | |
---|
| | //OSMレイヤー追加 |
---|
| | L.tileLayer( |
---|
| | 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', |
---|
| | { |
---|
| | attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>', |
---|
| | maxZoom: 18 |
---|
| | } |
---|
| | ).addTo(map); |
---|
| | |
---|
| | var geojsonMarkerOptions0 = { |
---|
| | radius: 8, |
---|
| | fillColor: "#ff0000", |
---|
| | color: "#000", |
---|
| | weight: 1, |
---|
| | opacity: 1, |
---|
| | fillOpacity: 0.8 |
---|
| | }; |
---|
| | |
---|
| | var geojsonMarkerOptions1 = { |
---|
| | radius: 8, |
---|
| | fillColor: "#FF7800", |
---|
| | color: "#000", |
---|
| | weight: 1, |
---|
| | opacity: 1, |
---|
| | fillOpacity: 0.8 |
---|
| | }; |
---|
| | |
---|
| | var geojsonMarkerOptions2 = { |
---|
| | radius: 8, |
---|
| | fillColor: "#0000ff", |
---|
| | color: "#000", |
---|
| | weight: 1, |
---|
| | opacity: 1, |
---|
| | fillOpacity: 0.8 |
---|
| | }; |
---|
| | |
---|
| | var url = "/gitbucket/yuu/leaflet/raw/4e85cfc9db981da4c7b3b181ebe8d931184b79d4/public_html/fuel0.json"; |
---|
| | $.getJSON(url, function(data) { |
---|
| | var geojson = L.geoJson(data, { |
---|
| | pointToLayer: function (feature, latlng) { |
---|
| | return L.circleMarker(latlng, geojsonMarkerOptions0); |
---|
| | } |
---|
| | }); |
---|
| | geojson.addTo(map); |
---|
| | }); |
---|
| | $.getJSON("/gitbucket/yuu/leaflet/raw/4e85cfc9db981da4c7b3b181ebe8d931184b79d4/public_html/fuel1.json", function(data) { |
---|
| | var geojson = L.geoJson(data, { |
---|
| | pointToLayer: function (feature, latlng) { |
---|
| | return L.circleMarker(latlng, geojsonMarkerOptions1); |
---|
| | } |
---|
| | }); |
---|
| | geojson.addTo(map); |
---|
| | }); |
---|
| | $.getJSON("/gitbucket/yuu/leaflet/raw/4e85cfc9db981da4c7b3b181ebe8d931184b79d4/public_html/fuel2.json", function(data) { |
---|
| | var geojson = L.geoJson(data, { |
---|
| | pointToLayer: function (feature, latlng) { |
---|
| | return L.circleMarker(latlng, geojsonMarkerOptions2); |
---|
| | } |
---|
| | }); |
---|
| | geojson.addTo(map); |
---|
| | }); |
---|
| | </script> |
---|
| | |
---|
| | </body> |
---|
| | </html> |
---|
| | |
---|
| | |