vue-geojson-view-ts 1.3.19 → 1.3.21

package/src/components/MapHeatComponent.vue

@@ -1,664 +1,664 @@
-<template>
-  <div class="map-container" :style="`height:${configurationMap?.height}`">
-    <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 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 {
-  Attribution,
-  FullScreen,
-  defaults as defaultControls,
-} from "ol/control";
-import { defineComponent } from "vue";
-import { markerDefault } from "../helpers/imgBase64";
-
-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: {
-            image: markerDefault,
-            color: "#f47521",
-            iconUrl: "/image/gmap01.png",
-            iconSize: [25, 41],
-            iconAnchor: [12, 41],
-            scale: 1,
-            class: "",
-            type: "image",
-          },
-          dragMarker: true,
-        };
-      },
-    },
-  },
-  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) {
-          const textStyle = style.getText();
-          if (textStyle) {
-            textStyle.setText(feature.get("name"));
-          }
-          return style;
-        },
-      });
-
-      this.heatLayer = new HeatmapLayer({
-        source: new VectorSource({
-          features: [],
-        }),
-        visible: false,
-        radius: 10,
-        blur: 25,
-      });
-
-      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,
-                    color: this.configurationMap.iconMarker?.color,
-                    scale: this.configurationMap.iconMarker.scale,
-                    // // img: this.configurationMap.iconMarker.image,
-                    // width: this.configurationMap?.iconMarker.iconSize[0],
-                    // height: this.configurationMap?.iconMarker.iconSize[1],
-                  }),
-                  zIndex: zIndex,
-                });
-                return iconStyle;
-              },
-            })
-          : undefined;
-      } catch (e) {
-        console.log(e);
-      }
-
-      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,
-
-        view: new View({
-          center: [0, 0],
-          zoom: this.zoom,
-          // minZoom: 5,
-          // maxZoom: 10,
-        }),
-      });
-      // 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,
-        // },
-      });
-      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-light-color, #f28b0c);
-      // color: red;
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-button.jl2-button-map {
-  background-color: var(--primary-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-color, #f29512);
-}
-.ol-control button:focus,
-.ol-control button:hover {
-  // background-color: var(--pssrimary-color, #f28b0c);
-  background-color: var(--primary-light-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;
-  }
-}
-
-.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-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-light-color, #f28b0c);
-}
-.map-copyright-text {
-  font-size: 12px;
-  font-weight: 600px;
-  // font-family: Roboto;
-}
-</style>
+<template>
+  <div class="map-container" :style="`height:${configurationMap?.height}`">
+    <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 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 {
+  Attribution,
+  FullScreen,
+  defaults as defaultControls,
+} from "ol/control";
+import { defineComponent } from "vue";
+import { markerDefault } from "../helpers/imgBase64";
+
+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: {
+            image: markerDefault,
+            color: "#f47521",
+            iconUrl: "/image/gmap01.png",
+            iconSize: [25, 41],
+            iconAnchor: [12, 41],
+            scale: 1,
+            class: "",
+            type: "image",
+          },
+          dragMarker: true,
+        };
+      },
+    },
+  },
+  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) {
+          const textStyle = style.getText();
+          if (textStyle) {
+            textStyle.setText(feature.get("name"));
+          }
+          return style;
+        },
+      });
+
+      this.heatLayer = new HeatmapLayer({
+        source: new VectorSource({
+          features: [],
+        }),
+        visible: false,
+        radius: 10,
+        blur: 25,
+      });
+
+      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,
+                    color: this.configurationMap.iconMarker?.color,
+                    scale: this.configurationMap.iconMarker.scale,
+                    // // img: this.configurationMap.iconMarker.image,
+                    // width: this.configurationMap?.iconMarker.iconSize[0],
+                    // height: this.configurationMap?.iconMarker.iconSize[1],
+                  }),
+                  zIndex: zIndex,
+                });
+                return iconStyle;
+              },
+            })
+          : undefined;
+      } catch (e) {
+        console.log(e);
+      }
+
+      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,
+
+        view: new View({
+          center: [0, 0],
+          zoom: this.zoom,
+          // minZoom: 5,
+          // maxZoom: 10,
+        }),
+      });
+      // 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,
+        // },
+      });
+      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-light-color, #f28b0c);
+      // color: red;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+button.jl2-button-map {
+  background-color: var(--primary-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-color, #f29512);
+}
+.ol-control button:focus,
+.ol-control button:hover {
+  // background-color: var(--pssrimary-color, #f28b0c);
+  background-color: var(--primary-light-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;
+  }
+}
+
+.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-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-light-color, #f28b0c);
+}
+.map-copyright-text {
+  font-size: 12px;
+  font-weight: 600px;
+  // font-family: Roboto;
+}
+</style>