Merge remote-tracking branch 'origin/main' into ftr/rotate-map

Author: dkastl

src/components/gtt-client.ts

@@ -1,8 +1,8 @@
 import 'ol/ol.css'
 import 'ol-ext/dist/ol-ext.min.css'
-import { Map, Feature, View, Geolocation } from 'ol'
+import { Map, Feature, View, Geolocation, Collection } from 'ol'
 import 'ol-ext/filter/Base'
-import { Geometry, Point } from 'ol/geom'
+import { Geometry, GeometryCollection, Point } from 'ol/geom'
 import { GeoJSON, WKT } from 'ol/format'
 import { Layer, Tile, Image } from 'ol/layer'
 import VectorLayer from 'ol/layer/Vector'
@@ -17,7 +17,7 @@ import {
   Select,
 } from 'ol/interaction'
 import { focus as events_condifition_focus } from 'ol/events/condition'
-import { defaults as control_defaults } from 'ol/control'
+import { defaults as control_defaults, FullScreen, Rotate } from 'ol/control'
 import { transform, fromLonLat, transformExtent } from 'ol/proj'
 import { createEmpty, extend, getCenter, containsCoordinate } from 'ol/extent'
 import { FeatureCollection } from 'geojson'
@@ -41,6 +41,9 @@ import { FeatureLike } from 'ol/Feature'
 import TileSource from 'ol/source/Tile'
 import ImageSource from 'ol/source/Image'
 import { Options as ImageWMSOptions } from 'ol/source/ImageWMS'
+import JSONFeature from 'ol/format/JSONFeature'
+import BaseEvent from 'ol/events/Event'
+import { CollectionEvent } from 'ol/Collection'
 
 interface GttClientOption {
   target: HTMLDivElement | null
@@ -304,10 +307,13 @@ export class GttClient {
     this.toolbar.setPosition('bottom-left' as position)
     this.map.addControl(this.toolbar)
     this.setView()
-    this.setGeolocation(this.map)
     this.setGeocoding(this.map)
+    this.setGeolocation(this.map)
     this.parseHistory()
 
+    this.map.addControl (new FullScreen())
+    this.map.addControl (new Rotate())
+
     // Control button
     const maximizeCtrl = new Button({
       html: '<i class="material-icons" >zoom_out_map</i>',
@@ -529,13 +535,14 @@ export class GttClient {
     // Control Select
     const select = new Select({
       layers: [this.vector],
+      style: null,
       multi: false
     })
     this.map.addInteraction(select)
 
     // On selected => show/hide popup
-    select.getFeatures().on(['add'], evt => {
-      const feature = evt.target
+    select.getFeatures().on(['add'], (evt: any) => {
+      const feature = evt.element
 
       const content: Array<string> = []
       content.push(`<b>${feature.get('subject')}</b><br/>`)

src/stylesheets/app.scss

@@ -3,19 +3,53 @@
  */
 .ol-map {
   width: 100%;
-  height: 300px;
+  height: 400px;
   border: 1px solid #E4E4E4;
 }
 #issue-form .ol-map {
-  width: 92%;
-  margin: 1em auto;
+  width: 100%;
+  margin-bottom: 1em;
+}
+
+$breakpoint-tablet: 899px;
+@media (max-width: $breakpoint-tablet) {
+  .ol-map {
+    height: 340px;
+  }
 }
 
 .ol-control button {
-  background-color: rgba(40, 40, 40, 0.8);
+  background-color: rgba(52, 73, 94, 0.8);
+  height: 32px;
+  width: 32px;
 }
 .ol-control button:hover {
-  background-color: rgba(40, 40, 40, 1);
+  background-color: rgba(52, 73, 94, 1);
+}
+
+.ol-zoom button.ol-zoom-in,
+.ol-zoom button.ol-zoom-out,
+.ol-full-screen button.ol-full-screen-true,
+.ol-full-screen button.ol-full-screen-false,
+.ol-rotate button.ol-rotate-reset,
+.ol-bar .ol-button button {
+  font-size: 1.6em;
+}
+
+div.ol-full-screen {
+  right: 3.0em;
+}
+
+div.ol-rotate {
+  right: 5.5em;
+}
+
+div.ol-full-screen {
+  right: 3.0em;
+}
+
+.ol-control.ol-bar.ol-top.ol-left, .ol-control.ol-bar.ol-top.ol-right {
+  top: 5.2em;
 }
 
 .tabular .ol-layerswitcher label {
@@ -43,6 +77,10 @@ i[id^='icon_settings_tracker_'] {
   text-align: center;
 }
 
+.ol-control.ol-layerswitcher-popup {
+  top: 0.5em;
+}
+
 .ol-control button .material-icons {
   font-size: inherit;
 }