Merge pull request #20 from kure-kosen/feature/search

検索機能の実装
kure-kosen · Jun 29, 2018 · 7b7be81 · 7b7be81
2 parents 1af189e + 2c9e786
commit 7b7be81
Show file tree

Hide file tree

Showing 8 changed files with 350 additions and 283 deletions.
diff --git a/src/assets/css/map-design.css b/src/assets/css/map-design.css
@@ -1,3 +1,8 @@
+ul {
+  margin: 0;
+  padding: 0;
+}
+
 /* ボタン、メニューなどのデザイン aidmiya */
 /* なお、map.cssにも手を加えることがあります */
 
@@ -23,16 +28,16 @@
 /* .ol-full-screenと.ol-zoomはol.cssのを上書きされている。!importantを使わず、読み込み順で上書きしている */
 .ol-full-screen {
   right: 0.5em;
-  top: calc( 0.5em + 3em);
+  top: calc(0.5em + 3em);
 }
 
 .ol-zoom {
   left: 0.5em;
-  top: calc( 3em + 0.5em);
+  top: calc(3em + 0.5em);
 }
 
 .ol-zoomslider {
-  top: calc( 1.375em + 3em + 0.5em);
+  top: calc(1.375em + 3em + 0.5em);
 }
 
 /* メニューを閉じるボタン */
@@ -52,7 +57,7 @@
   height: 100%;
   top: 0;
   right: 0;
-  background-color: rgba(245, 245, 245, .8);
+  background-color: rgba(245, 245, 245, 0.8);
   /* 100vhを超えればスクロールできるのでそれがわかるようにする */
   overflow: auto;
 }
@@ -78,11 +83,11 @@
 
 .menu li {
   list-style-type: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, .1);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
 }
 
 .menu li:hover {
-  background-color: rgba(0, 0, 0, .1);
+  background-color: rgba(0, 0, 0, 0.1);
 }
 
 .menu .menu-nohover {
@@ -99,12 +104,13 @@
 
 .menu .menu-buildings {
   /* 高さはどう指定? */
-  height: calc( 100vh - 20em);
+  height: calc(100vh - 20em);
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
 
-.menu .menu-content, .menu .menu-content a {
+.menu .menu-content,
+.menu .menu-content a {
   color: #c81e00;
 }
 
@@ -117,7 +123,6 @@
   text-align: right;
 }
 
-
 /* ポップアップの表 */
 .ol-popup table {
   border: 0;
@@ -130,62 +135,91 @@
 }
 
 /* 検索ボックスのフォーム */
-form.search {
-  width: calc( 100vw - 4em);
+.search {
+  width: calc(100vw - 4em);
   max-width: 500px;
-  position: relative;
+  /* [x]のrightの基準 */
+  margin: 0.5em 0.5em 0 0.5em;
+  position: absolute;
   top: 0;
   left: 0;
-}
-
-form .search-box {
-  margin: 0.5em;
-  position: relative;
-  /* [x]のrightの基準 */
   display: flex;
   align-items: center;
   /* [x]を縦で中央に */
   height: 2.5em;
   /* とりあえず見やすくするために */
   border-bottom: 1px solid rgba(72, 72, 72, 0.7);
   background-color: #fafafa;
-  box-shadow: 0px 0px 4px 1px rgba(184, 184, 184, 0.8);
-  border-radius: 5px;
+  /*box-shadow: 0px 0px 4px 1px rgba(184, 184, 184, 0.8);*/
+  border-radius: 5px 5px 0 0;
 }
 
-form input[type="text"] {
-  width: calc( 100vw - 3em);
+input[type='search'] {
+  width: calc(100vw - 3em);
   border: 0;
   border-radius: 5px;
-  height: calc( 2.5em - 2px - 8px);
+  height: calc(2.5em - 10px);
   background-color: #fafafa;
-  margin: 0 3.5em 0 1em;
+  padding: 0 3.5em 0 1em;
   /*  height: calc( 2.5em - 2px ); Safariで入力欄が縦に長いのでもう少し低くする */
   /*  font-size: 1.5em; Safariで入力欄が縦に長くなるのでfont-sizeは使わない */
 }
 
-input[type="text"]:focus {
+input[type='search']:focus {
   outline: 0;
 }
 
-form input[type="reset"] {
+input[type='reset'] {
   position: absolute;
+  top: 0;
   right: 0;
   width: 2.5em;
   height: 2.5em;
   border: 0;
   border-radius: 5px;
   background-color: #eee;
   padding: 0;
+  z-index: 10;
   /* ボタンクリック時に文字が右下へ下がるのを防ぐため */
 }
 
-form input[type="reset"]:hover {
+input[type='reset']:hover {
   background-color: #ccc;
 }
 
 /* 検索ボックス・メニューが開いている時 */
-form.search.menuactive {
+.search.menuactive {
   /*  width: calc( 100% - 270px ); Safariで確認してみると、幅が短かった */
-  width: calc( 100vw - 48% - 1.5em);
+  width: calc(100vw - 48% - 1.5em);
+}
+
+.result {
+  visibility: hidden;
+  margin: 0 0.5em;
+  position: absolute;
+  top: 41px;
+  left: -8px;
+  align-items: center;
+  width: 100%;
+  border-bottom: 1px solid rgba(72, 72, 72, 0.7);
+  background-color: #fafafa;
+  box-shadow: 0px 0px 4px 1px rgba(184, 184, 184, 0.8);
+  border-radius: 0 0 5px 5px;
+}
+
+.result ul {
+  list-style: none;
+  display: block;
+}
+
+.result ul li {
+  padding-left: 1em;
+  display: inline-block;
+  width: calc(100% - 1em);
+  line-height: 1.6em;
+}
+
+.result li:hover,
+.select {
+  background-color: rgba(230, 230, 230, 0.8);
 }
diff --git a/src/assets/css/map.css b/src/assets/css/map.css
@@ -74,4 +74,4 @@ html, body, #map {
 
 .block {
   display: block;
-}
+}
diff --git a/src/assets/geojson/searchtest.geojson b/src/assets/geojson/searchtest.geojson
@@ -45,4 +45,4 @@
       }
     }
   ]
-}
+}
diff --git a/src/assets/layers/overlay.js b/src/assets/layers/overlay.js
@@ -1,48 +1,50 @@
 // パスの指定
-var path = 'https://kure-kosen.github.io/kure_kosen_map/';
+// var path = 'https://kure-kosen.github.io/kure_kosen_map/';
 // var path = 'C:/Users/kazu/Documents/GitHub/kure_kosen_map/';
+var path = '/Users/kazu/workspace/kure_kosen_map/src/';
 
 // 現在地の円
 var geocycle = new ol.layer.Vector({
-                source: new ol.source.Vector({
-                  features: [accuracyFeature, positionFeature]
-                })
-              });
+  source: new ol.source.Vector({
+    features: [accuracyFeature, positionFeature]
+  })
+});
 
 //呉市オープンデータのaed
 //作成日:20171218
 var aed = new ol.layer.Vector({
-            title: 'AED',
-            source: new ol.source.Vector({
-              format: new ol.format.GeoJSON(),
-              url: path + 'assets/geojson/20171224.geojson',
-              crossOrigin: 'anonymous'
-            }),
-            style: new ol.style.Style({
-              image: new ol.style.Icon({
-                src:path + 'assets/icon/aed.png', scale: 0.2
-              })
-            })
-          });
+  title: 'AED',
+  source: new ol.source.Vector({
+    format: new ol.format.GeoJSON(),
+    url: path + 'assets/geojson/20171224.geojson',
+    crossOrigin: 'anonymous'
+  }),
+  style: new ol.style.Style({
+    image: new ol.style.Icon({
+      src: path + 'assets/icon/aed.png',
+      scale: 0.2
+    })
+  })
+});
 
 //kmlのサンプル
 var kml = new ol.layer.Vector({
-            title: 'kml',
-            source: new ol.source.Vector({
-              format: new ol.format.KML(),
-              url: path + 'assets/kml/kokudo.kml',
-              crossOrigin: 'anonymous'
-            })
-          });
+  title: 'kml',
+  source: new ol.source.Vector({
+    format: new ol.format.KML(),
+    url: path + 'assets/kml/kokudo.kml',
+    crossOrigin: 'anonymous'
+  })
+});
 
 //xyzタイルのサンプル
 var tile = new ol.layer.Tile({
-            title: 'tile',
-            source: new ol.source.XYZ({
-              url: path + 'assets/tiles2/{z}/{x}/{y}.png',
-              crossOrigin: 'anonymous'
-            })
-          });
+  title: 'tile',
+  source: new ol.source.XYZ({
+    url: path + 'assets/tiles2/{z}/{x}/{y}.png',
+    crossOrigin: 'anonymous'
+  })
+});
 
 // var vectorSource = new ol.layer.Vector({
 //             title: 'test1',
@@ -53,8 +55,8 @@ var tile = new ol.layer.Tile({
 //             })
 //           });
 
-  var vectorSource = new ol.source.Vector(
-  { url: path + 'assets/geojson/searchtest.geojson',
-    projection: 'EPSG:3857',
-    format: new ol.format.GeoJSON()
-  });
+var vectorSource = new ol.source.Vector({
+  url: 'assets/geojson/searchtest.geojson',
+  projection: 'EPSG:3857',
+  format: new ol.format.GeoJSON()
+});
diff --git a/src/assets/libs/ol3-search/searchcontrol.css b/src/assets/libs/ol3-search/searchcontrol.css
@@ -1,4 +1,4 @@
-.ol-search {
+.ol-search {
   top: 0.5em;
   left: 3em;
 }
@@ -17,7 +17,7 @@
   float: left;
 }
 
-.ol-search input {
+/* .ol-search input {
   display: inline-block;
   border: 0;
   margin: 1px 1px 1px 2px;
@@ -26,13 +26,15 @@
   height: 1.375em;
   box-sizing: border-box;
   transition: all 0.1s;
-}
+} */
 
-.ol-touch .ol-search input, .ol-touch .ol-search ul {
+.ol-touch .ol-search input,
+.ol-touch .ol-search ul {
   font-size: 1.5em;
 }
 
-.ol-control.ol-search.ol-collapsed ul, .ol-control.ol-search.ol-collapsed input {
+.ol-control.ol-search.ol-collapsed ul,
+.ol-control.ol-search.ol-collapsed input {
   display: none;
 }
 
@@ -47,14 +49,11 @@
   overflow-x: hidden;
 }
 
-
-/*
-.ol-control.ol-search ul
-{	position: absolute;
-	background: #fff;
-	box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
-}
-*/
+/* .ol-control.ol-search ul {
+  position: absolute;
+  background: #fff;
+  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
+} */
 
 .ol-control.ol-search ul li {
   padding: 0.1em 0.5em;
@@ -66,7 +65,8 @@
   text-overflow: ellipsis;
 }
 
-.ol-search ul li.select, .ol-search ul li:hover {
-  background-color: rgba(0, 60, 136, .5);
+.ol-search ul li.select,
+.ol-search ul li:hover {
+  background-color: rgba(0, 60, 136, 0.5);
   color: #fff;
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -74,4 +74,4 @@ html, body, #map { @@
     .block {
       display: block;
-    }
+    }