diff --git a/map/app2/mapobj.html b/map/app2/mapobj.html index 8ae59a2..2882e46 100644 --- a/map/app2/mapobj.html +++ b/map/app2/mapobj.html @@ -14,7 +14,7 @@ -

学生食糧支援でお馴染みの宮浦コミセン

+

カルビーハウス

diff --git a/map/app2/mapobj.js b/map/app2/mapobj.js index 17100be..7765161 100644 --- a/map/app2/mapobj.js +++ b/map/app2/mapobj.js @@ -1,6 +1,5 @@ /* Add some objects on a Map */ document.addEventListener("DOMContentLoaded", () => { - var pl = [ // Polyline: 連続線分 [38.895127,139.819371], [38.894903,139.819361], @@ -21,51 +20,64 @@ opacity: 0.7, // 線分の透明度 weight: 9 // 線分の太さ }; -var plobj = L.polyline(pl, plProp).addTo(mymap); +// var plobj = L.polyline(pl, plProp).addTo(mymap); -var pg = [ // Polygon: ポリゴン - [38.904586,139.814572], - [38.904589,139.814415], - [38.904768,139.814447], - [38.904760,139.814849], - [38.904647,139.814844], - [38.904647,139.814571] // 終点と始点は連結される -]; +// var pg = [ // Polygon: ポリゴン +// [38.904586,139.814572], +// [38.904589,139.814415], +// [38.904768,139.814447], +// [38.904760,139.814849], +// [38.904647,139.814844], +// [38.904647,139.814571] // 終点と始点は連結される +// ]; -var pgOpt = { - stroke:true, // polygonに与えるオプション - color: "black", // 線分の色 - fillColor: "yellow", // 塗りつぶし部分の色 - fillOpacity: 0.5 - // clickable:false // 塗りつぶし部分の透明度 -}; +// var pgOpt = { +// stroke:true, // polygonに与えるオプション +// color: "black", // 線分の色 +// fillColor: "yellow", // 塗りつぶし部分の色 +// fillOpacity: 0.5 +// // clickable:false // 塗りつぶし部分の透明度 +// }; -var pgobj = L.polygon(pg, pgOpt).addTo(mymap); +// var osmTile = // OSMのタイル +// L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { +// attribution: +// '© OpenStreetMap \ +// contributors' +// }); + +// var gsiTile = // 国土地理院タイル +// L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { +// attribution: +// '国土地理院' +// }); + + +var mymap = L.map("mymap").setView([38.901020,139.817119], 15); +gsiTile.addTo(mymap); + +// var pgobj = L.polygon(pg, pgOpt).addTo(mymap); + var marker1 = pl[0], marker2 = pg[0], marker3 = pl[7];// polylineとpolygon各々の始点 var m1opt = {title: "その1"}, m2opt = {title: "その2"},m3opt={title: "その3"}; + var m1 = L.marker(marker1, m1opt).addTo(mymap); -var m2 = L.marker(marker2, m2opt).addTo(mymap); +// var m2 = L.marker(marker2, m2opt).addTo(mymap); var m3 = L.marker(marker3, m3opt).addTo(mymap); -var circle1 = L.circle(pl[11],{radius: 200, - color:'', fillColor: '#399ade'}).addTo(mymap); +// var circle1 = L.circle(pl[11],{radius: 200, + // color:'', fillColor: '#399ade'}).addTo(mymap); // /* オブジェクトレイヤ.bindPopup() でクリック時のポップアップを定義できる */ // 次のようにあらかじめ1つのポップアップを開いておくことも可能 -var osmTile = // OSMのタイル - L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { - attribution: - '© OpenStreetMap \ -contributors' - }); - -var gsiTile = // 国土地理院タイル - L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { - attribution: - '国土地理院' - }); - m1.bindPopup("公益大学カフェテリア側駐車場スタート!!!").openPopup(); -m2.bindPopup("〒998-0054 山形県酒田市宮野浦2丁目3−3 酒田市宮野浦学区コミュニティ防災センター"); +// m2.bindPopup("〒998-0054 山形県酒田市宮野浦2丁目3−3 酒田市宮野浦学区コミュニティ防災センター"); m3.bindPopup("斜め左方向です"); -plobj.bindPopup("多分坂道"); -circle1.bindPopup("目的地周辺です"); \ No newline at end of file +// plobj.bindPopup("多分坂道"); +// circle1.bindPopup("目的地周辺です"); + +var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile}; +// マーカーを2つオーバーレイレイヤに指定 +var ovlLayers = {'マーク1': markerLayer1, 'マーク2': markerLayer2}; +// ベースレイヤとオーバーレイレイヤをマップに追加 +L.control.layers(baseLayers, ovlLayers).addTo(mymap); +}, false); // HTML文書がロードされたら上のアロー関数を呼ばせる diff --git a/map/app3/markerlayer.html b/map/app3/markerlayer.html index 6164b97..5c11ca3 100644 --- a/map/app3/markerlayer.html +++ b/map/app3/markerlayer.html @@ -13,7 +13,7 @@ +

【焼肉】カルビーハウス

- diff --git a/map/app3/markerlayer.js b/map/app3/markerlayer.js index 20ca277..deaa15b 100644 --- a/map/app3/markerlayer.js +++ b/map/app3/markerlayer.js @@ -1,6 +1,22 @@ document.addEventListener("DOMContentLoaded", () => { // 例: コントロールレイヤ - var mlCenter = [38.891, 139.824]; + var pl = [ // Polyline: 連続線分 + [38.895127,139.819371], + [38.904827,139.829049], + [38.918192,139.835449], + [38.919207,139.835342] + ]; + + var plProp = { + stroke:true, // polylineに与えるオプション + color: "#D92B04", // 線分の色 + opacity: 0.7, // 線分の透明度 + weight: 9 // 線分の太さ + }; + var marker1 = pl[0] + var marker2 = pl[1] + var marker3 = pl[2] + var marker4 = pl[3] var otherPoint = [38.890, 139.822]; var osmTile = // OSMのタイル L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { @@ -13,12 +29,15 @@ attribution: '国土地理院' }); - var markerLayer1 = L.marker(mlCenter); //センターマーカー設置 - var markerLayer2 = L.marker(otherPoint); //もう一つのマーカー設置 - var mlmap = L.map("markerlayer", { - layers: [gsiTile, markerLayer1, markerLayer2], //gsiTileレイヤにマーカーを二つ追加 - center: mlCenter, zoom: 16, scrollWheelZoom: false //センターマーカーを中心にズーム + // var plobj = L.polyline(pl, plProp).addTo(m1map); + var markerLayer1 = L.marker(marker1) + var markerLayer2 = L.marker(marker3); + var markerLayer3 = L.marker(marker4); + var mlmap = L.map("markerlayer", { + layers: [gsiTile, markerLayer1, markerLayer2, markerLayer3], + center: marker1, zoom: 13, scrollWheelZoom: false }); + /* 上記4行は以下のようにするのと同じ効果 var mlmap = L.map("markerlayer").setView(mlCenter, 16); gsiTile.addTo(mlmap); @@ -26,6 +45,9 @@ markerLayer2.addTo(mlmap); */ // 以下、コントロールレイヤの設定 // ベースレイヤはOSMと国土地理院2つをJSON形式で指定 + markerLayer1.bindPopup("公益大学カフェテリア側駐車場").openPopup(); + markerLayer2.bindPopup("カルビーハウス 〒998-0044 山形県酒田市中町2丁目2−21").openPopup(); + markerLayer3.bindPopup("駐車場").openPopup(); var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile}; // マーカーを2つオーバーレイレイヤに指定 var ovlLayers = {'マーク1': markerLayer1, 'マーク2': markerLayer2}; diff --git a/map/app4/karubi.geojson b/map/app4/karubi.geojson new file mode 100644 index 0000000..472ee84 --- /dev/null +++ b/map/app4/karubi.geojson @@ -0,0 +1,206 @@ +var karubi = +{ + "type": "FeatureCollection", + "features": [ + { + "type": "Feature", + "properties": { + "_umap_options": { + "iconClass": "Drop" + }, + "name": "公益大学カフェテリア側駐車場" + }, + "geometry": { + "type": "Point", + "coordinates": [ + 139.819589, + 38.895124 + ] + } + }, + { + "type": "Feature", + "properties": { + "_umap_options": { + "color": "Blue", + "opacity": "0.6", + "weight": "5" + }, + "name": "カルビーハウス経路" + }, + "geometry": { + "type": "MultiLineString", + "coordinates": [ + [ + [ + 139.819581, + 38.895107 + ], + [ + 139.81957, + 38.894873 + ], + [ + 139.819914, + 38.894873 + ], + [ + 139.819924, + 38.896409 + ], + [ + 139.819763, + 38.897102 + ], + [ + 139.818851, + 38.898782 + ], + [ + 139.821029, + 38.900068 + ], + [ + 139.822606, + 38.901178 + ], + [ + 139.827157, + 38.903865 + ], + [ + 139.829668, + 38.905309 + ], + [ + 139.833243, + 38.907318 + ], + [ + 139.833061, + 38.907685 + ], + [ + 139.832922, + 38.908749 + ], + [ + 139.832772, + 38.909926 + ], + [ + 139.832364, + 38.911437 + ], + [ + 139.832289, + 38.91193 + ], + [ + 139.832439, + 38.912297 + ], + [ + 139.833161, + 38.912661 + ], + [ + 139.833805, + 38.913279 + ], + [ + 139.834931, + 38.914998 + ], + [ + 139.836197, + 38.917519 + ], + [ + 139.836565, + 38.918273 + ], + [ + 139.835535, + 38.918565 + ] + ], + [ + [ + 139.835535, + 38.918565 + ], + [ + 139.835359, + 38.918231 + ] + ] + ] + } + }, + { + "type": "Feature", + "properties": { + "_umap_options": { + "color": "Red", + "iconClass": "Drop", + "iconUrl": "/uploads/pictogram/restaurant-24_1.png" + }, + "name": "カルビーハウス" + }, + "geometry": { + "type": "Point", + "coordinates": [ + 139.835415, + 38.918198 + ] + } + }, + { + "type": "Feature", + "properties": { + "_umap_options": { + "color": "Brown", + "opacity": "1", + "weight": "7" + } + }, + "geometry": { + "type": "LineString", + "coordinates": [ + [ + 139.835552, + 38.918578 + ], + [ + 139.835209, + 38.918678 + ], + [ + 139.835353, + 38.918959 + ] + ] + } + }, + { + "type": "Feature", + "properties": { + "_umap_options": { + "color": "MediumTurquoise", + "iconClass": "Drop", + "iconUrl": "/uploads/pictogram/parking-24_1.png" + }, + "name": "駐車場", + "description": "カルビーハウス駐車場\n・佐藤整形の右側の路地から入る\n・寺の駐車場手前のスペースがカルビーハウス専用(3台ほど)\n" + }, + "geometry": { + "type": "Point", + "coordinates": [ + 139.835272, + 38.919018 + ] + } + } + ] +} \ No newline at end of file diff --git a/map/app4/karubi.html b/map/app4/karubi.html new file mode 100644 index 0000000..b2039e4 --- /dev/null +++ b/map/app4/karubi.html @@ -0,0 +1,22 @@ + + + +GDb#03 GeoJSONデータ作成 + + + + + + + +

【焼肉】カルビーハウス

+
+ + + diff --git a/map/app4/karubi.js b/map/app4/karubi.js new file mode 100644 index 0000000..1eea5ee --- /dev/null +++ b/map/app4/karubi.js @@ -0,0 +1,48 @@ +(() => { + function MyMap(id) { + var mymap; + function init(id) { + // 例: コントロールレイヤ + var osmTile = // OSMのタイル + L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: + '© OpenStreetMap \ + contributors' + }); + var gsiTile = // 国土地理院タイル + L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { + attribution: + '国土地理院' + }); + var geojsonLayer = + L.geoJson(karubi, { // karubi変数は karubi.geojson からロードした + style: function (feature) { + return feature.properties; + }, + onEachFeature: function(j, layer) { + let p = j.properties; + if (p) { + let name = p.name, desc = p.description; + let popup = "

" + name + "

" + "

" + desc + "

"; + layer.bindPopup(popup); + } + } + }) + mymap = L.map("mymap", { + layers: [gsiTile], + center: [38.9165,139.8297], zoom: 13, scrollWheelZoom: false + }); + // 以下、コントロールレイヤの設定 + // ベースレイヤはOSMと国土地理院2つをJSON形式で指定 + var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile}; + // マーカーを2つオーバーレイレイヤに指定 + var ovlLayers = {'カルビーハウス': geojsonLayer}; + // ベースレイヤとオーバーレイレイヤをマップに追加 + L.control.layers(baseLayers, ovlLayers).addTo(mymap); + } + // ↓初期化時にすぐ実行される + init(id); + }; + document.addEventListener("DOMContentLoaded", function(){ + MyMap("mymap");}, false); + })(); \ No newline at end of file