Deploy

geolonia · Oct 5, 2023 · c597f09 · c597f09
commit c597f09
Show file tree

Hide file tree

Showing 19 changed files with 3,030 additions and 0 deletions.
diff --git a/controls.html b/controls.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="./style.css">
+  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+  <title>@geolonia/embed</title>
+</head>
+
+<body>
+  <h1>@geolonia/embed | control options</h1>
+
+  Examples for Embed API for Geolonia.
+
+  <div class="example">
+    <h2>Default control positions</h2>
+    <div
+      style="height: 300px"
+      class="geolonia"
+      data-navigation-control="on"
+      data-geolocate-control="on"
+      data-fullscreen-control="on"
+      data-scale-control="on"
+    ></div>
+  </div>
+
+  <div class="example">
+    <h2>Customized control positions</h2>
+    <div
+    style="height: 300px"
+    class="geolonia"
+    data-navigation-control="bottom-left"
+    data-geolocate-control="top-left"
+    data-fullscreen-control="bottom-left"
+    data-scale-control="bottom-right"
+    data-geolonia-control="top-right"
+  ></div>
+  </div>
+
+  <a class="forkme" href="https://github.com/geolonia/embed"><img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
+  <script>
+    var examples = document.querySelectorAll('.example');
+    for (var i = 0; i < examples.length; i++) {
+      var example = examples[i];
+      var html = example.querySelector('.geolonia, #my-map').outerHTML;
+      var pre = document.createElement('pre');
+      pre.innerText = html.replace(/(<div.+?)(>)/g, "$1\n$2").replace(/ ([^ ]+=[^ ]+)/g, "\n  $1");
+      example.insertBefore(pre, example.querySelector('.geolonia'));
+    }
+  </script>
+  <script src="./embed?geolonia-api-key=YOUR-API-KEY"></script>
+</body>
+
+</html>
diff --git a/ctr-style.html b/ctr-style.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="./style.css">
+  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+  <title>@geolonia/embed</title>
+</head>
+
+<body class="with-user-css">
+  <h1>@geolonia/embed | Demo with user css</h1>
+
+  Examples for Embed API for Geolonia with user css.
+
+  <div class="example">
+    <h2>Default Map</h2>
+    <div class="geolonia" data-lat="34.704395" data-lng="135.494771" data-zoom="14">グランフロント</div>
+  </div>
+
+  <div class="example">
+    <h2>Map with User CSS</h2>
+    <div id="mock_user_css">
+      <div class="geolonia" data-lat="34.704395" data-lng="135.494771" data-zoom="14">グランフロント</div>
+    </div>
+  </div>
+
+  <div class="example mobile-width">
+    <h2>Map with mobile width</h2>
+    <div class="geolonia" data-lat="34.704395" data-lng="135.494771" data-zoom="14">グランフロント</div>
+  </div>
+
+  <div class="example mobile-width">
+    <h2>Map with mobile width and  User CSS</h2>
+    <div id="mock_user_css">
+      <div class="geolonia" data-lat="34.704395" data-lng="135.494771" data-zoom="14">グランフロント</div>
+    </div>
+  </div>
+
+
+  <footer>
+    &copy; <a href="https://geolonia.com">geolonia.com</a>
+  </footer>
+
+  <a class="forkme" href="https://github.com/geolonia/embed"><img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
+
+  <script src="./embed?geolonia-api-key=YOUR-API-KEY"></script>
+</body>
+
+</html>
diff --git a/deck.html b/deck.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="./style.css">
+  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+  <title>Deck.GL + @geolonia/embed</title>
+  <style>
+    body {
+      margin: 0;
+      width: 100vw;
+      height: 100vh;
+      overflow: hidden;
+    }
+  </style>
+</head>
+
+<body>
+
+  <script type="text/javascript" src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
+  <script type="text/javascript" src="./embed?geolonia-api-key=YOUR-API-KEY"></script>
+
+  <script>
+    const { MapboxLayer, GeoJsonLayer, ArcLayer } = deck;
+
+    const map = new geolonia.Map({
+      container: document.body,
+      style: 'geolonia/midnight',
+      center: [138.219, 37.092],
+      zoom: 6,
+      pitch: 60
+    });
+
+    map.on('load', () => {
+      const air_ports = 'https://assets.codepen.io/4210065/airports.geojson'
+
+      // 空港の GeoJSON を取得して Deck.GL のレイヤーを設置
+      fetch(air_ports).then(res => {
+        return res.json()
+      }).then(data => {
+        map.addLayer(new MapboxLayer({
+          id: 'deckgl-airports',
+          type: GeoJsonLayer,
+          data: data,
+          filled: true,
+          pointRadiusMinPixels: 2,
+          pointRadiusScale: 1000,
+          getRadius: () => 5,
+          getFillColor: [255, 255, 100, 90],
+          pickable: true,
+          autoHighlight: true,
+        }))
+
+        for (const airport of data.features) {
+          if ('cf04_00030' !== airport.properties.C28_000) {
+            continue // 羽田以外は除外
+          }
+
+          map.addLayer(new MapboxLayer({
+            id: `deckgl-airport-${airport.properties.C28_000}`,
+            type: ArcLayer,
+            data: air_ports,
+            greatCircle: true,
+            wrapLongitude: true,
+            dataTransform: d => {
+              return d.features
+            },
+            getSourcePosition: () => airport.geometry.coordinates,
+            getTargetPosition: f => f.geometry.coordinates,
+            getSourceColor: [200, 0, 80],
+            getTargetColor: [150, 200, 255],
+            getWidth: 1,
+          }))
+        }
+      })
+    });
+
+    // コンテキストメニューを無効化
+    document.body.addEventListener('contextmenu', e => {
+      e.preventDefault();
+    });
+  </script>
+
+</body>
+</html>
diff --git a/embed b/embed
diff --git a/embed-chunks/b52b89229e47dc93c64b.js b/embed-chunks/b52b89229e47dc93c64b.js
diff --git a/embed-chunks/b52b89229e47dc93c64b.js.LICENSE.txt b/embed-chunks/b52b89229e47dc93c64b.js.LICENSE.txt
@@ -0,0 +1,6 @@
+/*!
+ * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
+ *
+ * Copyright (c) 2014-2017, Jon Schlinkert.
+ * Released under the MIT License.
+ */
diff --git a/embed-chunks/d0f087405f7ae2fcf1c1.js b/embed-chunks/d0f087405f7ae2fcf1c1.js
diff --git a/embed.js b/embed.js
diff --git a/embed.js.LICENSE.txt b/embed.js.LICENSE.txt
@@ -0,0 +1 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
diff --git a/fullscreen.html b/fullscreen.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="./style.css">
+  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+  <title>@geolonia/embed Examples with fullscreen or 100% width and height</title>
+  <style>
+    html, body, .geolonia {
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <div
+    class="geolonia"
+    data-lat="35.681236"
+    data-lng="139.767125"
+    data-zoom="16"
+    data-geolonia-fork-me-disabled="on"
+    data-fullscreen-control="on"
+  ></div>
+  <script src="./embed?geolonia-api-key=YOUR-API-KEY"></script>
+</body>
+
+</html>
diff --git a/hibiya-park.jpeg b/hibiya-park.jpeg
diff --git a/icon.png b/icon.png
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		/! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE /