diff --git a/src/assets/js/map-util.js b/src/assets/js/map-util.js
index 9e2ce68ce8348ce6196c83068f840af76d94a96e..59c688ccdd95c3b6169dec9faa16535e73e3e04e 100644
--- a/src/assets/js/map-util.js
+++ b/src/assets/js/map-util.js
@@ -18,7 +18,7 @@ import { FillSymbolizer, PointSymbolizer, LineSymbolizer } from "@/assets/js/vec
let map;
let dictLayersToLeaflet = {};
var layerMVT;
-let statusList=[
+let statusList = [
{
name: "Brouillon",
value: "draft",
@@ -66,20 +66,20 @@ L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
params: params,
//dataType: "json",
}
- ).then(response => {
- let data=response.data;
- var err = typeof data === 'object' ? null : data;
- if (data.features || err) {
- showResults(err, evt.latlng, data);
- }
- })
- .catch(error => {
- throw (error)
- //xhr.status;
- //xhr.responseText;
- //console.log(status)
- }
- )
+ ).then(response => {
+ let data = response.data;
+ var err = typeof data === 'object' ? null : data;
+ if (data.features || err) {
+ showResults(err, evt.latlng, data);
+ }
+ })
+ .catch(error => {
+ throw (error)
+ //xhr.status;
+ //xhr.responseText;
+ //console.log(status)
+ }
+ )
}
}
@@ -175,6 +175,7 @@ const mapUtil = {
zoomControl = true,
} = options;
+ console.trace("createMap", document.getElementById("map"))
map = L.map('map', {
maxZoom: 18,
zoomControl: false,
@@ -200,7 +201,7 @@ const mapUtil = {
return map;
},
- addGeocoders: function(configuration){
+ addGeocoders: function (configuration) {
let geocoder;
const geocoderLabel = configuration.SELECTED_GEOCODER.PROVIDER;
if (geocoderLabel) {
@@ -278,7 +279,7 @@ const mapUtil = {
}
});
},
-
+
updateOrder(layers) {
// First remove existing layers undefined
layers = layers.filter(function (x) {
@@ -297,90 +298,85 @@ const mapUtil = {
// Redraw the layers
this.addLayers(layers);
},
- // eslint-disable-next-line no-unused-vars
- addVectorTileLayer: function (url,project_slug,featureTypes,form_filters) {
+
+ retrieveFeatureColor: function (featureType, properties) {
+ if (featureType && featureType.colors_style && featureType.colors_style.custom_field_name) {
+ const currentValue = properties[featureType.colors_style.custom_field_name];
+ const colorStyle = featureType.colors_style.colors[currentValue];
+ return colorStyle ? colorStyle : featureType.color
+ }
+ },
+
+ addVectorTileLayer: function (url, project_slug, featureTypes, form_filters) {
layerMVT = L.vectorGrid.protobuf(url, {
vectorTileLayerStyles: {
- "default": function(properties, zoom) {
- // console.log(properties);
-
- let featureType=featureTypes.find((x)=>x.slug.split('-')[0]===''+properties.feature_type_id);
- let color=featureType.color;
- if(featureType.colors_style && featureType.colors_style.custom_field_name){
- let currentValue=properties[featureType.colors_style.custom_field_name];
- let colorValue=featureType.colors_style.colors[currentValue];
- if(colorValue) {
- color=colorValue;
- }
+ "default": (properties) => {
+ const featureType = featureTypes.find((x) => x.slug.split('-')[0] === '' + properties.feature_type_id);
+ const color = this.retrieveFeatureColor(featureType, properties)
- }
- console.log(featureType);
- let hiddenStyle=({
- radius: 0,
- fillOpacity: 0.5,
- weight: 0,
- fill: false,
- color: featureType.color,
- })
- // Filtre sur le feature type
- if (form_filters && form_filters.type.selected) {
- if(featureType.title !== form_filters.type.selected){
- return hiddenStyle;
- }
+ const hiddenStyle = ({
+ radius: 0,
+ fillOpacity: 0.5,
+ weight: 0,
+ fill: false,
+ color: featureType.color,
+ })
+ // Filtre sur le feature type
+ if (form_filters && form_filters.type.selected) {
+ if (featureType.title !== form_filters.type.selected) {
+ return hiddenStyle;
}
+ }
// Filtre sur le statut
if (form_filters && form_filters.status.selected.value) {
- if(properties.status !== form_filters.status.selected.value){
+ if (properties.status !== form_filters.status.selected.value) {
return hiddenStyle;
}
}
// Filtre sur le titre
if (form_filters && form_filters.title) {
- if(!properties.title.toLowerCase().includes(form_filters.title.toLowerCase())){
+ if (!properties.title.toLowerCase().includes(form_filters.title.toLowerCase())) {
return hiddenStyle;
}
}
- return ({
- radius: 4,
- fillOpacity: 0.5,
- weight: 3,
- fill: true,
- color: color,
- });
-
+ return ({
+ radius: 4,
+ fillOpacity: 0.5,
+ weight: 3,
+ fill: true,
+ color: color,
+ });
},
- },
+ },
// subdomains: "0123",
// key: 'abcdefghi01234567890',
- interactive:true,
+ interactive: true,
maxNativeZoom: 14,
- getFeatureId: function(f) {
- return f.properties.id;
- }
+ getFeatureId: function (f) {
+ return f.properties.id;
+ }
});
- let self=this;
- layerMVT.on('click', function(e) { // The .on method attaches an event handler
- console.log(e);
- const popupContent = self._createContentPopup(e.layer,featureTypes,project_slug);
+ layerMVT.on('click', (e) => { // The .on method attaches an event handler
+ console.log("e", e);
+ const popupContent = this._createContentPopup(e.layer, featureTypes, project_slug);
L.popup()
- .setContent(popupContent)
- .setLatLng(e.latlng)
- .openOn(map)
- });
+ .setContent(popupContent)
+ .setLatLng(e.latlng)
+ .openOn(map)
+ });
layerMVT.addTo(map);
- window.layerMVT=layerMVT;
- },
+ window.layerMVT = layerMVT;
+ },
- addFeatures: function (features, filter,addToMap=true,featureTypes) {
+ addFeatures: function (features, filter, addToMap = true, featureTypes) {
let featureGroup = new L.FeatureGroup();
features.forEach((feature) => {
-
- let featureType=featureTypes.find((x)=>x.slug.split('-')[0]===''+feature.properties.feature_type_id);
- if(feature.properties.feature_type != undefined){
- featureType=featureTypes.find((x)=>x.slug===''+feature.properties.feature_type);
+
+ let featureType = featureTypes.find((x) => x.slug.split('-')[0] === '' + feature.properties.feature_type_id);
+ if (feature.properties.feature_type !== undefined) {
+ featureType = featureTypes.find((x) => x.slug === '' + feature.properties.feature_type);
}
let filters = [];
-
if (filter) {
const typeCheck = filter.featureType && feature.properties.feature_type.slug === filter.featureType;
const statusCheck = filter.featureStatus && feature.properties.status.value === filter.featureStatus;
@@ -389,14 +385,10 @@ const mapUtil = {
}
if (!filter || !Object.values(filter).some(val => val) || Object.values(filter).some(val => val) && filters.length && filters.every(val => val !== false)) {
-
const geomJSON = flip(feature.geometry);
-
const popupContent = this._createContentPopup(feature);
- let color=feature.properties.color;
- if(color==undefined){
- color=featureType.color;
- }
+ const color = this.retrieveFeatureColor(featureType, feature.properties) || feature.properties.color;
+
if (geomJSON.type === 'Point') {
L.circleMarker(geomJSON.coordinates, {
color: color,
@@ -424,39 +416,39 @@ const mapUtil = {
}
}
});
- if(addToMap){
+ if (addToMap) {
map.addLayer(featureGroup);
}
-
+
return featureGroup;
},
addMapEventListener: function (eventName, callback) {
map.on(eventName, callback);
},
- _createContentPopup: function (feature,featureTypes,project_slug) {
- const formatDate = (current_datetime)=>{
- let formatted_date = current_datetime.getFullYear() + "-" + ("0" + (current_datetime.getMonth() + 1)).slice(-2) + "-" + ("0" + current_datetime.getDate()).slice(-2) + " " +
+ _createContentPopup: function (feature, featureTypes, project_slug) {
+ const formatDate = (current_datetime) => {
+ let formatted_date = current_datetime.getFullYear() + "-" + ("0" + (current_datetime.getMonth() + 1)).slice(-2) + "-" + ("0" + current_datetime.getDate()).slice(-2) + " " +
("0" + current_datetime.getHours()).slice(-2) + ":" + ("0" + current_datetime.getMinutes()).slice(-2);
- return formatted_date;
+ return formatted_date;
}
let feature_type;
- let status=feature.properties.status;
- let date_maj=feature.properties.updated_on;
- let feature_type_url=feature.properties.feature_type_url;
- let feature_url=feature.properties.feature_url;
- if(featureTypes){ // => VectorTile
- feature_type=featureTypes.find((x)=>x.slug.split('-')[0]===''+feature.properties.feature_type_id);
- status=statusList.find((x)=>x.value==feature.properties.status).name;
- date_maj=formatDate(new Date(feature.properties.updated_on));
- feature_type_url='/geocontrib/projet/'+project_slug+'/type_signalement/'+feature_type.slug+'/';
- feature_url=feature_type_url+'signalement/'+feature.properties.feature_id+'/';
+ let status = feature.properties.status;
+ let date_maj = feature.properties.updated_on;
+ let feature_type_url = feature.properties.feature_type_url;
+ let feature_url = feature.properties.feature_url;
+ if (featureTypes) { // => VectorTile
+ feature_type = featureTypes.find((x) => x.slug.split('-')[0] === '' + feature.properties.feature_type_id);
+ status = statusList.find((x) => x.value === feature.properties.status).name;
+ date_maj = formatDate(new Date(feature.properties.updated_on));
+ feature_type_url = '/geocontrib/projet/' + project_slug + '/type-signalement/' + feature_type.slug + '/';
+ feature_url = feature_type_url + 'signalement/' + feature.properties.feature_id + '/';
//status=feature.properties.status;
- }else{
- feature_type=feature.properties.feature_type;
- status=feature.properties.status.label;
+ } else {
+ feature_type = feature.properties.feature_type;
+ status = feature.properties.status.label;
}
-
+
let author = "";
if (feature.properties.creator) {
author = feature.properties.creator.full_name
diff --git a/src/views/feature/Feature_detail.vue b/src/views/feature/Feature_detail.vue
index f17ed17535733e41a07dd7627703bed7e7ba7ce5..de53a6c97ca8f5c7781b581bf7e247adad54b166 100644
--- a/src/views/feature/Feature_detail.vue
+++ b/src/views/feature/Feature_detail.vue
@@ -680,12 +680,12 @@ export default {
this.$store
.dispatch("GET_PROJECT_INFO", this.$route.params.slug)
.then(() => {
- console.log("map", this.$refs.map);
+ console.log("map", this.$refs.map, document.getElementById("map"));
this.$store.commit("DISCARD_LOADER");
this.initMap();
});
} else {
- console.log("map", this.$refs.map);
+ console.log("map", this.$refs.map, document.getElementById("map"));
this.$store.commit("DISCARD_LOADER");
this.initMap();
}
diff --git a/src/views/feature/Feature_edit.vue b/src/views/feature/Feature_edit.vue
index ef384ad43fb80e2802015cf24da2084c88b3975d..ba454ecc52994c0c7a8bb16dfa3504d86a2ced5a 100644
--- a/src/views/feature/Feature_edit.vue
+++ b/src/views/feature/Feature_edit.vue
@@ -187,7 +187,7 @@
@blur="updateStore"
/>
<div class="ui tab active map-container" data-tab="map">
- <div id="map"></div>
+ <div id="map" ref="map"></div>
<!-- // todo: ajouter v-if -->
<!-- {% if serialized_base_maps|length > 0 %} {% include
"geocontrib/map-layers/sidebar-layers.html" with
@@ -1025,6 +1025,7 @@ export default {
.then((data) => {
console.log(data);
this.initForm();
+ console.log("map", this.$refs.map, document.getElementById("map"));
this.initMap();
this.onFeatureTypeLoaded();
this.initExtraForms(this.feature);
diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index ebf02bfd28af418be37580805bc418a2ae13fdf4..5d34a60f8e201f4842c604cb8911178f7c913e8c 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -459,7 +459,7 @@ export default {
},
mounted() {
- console.log("map", this.$refs.map);
+ console.log("map", this.$refs.map, document.getElementById("map"));
this.initMap();
},
diff --git a/src/views/feature_type/Feature_type_edit.vue b/src/views/feature_type/Feature_type_edit.vue
index d4890fe479c76744e7ae01d8c223e65693f11176..bb69a28bbc5351239cb9382aa181bfb36fe91ff4 100644
--- a/src/views/feature_type/Feature_type_edit.vue
+++ b/src/views/feature_type/Feature_type_edit.vue
@@ -245,6 +245,10 @@ export default {
"archived_on",
"deletion_on",
"feature_type",
+ "display_creator",
+ "display_last_editor",
+ "project",
+ "creator",
],
};
},