add NightatTheMuseumFestival2023

PingHuskar · Dec 16, 2023 · c6b0602 · c6b0602
1 parent 2db8634
commit c6b0602
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 0 deletions.
diff --git a/TimeOutBangkokTH/NightatTheMuseumFestival2023/app.js 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: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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(`<a href="https://github.com/pinghuskar">Chadin Chaipornpisuth</a>`)
+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(`<h2>${NAME}</h2>
+                <p>${record.addr}</p>
+                <img src="../../src/images/googlemaps.png" onclick="window.open('https://www.google.com/maps?daddr=${record.geo[0]},${record.geo[1]}', '_blank')">
+                `).bindTooltip(`${NAME}`).openTooltip().addTo(map)
+                // )
+            }
+        }
+    }
+)
+
+// map.addLayer(markers)
diff --git a/TimeOutBangkokTH/NightatTheMuseumFestival2023/data.json 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
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NightatTheMuseumFestival2023</title>
+    <link rel="shortcut icon" href="logo.jpg" type="image/x-icon">
+    <link rel="stylesheet" href="../../src/style.css">
+    <script src="../../src/leaflet-src.js"></script>
+    <script src="../../src/plugins/L.Control.Zoomslider.js"></script>
+    <script src="../../src/plugins/L.Control.MousePosition.js"></script>
+    <script src="../../src/plugins/Leaflet.PolylineMeasure.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js" integrity="sha512-uMtXmF28A2Ab/JJO2t/vYhlaa/3ahUOgj1Zf27M5rOo8/+fcTUVH0/E0ll68njmjrLqOBjXM3V9NiPFL5ywWPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+</head>
+<body>
+    <div id="mapdiv"></div>
+    <script src="../../src/Leaflet.Marker.Parallax.js"></script>
+    <script src="../../moment.js"></script>
+    <script src="../../moment-precise-range.js"></script>
+    <script defer src="../../src/province.js"></script>
+    <script defer src="app.js"></script>
+</body>
+</html>