diff --git a/src/views/feature/Feature_edit.vue b/src/views/feature/Feature_edit.vue
index 0d4c5cb3beedfa3e8a5f05efaca9ffcbca00649d..4f2dd415aaa2cd704217fb84fa1f1bcbd948fd2d 100644
--- a/src/views/feature/Feature_edit.vue
+++ b/src/views/feature/Feature_edit.vue
@@ -65,7 +65,7 @@
<!-- Import GeoImage -->
<div v-frag v-if="feature_type && feature_type.geom_type === 'point'">
<p>
- <button
+ <button @click="showGeoRef=true;"
id="add-geo-image"
type="button"
class="ui compact button"
@@ -75,9 +75,25 @@
Vous pouvez utiliser une image géoréférencée pour localiser le
signalement.
</p>
-
+ <div v-if="showGeoRef">
+ <p>Attention, si vous avez déjà saisi une géométrie, celle issue de l'image importée l'écrasera.</p>
+ <div class="field">
+ <label>Image (png ou jpeg)</label>
+ <label class="ui icon button" for="image_file">
+ <i class="file icon"></i>
+ <span class="label">Sélectionner une image ...</span>
+ </label>
+ <input type="file" accept="image/jpeg, image/png" style="display:none;" ref="file" v-on:change="handleFileUpload()"
+ name="image_file" class="image_file" id="image_file" >
+ <p class="error-message" style="color:red;">{{ erreurUploadMessage }}</p>
+ </div>
+ <button @click="georeferencement()" id="get-geom-from-image-file" type='button' class="ui positive right labeled icon button">
+ Importer
+ <i class="checkmark icon"></i>
+ </button>
+ </div>
<p>
- <button
+ <button @click="create_point_geoposition()"
id="create-point-geoposition"
type="button"
class="ui compact button"
@@ -86,13 +102,13 @@
signalement à partir de votre géolocalisation
</button>
</p>
- <span id="erreur-geolocalisation" style="display: none">
+ <span id="erreur-geolocalisation" v-if="erreurGeolocalisationMessage">
<div class="ui negative message">
<div class="header">
Une erreur est survenue avec la fonctionnalité de
géolocalisation
</div>
- <p id="erreur-geolocalisation-message"></p>
+ <p id="erreur-geolocalisation-message">{{ erreurGeolocalisationMessage }}</p>
</div>
<br />
</span>
@@ -259,6 +275,11 @@ export default {
data() {
return {
+ map:null,
+ file:null,
+ showGeoRef:false,
+ erreurGeolocalisationMessage:null,
+ erreurUploadMessage:null,
attachmentDataKey: 0,
linkedDataKey: 0,
form: {
@@ -316,6 +337,54 @@ export default {
}
return field;
},
+ create_point_geoposition() {
+
+ function success(position) {
+ const latitude = position.coords.latitude
+ const longitude = position.coords.longitude
+
+ var layer = L.circleMarker([latitude, longitude])
+ this.add_layer_call_back(layer)
+ this.map.setView([latitude, longitude]);
+ }
+
+ function error(err) {
+ this.erreurGeolocalisationMessage=err.message;
+
+ }
+ this.erreurGeolocalisationMessage=null;
+ if (!navigator.geolocation) {
+ this.erreurGeolocalisationMessage="La géolocalisation n'est pas supportée par votre navigateur.";
+ } else {
+ navigator.geolocation.getCurrentPosition(success.bind(this), error.bind(this));
+ }
+
+ },
+ handleFileUpload() {
+ this.file = this.$refs.file.files[0];
+ console.log('>>>> 1st element in files array >>>> ', this.file);
+ },
+ georeferencement(){
+ console.log("georeferencement");
+ const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}exif-geom-reader/`;
+ let formData = new FormData();
+ formData.append('file', this.file);
+ console.log('>> formData >> ', formData);
+ let self=this;
+ axios.post(url,
+ formData, {
+ headers: {
+ 'Content-Type': 'multipart/form-data'
+ }
+ }
+ ).then(function () {
+ console.log('SUCCESS!!');
+ })
+ .catch(function () {
+ console.log('FAILURE!!');
+ self.erreurUploadMessage='FAILURE!!';
+ });
+ },
initiateExtraForms() {
let extraFormWithOptions;
diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index d5b6d432e6b58134d8a44576f2d79530fb672e19..da34b466b1e5928cbbfbb5a463ca241e072ba517 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -1,6 +1,6 @@
<template>
<div class="fourteen wide column">
- <script type="application/javascript" src="/resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.js"></script>
+ <script type="application/javascript" :src="baseUrl+'/resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.js'"></script>
<div class="feature-list-container ui grid">
<div class="four wide column">
<h1>Signalements</h1>
@@ -303,6 +303,7 @@ export default {
geojsonFeatures:[],
filterStatus:null,
filterType:null,
+ baseUrl:this.$store.state.configuration.BASE_URL,
map:null,
zoom:null,
lat:null,
@@ -509,23 +510,6 @@ export default {
}.bind(this), 1000)
-
- // Check if at least one basemap exist. If not, use the default application
- const basemaps = undefined; //JSON.parse(document.getElementById('basemaps').textContent);
- if (!basemaps || (basemaps && basemaps.length === 0)) {
- mapUtil.addLayers(
- null,
- this.$store.state.configuration.DEFAULT_BASE_MAP.SERVICE,
- this.$store.state.configuration.DEFAULT_BASE_MAP.OPTIONS
- );
- }
- setTimeout(
- function () {
- this.addGeocoders();
- }.bind(this),
- 1000
- );
-
this.form.type.choices = [
//* converting Set to an Array with spread "..."
...new Set(this.features.map((el) => el.feature_type.title)), //* use Set to eliminate duplicate values