From c6b0602d9e33e4801b473b1bc12d90c44b99ed62 Mon Sep 17 00:00:00 2001 From: Chadin Chaipornpisuth Date: Sat, 16 Dec 2023 17:53:56 +0700 Subject: [PATCH] add NightatTheMuseumFestival2023 --- .../NightatTheMuseumFestival2023/app.js | 60 +++++++++++++++++++ .../NightatTheMuseumFestival2023/data.json | 23 +++++++ .../NightatTheMuseumFestival2023/index.html | 24 ++++++++ 3 files changed, 107 insertions(+) create mode 100644 TimeOutBangkokTH/NightatTheMuseumFestival2023/app.js create mode 100644 TimeOutBangkokTH/NightatTheMuseumFestival2023/data.json create mode 100644 TimeOutBangkokTH/NightatTheMuseumFestival2023/index.html diff --git a/TimeOutBangkokTH/NightatTheMuseumFestival2023/app.js b/TimeOutBangkokTH/NightatTheMuseumFestival2023/app.js new file mode 100644 index 0000000..1015cb0 --- /dev/null +++ b/TimeOutBangkokTH/NightatTheMuseumFestival2023/app.js @@ -0,0 +1,60 @@ +"use strict"; +const LatLngToArrayString = (ll) => { + return `[${ll.lat.toFixed(5)}, ${ll.lng.toFixed(5)}]` +} +const iconProps = { + iconSize: [38, 95], + iconAnchor: [22, 94], + popupAnchor: [-3, -76], + // shadowUrl: 'my-icon-shadow.png', + shadowSize: [68, 95], + shadowAnchor: [22, 94] +} + +var map, lyrOSM, mrkCurrentLocation, popExample, ctlZoom, ctlAttribute, ctlScale, ctlPan, ctlZoomslider, ctlMeasure + +var OpenStreetMap_Mapnik = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { + maxZoom: 19, + attribution: '© OpenStreetMap contributors' +}); +map = L.map(`mapdiv`,{ + center:[ 13.751036,100.496321], + zoom: 15, + zoomControl:false, + // dragging:false, + // minZoom:10, + // maxZoom:14 + attributionControl:false, + layers: [OpenStreetMap_Mapnik] +}) + +ctlZoomslider = L.control.zoomslider({position:"topright"}).addTo(map) +ctlMeasure = L.control.polylineMeasure().addTo(map); +ctlAttribute = L.control.attribution({position:'bottomleft'}).addTo(map) +ctlAttribute.addAttribution(`Chadin Chaipornpisuth`) +ctlScale = L.control.scale({ + position:'bottomleft', + metric:false, + maxWidth:200 +}).addTo(map) + +// var markers = L.markerClusterGroup() +axios.get(`data.json`) +.then(res => res.data) +.then(data => { + for (let record of data) { + if (record.geo.length > 0) { + const NAME = record.name + // markers.addLayer( + L.marker(new L.LatLng(...record.geo)) + .bindPopup(`

${NAME}

+

${record.addr}

+ + `).bindTooltip(`${NAME}`).openTooltip().addTo(map) + // ) + } + } + } +) + +// map.addLayer(markers) diff --git a/TimeOutBangkokTH/NightatTheMuseumFestival2023/data.json b/TimeOutBangkokTH/NightatTheMuseumFestival2023/data.json new file mode 100644 index 0000000..0071d23 --- /dev/null +++ b/TimeOutBangkokTH/NightatTheMuseumFestival2023/data.json @@ -0,0 +1,23 @@ +[ + { + "name": "Rattanakosin Exhibition Hall", + "geo": [13.75595, 100.503868], + "addr": "นิทรรศน์รัตนโกสินทร์" + }, + { + "name": "National Museum", + "geo": [13.758040024844261, 100.49170280842986], + "addr": "พิพิธภัณฑสถานแห่งชาติพระนคร" + }, + { + "name": "Bang Lamphu Museum", + "geo": [13.76357737677331, 100.49631148121232], + "addr": "พิพิธบางลำพู" + }, + + { + "name": "Museum Siam", + "geo": [13.744002,100.493875], + "addr": "ตั้งแต่บริเวณเชิงสะพานอรทัย ถนนลูกหลวง ถึงบริเวณเชิงสะพานมัฆวานรังสรรค์" + } +] diff --git a/TimeOutBangkokTH/NightatTheMuseumFestival2023/index.html b/TimeOutBangkokTH/NightatTheMuseumFestival2023/index.html new file mode 100644 index 0000000..88fc49f --- /dev/null +++ b/TimeOutBangkokTH/NightatTheMuseumFestival2023/index.html @@ -0,0 +1,24 @@ + + + + + + + NightatTheMuseumFestival2023 + + + + + + + + + +
+ + + + + + + \ No newline at end of file