vue-geojson-view-ts 1.3.2 → 1.3.3

package/src/components/MapHeatComponent.vue

@@ -1,217 +1,653 @@
 <template>
   <div class="map-container" :style="`height:${configurationMap?.height}`">
-    <div :id="idMap" style="height: 100%"></div>
+    <div ref="map-root" style="width: 100%; height: 100%; position: relative">
+      <div
+        v-show="loadMapa.country !== 'Bolivia'"
+        class="btn-zoom-container ol-control"
+      >
+        <button
+          title="Ir a la ciudad"
+          class="jl2-button-map"
+          @click="irACiudad"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path
+              d="M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4V224H109.3l9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4H224v114.8l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4V288h114.8l-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4H288V109.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <div class="type-map-container ol-control">
+        <!-- button para mapa con marcadores -->
+        <button
+          title="Mapa con Marcador"
+          class="jl2-button-map"
+          :class="{ 'jl2-button-map-select': type == '1' }"
+          @click="() => (type = '1')"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+            <path
+              d="M215.7 499.2C267 435 384 279.4 384 192 384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2 12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"
+            />
+          </svg>
+        </button>
+        <!-- button para mapa de calor -->
+        <button
+          title="Mapa de Calor"
+          class="jl2-button-map"
+          :class="{ 'jl2-button-map-select': type == '0' }"
+          @click="() => (type = '0')"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+            <path
+              d="m153.6 29.9 16-21.3c4-5.4 10.4-8.6 17.1-8.6C198.4 0 208 9.6 208 21.3v22.2c0 13.1 5.4 25.7 14.9 34.7l84.7 80.8c48.8 46.6 76.4 111.2 76.4 178.7C384 434 306 512 209.7 512H192C86 512 0 426 0 320v-3.8c0-48.8 19.4-95.6 53.9-130.1l3.5-3.5c4.2-4.2 10-6.6 16-6.6 12.5 0 22.6 10.1 22.6 22.6V288c0 35.3 28.7 64 64 64s64-28.7 64-64v-3.9c0-18-7.2-35.3-19.9-48l-38.6-38.6c-24-24-37.5-56.7-37.5-90.7 0-27.7 9-54.8 25.6-76.9z"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <!-- Botón de configuraciones -->
+      <div
+        class="btn-settings ol-control"
+        v-show="!showSetting && type === '0'"
+      >
+        <button
+          title="Ver Opciones"
+          class="jl2-button-map"
+          @click="toggleSettings"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path
+              d="M495.9 166.6c3.2 8.7.5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4l-55.6 17.8c-8.8 2.8-18.6.3-24.5-6.8-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4c-1.1-8.4-1.7-16.9-1.7-25.5s.6-17.1 1.7-25.4l-43.3-39.4c-6.9-6.2-9.6-15.9-6.4-24.6 4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2 5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8 8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"
+            />
+          </svg>
+        </button>
+      </div>
+      <!-- Opciones de configuraciones  -->
+      <div class="control-container" v-show="type === '0' && showSetting">
+        <a @click="toggleSettings" class="ol-popup-closer"></a>
+        <div class="map-flex">
+          <label>Tamaño del radio</label>
+          <input
+            id="radius"
+            type="range"
+            min="1"
+            max="50"
+            step="1"
+            v-model="radius"
+          />
+        </div>
+        <div class="map-flex">
+          <label>Difuminado</label>
+          <input
+            id="blur"
+            type="range"
+            min="1"
+            max="50"
+            step="1"
+            v-model="blur"
+          />
+        </div>
+      </div>
+      <!-- Tag casos Vinculados -->
+      <div
+        class="cant-casos ol-attribution ol-unselectable ol-control ol-uncollapsible"
+      >
+        <p class="text-cantidad">
+          <span class="ol-bold">Casos: </span>{{ cantidad }}
+        </p>
+      </div>
+    </div>
+    <div id="popup" class="ol-popup" v-show="type === '1'">
+      <a id="popup-closer" class="ol-popup-closer"></a>
+      <div id="popup-content"></div>
+    </div>
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
+import "ol/ol.css";
+import View from "ol/View";
+import Map from "ol/Map";
+import HeatmapLayer from "ol/layer/Heatmap";
+import OSM from "ol/source/OSM";
+import TileLayer from "ol/layer/Tile";
+import VectorSource from "ol/source/Vector";
+import GeoJSON from "ol/format/GeoJSON";
+import { fromLonLat } from "ol/proj";
+import Fill from "ol/style/Fill";
+import Stroke from "ol/style/Stroke";
+import Text from "ol/style/Text";
+import VectorLayer from "ol/layer/Vector";
+import Overlay from "ol/Overlay";
+import { Icon, Style } from "ol/style";
 import * as L from "leaflet";
-import "leaflet/dist/leaflet.css";
-import { onMounted, ref } from "vue";
-import { markerDefault } from "../helpers/imgBase64";
-import "leaflet.fullscreen/Control.FullScreen.css";
-import "leaflet.fullscreen";
-import "leaflet.heat";
-
-export type TIconMaker = {
-  iconUrl: string;
-  iconSize: [number, number];
-  iconAnchor: [number, number];
-  class?: string;
-  type: "image" | "svg";
-};
-
-export interface IConfigurationMap {
-  height: string;
-  maxZoom: number;
-  iconMarker: TIconMaker;
-  dragMarker: boolean;
-}
-
-export interface ICoords {
-  lat: number;
-  lng: number;
-  zoom: number;
-}
-
-export interface IHeat {
-  lat: number;
-  lng: number;
-  intensidad: number;
-}
-
-export interface IMapSearchAddressProps {
-  configurationMap?: IConfigurationMap;
-  coordinatesMap?: ICoords;
-  coordinatesMapHeat?: IHeat[];
-}
-
-const props = withDefaults(defineProps<IMapSearchAddressProps>(), {
-  configurationMap: () => {
-    return {
-      height: "250px",
-      maxZoom: 20,
-      iconMarker: {
-        iconUrl: markerDefault,
-        iconSize: [25, 41],
-        iconAnchor: [12, 41],
-        class: "",
-        type: "image",
+import {
+  Attribution,
+  FullScreen,
+  defaults as defaultControls,
+} from "ol/control";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "MapHeat",
+  props: {
+    coords: Object as any,
+    loadMapa: Object as any,
+    typeMap: String,
+    abrirCerrarLoader: Function,
+    onClickMarket: Function,
+    configurationMap: {
+      default: () => {
+        return {
+          strokeColor: "#f47521",
+          copyright: "&copy; 2021 Desarrollado por UTIC - Ministerio Público",
+          height: "250px",
+          maxZoom: 20,
+          iconMarker: {
+            iconUrl: "/image/gmap01.png",
+            iconSize: [25, 41],
+            iconAnchor: [12, 41],
+            class: "",
+            type: "image",
+          },
+          dragMarker: true,
+        };
       },
-      dragMarker: true,
-    };
-  },
-  coordinatesMap: () => {
-    return {
-      lat: -19.0429,
-      lng: -65.2554,
-      zoom: 12,
-    };
+    },
   },
-  coordinatesMapHeat: () => {
-    return [];
+  data: () => ({
+    // store OL objects on the component instance
+    radius: 10,
+    blur: 20,
+    zoom: 5,
+    type: "0",
+    olMap: null as any,
+    heatLayer: null as any,
+    pointLayer: null as any,
+    countryLayer: null as any,
+    overlay: null as any,
+    showSetting: false,
+    cantidad: 0,
+  }),
+  watch: {
+    radius(value) {
+      this.setRadius(value);
+    },
+    blur(value) {
+      this.setBlur(value);
+    },
+    coords(value) {
+      this.cantidad = value.features.length;
+      this.updateSource(value);
+      this.updatePointSource(value);
+    },
+    loadMapa(val) {
+      this.changeCountryLayer(val);
+    },
+    typeMap(val) {
+      this.changeTypeMap(val);
+    },
+    type(type) {
+      this.changeTypeMap(type);
+    },
   },
-});
+  methods: {
+    changeTypeMap(type: string) {
+      if (type === "0") {
+        this.heatLayer.setVisible(true);
+        this.pointLayer.setVisible(false);
+        this.olMap.removeEventListener("click", this.onClickListener);
+      } else {
+        this.heatLayer.setVisible(false);
+        this.pointLayer.setVisible(true);
+        this.initClick();
+      }
+    },
+    initMap() {
+      const attributions = `<span class='map-copyright-text' >${this.configurationMap.copyright}</span>`;
+      const style = new Style({
+        stroke: new Stroke({
+          color: this.configurationMap.strokeColor,
+          width: 3,
+        }),
+        text: new Text({
+          font: "12px Roboto",
+          fill: new Fill({
+            color: "#000",
+          }),
+          stroke: new Stroke({
+            color: "#fff",
+            width: 1,
+          }),
+        }),
+      });
+      this.countryLayer = new VectorLayer({
+        source: new VectorSource({
+          url: `${this.loadMapa.data}`,
+          format: new GeoJSON(),
+        }),
+        style: function (feature) {
+          style.getText().setText(feature.get("name"));
+          return style;
+        },
+      });
 
-const emit = defineEmits(["updated:coordsMarker"]);
+      this.heatLayer = new HeatmapLayer({
+        source: new VectorSource({
+          features: [],
+        }),
+        visible: false,
+        radius: 10,
+        blur: 25,
+      });
 
-const idMap = ref();
-const coords = ref(props.coordinatesMap);
-const mapRender = ref();
-const markerRender = ref();
+      try {
+        this.pointLayer = this.configurationMap
+          ? new VectorLayer({
+              source: new VectorSource({
+                features: [],
+              }),
+              visible: false,
+              style: (feature) => {
+                const zIndex: any = 1;
+                const iconStyle = new Style({
+                  image: new Icon({
+                    opacity: 1,
+                    src: this.configurationMap?.iconMarker?.iconUrl,
+                    scale: 0.45,
+                    // zIndex: zIndex,
+                  }),
+                  zIndex: zIndex,
+                });
+                return iconStyle;
+              },
+            })
+          : undefined;
+      } catch (e) {
+        console.log(e);
+      }
 
-onMounted(async () => {
-  await makeid(10);
-  await renderMap();
-});
+      this.olMap = new Map({
+        controls: defaultControls({ attribution: false })
+          .extend([new FullScreen({ tipLabel: "Pantalla completa" })])
+          .extend([
+            new Attribution({
+              collapsible: false,
+            }),
+          ]),
+        layers: [
+          new TileLayer({
+            source: new OSM({ attributions: attributions }),
+          }),
+          this.countryLayer,
+          this.heatLayer,
+          this.pointLayer,
+        ],
+        target: this.$refs["map-root"] as any,
 
-const makeid = async (length: number) => {
-  let result = "";
-  const characters = "abcdefghijklmnopqrstuvwxyz";
-  const charactersLength = characters.length;
-  let counter = 0;
-  while (counter < length) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength));
-    counter += 1;
-  }
-  idMap.value = result;
-};
-
-const renderMap = async () => {
-  await createMap();
-};
-
-const createMap = async () => {
-  const iconMarker = props.configurationMap?.iconMarker;
-  const map = L.map(idMap.value, { fullscreenControl: true } as any).setView(
-    [coords.value.lat, coords.value.lng],
-    coords.value.zoom
-  );
-  map.invalidateSize();
-  mapRender.value = map;
-  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
-    maxZoom: props.configurationMap?.maxZoom,
-    attribution:
-      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-  }).addTo(map);
-
-  const heatMap: any[] = props.coordinatesMapHeat.map((item: any) => [
-    item.lat,
-    item.lng,
-    item.intensidad,
-  ]);
-  L.heatLayer(heatMap, { radius: 25 }).addTo(map);
-
-  if (iconMarker.type === "image") {
-    const marker = L.marker([coords.value.lat, coords.value.lng], {
-      icon: L.icon({
-        iconUrl: iconMarker.iconUrl,
-        iconAnchor: iconMarker.iconAnchor,
-        iconSize: iconMarker.iconSize,
-        className: iconMarker.class,
-      }),
-      draggable: props.configurationMap.dragMarker,
-    }).addTo(map);
-    markerRender.value = marker;
-    marker.on("dragend", (event) => {
-      const updatedCoordinates = event.target.getLatLng();
-      const lat = updatedCoordinates.lat;
-      const lng = updatedCoordinates.lng;
-      setCoordinates({
-        lat,
-        lng,
+        view: new View({
+          center: [0, 0],
+          zoom: this.zoom,
+          // minZoom: 5,
+          // maxZoom: 10,
+        }),
       });
-    });
-  } else if (iconMarker.type === "svg") {
-    const marker = L.marker([coords.value.lat, coords.value.lng], {
-      icon: L.divIcon({
-        html: iconMarker.iconUrl,
-        iconAnchor: iconMarker.iconAnchor,
-        iconSize: iconMarker.iconSize,
-        className: iconMarker.class,
-      }),
-      draggable: props.configurationMap.dragMarker,
-    }).addTo(map);
-    markerRender.value = marker;
-    marker.on("dragend", (event) => {
-      const updatedCoordinates = event.target.getLatLng();
-      const lat = updatedCoordinates.lat;
-      const lng = updatedCoordinates.lng;
-      setCoordinates({
-        lat,
-        lng,
+      // coordenadas de la ciudad por defecto
+      const cord = fromLonLat([this.loadMapa.lng, this.loadMapa.lat]);
+      this.olMap.getView().adjustCenter(cord);
+      this.fitMap();
+    },
+    initClick() {
+      //init clicker
+      const container = document.getElementById("popup");
+      const closer: any = document.getElementById("popup-closer");
+      this.overlay = new Overlay({
+        element: container as any,
+        autoPan: true,
+        // autoPanAnimation: {
+        //   duration: 250,
+        // },
       });
-    });
-  }
-};
-
-const searchAddress = async (query: string) => {
-  // const address = await axios.get(
-  //   location.protocol + "//nominatim.openstreetmap.org/search?",
-  //   {
-  //     params: {
-  //       //query
-  //       q: query,
-  //       limit: 1,
-  //       format: "json",
-  //     },
-  //   }
-  // );
-  // if (address.data.length === 1) {
-  //   const lat = parseFloat(address.data[0].lat);
-  //   const lng = parseFloat(address.data[0].lon);
-  //   const coord = { lng, lat };
-  //   setCoordinates({ ...coord, moveMarker: true });
-  //   return address.data[0];
-  // }
-  // return address.data;
-};
-
-const setCoordinates = ({
-  lat,
-  lng,
-  moveMarker = false,
-}: {
-  lat: number;
-  lng: number;
-  moveMarker?: boolean;
-}) => {
-  emit("updated:coordsMarker", {
-    lat,
-    lng,
-  });
-  if (moveMarker) markerRender.value?.setLatLng({ lat, lng });
-  moveCenterTo({ lat, lng });
-};
-
-const moveCenterTo = ({ lat, lng }: { lat: number; lng: number }) => {
-  const newCenter = L.latLng(lat, lng);
-  mapRender.value.panTo(newCenter, { animate: true, duration: 0.5 });
-};
-
-defineExpose({
-  searchAddress,
+      this.olMap.addOverlay(this.overlay);
+
+      closer.onclick = () => this.closeOverlay();
+      this.olMap.addEventListener("click", this.onClickListener);
+    },
+    closeOverlay() {
+      const closer: any = document.getElementById("popup-closer");
+      this.overlay.setPosition(undefined);
+      closer.blur();
+      return false;
+    },
+    async onClickListener(event: any) {
+      const content: any = document.getElementById("popup-content");
+      const closer: any = document.getElementById("popup-closer");
+
+      if (this.olMap.hasFeatureAtPixel(event.pixel) === true) {
+        const feature = this.olMap.getFeaturesAtPixel(event.pixel)[0];
+        const type = feature.getGeometry().getType();
+        if (type === "Point") {
+          const properties = this.olMap
+            .getFeaturesAtPixel(event.pixel)[0]
+            .getProperties();
+          const coordinate = event.coordinate;
+          if (this.abrirCerrarLoader) this.abrirCerrarLoader(true);
+          try {
+            if (this.abrirCerrarLoader) this.abrirCerrarLoader(false);
+            let html = "";
+            if (this.onClickMarket) html = await this.onClickMarket(properties);
+            content.innerHTML = html;
+            //centra el mapa en el punto con el mismo zoom
+            const view = this.olMap.getView();
+            const extent = feature.getGeometry().getExtent();
+            const oldCenter = view.getCenter();
+            const oldZoom = view.getZoom();
+            view.fit(extent, { padding: [325, 75, 0, 75], maxZoom: oldZoom });
+            const newCenter = view.getCenter();
+            view.setCenter(oldCenter);
+            view.animate({ center: newCenter });
+          } catch (e) {
+            if (this.abrirCerrarLoader) this.abrirCerrarLoader(false);
+            // toastr.warning('Ocurrio un error, consulte con el administrador');
+          }
+          this.overlay.setPosition(coordinate);
+        }
+      } else {
+        this.overlay.setPosition(undefined);
+        closer.blur();
+      }
+    },
+    updateSource(coords: any) {
+      if (coords && coords.features.length === 0) {
+        const source = this.heatLayer.getSource();
+        source.clear();
+        return;
+      }
+      if (coords) {
+        const source = this.heatLayer.getSource();
+
+        const features = new GeoJSON({
+          featureProjection: "EPSG:3857",
+        }).readFeatures(coords);
+
+        source.clear();
+        source.addFeatures(features);
+      }
+    },
+    updatePointSource(coords: any) {
+      if (coords && coords.features.length === 0) {
+        const source = this.pointLayer.getSource();
+        source.clear();
+        return;
+      }
+      if (coords) {
+        const source = this.pointLayer.getSource();
+
+        const features = new GeoJSON({
+          featureProjection: "EPSG:3857",
+        }).readFeatures(coords);
+
+        source.clear();
+        source.addFeatures(features);
+      }
+    },
+    async changeCountryLayer(data: any) {
+      const source = this.countryLayer;
+      if (source) {
+        const src = new VectorSource({
+          url: `${data.data}`,
+          format: new GeoJSON(),
+        });
+        await this.countryLayer.setSource(src);
+      }
+    },
+    fitMap() {
+      // this zooms the view on the created object
+      this.countryLayer.addEventListener("change", this.countryFunction);
+    },
+    countryFunction(evt: any) {
+      const view = this.olMap.getView();
+
+      const feature = evt.target.getSource().getFeatures()[0];
+      if (feature) {
+        const extent = evt.target.getSource().getExtent();
+        const oldZoom = view.getZoom();
+        const oldCenter = view.getCenter();
+        view.fit(extent, { padding: [75, 75, 75, 75], maxZoom: 6 });
+        const newZoom = view.getZoom();
+        const newCenter = view.getCenter();
+        view.setCenter(oldCenter);
+        view.setZoom(oldZoom);
+        view.animate({ center: newCenter });
+        view.animate({ zoom: newZoom });
+      }
+    },
+    setRadius(radius: any) {
+      this.heatLayer.setRadius(parseInt(radius, 10));
+    },
+    setBlur(blur: any) {
+      this.heatLayer.setBlur(parseInt(blur, 10));
+    },
+    irACiudad() {
+      if (this.loadMapa)
+        if (this.loadMapa.country !== "Bolivia") {
+          const view = this.olMap.getView();
+          const oldZoom = view.getZoom();
+          const oldCenter = view.getCenter();
+          view.setCenter(fromLonLat([this.loadMapa.lng, this.loadMapa.lat]));
+          const newZoom = 13;
+          const newCenter = view.getCenter();
+          view.setCenter(oldCenter);
+          view.setZoom(oldZoom);
+          view.animate({ center: newCenter });
+          view.animate({ zoom: newZoom });
+        }
+    },
+    toggleSettings() {
+      this.showSetting = !this.showSetting;
+    },
+  },
+  mounted() {
+    this.countryLayer = this.loadMapa;
+    this.initMap();
+  },
+  beforeDestroy() {
+    this.countryLayer.removeEventListener("change", this.countryFunction);
+    this.olMap.removeEventListener("click", this.onClickListener);
+  },
 });
 </script>
+<style lang="scss" scoped>
+.text-cantidad {
+  color: #000 !important;
+  margin: 0;
+  font-size: 16px;
+  padding: 0 1rem;
+}
+.cant-casos {
+  position: absolute;
+  right: 0;
+  bottom: 24px;
+  z-index: 10;
+}
+.map-container {
+  flex: 1;
+}
+@media only screen and (max-width: 600px) {
+  .map-container {
+    flex: none;
+    height: 65%;
+  }
+}
+.btn-settings {
+  z-index: 10;
+  bottom: 0.5em;
+  left: 0.5em;
+}
+.btn-icon {
+  font-size: 12px;
+}
+.btn-zoom-container {
+  z-index: 10;
+  top: 4.5em;
+  left: 0.5em;
+}
+.type-map-container {
+  z-index: 10;
+  top: 7em;
+  left: 0.5em;
+}
+.control-container {
+  color: #fff;
+  position: absolute;
+  bottom: 0;
+  z-index: 1;
+  left: 0;
+  background: rgba(0, 0, 0, 0.4);
+  padding: 16px;
+  & .map-flex {
+    display: flex;
+    flex-direction: column;
+    & label {
+      font-family: Roboto;
+      font-weight: 600;
+      font-size: 12px;
+    }
+    & input[type="range"] {
+      accent-color: var(--primary-color, #f28b0c);
+      // color: red;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+button.jl2-button-map {
+  background-color: #f29512;
+  /* padding: 1rem; */
+  & svg {
+    width: 12px;
+    height: 12px;
+    fill: white;
+  }
+  &:hover {
+    background: #f28b0c;
+    border: none !important;
+    outline: none;
+  }
+}
+button.jl2-button-map-select {
+  // border: 1px solid #4e5358;
+  & svg {
+    fill: #4e5358;
+  }
+}
+
+.ol-control button {
+  color: white;
+  background-color: var(--primary-light-color, #f29512);
+}
+.ol-control button:focus,
+.ol-control button:hover {
+  background-color: var(--primary-color, #f28b0c);
+  cursor: pointer;
+  border: none !important;
+  outline: none;
+  color: white;
+}
+
+.align-img {
+  text-align: center;
+  // height: 10px;
+  // width: 10px;
+}
+.rotate-north {
+  top: 65px;
+  left: 0.5em;
+}
+.ol-touch .rotate-north {
+  top: 80px;
+}
+.ol-popup {
+  font-size: 12px;
+  position: absolute;
+  background-color: white;
+  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+  padding: 0px 10px 0px 10px;
+  border-radius: 10px;
+  border: 1px solid #cccccc;
+  bottom: 12px;
+  left: -50px;
+  min-width: 190px;
+  font-family: "Roboto";
+  & .ol-title {
+    letter-spacing: 1px;
+    font-size: 14px;
+    font-weight: 700;
+    margin-bottom: 5px;
+    text-align: center;
+    color: #4e5358 !important;
+  }
+  & .ol-bold {
+    font-weight: 600;
+  }
+  & .ol-text {
+    font-weight: 300;
+    color: #4e5358 !important;
+    margin: 0px;
+    margin-top: 6px;
+    margin-bottom: 6px;
+  }
+}
 
-<style lang="scss"></style>
+.ol-popup:after,
+.ol-popup:before {
+  top: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.ol-popup:after {
+  border-top-color: white;
+  border-width: 10px;
+  left: 48px;
+  margin-left: -10px;
+}
+.ol-popup:before {
+  border-top-color: #cccccc;
+  border-width: 11px;
+  left: 48px;
+  margin-left: -11px;
+}
+.ol-popup-closer {
+  text-decoration: none;
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  padding: 3px 4px;
+  border-radius: 1rem;
+  background-color: var(--primary-light-color, #f29512);
+}
+.ol-popup-closer:after {
+  display: flex;
+  align-content: center;
+  font-size: 12px;
+  content: "✖";
+  color: white;
+}
+.ol-popup-closer:hover::after {
+  content: "✖";
+  background-color: var(--primary-color, #f28b0c);
+}
+.map-copyright-text {
+  font-size: 12px;
+  font-weight: 600px;
+  // font-family: Roboto;
+}
+</style>