2f:T9f3,map = { const map = new maplibregl.Map({ container: container, style: style, center: [139.78287031173772, 35.67613404219553], zoom: 12.227552941331778, maxPitch: 85, localIdeographFontFamily: localIdeographFontFamily }) map.doubleClickZoom.disable() map.addControl(new maplibregl.FullscreenControl()) map.addControl(new maplibregl.NavigationControl()) map.addControl(new maplibregl.TerrainControl({ "source": "gel-raster-dem" })) map.addControl(new maplibregl.ScaleControl({ "unit": "metric" })) map.addControl(new maplibregl.GeolocateControl()) const info = document.createElement("div") info.id = "info" info.style.position = "absolute" info.style.bottom = "40px" info.style.left = "10px" info.style.padding = "5px 10px" info.style.background = "rgba(255, 255, 255, 0.8)" info.style.border = "1px solid #ccc" info.style.borderRadius = "3px" info.style.fontFamily = "'Operator Mono', 'Menlo', 'Monaco', 'Consolas', monospace" info.style.fontSize = "14px" info.innerHTML = "Hover over a polygon" container.appendChild(info) const MAXRES = 8 const BASE = 4.5 let gradation = (res) => { return [ "interpolate", ["linear"], ["get", "pop"], 0, "#AAA", 1250 * BASE ** (MAXRES - res), "#005AFF", 2500 * BASE ** (MAXRES - res), "#4DC4FF", 5000 * BASE ** (MAXRES - res), "#FFFFFF", 10000 * BASE ** (MAXRES - res), "#FFF100", 20000 * BASE ** (MAXRES - res), "#FF4B00", 40000 * BASE ** (MAXRES - res), "#990099", 80000 * BASE ** (MAXRES - res), "#000" ] } let fillColor = [ "step", ["zoom"], gradation(0), 2, gradation(1), 3, gradation(2), 4, gradation(3), 5, gradation(4), 6, gradation(5), 7, gradation(6), 8, gradation(7), 9, gradation(8) ] map.once('load', () => { map.addLayer({ id: "kpop", type: "fill", source: "kpop", "source-layer": "kpop", layout: { }, paint: { "fill-color": fillColor, "fill-opacity": [ "interpolate", ["linear"], ["zoom"], 0, 0.3, 12, 0.5, 14, 0.9 ] } }, "building") map.on("mousemove", "kpop", e => { info.innerHTML= "population: " + e.features[0].properties.pop }) map.on("mouseleave", "kpop", (e) => { info.innerHTML = "Hover over a polygon" }) // entry }) invalidation.then(() => map.remove()) yield map }30:T61d5,{ const API_URL = "https://chosashi-data.org/amx/sticky_note_map/api_test/"; var ID = 0; var Sticky_Note_Map_Access_Count = 0; var Sticky_Note_Map_Latest_ID = 0; var Sticky_Note_Map_User = "Guest"; var Sticky_Note_Map_Font = ""; var Sticky_Note_Map_PV_Target_ID =""; var Sticky_Note_Map_Language = "en"; var Sticky_Note_Map_List_Flg = false; var Sticky_Note_Map_List_Target_ID = ""; let data_Lng; let data_Lat; let db_Lng; let db_Lat; var DoubleClick_Flg = false ; var Sticky_Note_Map_features = []; var Popup_Sticky_Note_Map01 = new maplibregl.Popup() // 属性表示 var Popup_Sticky_Note_Map02 = new maplibregl.Popup() // ダブルクリック var Popup_Text_User = "from"; var Popup_Text_PostDateTime = "at"; var Popup_Text_Delete_Button = "Delete"; var Popup_Text_Nice = "Like"; var Popup_Text_GoogleMaps = "Google Maps"; var Popup_Text_StreetView = "Google Street View"; var Popup_Text_Description = "Post (within 100 characters)"; var Popup_Text_Post_Button = "POST"; var Popup_Text_Placeholder = "Comment or URL"; var Popup_Text_Link = "URL"; var Alert_Text_Delete = "Are you sure you want to delete this?"; var Alert_Text_Post01 = "Please enter a comment."; //################# 桁表示（1000→1,000） ################# function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } //################# 桁表示（1000→1,000） ################# //################# ミリ秒から時間・分に変換 ################# function MilliToTime(MilliSeconds) { const Seconds = Math.floor(MilliSeconds / 1000); const Minutes = Math.floor(Seconds / 60); const Hours = Math.floor(Minutes / 60); const RemainingMinutes = Minutes % 60; const RemainingSeconds = Seconds % 60; if( Sticky_Note_Map_Language =="jp"){ return `残り約${Hours} 時 ${RemainingMinutes} 分`; }else{ return `${Hours} h ${RemainingMinutes} m left`; } } //################# ミリ秒から時間・分に変換 ################# //################# Flyto Point（現在地） ################# function Sticky_Note_Map_Flyto_Location(getLatLng) { map.flyTo({ center: [getLatLng.coords.longitude, getLatLng.coords.latitude], zoom: 17, speed: 2.5, curve: 1 }); }; //################# Flyto Point（現在地） ################# //################# Flyto Point（リスト） ################# function Flyto_Point(data_Lng, data_Lat,ZoomLv){ map.flyTo({ center: [data_Lng, data_Lat], zoom: ZoomLv, speed: 2.5, curve: 1 }) const screenWidth = window.innerWidth; // 画面幅によって、「newContents」を閉じる setTimeout(function(){ if(screenWidth < 700){ const detailsElement = document.getElementById('newContents'); detailsElement.open = false; } },500) } //################# Flyto Point（リスト） ################# //################# アクセスカウント更新 ################# async function updateCount() { try { const response = await fetch(API_URL, { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, body: 'key=' + encodeURIComponent('update_Access_Count') // アクセスカウント更新・取得 } ) .then(response => response.text()) // JSON ではなくテキストとして取得 .then(text => { var trimmedText = text.trim(); // 先頭と末尾の空白文字を削除 var data = JSON.parse(trimmedText); var count = data[0].Count; if(Sticky_Note_Map_PV_Target_ID !== ""){ document.getElementById('PV_Count').textContent = numberWithCommas(count) + ' PV'; } Sticky_Note_Map_Access_Count = count; }) } catch (error) { console.error('Error fetching data:', error); } } //################# アクセスカウント更新 ################# //################# Sticky_Note_Mapリスト（10）取得 ################# function get_Sticky_Note_Map_List() { // Sticky_Noteデータリスト取得 fetch(API_URL, { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, body: 'key=' + encodeURIComponent('get_Sticky_Note_List') // Sticky_Noteデータリスト取得 }) .then(response => response.text()) // JSON ではなくテキストとして取得 .then(text => { // 先頭と末尾の空白文字を削除 var trimmedText = text.trim(); var data = JSON.parse(trimmedText); if(Sticky_Note_Map_List_Target_ID !==""){ const tableBody = document.getElementById('infoTable').querySelector('tbody'); tableBody.innerHTML = ''; // 既存の行をクリア data.forEach(row => { const newRow = document.createElement('tr'); const truncated_Sticky_Note = row.StickyNote.length > 30 ? row.StickyNote.substring(0, 30) + '...' : row.StickyNote; newRow.innerHTML = ` ${truncated_Sticky_Note}
(ID:${row.ID}) ${row.PostDateTime} `; tableBody.appendChild(newRow); }); } }) } //################# Sticky_Note_Mapリスト（10）取得 ################# //################# Sticky_Note_Mapデータ削除 ################# async function delete_Sticky_Note(ID) { if (confirm(Alert_Text_Delete)) { await fetch(API_URL, { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, body: 'key=' + encodeURIComponent('delete_Sticky_Note') + '&ID=' + encodeURIComponent(ID) // Sticky_Noteデータ削除（ID） }) Popup_Sticky_Note_Map01.remove(); Popup_Sticky_Note_Map02.remove(); update_Sticky_Note_Map_Data(); if(Sticky_Note_Map_List_Target_ID !== ""){ await get_Sticky_Note_Map_List(); } } } //################# Sticky_Note_Mapデータ削除 ################# //################# Sticky_Note_Mapソース更新（response） ################# async function update_Sticky_Note_Map_Source(response) { // 文字列に変換 const textPromise = response.text(); const text = await textPromise; // Promiseが解決するまで待つ // 先頭と末尾の空白文字を削除 var trimmedText = text.trim(); var data = JSON.parse(trimmedText); Sticky_Note_Map_features = []; for(var i=0; i 30 ? data[i].StickyNote.substring(0, 30) + '...' : data[i].StickyNote, 'NiceCount': data[i].NiceCount, 'PostDateTime': data[i].PostDateTime, 'TermDateTime': data[i].TermDateTime, 'MaxTermDateTime': data[i].MaxTermDateTime }, geometry: { type: 'Point', coordinates: [data[i].Lng, data[i].Lat] } }; Sticky_Note_Map_features.push(point); // 最新情報のIDを入れる Sticky_Note_Map_Latest_ID = data[i].ID; } var geojson = { type: "FeatureCollection", features: Sticky_Note_Map_features }; // ソース更新 map.getSource('Sticky_Note_Map').setData(geojson); } //################# Sticky_Note_Mapソース更新（response） ################# //################# Sticky_Note_Mapデータ取得・更新 ################# async function update_Sticky_Note_Map_Data() { // Sticky_Noteデータ取得 const response = await fetch(API_URL, { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, body: 'key=' + encodeURIComponent('get_Sticky_Note') // Sticky_Noteデータ取得 }) // ソース更新 update_Sticky_Note_Map_Source(response); } //################# Sticky_Note_Mapデータ取得・更新 ################# //################# 最新投稿の確認・更新 ################# async function Confirm_Latest_Sticky_Note_Map() { try { await fetch(API_URL, { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, body: 'key=' + encodeURIComponent('confirm_ID') // 最終投稿ID確認 }, ) .then(response => response.text()) // JSON ではなくテキストとして取得 .then(text => { // 先頭と末尾の空白文字を削除 var trimmedText = text.trim(); var data = JSON.parse(trimmedText); let Get_ID = data[0].ID; if(Sticky_Note_Map_Latest_ID != Get_ID){ if(Sticky_Note_Map_List_Target_ID !== ""){ get_Sticky_Note_Map_List(); } update_Sticky_Note_Map_Data(); } else { // console.log("更新しない"); } }) } catch (error) { console.error("サーバーエラー", error); } } //################# 最新投稿の確認・更新 ################# //################# ソース・レイヤ初期設定 ################# function set_Sticky_Note_Map_Source_Layer() { Sticky_Note_Map_features = []; var geojson = { type: "FeatureCollection", features: Sticky_Note_Map_features }; map.addSource("Sticky_Note_Map", { "type": "geojson", "data": geojson, "cluster": true, "clusterMaxZoom": 14, // クラスタリングを行う最大ズームレベル }); // クラスター（円） map.addLayer({ 'id': 'Sticky_Note_Map_Cluster', 'type': 'circle', 'source': 'Sticky_Note_Map', 'layout': { }, paint: { 'circle-radius': 20.0, //半径 'circle-color': 'rgba(0, 0, 255, 0.5)', 'circle-stroke-color': 'rgba(255,255,255,0.5)', // ラベルの外枠の色を白に設定 'circle-stroke-width': 2.0, // ラベルの外枠の幅を2に設定 'circle-opacity': 1.0, }, 'minzoom': 0, 'maxzoom': 14, }); // クラスター（ラベル） map.addLayer({ 'id': 'Sticky_Note_Map_Cluster_Label', 'type': 'symbol', 'source': 'Sticky_Note_Map', 'layout': { "text-field": ["get", "point_count_abbreviated"], }, 'paint': { 'text-color': 'rgba(0, 0, 255, 1)', 'text-halo-color': 'rgba(255,255,255,1)', // ラベルの外枠の色を白に設定 'text-halo-width': 2.0, // ラベルの外枠の幅を2に設定 }, 'minzoom': 0, 'maxzoom': 14, }); // 投稿ポイント map.addLayer({ 'id': 'Sticky_Note_Map', 'type': 'circle', 'source': 'Sticky_Note_Map', 'layout': { }, paint: { 'circle-radius': 3.5, //半径 'circle-color': 'rgba(0, 0, 255, 1)', 'circle-stroke-color': 'rgba(255,255,255,1)', // ラベルの外枠の色を白に設定 "circle-stroke-width": ["step", ["zoom"], 0.0, 4, 0.2, 13, 2.0 ], 'circle-opacity': 1.0, }, 'minzoom': 14, 'maxzoom': 24, }); // 投稿ポイント（ラベル） map.addLayer({ 'id': 'Sticky_Note_Map_Label', 'type': 'symbol', 'source': 'Sticky_Note_Map', 'layout': { 'text-field': ['get', 'Sticky_Note_Label'], 'text-anchor': 'left', 'text-offset': [0.5, 0], }, 'paint': { 'text-color': 'rgba(0, 0, 255, 1)', 'text-halo-color': 'rgba(255,255,255,1)', // ラベルの外枠の色を白に設定 'text-halo-width': 2.0, // ラベルの外枠の幅を2に設定 }, 'minzoom': 14, 'maxzoom': 24, }) if( Sticky_Note_Map_Font !== ""){ map.setLayoutProperty("Sticky_Note_Map_Cluster_Label", "text-font" , [Sticky_Note_Map_Font]); map.setLayoutProperty("Sticky_Note_Map_Label", "text-font" , [Sticky_Note_Map_Font]); } } //################# ソース・レイヤ初期設定 ################# //################# ポップアップ（属性表示） ################# // ポップアップカウント追加 function update_PopupCount(e) { var ID = e.features[0].properties['ID']; // PopupCount追加 fetch(API_URL, { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, body: 'key=' + encodeURIComponent('update_PopupCount') + '&ID=' + encodeURIComponent(ID) // Popupカウント追加（ID） }) for (var i = 0; i < Sticky_Note_Map_features.length; i++) { if (Sticky_Note_Map_features[i].properties.ID === ID) { // 期限日時 var TermDateTime = new Date(Sticky_Note_Map_features[i].properties.TermDateTime); // TermDateTimeをDateオブジェクトに変換 TermDateTime.setMinutes(TermDateTime.getMinutes() + 12); // 12分加算 Sticky_Note_Map_features[i].properties.TermDateTime = TermDateTime.toISOString(); // 更新されたTermDateTimeをfeatures配列に反映し、ISO形式で保存 // 残り時間を計算し表示 const RemainingTimeElement = document.getElementById("RemainingTime"); var now = new Date(); var MilliSeconds = TermDateTime - now; var RemainingTime = MilliToTime(MilliSeconds) RemainingTimeElement.textContent = RemainingTime; } } var geojson = { type: "FeatureCollection", features: Sticky_Note_Map_features }; map.getSource('Sticky_Note_Map').setData(geojson); }; // いいね！カウント追加 function update_NiceCount(ID) { // NiceCount追加 fetch(API_URL, { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, body: 'key=' + encodeURIComponent('update_NiceCount') + '&ID=' + encodeURIComponent(ID) // いいね！カウント追加（ID） }) const NiceCountElement = document.getElementById("NiceCount"); const RemainingTimeElement = document.getElementById("RemainingTime"); let CurrentNiceCount = parseInt(NiceCountElement.textContent); // テキストを数値に変換 NiceCountElement.textContent = CurrentNiceCount + 1; }; // 属性表示（Sticky Note Map） function Popup_Sticky_Note_Map(e) { let PopupFlg = false; var ID = e.features[0].properties['ID']; var Sticky_Note_User = e.features[0].properties['User']; var Sticky_Note_Sticky_Note = e.features[0].properties['Sticky_Note']; var Sticky_Note_URL = e.features[0].properties['URL']; var Sticky_Note_Lng = e.features[0].geometry.coordinates[0]; var Sticky_Note_Lat = e.features[0].geometry.coordinates[1]; var Sticky_Note_PostDateTime = e.features[0].properties['PostDateTime']; var Sticky_Note_TermDateTime = e.features[0].properties['TermDateTime']; var Sticky_Note_MaxTermDateTime = e.features[0].properties['MaxTermDateTime']; var Sticky_Note_NiceCount = e.features[0].properties['NiceCount']; // 表示期間の終了日時をDateオブジェクトに変換 var TermDateTime = new Date(Sticky_Note_TermDateTime); // 残り時間を計算し表示 var now = new Date(); TermDateTime.setMinutes(TermDateTime.getMinutes() + 12); // 12分加算 var MilliSeconds = TermDateTime - now; var RemainingTime = MilliToTime(MilliSeconds) let infoContent = Sticky_Note_Sticky_Note; if ( Sticky_Note_URL !=="" ) { infoContent = `${Sticky_Note_Sticky_Note}`; }else{ if (Sticky_Note_Sticky_Note.startsWith("https://")) { infoContent = `${Sticky_Note_Sticky_Note}`; } } // ポップアップ削除 Popup_Sticky_Note_Map01.remove(); Popup_Sticky_Note_Map02.remove(); Popup_Sticky_Note_Map01 = new maplibregl.Popup() .setLngLat(e.lngLat) .setHTML( '

' + '' + '' + infoContent + '' + '' + '
' + '' + Popup_Text_User +' '+ Sticky_Note_User + '' + '
' + '' + Popup_Text_PostDateTime +' ' + Sticky_Note_PostDateTime + ' ' + '' + '
' + '' + Popup_Text_Nice + '(' + Sticky_Note_NiceCount + ') ' + '' + RemainingTime + '
' + '

' + '' + '' + Popup_Text_GoogleMaps + ' / ' + '' + Popup_Text_StreetView + '
' + '' + '

' ).addTo(map); // PopupCount追加（12分追加） update_PopupCount(e); // イベントリスナー document.getElementById("NiceButton").addEventListener("click", function() { if( !PopupFlg ){ update_NiceCount(ID); PopupFlg= true; // 表示期間の終了日時をDateオブジェクトに変換 var TermDateTime = new Date(Sticky_Note_TermDateTime); TermDateTime.setMinutes(TermDateTime.getMinutes() + 12); // 12分加算 var MaxTermDateTime = new Date(Sticky_Note_MaxTermDateTime); // 1時間後の日時を計算 TermDateTime.setHours(TermDateTime.getHours() + 1); // 残り時間を計算し、表示 if(MaxTermDateTime > TermDateTime){ var now = new Date(); var MilliSeconds = TermDateTime - now; var RemainingTime = MilliToTime(MilliSeconds); // 残り時間を適切な形式で表示する処理（ミリ秒を日時に変換など） document.getElementById("RemainingTime").textContent = RemainingTime; for (var i = 0; i < Sticky_Note_Map_features.length; i++) { if (Sticky_Note_Map_features[i].properties.ID === ID) { // いいね！カウント Sticky_Note_Map_features[i].properties.NiceCount = parseInt(Sticky_Note_Map_features[i].properties.NiceCount) + 1; // いいね！カウント+1 // 期限日時 var TermDateTime = new Date(Sticky_Note_Map_features[i].properties.TermDateTime); // TermDateTimeをDateオブジェクトに変換 TermDateTime.setHours(TermDateTime.getHours() + 1); // 1時間加算 Sticky_Note_Map_features[i].properties.TermDateTime = TermDateTime.toISOString(); // 更新されたTermDateTimeをfeatures配列に反映し、ISO形式で保存 } } var geojson = { type: "FeatureCollection", features: Sticky_Note_Map_features }; map.getSource('Sticky_Note_Map').setData(geojson); } } }); }; //################# ポップアップ（属性表示） ################# //################# ポップアップ（ダブルクリック） ################# // データベースに登録・参照 async function add_Sticky_Note(){ let db_Sticky_Note = document.getElementById("db_Sticky_Note").value; let db_Sticky_Note_URL = document.getElementById("db_Sticky_Note_URL").value; if( db_Sticky_Note !== "" || db_Sticky_Note_URL !== "" ){ Popup_Sticky_Note_Map02.remove(); if( db_Sticky_Note === "" ){ db_Sticky_Note = db_Sticky_Note_URL; } // DB登録 var response = await fetch(API_URL, { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, body: 'key=' + encodeURIComponent('add_Sticky_Note') + '&db_user=' + Sticky_Note_Map_User + '&db_Sticky_Note=' + db_Sticky_Note + '&db_Sticky_Note_URL=' + db_Sticky_Note_URL + '&db_Lng=' + db_Lng + '&db_Lat=' + db_Lat }) if (response.ok) { // 成功した場合に実行 // console.log('データベースに登録完了'); await update_Sticky_Note_Map_Data(); // リスト更新 if(Sticky_Note_Map_List_Target_ID !== ""){ await get_Sticky_Note_Map_List(); } } else { console.error('データベースへの登録に失敗しました'); } }else{ alert(Alert_Text_Post01); } } let ZoomLv; function Popup_Post_Menu(e){ ZoomLv = map.getZoom(); db_Lng = e.lngLat.lng; db_Lat = e.lngLat.lat; // ポップアップ削除 Popup_Sticky_Note_Map01.remove(); Popup_Sticky_Note_Map02.remove(); Popup_Sticky_Note_Map02 = new maplibregl.Popup({closeButton: false}) .setLngLat(e.lngLat) .setHTML( '

' + '' + Popup_Text_Description + '
' + '' + '' + '' + '　' + ' ' + '
' + '' + Popup_Text_Link + ' 　' + '
' + '

' + '' + '' + Popup_Text_GoogleMaps + ' / ' + '' + Popup_Text_StreetView + '
' + '' + '

' ); Popup_Sticky_Note_Map02.addTo(map); const Sticky_Note_textBox = document.getElementById('db_Sticky_Note'); Sticky_Note_textBox.focus(); } //################# ポップアップ（ダブルクリック） ################# function set_Language() { if( Sticky_Note_Map_Language =="jp"){ Popup_Text_User ="投稿者"; Popup_Text_PostDateTime ="投稿日時"; Popup_Text_Post_Button = "POST"; Popup_Text_Delete_Button = "削　除"; Popup_Text_Nice ="いいね！"; Popup_Text_GoogleMaps = "Google Maps"; Popup_Text_StreetView = "ストリートビュー"; Popup_Text_Description = "【投稿】（100文字以内）"; Popup_Text_Placeholder = "コメント又はＵＲＬ"; Popup_Text_Link = "リンク"; Alert_Text_Delete = "本当に削除しますか？"; Alert_Text_Post01 = "コメントが入力されていません。"; } } //################# Sticky_Note_Map追加 ################# function add_Sticky_Note_Map() { // 言語設定 set_Language(); // アクセスカウント更新 updateCount() // ソース・レイヤ初期設定 set_Sticky_Note_Map_Source_Layer(); // ソース更新 update_Sticky_Note_Map_Data(); // リスト更新 get_Sticky_Note_Map_List(); // ダブルクリック制御 map.on('click', function (e) { if (DoubleClick_Flg) { // ダブルクリック処理 Popup_Post_Menu(e); // Postメニューの呼び出し DoubleClick_Flg = false; // 次のクリックに備えて状態をリセット } else { DoubleClick_Flg = true; setTimeout(() => { DoubleClick_Flg = false; // 一定時間後に状態をリセット }, 300); // 300ミリ秒後にリセット } }); if( Sticky_Note_Map_List_Target_ID !== "" ){ const detailsElement = document.getElementById(Sticky_Note_Map_List_Target_ID); // 最新投稿のイベントリスナー detailsElement.addEventListener('toggle', () => { if (detailsElement.open) { Confirm_Latest_Sticky_Note_Map(); } }); } // マウスポインタ制御 map.on('mousemove', 'Sticky_Note_Map', (e) => { map.getCanvas().style.cursor = 'pointer' }); //マウスイベント【Sticky_Note_Map上で動いている場合】 map.on('mousemove', 'Sticky_Note_Map_Label', (e) => { map.getCanvas().style.cursor = 'pointer' }); //マウスイベント【Sticky_Note_Map_Label上で動いている場合】 map.on('mouseleave','Sticky_Note_Map', function() { map.getCanvas().style.cursor = ''; }); //マウスアウトイベント（Sticky_Note_Map）【元に戻す】 map.on('mouseleave','Sticky_Note_Map_Label', function() { map.getCanvas().style.cursor = ''; }); //マウスアウトイベント（Sticky_Note_Map_Label）【元に戻す】 map.on('mousemove', 'Sticky_Note_Map_Cluster', (e) => { map.getCanvas().style.cursor = 'pointer' }); //マウスイベント【Sticky_Note_Map_Cluster上で動いている場合】 map.on('mouseleave','Sticky_Note_Map_Cluster', function() { map.getCanvas().style.cursor = ''; }); //マウスアウトイベント（Sticky_Note_Map_Cluster）【元に戻す】 map.on('drag', function () { map.getCanvas().style.cursor = 'grabbing'; }); //マウスイベント【ドラッグ】 map.on('moveend', function () { map.getCanvas().style.cursor = ''; }); //マウスイベント【ムーブエンド】 // クリック属性表示（Sticky_Note_Map）【Point】 map.on('click', 'Sticky_Note_Map', (e) => { if( e.features[0].properties['ID'] !== undefined ){ Popup_Sticky_Note_Map(e); } }); // クリック属性表示（Sticky_Note_Map）【Text】 map.on('click', 'Sticky_Note_Map_Label', (e) => { Popup_Sticky_Note_Map(e); }); // クリック属性表示（Sticky_Note_Map）【Cluster_Circle】 map.on('click', 'Sticky_Note_Map_Cluster', (e) => { const screenWidth = window.innerWidth; // 画面幅を取得 // 画面幅に応じて拡大スピードを調整 if( screenWidth < 700){ ZoomLv = map.getZoom() + 3; }else{ ZoomLv = map.getZoom() + 4; } // クラスタリング地物（Features）の中心座標 data_Lng = e.features[0].geometry.coordinates[0]; data_Lat = e.features[0].geometry.coordinates[1]; Flyto_Point(data_Lng, data_Lat,ZoomLv); }); } //################# Sticky_Note_Map追加 ################# }31:Ta24a,style = ({ version: 8, sources: sources, sprite: sprite, glyphs: glyphs, layers: [ background, { "id": "park", "type": "fill", "source": "openmaptiles", "source-layer": "park", "filter": [ "==", "$type", "Polygon" ], "paint": { "fill-color": "rgb(230, 233, 229)" }, "layout": {}, "minzoom": 0, "maxzoom": 22 }, { "id": "water", "type": "fill", "source": "openmaptiles", "source-layer": "water", "filter": [ "all", [ "==", "$type", "Polygon" ], [ "!=", "brunnel", "tunnel" ] ], "paint": { "fill-antialias": true, "fill-color": "rgb(194, 200, 202)" }, "layout": {}, "minzoom": 0, "maxzoom": 22 }, { "id": "landcover_ice_shelf", "type": "fill", "source": "openmaptiles", "source-layer": "landcover", "filter": [ "all", [ "==", "$type", "Polygon" ], [ "==", "subclass", "ice_shelf" ] ], "paint": { "fill-color": "hsl(0, 0%, 98%)", "fill-opacity": 0.7 }, "layout": {}, "minzoom": 0, "maxzoom": 8 }, { "id": "landcover_glacier", "type": "fill", "source": "openmaptiles", "source-layer": "landcover", "filter": [ "all", [ "==", "$type", "Polygon" ], [ "==", "subclass", "glacier" ] ], "paint": { "fill-color": "hsl(0, 0%, 98%)", "fill-opacity": { "base": 1, "stops": [ [ 0, 1 ], [ 8, 0.5 ] ] } }, "layout": {}, "minzoom": 0, "maxzoom": 8 }, { "id": "landuse_residential", "type": "fill", "source": "openmaptiles", "source-layer": "landuse", "filter": [ "all", [ "==", "$type", "Polygon" ], [ "==", "class", "residential" ] ], "paint": { "fill-color": "rgb(234, 234, 230)", "fill-opacity": { "base": 0.6, "stops": [ [ 8, 0.8 ], [ 9, 0.6 ] ] } }, "layout": {}, "minzoom": 0, "maxzoom": 16 }, { "id": "landcover_wood", "type": "fill", "source": "openmaptiles", "source-layer": "landcover", "filter": [ "all", [ "==", "$type", "Polygon" ], [ "==", "class", "wood" ] ], "paint": { "fill-color": "rgb(220,224,220)", "fill-opacity": { "base": 1, "stops": [ [ 8, 0 ], [ 12, 1 ] ] } }, "layout": {}, "minzoom": 10, "maxzoom": 22 }, { "id": "hills", "type": "hillshade", "source": "gel-raster-dem", "paint": { "hillshade-shadow-color": "#473B24" } }, { "id": "waterway", "type": "line", "source": "openmaptiles", "source-layer": "waterway", "filter": [ "==", "$type", "LineString" ], "paint": { "line-color": "hsl(195, 17%, 78%)" }, "layout": {}, "minzoom": 0, "maxzoom": 22 }, { "id": "water_name", "type": "symbol", "source": "openmaptiles", "source-layer": "water_name", "filter": [ "==", "$type", "LineString" ], "paint": { "text-color": "rgb(157,169,177)", "text-halo-blur": 1, "text-halo-color": "rgb(242,243,240)", "text-halo-width": 1 }, "layout": { "text-font": textFont, "symbol-placement": "line", "symbol-spacing": 500, "text-field": "{name:latin}\n{name:nonlatin}", "text-rotation-alignment": "map", "text-size": 12 }, "minzoom": 0, "maxzoom": 22 }, { "id": "building", "type": "fill", "source": "openmaptiles", "source-layer": "building", "paint": { "fill-antialias": true, "fill-color": "rgb(234, 234, 229)", "fill-outline-color": "rgb(219, 219, 218)", "fill-opacity": 0.5 }, "layout": {}, "minzoom": 12, "maxzoom": 22 }, { "id": "tunnel_motorway_casing", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "==", "brunnel", "tunnel" ], [ "==", "class", "motorway" ] ] ], "paint": { "line-color": "rgb(213, 213, 213)", "line-opacity": 1, "line-width": { "base": 1.4, "stops": [ [ 5.8, 0 ], [ 6, 3 ], [ 20, 40 ] ] } }, "layout": { "line-cap": "butt", "line-join": "miter" }, "minzoom": 6, "maxzoom": 22 }, { "id": "tunnel_motorway_inner", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "==", "brunnel", "tunnel" ], [ "==", "class", "motorway" ] ] ], "paint": { "line-color": "rgb(234,234,234)", "line-width": { "base": 1.4, "stops": [ [ 4, 2 ], [ 6, 1.3 ], [ 20, 30 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 6, "maxzoom": 22 }, { "id": "aeroway-taxiway", "type": "line", "source": "openmaptiles", "source-layer": "aeroway", "filter": [ "all", [ "in", "class", "taxiway" ] ], "paint": { "line-color": "hsl(0, 0%, 88%)", "line-opacity": 1, "line-width": { "base": 1.55, "stops": [ [ 13, 1.8 ], [ 20, 20 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 12, "maxzoom": 22 }, { "id": "aeroway-runway-casing", "type": "line", "source": "openmaptiles", "source-layer": "aeroway", "filter": [ "all", [ "in", "class", "runway" ] ], "paint": { "line-color": "hsl(0, 0%, 88%)", "line-opacity": 1, "line-width": { "base": 1.5, "stops": [ [ 11, 6 ], [ 17, 55 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 11, "maxzoom": 22 }, { "id": "aeroway-area", "type": "fill", "source": "openmaptiles", "source-layer": "aeroway", "filter": [ "all", [ "==", "$type", "Polygon" ], [ "in", "class", "runway", "taxiway" ] ], "paint": { "fill-color": "rgba(255, 255, 255, 1)", "fill-opacity": { "base": 1, "stops": [ [ 13, 0 ], [ 14, 1 ] ] } }, "layout": {}, "minzoom": 4, "maxzoom": 22 }, { "id": "aeroway-runway", "type": "line", "source": "openmaptiles", "source-layer": "aeroway", "filter": [ "all", [ "in", "class", "runway" ], [ "==", "$type", "LineString" ] ], "paint": { "line-color": "rgba(255, 255, 255, 1)", "line-opacity": 1, "line-width": { "base": 1.5, "stops": [ [ 11, 4 ], [ 17, 50 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 11, "maxzoom": 22 }, { "id": "road_area_pier", "type": "fill", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "Polygon" ], [ "==", "class", "pier" ] ], "paint": { "fill-antialias": true, "fill-color": "rgb(242,243,240)" }, "layout": {}, "minzoom": 0, "maxzoom": 22 }, { "id": "road_pier", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "in", "class", "pier" ] ], "paint": { "line-color": "rgb(242,243,240)", "line-width": { "base": 1.2, "stops": [ [ 15, 1 ], [ 17, 4 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 0, "maxzoom": 22 }, { "id": "highway_path", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "==", "class", "path" ] ], "paint": { "line-color": "rgb(234, 234, 234)", "line-opacity": 0.9, "line-width": { "base": 1.2, "stops": [ [ 13, 1 ], [ 20, 10 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 0, "maxzoom": 22 }, { "id": "highway_minor", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "in", "class", "minor", "service", "track" ] ], "paint": { "line-color": "hsl(0, 0%, 88%)", "line-opacity": 0.9, "line-width": { "base": 1.55, "stops": [ [ 13, 1.8 ], [ 20, 20 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 8, "maxzoom": 22 }, { "id": "highway_major_casing", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "in", "class", "primary", "secondary", "tertiary", "trunk" ] ], "paint": { "line-color": "rgb(213, 213, 213)", "line-dasharray": [ 12, 0 ], "line-width": { "base": 1.3, "stops": [ [ 10, 3 ], [ 20, 23 ] ] } }, "layout": { "line-cap": "butt", "line-join": "miter" }, "minzoom": 11, "maxzoom": 22 }, { "id": "highway_major_inner", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "in", "class", "primary", "secondary", "tertiary", "trunk" ] ], "paint": { "line-color": "#fff", "line-width": { "base": 1.3, "stops": [ [ 10, 2 ], [ 20, 20 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 11, "maxzoom": 22 }, { "id": "highway_major_subtle", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "in", "class", "primary", "secondary", "tertiary", "trunk" ] ], "paint": { "line-color": "hsla(0, 0%, 85%, 0.69)", "line-width": 2 }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 0, "maxzoom": 11 }, { "id": "highway_motorway_casing", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "!in", "brunnel", "bridge", "tunnel" ], [ "==", "class", "motorway" ] ] ], "paint": { "line-color": "rgb(213, 213, 213)", "line-dasharray": [ 2, 0 ], "line-opacity": 1, "line-width": { "base": 1.4, "stops": [ [ 5.8, 0 ], [ 6, 3 ], [ 20, 40 ] ] } }, "layout": { "line-cap": "butt", "line-join": "miter" }, "minzoom": 6, "maxzoom": 22 }, { "id": "highway_motorway_inner", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "!in", "brunnel", "bridge", "tunnel" ], [ "==", "class", "motorway" ] ] ], "paint": { "line-color": { "base": 1, "stops": [ [ 5.8, "hsla(0, 0%, 85%, 0.53)" ], [ 6, "#fff" ] ] }, "line-width": { "base": 1.4, "stops": [ [ 4, 2 ], [ 6, 1.3 ], [ 20, 30 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 6, "maxzoom": 22 }, { "id": "highway_motorway_subtle", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "==", "class", "motorway" ] ], "paint": { "line-color": "hsla(0, 0%, 85%, 0.53)", "line-width": { "base": 1.4, "stops": [ [ 4, 2 ], [ 6, 1.3 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 0, "maxzoom": 6 }, { "id": "railway_transit", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "==", "class", "transit" ], [ "!in", "brunnel", "tunnel" ] ] ], "paint": { "line-color": "#dddddd", "line-width": 3 }, "layout": { "line-join": "round" }, "minzoom": 16, "maxzoom": 22 }, { "id": "railway_transit_dashline", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "==", "class", "transit" ], [ "!in", "brunnel", "tunnel" ] ] ], "paint": { "line-color": "#fafafa", "line-dasharray": [ 3, 3 ], "line-width": 2 }, "layout": { "line-join": "round" }, "minzoom": 16, "maxzoom": 22 }, { "id": "railway_service", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "==", "class", "rail" ], [ "has", "service" ] ] ], "paint": { "line-color": "#dddddd", "line-width": 3 }, "layout": { "line-join": "round" }, "minzoom": 16, "maxzoom": 22 }, { "id": "railway_service_dashline", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "==", "class", "rail" ], [ "has", "service" ] ], "paint": { "line-color": "#fafafa", "line-dasharray": [ 3, 3 ], "line-width": 2 }, "layout": { "line-join": "round" }, "minzoom": 16, "maxzoom": 22 }, { "id": "railway", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "!has", "service" ], [ "==", "class", "rail" ] ] ], "paint": { "line-color": "#dddddd", "line-width": { "base": 1.3, "stops": [ [ 16, 3 ], [ 20, 7 ] ] } }, "layout": { "line-join": "round" }, "minzoom": 13, "maxzoom": 22 }, { "id": "railway_dashline", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "!has", "service" ], [ "==", "class", "rail" ] ] ], "paint": { "line-color": "#fafafa", "line-dasharray": [ 3, 3 ], "line-width": { "base": 1.3, "stops": [ [ 16, 2 ], [ 20, 6 ] ] } }, "layout": { "line-join": "round" }, "minzoom": 13, "maxzoom": 22 }, { "id": "highway_motorway_bridge_casing", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "==", "brunnel", "bridge" ], [ "==", "class", "motorway" ] ] ], "paint": { "line-color": "rgb(213, 213, 213)", "line-dasharray": [ 2, 0 ], "line-opacity": 1, "line-width": { "base": 1.4, "stops": [ [ 5.8, 0 ], [ 6, 5 ], [ 20, 45 ] ] } }, "layout": { "line-cap": "butt", "line-join": "miter" }, "minzoom": 6, "maxzoom": 22 }, { "id": "highway_motorway_bridge_inner", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "==", "brunnel", "bridge" ], [ "==", "class", "motorway" ] ] ], "paint": { "line-color": { "base": 1, "stops": [ [ 5.8, "hsla(0, 0%, 85%, 0.53)" ], [ 6, "#fff" ] ] }, "line-width": { "base": 1.4, "stops": [ [ 4, 2 ], [ 6, 1.3 ], [ 20, 30 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 6, "maxzoom": 22 }, { "id": "highway_name_other", "type": "symbol", "source": "openmaptiles", "source-layer": "transportation_name", "filter": [ "all", [ "!=", "class", "motorway" ], [ "==", "$type", "LineString" ] ], "paint": { "text-color": "#bbb", "text-halo-blur": 1, "text-halo-color": "#fff", "text-halo-width": 2, "text-translate": [ 0, 0 ] }, "layout": { "text-font": textFont, "symbol-placement": "line", "symbol-spacing": 350, "text-field": "{name:latin} {name:nonlatin}", "text-max-angle": 30, "text-pitch-alignment": "viewport", "text-rotation-alignment": "map", "text-size": 10, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 22 }, { "id": "highway_name_motorway", "type": "symbol", "source": "openmaptiles", "source-layer": "transportation_name", "filter": [ "all", [ "==", "$type", "LineString" ], [ "==", "class", "motorway" ] ], "paint": { "text-color": "rgb(117, 129, 145)", "text-halo-blur": 1, "text-halo-color": "hsl(0, 0%, 100%)", "text-halo-width": 1, "text-translate": [ 0, 2 ] }, "layout": { "text-font": textFont, "symbol-placement": "line", "symbol-spacing": 350, "text-field": "{ref}", "text-pitch-alignment": "viewport", "text-rotation-alignment": "viewport", "text-size": 10 }, "minzoom": 0, "maxzoom": 22 }, { "id": "boundary_state", "type": "line", "source": "openmaptiles", "source-layer": "boundary", "filter": [ "==", "admin_level", 4 ], "paint": { "line-blur": 0.4, "line-color": "rgb(230, 204, 207)", "line-dasharray": [ 2, 2 ], "line-opacity": 1, "line-width": { "base": 1.3, "stops": [ [ 3, 1 ], [ 22, 15 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 0, "maxzoom": 22 }, { "id": "boundary_country_z0-4", "type": "line", "source": "openmaptiles", "source-layer": "boundary", "filter": [ "all", [ "==", "admin_level", 2 ], [ "!has", "claimed_by" ], [ "==", "maritime", false ] ], "paint": { "line-blur": { "base": 1, "stops": [ [ 0, 0.4 ], [ 22, 4 ] ] }, "line-color": "rgb(230, 204, 207)", "line-opacity": 1, "line-width": { "base": 1.1, "stops": [ [ 3, 1 ], [ 22, 20 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 0, "maxzoom": 5 }, { "id": "boundary_country_z5-", "type": "line", "source": "openmaptiles", "source-layer": "boundary", "filter": [ "==", "admin_level", 2 ], "paint": { "line-blur": { "base": 1, "stops": [ [ 0, 0.4 ], [ 22, 4 ] ] }, "line-color": "rgb(230, 204, 207)", "line-opacity": 1, "line-width": { "base": 1.1, "stops": [ [ 3, 1 ], [ 22, 20 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 5, "maxzoom": 22 }, { "id": "place_other", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "in", "class", "continent", "hamlet", "neighbourhood", "isolated_dwelling" ], [ "==", "$type", "Point" ] ], "paint": { "text-color": "rgb(117, 129, 145)", "text-halo-blur": 1, "text-halo-color": "rgb(242,243,240)", "text-halo-width": 1 }, "layout": { "text-font": textFont, "text-anchor": "center", "text-field": "{name:latin}\n{name:nonlatin}", "text-justify": "center", "text-offset": [ 0.5, 0 ], "text-size": 10, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 14 }, { "id": "place_suburb", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "==", "$type", "Point" ], [ "==", "class", "suburb" ] ], "paint": { "text-color": "rgb(117, 129, 145)", "text-halo-blur": 1, "text-halo-color": "rgb(242,243,240)", "text-halo-width": 1 }, "layout": { "text-font": textFont, "text-anchor": "center", "text-field": "{name:latin}\n{name:nonlatin}", "text-justify": "center", "text-offset": [ 0.5, 0 ], "text-size": 10, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 15 }, { "id": "place_village", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "==", "$type", "Point" ], [ "==", "class", "village" ] ], "paint": { "icon-opacity": 0.7, "text-color": "rgb(117, 129, 145)", "text-halo-blur": 1, "text-halo-color": "rgb(242,243,240)", "text-halo-width": 1 }, "layout": { "text-font": textFont, "icon-size": 0.4, "text-anchor": "left", "text-field": "{name:latin}\n{name:nonlatin}", "text-justify": "left", "text-offset": [ 0.5, 0.2 ], "text-size": 10, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 14 }, { "id": "place_town", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "==", "$type", "Point" ], [ "==", "class", "town" ] ], "paint": { "icon-opacity": 0.7, "text-color": "rgb(117, 129, 145)", "text-halo-blur": 1, "text-halo-color": "rgb(242,243,240)", "text-halo-width": 1 }, "layout": { "text-font": textFont, "icon-image": { "base": 1, "stops": [ [ 0, "circle-11" ], [ 8, "" ] ] }, "icon-size": 0.4, "text-anchor": { "base": 1, "stops": [ [ 0, "left" ], [ 8, "center" ] ] }, "text-field": "{name:latin}\n{name:nonlatin}", "text-justify": "left", "text-offset": [ 0.5, 0.2 ], "text-size": 10, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 15 }, { "id": "place_city", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "==", "$type", "Point" ], [ "all", [ "!=", "capital", 2 ], [ "==", "class", "city" ], [ ">", "rank", 3 ] ] ], "paint": { "icon-opacity": 0.7, "text-color": "rgb(117, 129, 145)", "text-halo-blur": 1, "text-halo-color": "rgb(242,243,240)", "text-halo-width": 1 }, "layout": { "text-font": textFont, "icon-image": { "base": 1, "stops": [ [ 0, "circle-11" ], [ 8, "" ] ] }, "icon-size": 0.4, "text-anchor": { "base": 1, "stops": [ [ 0, "left" ], [ 8, "center" ] ] }, "text-field": "{name:latin}\n{name:nonlatin}", "text-justify": "left", "text-offset": [ 0.5, 0.2 ], "text-size": 10, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 14 }, { "id": "place_capital", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "==", "$type", "Point" ], [ "all", [ "==", "capital", 2 ], [ "==", "class", "city" ] ] ], "paint": { "icon-opacity": 0.7, "text-color": "rgb(117, 129, 145)", "text-halo-blur": 1, "text-halo-color": "rgb(242,243,240)", "text-halo-width": 1 }, "layout": { "text-font": textFont, "icon-image": { "base": 1, "stops": [ [ 0, "star-11" ], [ 8, "" ] ] }, "icon-size": 1, "text-anchor": { "base": 1, "stops": [ [ 0, "left" ], [ 8, "center" ] ] }, "text-field": "{name:latin}\n{name:nonlatin}", "text-justify": "left", "text-offset": [ 0.5, 0.2 ], "text-size": 14, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 12 }, { "id": "place_city_large", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "==", "$type", "Point" ], [ "all", [ "!=", "capital", 2 ], [ "<=", "rank", 3 ], [ "==", "class", "city" ] ] ], "paint": { "icon-opacity": 0.7, "text-color": "rgb(117, 129, 145)", "text-halo-blur": 1, "text-halo-color": "rgb(242,243,240)", "text-halo-width": 1 }, "layout": { "text-font": textFont, "icon-image": { "base": 1, "stops": [ [ 0, "circle-11" ], [ 8, "" ] ] }, "icon-size": 0.4, "text-anchor": { "base": 1, "stops": [ [ 0, "left" ], [ 8, "center" ] ] }, "text-field": "{name:latin}\n{name:nonlatin}", "text-justify": "left", "text-offset": [ 0.5, 0.2 ], "text-size": 14, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 12 }, { "id": "place_state", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "==", "$type", "Point" ], [ "==", "class", "state" ] ], "paint": { "text-color": "rgb(113, 129, 144)", "text-halo-blur": 1, "text-halo-color": "rgb(242,243,240)", "text-halo-width": 1 }, "layout": { "text-font": textFont, "text-field": "{name:latin}\n{name:nonlatin}", "text-size": 10, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 12 }, { "id": "place_country_other", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "==", "$type", "Point" ], [ "==", "class", "country" ], [ "!has", "iso_a2" ] ], "paint": { "text-color": { "base": 1, "stops": [ [ 3, "rgb(157,169,177)" ], [ 4, "rgb(153, 153, 153)" ] ] }, "text-halo-color": "rgba(236,236,234,0.7)", "text-halo-width": 1.4 }, "layout": { "text-font": textFont, "text-field": "{name:latin}", "text-size": { "base": 1, "stops": [ [ 0, 9 ], [ 6, 11 ] ] }, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 8 }, { "id": "place_country_minor", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "==", "$type", "Point" ], [ "==", "class", "country" ], [ ">=", "rank", 2 ], [ "has", "iso_a2" ] ], "paint": { "text-color": { "base": 1, "stops": [ [ 3, "rgb(157,169,177)" ], [ 4, "rgb(153, 153, 153)" ] ] }, "text-halo-color": "rgba(236,236,234,0.7)", "text-halo-width": 1.4 }, "layout": { "text-font": textFont, "text-field": "{name:latin}", "text-size": { "base": 1, "stops": [ [ 0, 10 ], [ 6, 12 ] ] }, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 8 }, { "id": "place_country_major", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "==", "$type", "Point" ], [ "<=", "rank", 1 ], [ "==", "class", "country" ], [ "has", "iso_a2" ] ], "paint": { "text-color": { "base": 1, "stops": [ [ 3, "rgb(157,169,177)" ], [ 4, "rgb(153, 153, 153)" ] ] }, "text-halo-color": "rgba(236,236,234,0.7)", "text-halo-width": 1.4 }, "layout": { "text-font": textFont, "text-anchor": "center", "text-field": "{name:latin}", "text-size": { "base": 1.4, "stops": [ [ 0, 10 ], [ 3, 12 ], [ 4, 14 ] ] }, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 6 } ] })32:[] 2d:{"title":"kpop-pmtiles + sticky_note_map (not working properly)","cells":[{"id":0,"value":"# kpop-pmtiles + sticky_note_map (not working properly)\nA demo site for [Kontur Population dataset](https://www.kontur.io/portfolio/population-dataset/) in PMTiles.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"container = {\n　　yield html`

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"// MapLibre GL JS with PMTiles enabled\nmaplibregl = {\n let m = await require(\"maplibre-gl\")\n let p = await import(\"https://cdn.skypack.dev/pmtiles\")\n let protocol = new p.Protocol()\n m.addProtocol('pmtiles', protocol.tile)\n yield m\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"openmaptiles = ({\n type: \"vector\",\n url: \"pmtiles://https://tile.openstreetmap.jp/static/planet.pmtiles\",\n attribution: \"OpenStreetMap contributors\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"gel = ({\n type: \"raster-dem\",\n tiles: [\n \"pmtiles://https://data.source.coop/smartmaps/gel/gel.pmtiles/{z}/{x}/{y}.webp\"\n ],\n tileSize: 512,\n minzoom: 2,\n maxzoom: 12\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"terrain22 = ({\n type: \"vector\",\n url: \"pmtiles://https://data.source.coop/smartmaps/foil4gr1/terrain22.pmtiles\",\n attribution: \"Terrain22\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"overture = ({\n type: \"vector\",\n url: \"pmtiles://https://tile.openstreetmap.jp/static/overture.pmtiles\",\n attribution: \"© Overture Maps Foundation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"kpop = ({\n type: \"vector\",\n url: \"pmtiles://https://data.source.coop/smartmaps/foil4gr1/kpop.pmtiles\",\n attribution: \"© Kontur\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"sprite = \"https://openmaptiles.github.io/positron-gl-style/sprite\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"sources = ({\n openmaptiles: openmaptiles,\n \"gel-raster-dem\": gel,\n \"gel-raster-terrain\": gel,\n terrain22: terrain22,\n kpop: kpop\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"glyphs = \"https://unopengis.github.io/librefranklin/{fontstack}/{range}.pbf\" //\"https://unopengis.github.io/noto/{fontstack}/{range}.pbf\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"textFont = [ \"700\" ]","pinned":true,"hidden":false,"mode":"ojs"},{"id":363,"value":"localIdeographFontFamily = '\"HiraginoSans-W6\", \"Hiragino Sans W6\", \"Hiragino Sans\", \"HGP創英角ｺﾞｼｯｸUB\", \"Meiryo\", \"sans900\", sans-serif'","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"background = ({\n id: \"background\",\n type: \"background\",\n paint: {\n \"background-color\": \"rgb(242,243,240)\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":381,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":124,"value":"## Repository\nhttps://github.com/optgeo/kpop-pmtiles","pinned":false,"hidden":false,"mode":"md"},{"id":339,"value":"map.getCenter() + map.getZoom()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}