Feature_edit.vue

              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(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 */
.ui.right.floated.button {
  float: right;
  margin-right: 0;
  margin-left: 0.25em;
}
/* // ! margin écrasé par class last-child first-child */
.ui.segment {
  margin: 1rem 0 !important;
}

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