diff --git a/src/assets/styles/openlayers-custom.css b/src/assets/styles/openlayers-custom.css
index ef166900416817fd8d378f718ce137fae9436022..ffe44fb78c62f6d62f937928f7027a6faf998d98 100644
--- a/src/assets/styles/openlayers-custom.css
+++ b/src/assets/styles/openlayers-custom.css
@@ -18,7 +18,7 @@
padding: 0;
}
-.ol-control button{
+.ol-control button {
background-color: #fff;
color: #000;
height: 30px;
@@ -34,6 +34,34 @@
background-color: #ebebeb;
}
+.editionToolbar {
+ border: 2px solid rgba(0,0,0,.2);
+ background-clip: padding-box;
+ padding: 0;
+ right: 5px;
+}
+
+.leaflet-bar {
+ box-shadow: none !important;
+}
+
+.leaflet-bar a {
+ background-color: #fff;
+ color: #000;
+ height: 30px !important;
+ width: 30px !important;
+ font: 700 16px Lucida Console,Monaco,monospace;
+ margin: 0;
+}
+.leaflet-bar a:hover {
+ cursor: pointer;
+ background-color: #ebebeb;
+}
+
+.leaflet-bar a > i {
+ margin: 0;
+}
+
/* For geocoder search bar */
.multiselect {
diff --git a/src/components/Map/EditingToolbar.vue b/src/components/Map/EditingToolbar.vue
index 90a930777cd1d164999e95f4d7db29e9122fe3af..1142afaafb8549d220c6a86c4032c76b631c1cfc 100644
--- a/src/components/Map/EditingToolbar.vue
+++ b/src/components/Map/EditingToolbar.vue
@@ -1,7 +1,7 @@
<template>
<div class="editionToolbar">
<div v-if="showDrawTool">
- <div class="leaflet-bar ">
+ <div class="leaflet-bar">
<a
class="leaflet-draw-draw-polygon"
title="Dessiner un polygone"
@@ -68,27 +68,24 @@ export default {
</script>
<style scoped>
-.list-image-type{
-
- height: 20px;
- vertical-align: middle;
-}
.editionToolbar{
position: absolute;
top: 80px;
right: 5px;
}
.leaflet-bar {
- box-shadow: 0 1px 5px rgba(0,0,0,0.65);
- border-radius: 4px;
+ border: 2px solid rgba(0,0,0,.2);
+ background-clip: padding-box;
+ padding: 0;
+ border-radius: 2px;
}
.leaflet-bar a:first-child {
- border-top-left-radius: 4px;
- border-top-right-radius: 4px;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px;
}
.leaflet-bar a:last-child {
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
+ border-bottom-left-radius: 2px;
+ border-bottom-right-radius: 2px;
border-bottom: none;
}
.leaflet-bar a, .leaflet-control-layers-toggle {
@@ -96,15 +93,29 @@ export default {
background-repeat: no-repeat;
display: block;
}
-.leaflet-bar a, .leaflet-bar a:hover {
+.leaflet-bar a {
background-color: #fff;
- border-bottom: 1px solid #ccc;
- width: 26px;
- height: 26px;
- line-height: 26px;
+ width: 30px;
+ height: 30px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}
+.leaflet-bar a > i {
+ margin: 0;
+ vertical-align: middle;
+}
+.list-image-type {
+ height: 20px;
+ vertical-align: middle;
+ margin: 5px 0 5px 0;
+}
+.leaflet-bar a:hover {
+ cursor: pointer;
+ background-color: #ebebeb;
+}
+.leaflet-bar a:focus {
+ background-color: #ebebeb;
+}
</style>
diff --git a/src/components/Map/Geocoder.vue b/src/components/Map/Geocoder.vue
index aa7f4d47c6192ae670b9b86a8860401fd620df05..73db91901cae58f322308a63c38b2de971329b45 100644
--- a/src/components/Map/Geocoder.vue
+++ b/src/components/Map/Geocoder.vue
@@ -1,7 +1,18 @@
<template>
- <div class="geocoder">
+ <div
+ :class="{ expanded: isExpanded }"
+ class="geocoder-container"
+ >
+ <button
+ class="button-geocoder"
+ @click="isExpanded = !isExpanded"
+ >
+ <i class="search icon" />
+ </button>
<Multiselect
+ v-if="isExpanded"
v-model="selection"
+ class="expanded-geocoder"
:options="addresses"
:options-limit="5"
:allow-empty="true"
@@ -78,7 +89,8 @@ export default {
selectedAddress: null,
addresses: [],
resultats: [],
- placeholder: 'Rechercher une adresse ...'
+ placeholder: 'Rechercher une adresse ...',
+ isExpanded: false
};
},
mounted() {
@@ -131,24 +143,60 @@ export default {
</script>
<style scoped lang="less">
-.geocoder{
- max-width: 400px;
- right: 500px;
+.geocoder-container {
position: absolute;
- top: 0.5em;
+ right: 0.5em;
+ top: calc(1em + 60px);
pointer-events: auto;
z-index: 50000;
border: 2px solid rgba(0,0,0,.2);
background-clip: padding-box;
padding: 0;
border-radius: 2px;
+ display: flex;
+
+ .button-geocoder {
+ border: none;
+ padding: 0;
+ margin: 0;
+ text-align: center;
+ background-color: #fff;
+ color: rgb(39, 39, 39);
+ width: 28px;
+ height: 28px;
+ font: 700 18px Lucida Console,Monaco,monospace;
+ margin: 0;
+ border-radius: 2px;
+ line-height: 1.15;
+
+ i {
+ margin: 0;
+ font-size: 0.9em;
+ }
+ }
+ .button-geocoder:hover {
+ cursor: pointer;
+ background-color: #ebebeb;
+ }
+
+ .expanded-geocoder {
+ max-width: 400px;
+ }
+}
+
+.expanded {
+ .button-geocoder {
+ height: 40px;
+ color: rgb(99, 99, 99);
+ }
}
+
#marker {
- width: 20px;
- height: 20px;
- border: 1px solid rgb(136, 66, 0);
- border-radius: 10px;
- background-color: rgb(201, 114, 15);
- opacity: 0.7;
+ width: 20px;
+ height: 20px;
+ border: 1px solid rgb(136, 66, 0);
+ border-radius: 10px;
+ background-color: rgb(201, 114, 15);
+ opacity: 0.7;
}
</style>
diff --git a/src/components/Project/Detail/ProjectFeatureTypes.vue b/src/components/Project/Detail/ProjectFeatureTypes.vue
index f6401e629b3f49990a64c70280fa7d132f66eaa9..05861e343a7bc36bf41164f242e68b48f88cdc81 100644
--- a/src/components/Project/Detail/ProjectFeatureTypes.vue
+++ b/src/components/Project/Detail/ProjectFeatureTypes.vue
@@ -356,7 +356,7 @@
<!-- MODALE FILESIZE -->
<div
:class="isFileSizeModalOpen ? 'active' : ''"
- class="ui dimmer"
+ class="ui dimmer inverted"
>
<div
:class="isFileSizeModalOpen ? 'active' : ''"
diff --git a/src/services/map-service.js b/src/services/map-service.js
index 1fccea57b5bcfbf650e05dc4502f1f8307527f94..07853a4182ff9896a07b385121462f35ce1ad2b1 100644
--- a/src/services/map-service.js
+++ b/src/services/map-service.js
@@ -138,7 +138,6 @@ const mapService = {
this.overlay.setPosition(event.coordinate);
}
//const queryableLayerSelected = document.getElementById(`queryable-layers-selector-${this.wmsParams.basemapId}`).getElementsByClassName('selected')[0].textContent;
- //console.log(queryableLayerSelected);
if (this.layers) {
let queryLayer = this.layers.find(x => x.query);
// pour compatibilité avec le proxy django
@@ -363,7 +362,6 @@ const mapService = {
},
getStyle: function (feature, featureTypes, form_filters) {
- //console.log(form_filters);
let properties = feature.getProperties();
let featureType;
// GeoJSON
@@ -373,7 +371,6 @@ const mapService = {
} else { //MVT
featureType = featureTypes.find((x) => x.slug.split('-')[0] === '' + properties.feature_type_id);
}
- //console.log(featureType);
const color = this.retrieveFeatureColor(featureType, properties);
const colorValue =
color.value && color.value.length ?
diff --git a/src/views/Feature/FeatureEdit.vue b/src/views/Feature/FeatureEdit.vue
index 892a50f4e68b070a42adf8454a2f83ea55474a18..157067c0f87a54a3ffec322c4827830c1cdf4a1b 100644
--- a/src/views/Feature/FeatureEdit.vue
+++ b/src/views/Feature/FeatureEdit.vue
@@ -220,6 +220,12 @@
class="ui tab active map-container"
data-tab="map"
>
+ <div
+ :class="{ active: mapLoading }"
+ class="ui inverted dimmer"
+ >
+ <div class="ui loader" />
+ </div>
<div
id="map"
ref="map"
@@ -361,6 +367,7 @@ export default {
data() {
return {
map: null,
+ mapLoading: false,
baseUrl: this.$store.state.configuration.BASE_URL,
file: null,
showGeoRef: false,
@@ -839,6 +846,7 @@ export default {
},
initMap() {
+ this.mapLoading = true;
var mapDefaultViewCenter =
this.$store.state.configuration.DEFAULT_MAP_VIEW.center;
var mapDefaultViewZoom =
@@ -851,17 +859,6 @@ export default {
interactions : { doubleClickZoom :false, mouseWheelZoom:true, dragPan:true }
});
const currentFeatureId = this.$route.params.slug_signal;
- setTimeout(() => {
- const project_id = this.$route.params.slug.split('-')[0];
- const mvtUrl = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}features.mvt/`;
-
- mapService.addVectorTileLayer(
- mvtUrl,
- project_id,
- this.$route.params.slug,
- this.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)
@@ -884,8 +881,10 @@ export default {
this.updateMap(currentFeature);
}
}
+ this.mapLoading = false;
})
.catch((error) => {
+ this.mapLoading = false;
throw error;
});
diff --git a/src/views/FeatureType/FeatureTypeDetail.vue b/src/views/FeatureType/FeatureTypeDetail.vue
index 05c20fa968c90a74f906a59f368e951b30b4cbdb..6ff4e62769af70ea10197250a31e59d0db177112 100644
--- a/src/views/FeatureType/FeatureTypeDetail.vue
+++ b/src/views/FeatureType/FeatureTypeDetail.vue
@@ -103,7 +103,10 @@
@change="onGeojsonFileChange"
>
</div>
- <div class="field">
+ <div
+ v-if="structure.geom_type === 'point'"
+ class="field"
+ >
<label
class="ui icon button ellipsis"
for="csv_file"
diff --git a/src/views/FeatureType/FeatureTypeEdit.vue b/src/views/FeatureType/FeatureTypeEdit.vue
index cf5af0f37dd157771c0c7cd7750bd1e34a2b5459..67d6def4ac8f5dab0ad86109b2c411d25e4f0afa 100644
--- a/src/views/FeatureType/FeatureTypeEdit.vue
+++ b/src/views/FeatureType/FeatureTypeEdit.vue
@@ -151,7 +151,7 @@
class="white save icon"
aria-hidden="true"
/>
- Créer et importer le(s) signalement(s) du geojson
+ Créer et importer le(s) signalement(s) du {{ geojson ? 'geojson' : 'csv' }}
</button>
</div>
</form>
diff --git a/src/views/Project/ProjectDetail.vue b/src/views/Project/ProjectDetail.vue
index 73d8129172c8454b5e1ac6285dc70d6fe320379b..fff617d2a834f965c1dee19c798a247fe9f6cdc8 100644
--- a/src/views/Project/ProjectDetail.vue
+++ b/src/views/Project/ProjectDetail.vue
@@ -61,7 +61,7 @@
/>
</div>
- <div class="eight wide column">
+ <div class="eight wide column map-container">
<div
:class="{ active: mapLoading }"
class="ui inverted dimmer"
@@ -70,11 +70,24 @@
Chargement de la carte...
</div>
</div>
+
<div
id="map"
ref="map"
/>
+
<div
+ class="ui button fluid teal"
+ @click="$router.push({
+ name: 'liste-signalements',
+ params: { slug: slug },
+ })"
+ >
+ <i class="ui icon arrow right" />
+ Voir tous les signalements
+ </div>
+
+ <div
id="popup"
class="ol-popup"
>
@@ -466,10 +479,19 @@ export default {
};
</script>
-<style scoped>
+<style lang="less" scoped>
.fullwidth {
width: 100%;
}
+.map-container {
+ display: flex !important;
+ flex-direction: column;
+
+ .button {
+ margin-top: 0.5em;
+ }
+}
+
</style>