<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>
