https://shirokumap-dccdd.web.app/src/script.js

1//ベースマップ
2/*let gsi = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
3    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
4});*/
5let gsi_awai = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
6    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>",
7});
8let gsi_eisei = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
9    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
10});
11let osm = new L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
12    attribution: '&amp;copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
13});
14let illust = new L.tileLayer('./tiles/{z}/{x}/{y}.png',{
15    maxZoom:20,
16    //minZoom:18
17});
18
19const db = firebase.firestore();
20
21db.collection("features").get().then((querySnapshot) => {
22    querySnapshot.forEach((doc) => {
23        // doc.data() is never undefined for query doc snapshots
24        console.log(doc.id, " => ", doc.data());
25
26        let docdata = doc.data();
27
28        let icn = L.icon({
29            iconUrl: docdata.icon,
30            iconSize: [140,140],
31            iconAnchor: [70, 20],
32            maxZoom: 18
33        });
34
35        let marker = L.marker([docdata.geometry.latitude,docdata.geometry.longitude],{icon:icn}).addTo(mymap);
36        marker.bindPopup('<p><b><big>'+ docdata.name + '</big></b>' + '（<a href="'+ docdata.url + '">LINK</a>）</p>' + '<img src="' + docdata.image[0] +  '" alt="' + docdata.name + 'のしろくまアイスの画像" width=210></img><br><p>'+ docdata.explain +'</p>',{
37            maxWidth : 210
38        });
39    });
40});
41
42//ベースマップ
43let baseLayers = {
44    //"地理院地図 標準": gsi,
45    "地理院地図": gsi_awai,
46    "地理院地図 衛星画像": gsi_eisei,
47    "OpenStreetMap 標準": osm,
48    "イラストマップ":illust
49};
50
51//オーバレイ
52/* let overLayers = {
53    "しろくま": shirokuma
54}; */
55
56let area = [
57    [31.603614079923176, 130.5442612602519],
58    [31.585634126624683, 130.5644188467861]
59];
60
61//マップのオプションたち
62let mymap = L.map('map',{
63    center:[31.5925, 130.5574260761166],
64    zoom:17,
65    maxZoom:19,
66    minZoom:16,
67    maxBounds: area,
68    zoomControl:true,
69    layers:[illust],
70    condensedAttributionControl: false
71});
72
73//レイヤコントール追加
74//L.control.layers(baseLayers,overLayers).addTo(mymap);
75L.control.layers(baseLayers).addTo(mymap);
76
77/*attributionのまとめプラグインーーーーーーーーーーーーーーーーーーーーーーー
78L.control.condensedAttribution({
79    emblem: '<div class="emblem-wrap"><i class="far fa-copyright"></i></div>',
80    prefix: '<a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a>'
81  }).addTo(mymap);
82  */
83
84// 現在地表示プラグインーーーーーーーーーーーーーーーーーーーーーーーーーーーー
85let lc = L.control.locate({
86    flyTo:true,
87    strings: {
88        title: "現在地を表示する",
89    },
90    showPopup:false,
91    onLocationError(){
92        alert('現在地が見つかりません');
93    },
94    markerStyle:{
95        iconURL:'../spinner-solid.svg'
96    },
97    onLocationOutsideMapBounds(){
98        alert('あなたは天文館にいないよ！');
99        lc.stop();
100    },
101}).addTo(mymap);
102
103//ダイアログプラグインーーーーーーーーーーーーーーーーーーーーーーーーーーーー
104    var options = {
105        title:'しろくまっぷ',
106        content:'<h3><u>はじめに</u></h3><p>このサイトは個人が作った<b>天文館のしろくまMAP</b>です。しろくまは鹿児島の有名な氷菓子です。鹿児島観光にきた方にむけて、天文館周辺のおすすめのしろくまアイスがあるお店を載せてみました。<br>

106ご意見やお問い合わせは<a href="https://forms.gle/r18wQ3vw3DVHAHyh9">こちら</a>からお願いします。</p><h3><u>使い方</u></h3><p>①このダイアログを読み終えたら右下の<b>OKボタンを押してください</b>。<br>②位置情報許可のポップアップが表示されるので、許可すると現在地まで飛んでいきます。<br><h3><u>各ボタンの説明</u></h3><p><img src="./assets/layers.png">　背景地図を選ぶ<br><img src="./assets/location-arrow.png">　現在地の表示・非表示</p><p style="text-align:right;"><a href="http://leafletjs.com" title="A JS library for interactive maps">©Leaflet</a><br><a href="https://shirokumap-dccdd.web.app/form.html">編集画面へ</a></p>',
107        modal: true,
108        position:'center',
109        closeButton:false
110    };
111    var win =  L.control.window(mymap, options)
112    .prompt({callback:function(){
113        //OKボタンを押したら初期から現在地を探す
114        lc.start();
115        }}).show()
116
117