- <html>
- <head>
- <title>TODO supply a title</title>
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
- <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
- <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
- <style type="text/css">
- body { padding: 0px; margin: 0px;}
- </style>
- </head>
- <body>
- <div id="map" style="height:100%;"></div>
- <script type="text/javascript">
- var map = L.map('map').setView([36.131, 140.241], 14);
-
- //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";
- //var url = "fuel0.json";
-
- $.getJSON(url, function(data) {
- var geojson = L.geoJson(data, {
- pointToLayer: function (feature, latlng) {
- return L.circleMarker(latlng, geojsonMarkerOptions0);
- }
- });
- geojson.addTo(map);
- });
-
- $.getJSON("http://surveyor.mydns.jp/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("http://surveyor.mydns.jp/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>