Add files via upload

office-shirado · Oct 5, 2024 · 48db294 · 48db294
1 parent a1ef74d
commit 48db294
Show file tree

Hide file tree

Showing 4 changed files with 298 additions and 0 deletions.
diff --git a/sample/custom/css/style.css b/sample/custom/css/style.css
@@ -0,0 +1,12 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+html,
+
+body,
+
+#map {
+  height: 100%;
+}
diff --git a/sample/custom/css/style_002.css b/sample/custom/css/style_002.css
@@ -0,0 +1,212 @@
+body {
+    margin: 0;
+    padding: 0;
+}
+
+a {
+	color: navy;
+}
+
+a:visited{
+	color: navy;
+}
+
+#map {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    z-index: 0;
+}
+
+/*Class（指）*/
+.yubi {
+  cursor : pointer;
+}
+
+/*Class（いいね！）*/
+.nice {
+  cursor : pointer;
+  color: blue;
+}
+
+.red {
+  color: red;
+}
+
+.blue {
+  color: blue;
+}
+
+
+
+/*トップ（左上）*/
+#info01 {
+	padding: 6px 8px;
+	font: 10px/12px Arial, Helvetica, sans-serif;
+	color: navy;
+	background: rgba(255,255,255,0.8);
+	box-shadow: 0 0 15px rgba(0,0,0,0.2);
+	border-radius: 5px;
+	width: fit-content;
+	position: relative;
+	top: 10px;
+	left: 10px;
+	z-index: 10;
+}
+
+#info02 {
+	padding: 6px 8px;
+	font: 10px/12px Arial, Helvetica, sans-serif;
+	color: navy;
+	background: rgba(255,255,255,0.8);
+	box-shadow: 0 0 15px rgba(0,0,0,0.2);
+	border-radius: 5px;
+	width: fit-content;
+	max-width: 200px;
+	position: relative;
+	top: 20px;
+	left: 10px;
+	z-index: 30;
+}
+
+/*ボトム（左下）*/
+#info03 {
+	padding: 6px 8px;
+	font: 12px/14px Arial, Helvetica, sans-serif;
+	color: black;
+	background: rgba(255,255,255,0.8);
+	box-shadow: 0 0 15px rgba(0,0,0,0.2);
+	border-radius: 5px;
+        width: fit-content;
+	position: absolute;
+	bottom: 0; 
+	z-index: 10;
+}
+
+
+
+.maplibregl-popup .maplibregl-popup-content{
+	padding: 8px 10px;
+	font: 12px/14px Arial, Helvetica, sans-serif;
+	color: black;
+	background: rgba(255,255,255,0.9);
+	box-shadow: 0 0 15px rgba(0,0,0,0.4);
+	border-radius: 5px;
+	width: fit-content;
+}
+
+.maplibregl-ctrl-geocoder {
+	font-size: 12px;
+	line-height: 12px;
+	font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
+	position: relative;
+	background-color: #fff;
+	width: 80%;
+	min-width: 100px;
+	z-index: 1;
+	border-radius: 5px;
+	transition: width 0.25s, min-width 0.25s;
+	box-shadow: 0 0 15px rgba(0,0,0,0.2);
+}
+
+.maplibregl-ctrl-geocoder .suggestions {
+    font-size: 10px;
+  }
+
+.select_box {
+  height         : 10px;
+  line-height    : 14px;
+  font-size      : 14px;
+}
+
+/*送信ボタン*/
+#share_info_Button {
+  appearance: none;
+  border: 0;
+  border-radius: 4px;
+  background: #4676D7;
+  color: #fff;
+  padding: 3px 3px;
+  font-size: 11px;
+  height:20px;
+  text-align: center;
+  cursor: pointer;
+}
+
+/*送信URL*/
+#db_share_info_URL {
+  margin-top: 2px; /* 下方向に2px移動 */
+  width: 180px;
+  font-size: 10px;
+}
+
+
+/*削除ボタン*/
+#delete_share_info_Button {
+  appearance: none;
+  border: 0;
+  border-radius: 4px;
+  background: #4676D7;
+  color: #fff;
+  padding: 3px 3px;
+  font-size: 11px;
+  height:20px;
+  text-align: center;
+  cursor: pointer;
+}
+
+
+/*モーダルボタン*/
+#myBtn {
+  appearance: none;
+  border: 0;
+  border-radius: 6px;
+  background: navy;
+  color: #fff;
+  padding: 3px 3px;
+  font-size: 11px;
+  height:20px;
+  text-align: center;
+  cursor: pointer;
+  z-index: 5; /*他の要素の上に表示 */
+}
+
+/*モーダル*/
+.modal {
+  display: none; /* 初期状態では非表示 */
+  position: fixed; /* 画面に固定 */
+  z-index: 50; /*他の要素の上に表示 */
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto; /* スクロールバーを表示 */
+  background-color: rgba(0,0,0,0.4); /* 背景を半透明にする */
+}
+
+
+/*モーダルコンテンツ*/
+.modal-content {
+  background-color: #fefefe;
+  margin: 5% auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+  max-width: 500px; /* 最大幅を500pxに制限 */
+}
+
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
diff --git a/sample/custom/index.html b/sample/custom/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<title>Sticky Note Map(Basic Sample)</title>
+	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
+
+	<!-- MapLibre GL JS -->
+	<link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' />
+	<script src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script>
+
+	<!-- Sticky Note Map -->
+	<script src="https://office-shirado.github.io/sticky_note_map/src/0.02/Sticky_Note_Map.js"></script>
+	<link rel="stylesheet" href="https://office-shirado.github.io/sticky_note_map/src/0.02/Sticky_Note_Map.css"  type="text/css" />
+
+	<link href="./css/style.css" rel="stylesheet" />
+</head>
+
+<body>
+	<script src="https://cdn.jsdelivr.net/npm/@watergis/[email protected]/dist/maplibre-gl-terradraw.umd.js"></script>
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@watergis/[email protected]/dist/maplibre-gl-terradraw.css"/>
+
+	<div id="map"></div>
+
+	<script src="./js/main.js"></script>
+
+</body>
+</html>
diff --git a/sample/custom/js/main.js b/sample/custom/js/main.js
@@ -0,0 +1,46 @@
+var map = new maplibregl.Map({
+    container: 'map',
+    style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
+    center: [139.68786, 35.68355], // 中心座標
+    zoom: 1, // ズームレベル
+});
+
+// Sticky Note Map追加
+map.on('load', function () {
+	Sticky_Note_Map_Language = "jp";		// 言語指定（デフォルト:英語、jp：日本語）
+	add_Sticky_Note_Map();
+
+	// 現在地取得
+	ZoomLv = map.getZoom();
+	//初期ズームレベルの時は、現在地ジャンプ
+	if (ZoomLv == 1){
+		// 1.0秒遅延してジャンプ
+		setTimeout(
+			function(){
+				navigator.geolocation.getCurrentPosition(Sticky_Note_Map_Flyto_Location);	// Sticky_Note_Map関数
+			},1000
+		);
+	}
+});
+
+// ダブルクリックズーム制御
+map.doubleClickZoom.disable();
+
+
+
+const draw = new MaplibreTerradrawControl({
+        modes: [
+            'point',
+            'linestring',
+            'polygon',
+            'rectangle',
+            'angled-rectangle',
+            'circle',
+            'freehand',
+            'select'
+        ],
+        open: true,
+    });
+    map.addControl(draw, 'top-right');
+
+