From 1b37f7d7f1554f4ef4cd185c1181d54d9956b1db Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Sun, 6 Oct 2024 12:06:27 +0800 Subject: Update --- snippets/css_html_showcase | 32 +++++++++++++ snippets/css_html_structure | 85 ++++++++++++++++++++++++++++++++++ snippets/css_transition_common | 21 +++++++++ snippets/html_mapclay | 8 ++++ snippets/javascript_mutationoberserver | 12 +++++ snippets/js_maplibre_terrain | 27 +++++++++++ snippets/sh_shebang | 1 + 7 files changed, 186 insertions(+) create mode 100644 snippets/css_html_showcase create mode 100644 snippets/css_html_structure create mode 100644 snippets/css_transition_common create mode 100644 snippets/html_mapclay create mode 100644 snippets/javascript_mutationoberserver create mode 100644 snippets/js_maplibre_terrain create mode 100644 snippets/sh_shebang (limited to 'snippets') diff --git a/snippets/css_html_showcase b/snippets/css_html_showcase new file mode 100644 index 0000000..2941cc1 --- /dev/null +++ b/snippets/css_html_showcase @@ -0,0 +1,32 @@ +
+
+{
+  use: mapX
+  width: 300px
+  height: 400px
+  center: Taiwan
+}
+
+
+ => 
+
+ +```map +use: Maplibre +width: 300px +height: 400px +center: [121,24] +zoom: 6 +``` + + + +
+ + diff --git a/snippets/css_html_structure b/snippets/css_html_structure new file mode 100644 index 0000000..e96d9f8 --- /dev/null +++ b/snippets/css_html_structure @@ -0,0 +1,85 @@ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/snippets/css_transition_common b/snippets/css_transition_common new file mode 100644 index 0000000..4884c90 --- /dev/null +++ b/snippets/css_transition_common @@ -0,0 +1,21 @@ +@media (prefers-reduced-motion: no-preference) { + transition: + opacity .5s ease-in, + scale .5s ease-in, + display .5s ease-in; + height .5s ease-in; + transition-behavior: allow-discrete; +} + +@starting-style { + opacity: 0; + scale: 1.1; +} + +&[hidden] { + opacity: 0; + scale: .9; + display: none !important; + transition-duration: .4s; + transition-timing-function: ease-out; +} diff --git a/snippets/html_mapclay b/snippets/html_mapclay new file mode 100644 index 0000000..a89867b --- /dev/null +++ b/snippets/html_mapclay @@ -0,0 +1,8 @@ +
+use: Leaflet
+XYZ: https://tile.openstreetmap.jp/styles/osm-bright/512/{z}/{x}/{y}.png
+draw: true
+control:
+  scale: true
+
+ diff --git a/snippets/javascript_mutationoberserver b/snippets/javascript_mutationoberserver new file mode 100644 index 0000000..48f17af --- /dev/null +++ b/snippets/javascript_mutationoberserver @@ -0,0 +1,12 @@ + new window.MutationObserver((ms) => { + for (const m of ms) { + console.log(m) + console.log('m', m.target.innerHTML) + console.log('m', m.target.classList) + } + }).observe(item, { + attributes: true, + attributeFilter: ['class'], + attributeOldValue: true, + characterDataOldValue: true + }) diff --git a/snippets/js_maplibre_terrain b/snippets/js_maplibre_terrain new file mode 100644 index 0000000..a6466db --- /dev/null +++ b/snippets/js_maplibre_terrain @@ -0,0 +1,27 @@ +map.addSource('hillshading', { + "type": "raster-dem", + "tiles": [ + "https://osmhacktw.github.io/terrain-rgb/tiles/{z}/{x}/{y}.png" + ], + "tileSize": 256, + "maxzoom": 12 +}); +map.setTerrain({ 'source': 'hillshading', 'exaggeration': 1.5 }); + +map.addLayer({ + "id": "hillshading", + "type": "hillshade", + "source": "hillshading", + "minzoom": 6 +}); + +map.on('load', function () { + document.getElementById('slider').addEventListener('input', function (e) { + console.log(e.target.value); + map.setPaintProperty( + 'hillshading', + 'hillshade-illumination-direction', + parseInt(e.target.value) + ); + }); +}); diff --git a/snippets/sh_shebang b/snippets/sh_shebang new file mode 100644 index 0000000..36ac368 --- /dev/null +++ b/snippets/sh_shebang @@ -0,0 +1 @@ +#! /bin/bash -- cgit v1.2.3-70-g09d2