Feature_edit.vue

      this.updateStore();
    },

    initMap() {
      var mapDefaultViewCenter =
        this.$store.state.configuration.DEFAULT_MAP_VIEW.center;
      var mapDefaultViewZoom =
        this.$store.state.configuration.DEFAULT_MAP_VIEW.zoom;

      // Create the map, then init the layers and features
      this.map = mapUtil.createMap(this.$refs.map, {
        mapDefaultViewCenter,
        mapDefaultViewZoom,
      });
      const currentFeatureId = this.$route.params.slug_signal;
      setTimeout(() => {
        let project_id = this.$route.params.slug.split('-')[0];
        const mvtUrl = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}features.mvt/?tile={z}/{x}/{y}&project_id=${project_id}`;

        mapUtil.addVectorTileLayer(
          mvtUrl,
          this.$route.params.slug,
          this.$store.state.feature_type.feature_types
        );
      }, 1000);
      const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?feature_type__slug=${this.$route.params.slug_type_signal}&output=geojson`;
      axios
        .get(url)
        .then((response) => {
          const features = response.data.features;
          if (features) {
            const allFeaturesExceptCurrent = features.filter(
              (feat) => feat.id !== currentFeatureId
            );
            mapUtil.addFeatures(
              allFeaturesExceptCurrent,
              {},
              true,
              this.$store.state.feature_type.feature_types
            );
            if (this.currentRouteName === 'editer-signalement') {
              const currentFeature = features.filter(
                (feat) => feat.id === currentFeatureId
              )[0];
              this.updateMap(currentFeature);
            }
          }
        })
        .catch((error) => {
          throw error;
        });

      document.addEventListener('change-layers-order', (event) => {
        // Reverse is done because the first layer in order has to be added in the map in last.
        // Slice is done because reverse() changes the original array, so we make a copy first
        mapUtil.updateOrder(event.detail.layers.slice().reverse());
      });
    },

    add_layer_call_back(layer) {
      layer.addTo(this.drawnItems);
      this.drawControlFull.remove(this.map);
      this.drawControlEditOnly.addTo(this.map);
      //var wellknown;// TODO Remplacer par autre chose
      //this.updateGeomField(wellknown.stringify(layer.toGeoJSON()))
      this.updateGeomField(layer.toGeoJSON());
      if (this.feature_type.geomType === 'point') {
        this.showGeoPositionBtn = false;
        this.erreurGeolocalisationMessage = '';
      }
    },

    changeMobileBtnOrder() { //* move large toolbar for polygon creation, cutting map in the middle
      function changeDisplay() {
        let buttons = document.querySelector('.leaflet-draw-actions.leaflet-draw-actions-top.leaflet-draw-actions-bottom');
        if (buttons && buttons.style) {
          buttons.style.display = 'flex';
          buttons.style['flex-direction'] = 'column';
        }
      }
      if (window.screen.availWidth < 767) { //* change button order all the time to keep homogeinity on mobile
        let wrapper = document.querySelector('.leaflet-top.leaflet-right');
        if (wrapper) wrapper.appendChild(wrapper.children[0]);
        if (this.feature_type.geom_type === 'polygon') { //* if it's a polygon, change tools direction to vertical
          let polygonBtn = document.querySelector('.leaflet-draw-draw-polygon'); //* since elements are generated
          if (polygonBtn) polygonBtn.addEventListener('click', changeDisplay); //* it should be done at each click
        }
      }
    },

    getFeatureAttachments() {
      featureAPI
        .getFeatureAttachments(this.$route.params.slug_signal)
        .then((data) => this.addExistingAttachementFormset(data));
    },

    getLinkedFeatures() {
      featureAPI
        .getFeatureLinks(this.$route.params.slug_signal)
        .then((data) => this.addExistingLinkedFormset(data));
    },
  },
};
</script>

<style scoped>
#map {
  height: 70vh;
  width: 100%;
  border: 1px solid grey;
}
#get-geom-from-image-file {
  margin-bottom: 5px;
}
.georef-btn {
  max-width: 400px;
}
@media only screen and (max-width: 767px) {
  #map {
    height: 80vh;
  }
}
/* // ! missing style in semantic.min.css, je ne comprends pas comment... */
.ui.right.floated.button {
  float: right;
  margin-right: 0;
  margin-left: 0.25em;
}
/* // ! margin écrasé par class last-child first-child, pas normal ... */
.ui.segment {
  margin: 1rem 0 !important;
}

/* override to display buttons under the dimmer of modal */
.leaflet-top,
.leaflet-bottom {
  z-index: 800;
}
</style>