Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • geocontrib/geocontrib-frontend
  • ext_matthieu/geocontrib-frontend
  • fnecas/geocontrib-frontend
  • MatthieuE/geocontrib-frontend
4 results
Show changes
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 1042 additions and 41541 deletions
src/assets/img/multimarker.png 0 → 100644
View file @ e9975a3a
src/assets/img/multimarker.png

12.8 KiB

src/assets/img/multipolygon.png 0 → 100644
View file @ e9975a3a
src/assets/img/multipolygon.png

9.69 KiB

src/assets/img/polygon.png
View replaced file @ 72fa841d View file @ e9975a3a
src/assets/img/polygon.png

8.26 KiB | W: 0px | H: 0px

src/assets/img/polygon.png

4.03 KiB | W: 0px | H: 0px

src/assets/img/polygon.png
src/assets/img/polygon.png
src/assets/img/polygon.png
src/assets/img/polygon.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/js/map-util.js deleted 100644 → 0
View file @ 72fa841d
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import flip from '@turf/flip';
import axios from '@/axios-client.js';
import 'leaflet.vectorgrid';
let map;
let dictLayersToLeaflet = {};
var layerMVT;
const statusList = [
{
name: 'Brouillon',
value: 'draft',
},
{
name: 'Publié',
value: 'published',
},
{
name: 'Archivé',
value: 'archived',
},
{
name: 'En attente de publication',
value: 'pending',
},
];
L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
onAdd: function (map) {
// Triggered when the layer is added to a map.
// Register a click listener, then do all the upstream WMS things
L.TileLayer.WMS.prototype.onAdd.call(this, map);
map.on('click', this.getFeatureInfo, this);
},
onRemove: function (map) {
// Triggered when the layer is removed from a map.
// Unregister a click listener, then do all the upstream WMS things
L.TileLayer.WMS.prototype.onRemove.call(this, map);
map.off('click', this.getFeatureInfo, this);
},
getFeatureInfo: function (evt) {
if (this.wmsParams.basemapId != undefined) {
const queryableLayerSelected = document.getElementById(`queryable-layers-selector-${this.wmsParams.basemapId}`).getElementsByClassName('selected')[0].textContent;
if (queryableLayerSelected.trim() === this.wmsParams.title.trim()) {
// Make an AJAX request to the server and hope for the best
var params = this.getFeatureInfoUrl(evt.latlng);
var showResults = L.Util.bind(this.showGetFeatureInfo, this);
axios.get(
window.proxy_url,
{
params: params,
}
).then(response => {
const data = response.data;
var err = typeof data === 'object' ? null : data;
if (data.features || err) {
showResults(err, evt.latlng, data);
}
})
.catch(error => {
throw (error);
}
);
}
}
},
getFeatureInfoUrl: function (latlng) {
// Construct a GetFeatureInfo request URL given a point
var point = this._map.latLngToContainerPoint(latlng, this._map.getZoom());
var size = this._map.getSize(),
params = {
url: this._url,
request: 'GetFeatureInfo',
service: 'WMS',
// srs: this.wmsParams.srs,
srs: 'EPSG:4326',
// styles: this.wmsParams.styles,
// transparent: this.wmsParams.transparent,
version: this.wmsParams.version,
// format: this.wmsParams.format,
bbox: this._map.getBounds().toBBoxString(),
height: size.y,
width: size.x,
layers: this.wmsParams.layers,
query_layers: this.wmsParams.layers,
info_format: 'application/json'
};
params[params.version === '1.3.0' ? 'i' : 'x'] = Math.floor(point.x);
params[params.version === '1.3.0' ? 'j' : 'y'] = Math.floor(point.y);
return params;
},
showGetFeatureInfo: function (err, latlng, data) {
let content;
if (err) {
content = `
<h4>${this.options.title}</h4>
<p>Données de la couche inaccessibles</p>
`;
L.popup({ maxWidth: 800 })
.setLatLng(latlng)
.setContent(content)
.openOn(this._map);
} else {
// Otherwise show the content in a popup
const contentLines = [];
let contentTitle;
if (data.features.length > 0) {
Object.entries(data.features[0].properties).forEach(entry => {
const [key, value] = entry;
if (key !== 'bbox') {
contentLines.push(`<div>${key}: ${value}</div>`);
}
});
contentTitle = `<h4>${this.options.title}</h4>`;
content = contentTitle.concat(contentLines.join(''));
L.popup({ maxWidth: 800 })
.setLatLng(latlng)
.setContent(content)
.openOn(this._map);
}
}
}
});
L.tileLayer.betterWms = function (url, options) {
return new L.TileLayer.BetterWMS(url, options);
};
const mapUtil = {
getMap: () => {
return map;
},
createMap: function (el, options) {
const {
lat,
lng,
mapDefaultViewCenter,
mapDefaultViewZoom,
zoom,
zoomControl = true,
} = options;
map = L.map(el, {
maxZoom: 18,
minZoom: 1,
zoomControl: false,
}).setView(
[
lat ? lat : mapDefaultViewCenter[0],
lng ? lng : mapDefaultViewCenter[1],
],
!zoom ? mapDefaultViewZoom : zoom
);
map.setMaxBounds( [[-90,-180], [90,180]] );
if (zoomControl) {
L.control
.zoom({
zoomInTitle: 'Zoomer',
zoomOutTitle: 'Dézoomer',
position: 'topright',
})
.addTo(map);
}
L.control.scale().addTo(map);
return map;
},
addGeocoders: function (configuration) {
let geocoder;
const geocoderLabel = configuration.SELECTED_GEOCODER.PROVIDER;
if (geocoderLabel && L.Control.Geocoder) {
const LIMIT_RESULTS = 5;
if (
geocoderLabel === configuration.GEOCODER_PROVIDERS.ADDOK
) {
geocoder = L.Control.Geocoder.addok({ limit: LIMIT_RESULTS });
} else if (
geocoderLabel === configuration.GEOCODER_PROVIDERS.PHOTON
) {
geocoder = L.Control.Geocoder.photon();
} else if (
geocoderLabel === configuration.GEOCODER_PROVIDERS.NOMINATIM
) {
geocoder = L.Control.Geocoder.nominatim();
}
L.Control.geocoder({
placeholder: 'Chercher une adresse...',
geocoder: geocoder,
}).addTo(map);
}
},
addLayers: function (layers, serviceMap, optionsMap, schemaType) {
if (layers) { //* if admin has defined basemaps for this project
layers.forEach((layer) => {
if (layer) {
const options = layer.options;
if (options) {
options.noWrap = true;
options.opacity = layer.opacity;
if (layer.schema_type === 'wms') {
let leafletLayer;
if (layer.queryable) {
options.title = layer.title;
leafletLayer = L.tileLayer
.betterWms(layer.service, options)
.addTo(map);
} else {
leafletLayer = L.tileLayer
.wms(layer.service, options)
.addTo(map);
}
dictLayersToLeaflet[layer.id] = leafletLayer._leaflet_id;
} else if (layer.schema_type === 'tms') {
const leafletLayer = L.tileLayer(layer.service, options).addTo(map);
dictLayersToLeaflet[layer.id] = leafletLayer._leaflet_id;
}
}
}
});
} else { //* else when no basemaps defined
optionsMap.noWrap = true;
if (schemaType === 'wms') {
L.tileLayer
.wms(serviceMap, optionsMap)
.addTo(map);
} else {
L.tileLayer(serviceMap, optionsMap).addTo(map);
}
}
},
// Remove the base layers (not the features)
removeLayers: function () {
map.eachLayer((leafLetlayer) => {
if (
Object.values(dictLayersToLeaflet).includes(leafLetlayer._leaflet_id)
) {
map.removeLayer(leafLetlayer);
}
});
dictLayersToLeaflet = {};
},
updateOpacity(layerId, opacity) {
const internalLeafletLayerId = dictLayersToLeaflet[layerId];
map.eachLayer((layer) => {
if (layer._leaflet_id === internalLeafletLayerId) {
layer.setOpacity(opacity);
}
});
},
updateOrder(layers) {
// First remove existing layers undefined
layers = layers.filter(function (x) {
return x !== undefined;
});
// First remove existing layers
map.eachLayer((leafLetlayer) => {
layers.forEach((layerOptions) => {
if (dictLayersToLeaflet[layerOptions.id] === leafLetlayer._leaflet_id) {
map.removeLayer(leafLetlayer);
}
});
});
dictLayersToLeaflet = {};
// Redraw the layers
this.addLayers(layers);
},
retrieveFeatureColor: function (featureType, properties) {
const colorsStyle = featureType.colors_style;
if (featureType && colorsStyle && colorsStyle.custom_field_name) {
const currentValue = properties[colorsStyle.custom_field_name];
const colorStyle = colorsStyle.colors[currentValue];
return colorStyle ? colorStyle : featureType.color;
}
return featureType.color;
},
addVectorTileLayer: function (url, projectSlug, featureTypes, formFilters) {
layerMVT = L.vectorGrid.protobuf(url, {
noWrap:true,
vectorTileLayerStyles: {
default: (properties) => {
const featureType = featureTypes.find((x) => x.slug.split('-')[0] === '' + properties.feature_type_id);
const color = this.retrieveFeatureColor(featureType, properties);
const colorValue =
color.value && color.value.length ?
color.value : typeof color === 'string' && color.length ?
color : '#000000';
const hiddenStyle = ({
radius: 0,
fillOpacity: 0.5,
weight: 0,
fill: false,
color: featureType.color,
});
const defaultStyle = {
radius: 4,
fillOpacity: 0.5,
weight: 3,
fill: true,
color: colorValue,
};
// Filtre sur le feature type
if (formFilters && formFilters.type.selected) {
if (featureType.title !== formFilters.type.selected) {
return hiddenStyle;
}
}
// Filtre sur le statut
if (formFilters && formFilters.status.selected.value) {
if (properties.status !== formFilters.status.selected.value) {
return hiddenStyle;
}
}
// Filtre sur le titre
if (formFilters && formFilters.title) {
if (!properties.title.toLowerCase().includes(formFilters.title.toLowerCase())) {
return hiddenStyle;
}
}
return defaultStyle;
},
},
// subdomains: "0123",
// key: 'abcdefghi01234567890',
interactive: true,
maxNativeZoom: 18,
getFeatureId: function (f) {
return f.properties.id;
}
});
layerMVT.on('click', (e) => { // The .on method attaches an event handler
const popupContent = this._createContentPopup(e.layer, featureTypes, projectSlug);
L.popup()
.setContent(popupContent)
.setLatLng(e.latlng)
.openOn(map);
});
layerMVT.addTo(map);
window.layerMVT = layerMVT;
},
addFeatures: function (features, filter, addToMap = true, featureTypes, projectSlug) {
const featureGroup = new L.FeatureGroup();
features.forEach((feature) => {
const featureProperties = feature.properties ? feature.properties : feature;
const featureType = featureTypes
.find((ft) => ft.slug === (featureProperties.feature_type.slug || featureProperties.feature_type));
let filters = [];
if (filter) {
const typeCheck = filter.featureType && featureProperties.feature_type.slug === filter.featureType;
const statusCheck = filter.featureStatus && featureProperties.status.value === filter.featureStatus;
const titleCheck = filter.featureTitle && featureProperties.title.includes(filter.featureTitle);
filters = [typeCheck, statusCheck, titleCheck];
}
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 || feature.geom);
const popupContent = this._createContentPopup(feature, featureTypes, projectSlug);
// Look for a custom field
let customField;
let customFieldOption;
if (
featureType.customfield_set &&
Object.keys(featureProperties).some(el => featureType.customfield_set.map(e => e.name).includes(el))
) {
customField = Object.keys(featureProperties)
.filter(el => featureType.customfield_set.map(e => e.name).includes(el));
customFieldOption = featureProperties[customField[0]];
}
let color = '#000000';
if (feature.overideColor) {
color = feature.overideColor;
} else {
color = this.retrieveFeatureColor(featureType, featureProperties) || featureProperties.color;
if (color.value && color.value.length) {
color = color.value;
}
}
if (geomJSON.type === 'Point') {
if (
customFieldOption &&
featureType.colors_style &&
featureType.colors_style.value &&
featureType.colors_style.value.icons &&
!!Object.keys(featureType.colors_style.value.icons).length
) {
if (
featureType.colors_style.value.icons[customFieldOption] &&
featureType.colors_style.value.icons[customFieldOption] !== 'circle'
) {
const iconHTML = `
<i
class="fas fa-${featureType.colors_style.value.icons[customFieldOption]} fa-lg"
style="color: ${color}"
></i>
`;
const customMapIcon = L.divIcon({
html: iconHTML,
iconSize: [20, 20],
className: 'myDivIcon',
});
L.marker(geomJSON.coordinates, {
icon: customMapIcon,
color: color,
zIndexOffset: 100
})
.bindPopup(popupContent)
.addTo(featureGroup);
} else {
L.circleMarker(geomJSON.coordinates, {
color: color,
radius: 4,
fillOpacity: 0.5,
weight: 3,
})
.bindPopup(popupContent)
.addTo(featureGroup);
}
} else {
if (featureType.icon && featureType.icon !== 'circle') {
const iconHTML = `
<i
class="fas fa-${featureType.icon} fa-lg"
style="color: ${color}"
></i>
`;
const customMapIcon = L.divIcon({
html: iconHTML,
iconSize: [20, 20],
className: 'myDivIcon',
});
L.marker(geomJSON.coordinates, {
icon: customMapIcon,
color: color,
zIndexOffset: 100
})
.bindPopup(popupContent)
.addTo(featureGroup);
} else {
L.circleMarker(geomJSON.coordinates, {
color: color,
radius: 4,
fillOpacity: 0.5,
weight: 3,
})
.bindPopup(popupContent)
.addTo(featureGroup);
}
}
} else if (geomJSON.type === 'LineString') {
L.polyline(geomJSON.coordinates, {
color: color,
weight: 3,
})
.bindPopup(popupContent)
.addTo(featureGroup);
} else if (geomJSON.type === 'Polygon') {
L.polygon(geomJSON.coordinates, {
color: color,
weight: 3,
fillOpacity: 0.5,
})
.bindPopup(popupContent)
.addTo(featureGroup);
}
}
});
if (map && addToMap) {
map.addLayer(featureGroup);
}
return featureGroup;
},
addMapEventListener: function (eventName, callback) {
map.on(eventName, callback);
},
_createContentPopup: function (feature, featureTypes, projectSlug) {
const formatDate = (currentDatetime) => {
const formattedDate = currentDatetime.getFullYear() + '-' + ('0' + (currentDatetime.getMonth() + 1)).slice(-2) + '-' + ('0' + currentDatetime.getDate()).slice(-2) + ' ' +
('0' + currentDatetime.getHours()).slice(-2) + ':' + ('0' + currentDatetime.getMinutes()).slice(-2);
return formattedDate;
};
let featureType = feature.properties ? feature.properties.feature_type : feature.feature_type;
let featureUrl = feature.feature_url;
let status = feature.status;
let featureTypeUrl = feature.feature_type_url;
let dateMaj = feature.updated_on;
if (feature.properties) {
status = feature.properties.status;
dateMaj = feature.properties.updated_on ? formatDate(new Date(feature.properties.updated_on)) : '<em>indisponible</em>';
featureTypeUrl = feature.properties.feature_type_url;
featureUrl = feature.properties.feature_url;
}
if (featureTypes && feature.properties) { // => VectorTile
featureType = feature.properties.feature_type_id ?
featureTypes.find((x) => x.slug.split('-')[0] === '' + feature.properties.feature_type_id) :
featureTypes.find((fType) => fType.slug === feature.properties.feature_type.slug); //* geojson
status = statusList.find((x) => x.value === feature.properties.status.value).name;
if (featureType) {
featureTypeUrl = `/geocontrib/projet/${projectSlug}/type-signalement/${featureType.slug}/`;
}
featureUrl = `${featureTypeUrl}signalement/${feature.properties.feature_id}/`;
} else {
status = feature.properties ? feature.properties.status.label : feature.status.label;
}
//* adapt link url for shared-project restricted navigation
if (window.location.pathname.includes('projet-partage')) {
featureUrl = featureUrl.replace('projet', 'projet-partage');
featureTypeUrl = featureTypeUrl.replace('projet', 'projet-partage');
}
let author = '';
const creator = feature.properties ? feature.properties.creator : feature.creator;
if (creator) {
author = creator.full_name
? `<div>
Auteur : ${creator.first_name} ${creator.last_name}
</div>`
: creator.username ? `<div>Auteur: ${creator.username}</div>` : '';
}
let title = feature.properties ? feature.properties.title : feature.title;
if (featureUrl) {
title = `<a href="${featureUrl}">${title}</a>`;
} else {
title = `<span>${title|| '<em>indisponible</em>'}</span>`;
}
return `
<h4>
<${featureUrl ? `a href="${featureUrl}"` : 'span'}>${title || '<em>indisponible</em>'}</${featureUrl ? 'a' : 'span'}>
</h4>
<div>
Statut : ${status || '<em>indisponible</em>'}
</div>
<div>
Type : <${featureTypeUrl ? `a href="${featureTypeUrl}"` : 'span'}> ${featureType.title || '<em>indisponible</em>'} </${featureTypeUrl ? 'a' : 'span'}>
</div>
<div>
Dernière mise à jour : ${dateMaj || '<em>indisponible</em>'}
</div>
${author}
`;
},
};
export { mapUtil };
src/assets/js/utils.js
View file @ e9975a3a
......@@ -14,22 +14,115 @@ export function fileConvertSizeToMo(aSize){
return (aSize/def[0]).toFixed(def[2]);
}
export function csvToJson(csv) {
const result = [];
/**
* Determines the likely field delimiter in a CSV string by analyzing the first few lines.
* The function counts the occurrences of common delimiters such as commas, semicolons, and tabs.
* The most frequently and consistently occurring delimiter across the sampled lines is chosen as the likely delimiter.
*
* @param {string} text - The CSV string to analyze for determining the delimiter.
* @returns {string|false} The most likely delimiter character if one can be determined, or false if none is found.
*/
export function determineDelimiter(text) {
const lines = text.split('\n').slice(0, 5); // Analyze the first 5 lines
const delimiters = [',', ';', '\t']; // List of possible delimiters
let delimiterCounts = new Map(delimiters.map(d => [d, 0])); // Initialize a map to count delimiter occurrences
const allLines = csv.split('\n');
const headers = allLines[0].split(',');
const [, ...lines] = allLines;
// Count the occurrences of each delimiter in each line
lines.forEach(line => {
delimiters.forEach(delimiter => {
const count = line.split(delimiter).length - 1; // Count the occurrences of the delimiter in the line
delimiterCounts.set(delimiter, delimiterCounts.get(delimiter) + count); // Update the count in the map
});
});
for (const line of lines) {
const obj = {};
const currentLine = line.split(',');
let mostCommonDelimiter = '';
let maxCount = 0;
for (let i = 0; i < headers.length; i++) {
obj[headers[i]] = currentLine[i];
// Determine the most common delimiter
delimiterCounts.forEach((count, delimiter) => {
if (count > maxCount) {
mostCommonDelimiter = delimiter; // Set the most common delimiter found so far
maxCount = count; // Update the maximum count found so far
}
});
result.push(obj);
return mostCommonDelimiter || false; // Return the most common delimiter or false if none is found
}
/**
* Parses a CSV string into an array of rows, where each row is an array of fields.
* The function correctly handles multiline fields enclosed in double quotes, removes
* carriage return characters (\r) at the end of lines, and allows for different field
* delimiters.
*
* @param {string} text - The CSV string to be parsed.
* @param {string} delimiter - The field delimiter character (default is comma ',').
* @returns {Array<Array<string>>} An array of rows, each row being an array of fields.
*/
export function parseCSV(text, delimiter = ',') {
let rows = []; // This will hold the parsed rows
let row = []; // Temporary array to hold the fields of the current row
let field = ''; // Temporary string to hold the current field
let inQuotes = false; // Boolean to track whether we are inside quotes
for (let i = 0; i < text.length; i++) {
const char = text[i]; // Current character
if (char === '"' && text[i - 1] !== '\\') {
inQuotes = !inQuotes; // Toggle the inQuotes flag if not escaped
} else if (char === delimiter && !inQuotes) {
// If the current character is the delimiter and we are not inside quotes,
// add the field to the row and reset the field variable
row.push(field.replace(/\r$/, '')); // Remove trailing carriage return
field = '';
} else if (char === '\n' && !inQuotes) {
// If the current character is a newline and we are not inside quotes,
// add the field to the row, add the row to the list of rows,
// and reset the field and row variables
row.push(field.replace(/\r$/, '')); // Remove trailing carriage return
rows.push(row);
row = [];
field = '';
} else {
// If the current character is part of a field, add it to the field variable
field += char;
}
}
return JSON.parse(JSON.stringify(result));
// After the loop, check if there's a remaining field or row to be added
if (field) {
row.push(field.replace(/\r$/, '')); // Remove trailing carriage return
rows.push(row);
}
return rows; // Return the parsed rows
}
/**
* Checks if the values in 'lon' and 'lat' columns are decimal numbers in the provided CSV data.
*
* @param {Array<string>} headers - The array of headers from the CSV file.
* @param {Array<Array<string>>} data - The CSV data as an array of rows, each row being an array of field values.
* @returns {boolean} True if 'lon' and 'lat' are found and their values are decimal numbers, false otherwise.
*/
export function checkLonLatValues(headers, data) {
const lonIndex = headers.indexOf('lon');
const latIndex = headers.indexOf('lat');
// Check if both 'lon' and 'lat' headers are found
if (lonIndex === -1 || latIndex === -1) {
return false;
}
// Function to check if a string is a decimal number
const isDecimal = (str) => !isNaN(str) && str.includes('.');
for (const row of data) {
// Check if 'lon' and 'lat' values are decimal numbers
if (!isDecimal(row[lonIndex]) || !isDecimal(row[latIndex])) {
return false;
}
}
return true;
}
src/assets/js/vector_tile_fix.js deleted 100644 → 0
View file @ 72fa841d
import L from 'leaflet';
export var Symbolizer = L.Class.extend({
// 🍂method initialize(feature: GeoJSON, pxPerExtent: Number)
// Initializes a new Line Symbolizer given a GeoJSON feature and the
// pixel-to-coordinate-units ratio. Internal use only.
// 🍂method render(renderer, style)
// Renders this symbolizer in the given tiled renderer, with the given
// `L.Path` options. Internal use only.
render: function(renderer, style) {
this._renderer = renderer;
this.options = style;
renderer._initPath(this);
renderer._updateStyle(this);
},
// 🍂method render(renderer, style)
// Updates the `L.Path` options used to style this symbolizer, and re-renders it.
// Internal use only.
updateStyle: function(renderer, style) {
this.options = style;
renderer._updateStyle(this);
},
_getPixelBounds: function() {
var parts = this._parts;
var bounds = L.bounds([]);
for (var i = 0; i < parts.length; i++) {
var part = parts[i];
for (var j = 0; j < part.length; j++) {
bounds.extend(part[j]);
}
}
var w = this._clickTolerance(),
p = new L.Point(w, w);
bounds.min._subtract(p);
bounds.max._add(p);
return bounds;
},
_clickTolerance: L.Path.prototype._clickTolerance,
});
export var PolyBase = {
_makeFeatureParts: function(feat, pxPerExtent) {
var rings = feat.geometry;
var coord;
this._parts = [];
for (var i = 0; i < rings.length; i++) {
var ring = rings[i];
var part = [];
for (var j = 0; j < ring.length; j++) {
coord = ring[j];
// Protobuf vector tiles return {x: , y:}
// Geojson-vt returns [,]
part.push(L.point(coord).scaleBy(pxPerExtent));
}
this._parts.push(part);
}
},
makeInteractive: function() {
this._pxBounds = this._getPixelBounds();
}
};
export var LineSymbolizer = L.Polyline.extend({
includes: [Symbolizer.prototype, PolyBase],
initialize: function(feature, pxPerExtent) {
this.properties = feature.properties;
this._makeFeatureParts(feature, pxPerExtent);
},
render: function(renderer, style) {
style.fill = false;
Symbolizer.prototype.render.call(this, renderer, style);
this._updatePath();
},
updateStyle: function(renderer, style) {
style.fill = false;
Symbolizer.prototype.updateStyle.call(this, renderer, style);
},
});
export var FillSymbolizer = L.Polygon.extend({
includes: [Symbolizer.prototype, PolyBase],
initialize: function(feature, pxPerExtent) {
this.properties = feature.properties;
this._makeFeatureParts(feature, pxPerExtent);
},
render: function(renderer, style) {
Symbolizer.prototype.render.call(this, renderer, style);
this._updatePath();
}
});
export var PointSymbolizer = L.CircleMarker.extend({
includes: Symbolizer.prototype,
statics: {
iconCache: {}
},
initialize: function(feature, pxPerExtent) {
this.properties = feature.properties;
this._makeFeatureParts(feature, pxPerExtent);
},
render: function(renderer, style) {
Symbolizer.prototype.render.call(this, renderer, style);
this._radius = style.radius || L.CircleMarker.prototype.options.radius;
this._updatePath();
},
_makeFeatureParts: function(feat, pxPerExtent) {
var coord = feat.geometry[0];
if (typeof coord[0] === 'object' && 'x' in coord[0]) {
// Protobuf vector tiles return [{x: , y:}]
this._point = L.point(coord[0]).scaleBy(pxPerExtent);
this._empty = L.Util.falseFn;
} else {
// Geojson-vt returns [,]
this._point = L.point(coord).scaleBy(pxPerExtent);
this._empty = L.Util.falseFn;
}
},
makeInteractive: function() {
this._updateBounds();
},
updateStyle: function(renderer, style) {
this._radius = style.radius || this._radius;
this._updateBounds();
return Symbolizer.prototype.updateStyle.call(this, renderer, style);
},
_updateBounds: function() {
var icon = this.options.icon;
if (icon) {
var size = L.point(icon.options.iconSize),
anchor = icon.options.iconAnchor ||
size && size.divideBy(2, true),
p = this._point.subtract(anchor);
this._pxBounds = new L.Bounds(p, p.add(icon.options.iconSize));
} else {
L.CircleMarker.prototype._updateBounds.call(this);
}
},
_updatePath: function() {
if (this.options.icon) {
this._renderer._updateIcon(this);
} else {
L.CircleMarker.prototype._updatePath.call(this);
}
},
_getImage: function () {
if (this.options.icon) {
var url = this.options.icon.options.iconUrl,
img = PointSymbolizer.iconCache[url];
if (!img) {
var icon = this.options.icon;
img = PointSymbolizer.iconCache[url] = icon.createIcon();
}
return img;
} else {
return null;
}
},
_containsPoint: function(p) {
var icon = this.options.icon;
if (icon) {
return this._pxBounds.contains(p);
} else {
return L.CircleMarker.prototype._containsPoint.call(this, p);
}
}
});
L.VectorGrid.prototype._createLayer=function(feat, pxPerExtent) {
var layer;
switch (feat.type) {
case 1:
layer = new PointSymbolizer(feat, pxPerExtent);
// [YB 2019-10-23: prevent leaflet from treating these canvas points as real markers]
layer.getLatLng = null;
break;
case 2:
layer = new LineSymbolizer(feat, pxPerExtent);
break;
case 3:
layer = new FillSymbolizer(feat, pxPerExtent);
break;
}
if (this.options.interactive) {
layer.addEventParent(this);
}
return layer;
};
\ No newline at end of file
src/assets/resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.css deleted 100644 → 0
View file @ 72fa841d
/* required styles */
/* For input, we add the strong #map selector to avoid conflicts with semantic-ui */
#map .leaflet-control-geocoder {
border-radius: 4px;
background: white;
min-width: 26px;
min-height: 26px;
}
.leaflet-touch .leaflet-control-geocoder {
min-width: 30px;
min-height: 30px;
}
.leaflet-control-geocoder a,
.leaflet-control-geocoder .leaflet-control-geocoder-icon {
border-bottom: none;
display: inline-block;
}
.leaflet-control-geocoder .leaflet-control-geocoder-alternatives a {
width: inherit;
height: inherit;
line-height: inherit;
}
.leaflet-control-geocoder a:hover,
.leaflet-control-geocoder .leaflet-control-geocoder-icon:hover {
border-bottom: none;
display: inline-block;
}
.leaflet-control-geocoder-form {
display: none;
vertical-align: middle;
}
.leaflet-control-geocoder-expanded .leaflet-control-geocoder-form {
display: inline-block;
}
#map .leaflet-control-geocoder-form input {
font-size: 120%;
border: 0;
background-color: transparent;
width: 246px;
}
.leaflet-control-geocoder-icon {
border-radius: 4px;
width: 26px;
height: 26px;
border: none;
background-color: white;
background-image: url(./images/geocoder.svg);
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.leaflet-touch .leaflet-control-geocoder-icon {
width: 30px;
height: 30px;
}
.leaflet-control-geocoder-throbber .leaflet-control-geocoder-icon {
background-image: url(./images/throbber.gif);
}
.leaflet-control-geocoder-form-no-error {
display: none;
}
#map .leaflet-control-geocoder-form input:focus {
outline: none;
}
.leaflet-control-geocoder-form button {
display: none;
}
.leaflet-control-geocoder-error {
margin-top: 8px;
margin-left: 8px;
display: block;
color: #444;
}
.leaflet-control-geocoder-alternatives {
display: block;
width: 272px;
list-style: none;
padding: 0;
margin: 0;
}
.leaflet-control-geocoder-alternatives-minimized {
display: none;
height: 0;
}
.leaflet-control-geocoder-alternatives li {
white-space: nowrap;
display: block;
overflow: hidden;
padding: 5px 8px;
text-overflow: ellipsis;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.leaflet-control-geocoder-alternatives li a,
.leaflet-control-geocoder-alternatives li a:hover {
width: inherit;
height: inherit;
line-height: inherit;
background: inherit;
border-radius: inherit;
text-align: left;
}
.leaflet-control-geocoder-alternatives li:last-child {
border-bottom: none;
}
.leaflet-control-geocoder-alternatives li:hover,
.leaflet-control-geocoder-selected {
background-color: #f5f5f5;
}
/* Custom style */
.leaflet-control-geocoder-icon {
border-radius: 4px;
width: 35px;
height: 35px;
}
#map .leaflet-control-geocoder-form input {
height: 35px;
}
.leaflet-control-geocoder-alternatives li:first-of-type {
border-top: 1px solid #ccc;
}
.leaflet-control-geocoder-address-item {
font-weight: 600;
}
.leaflet-control-geocoder-address-detail {
font-size: 12px;
font-weight: normal;
}
.leaflet-control-geocoder-address-context {
color: #666;
font-size: 12px;
font-weight: lighter;
}
src/assets/resources/leaflet-control-geocoder-1.13.0/images/geocoder.svg deleted 100644 → 0
View file @ 72fa841d
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
\ No newline at end of file
src/assets/resources/semantic-ui-2.4.2/semantic.css deleted 100644 → 0
View file @ 72fa841d
This diff is collapsed.
src/assets/styles/base.css
View file @ e9975a3a
/* ---------------------------------- */
/* APP */
/* APP */
/* ---------------------------------- */
body {
height:100%;
width:100%;
height: 100%;
width: 100%;
margin: 0;
}
#app {
position: relative;
min-height: 100vh;
/* keep the space for loader, before page contents are injected */
display: flex;
/* used to fix height on sticky header and footer */
flex-direction: column;
/* used to fix height on sticky header and footer */
}
#app-header {
position:absolute;
top:0;
left:0;
right:0;
height: 61px;
background: #373636;
position: sticky;
top: 0;
z-index: 1;
background: var(--header-color, #373636);
.ui.inverted.menu {
background: var(--header-color, #373636);
}
.item {
background: var(--header-color, #373636);
}
}
#content {
position:absolute;
top:61px;
bottom:30px;
left:0px;
right:0px;
overflow:auto;
padding: 1em 2em;
#app-content {
overflow: auto;
flex: 1 0 auto;
/* used to fix height on sticky header and footer */
min-height: 61px;
/* value by default of the header, defined here to be sync with anchor below, in order to keep the page stuck to top */
position: relative;
/* for anchor below */
}
.page {
#scroll-top-anchor {
position: absolute;
top: -61px;
visibility: hidden;
}
.page-content {
max-width: 1200px;
padding: 0 2em;
margin: 2em auto;
}
......@@ -36,17 +60,19 @@ body {
width: 100%;
height: 100%;
min-height: 250px;
touch-action: none;
/* workaround for modifying feature on mobile */
}
#app-footer {
position:absolute;
bottom:0;
left:0;
right:0;
overflow:hidden;
height: 30px;
overflow: hidden;
background-color: #464646;
text-align: center;
flex-shrink: 0;
/* used to fix height on sticky header and footer */
position: sticky;
bottom: 0;
z-index: 1000;
}
#app-footer .ui.text.menu {
......@@ -59,15 +85,20 @@ body {
}
#app-footer .ui.text.menu a.item:hover {
color: #1ab2b6;
color: var(--primary-color, #008c86);
}
#app-footer .ui.text.menu .item:not(:first-child) {
border-left: 1px solid rgba(34,36,38,.15);
border-left: 1px solid rgba(34, 36, 38, .15);
}
/* ---------------------------------- */
/* UTILS */
/* UTILS */
/* ---------------------------------- */
.inline {
display: inline;
}
.no-margin {
margin: 0 !important;
}
......@@ -75,42 +106,67 @@ body {
.margin-top {
margin-top: 1rem;
}
/* ---------------------------------- */
/* UTILS */
/* ---------------------------------- */
.margin-bottom {
margin-bottom: 1rem;
}
.tiny-margin {
margin: 0.1rem 0 0.1rem 0.1rem !important;
}
.tiny-margin-left {
margin-left: 0.1rem !important;
}
.ellipsis {
text-overflow: ellipsis;
overflow: hidden;
}
.nowrap {
white-space: nowrap;
}
.important-flex {
display: flex !important;
}
.pointer:hover {
cursor: pointer;
cursor: pointer !important;
}
.dimmer-anchor {
position: relative;
}
.full-width {
width: 100%;
}
/* ---------------------------------- */
/* MAIN */
/* MAIN */
/* ---------------------------------- */
.button-hover-orange:hover {
background: #fbbd08 !important;
}
.button-hover-green:hover {
background: #5bba21 !important;
}
.button-hover-red:hover {
background: #ee2e24 !important;
}
.ui.button.button-hover-red:hover, .ui.button.button-hover-red:hover i.icon,
.ui.button.button-hover-green:hover, .ui.button.button-hover-green:hover i.icon {
.ui.button.button-hover-red:hover,
.ui.button.button-hover-red:hover i.icon,
.ui.button.button-hover-green:hover,
.ui.button.button-hover-green:hover i.icon {
color: #fff !important;
}
.ui.button.button-hover-red:hover i.icon,
.ui.button.button-hover-green:hover i.icon {
transition: all 0.5s ease !important;
......@@ -121,7 +177,7 @@ body {
}
.ui.horizontal.divider {
color: #1ab2b6!important;
color: var(--primary-color, #008c86) !important;
padding-top: 1.5em;
}
......@@ -129,7 +185,7 @@ body {
display: none;
}
.ui.dropdown .menu > .header {
.ui.dropdown .menu>.header {
font-size: 1em;
text-transform: none;
}
......@@ -139,27 +195,33 @@ body {
overflow: auto;
}
.ui.dropdown .menu.text-wrap > .item {
.ui.dropdown .menu.text-wrap>.item {
white-space: normal;
word-wrap: normal;
}
.ui.checkbox.disabled > input {
.ui.checkbox.disabled>input {
cursor: default !important;
}
/* Add basemap view */
#form-layers .ui.buttons{
margin-bottom: 1rem;
#form-layers button.button:not(:last-of-type) {
margin-right: 0.5em !important;
}
#form-layers .errorlist{
#form-layers .errorlist {
list-style: none;
padding-left: 0;
color: #9f3a38;
}
#form-layers .infoslist {
list-style: none;
padding-left: 0;
color: #38989f;
}
/* Fix semantic ui overflow when is too long */
.layer-item .form div.text {
width: 100%
......@@ -175,9 +237,9 @@ body {
}
/* Thicker borders for each basemap segment */
#form-layers [data-segments=basemap_set-SEGMENTS] > .ui.segment {
#form-layers [data-segments=basemap_set-SEGMENTS]>.ui.segment {
margin-bottom: 3rem;
border: 1px solid rgba(34,36,38,.30);
border: 1px solid rgba(34, 36, 38, .30);
}
......@@ -197,42 +259,47 @@ body {
/* ---------------------------------- */
/* LEAFLET DRAW TOOLBAR */
/* LEAFLET DRAW TOOLBAR */
/* ---------------------------------- */
.leaflet-draw-toolbar a.leaflet-draw-draw-circlemarker,
.leaflet-draw-toolbar a.leaflet-draw-draw-polyline,
.leaflet-draw-toolbar a.leaflet-draw-draw-polygon {
background-color: #FFA19E;
}
/* ---------------------------------- */
/* LEAFLET*/
/* ---------------------------------- */
.leaflet-container {
background: #FFF;
background-color: #FFA19E;
}
/* ---------------------------------- */
/* ERROR LIST */
/* ERROR LIST */
/* ---------------------------------- */
.errorlist {
margin-top: 1rem;
padding: 0;
}
.errorlist > li {
.infoslist {
margin-top: 0.1rem;
padding: 0;
}
.errorlist>li {
list-style: none;
color: rgb(177, 55, 55);
border: thin solid rgb(197, 157, 157);
border: thin solid rgb(197, 157, 157);
border-radius: 3px;
background-color: rgb(250, 241, 242);
padding: 1rem;
padding: 0.5rem 1rem;
}
.infoslist>li {
list-style: none;
color: #38989f;
border-radius: 3px;
padding: 0;
text-align: right;
}
/* ---------------------------------- */
/* PAGINATION */
/* PAGINATION */
/* ---------------------------------- */
.custom-pagination {
......@@ -242,12 +309,13 @@ body {
font-size: 1.2em;
}
.custom-pagination > .page-item > .page-link {
.custom-pagination>.page-item>.page-link {
border: none;
font-weight: 400;
color: #008080;
}
.custom-pagination > .page-item.active > .page-link {
.custom-pagination>.page-item.active>.page-link {
color: #008080;
background-color: transparent;
font-weight: bolder;
......@@ -255,18 +323,20 @@ body {
padding: 0.325em 0.75em;
pointer-events: none;
}
.custom-pagination > .page-item.disabled > .page-link {
.custom-pagination>.page-item.disabled>.page-link {
opacity: 0.5;
pointer-events: none;
}
.custom-pagination > div > .page-item > .page-link {
.custom-pagination>div>.page-item>.page-link {
border: none;
font-weight: 400;
color: #008080;
padding: 0.325em 0.75em;
}
.custom-pagination > div > .page-item.active > .page-link {
.custom-pagination>div>.page-item.active>.page-link {
color: #008080;
background-color: transparent;
font-weight: bolder;
......@@ -275,28 +345,32 @@ body {
padding: 0.325em 0.75em;
pointer-events: none;
}
.custom-pagination > div > .page-item.disabled > .page-link {
.custom-pagination>div>.page-item.disabled>.page-link {
opacity: 0.5;
padding: 0.325em 0.75em;
pointer-events: none;
}
/* ---------------------------------- */
/* MULTISELECT */
/* MULTISELECT */
/* ---------------------------------- */
.multiselect {
font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif) !important;
}
.multiselect__tags {
border: 1px solid #ced4da;
border-radius: 0 !important;
font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif) !important;
font-size: 1rem !important;
}
.multiselect__tags > .multiselect__input {
.multiselect__tags>.multiselect__input {
border: none !important;
font-size: 1rem !important;
overflow: hidden;
text-overflow: ellipsis;
}
.multiselect__placeholder {
......@@ -305,7 +379,10 @@ body {
padding-top: 0;
}
.multiselect__single, .multiselect__tags, .multiselect__content, .multiselect__option {
.multiselect__single,
.multiselect__tags,
.multiselect__content,
.multiselect__option {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
......@@ -317,6 +394,11 @@ body {
.multiselect__select {
z-index: 1 !important;
}
.multiselect__content-wrapper {
box-shadow: 0 2px 3px 0 rgba(34, 36, 38, .15);
}
.multiselect__clear {
position: absolute;
right: 1px;
......@@ -326,7 +408,10 @@ body {
cursor: pointer;
z-index: 9;
background-color: #fff;
padding: 0 4px;
text-align: center;
}
.multiselect__spinner {
z-index: 2 !important;
background-color: #fff;
......@@ -334,10 +419,11 @@ body {
top: 2px;
}
.menu.projects > .item > .multiselect {
.menu.projects>.item>.multiselect {
min-height: 0px !important;
}
.menu.projects > .item > .multiselect > .multiselect__tags {
.menu.projects>.item>.multiselect>.multiselect__tags {
min-height: 0px !important;
}
......@@ -345,11 +431,28 @@ body {
background: #fff !important;
color: #35495e !important;
}
.multiselect__option--highlight {
background: #f3f3f3 !important;
color: #35495e !important;
}
.multiselect__option--selected.multiselect__option--highlight {
background: #f3f3f3 !important;
color: #35495e !important;
}
.multiselect__clear i.icon {
font-size: .75em;
color: #999;
margin: 0;
}
/* ---------------------------------- */
/* OVERRIDE SEMANTIC STYLES */
/* ---------------------------------- */
.ui.page.dimmer {
/* keep the dimmer above the dropdown (z-index 1001: above the map)*/
z-index: 1002;
}
\ No newline at end of file
src/assets/styles/openlayers-custom.css 0 → 100644
View file @ e9975a3a
This diff is collapsed.
src/assets/styles/sidebar-layers.css
View file @ e9975a3a
......@@ -13,8 +13,7 @@
border: 1px solid grey;
top: 0;
position: absolute;
/* Under this value, the map hide the sidebar */
z-index: 400;
z-index: 9;
}
.sidebar-layers {
......@@ -62,7 +61,7 @@
.sidebar-container.expanded .layers-icon svg path,
.sidebar-container.closing .layers-icon svg path {
fill: #00b5ad;
fill: var(--primary-color, #00b5ad);
}
@keyframes open-sidebar {
......@@ -132,7 +131,7 @@
}
.layers-icon:hover svg path {
fill: #00b5ad;
fill: var(--primary-color, #00b5ad);
}
.basemaps-title {
......@@ -144,7 +143,6 @@
}
/* Layer item */
.layer-item {
padding-bottom: 0.5rem;
}
......@@ -164,6 +162,7 @@
.range-container {
display: flex;
min-width: 15em; /* give space for the bubble since adding a min-width to keep its shape */
}
.range-output-bubble {
......@@ -172,6 +171,8 @@
padding: 4px 7px;
border-radius: 40px;
background-color: #2c3e50;
min-width: 2em;
text-align: center;
}
/* Overrides default padding of semantic-ui accordion */
......
src/axios-client.js
View file @ e9975a3a
......@@ -32,4 +32,4 @@ axios.interceptors.response.use(function (response) {
return Promise.reject(error);
});
export default axios;
\ No newline at end of file
export default axios;
src/components/Account/UserActivity.vue
View file @ e9975a3a
This diff is collapsed.
src/components/Account/UserProfile.vue
View file @ e9975a3a
This diff is collapsed.
src/components/AppHeader.vue
View file @ e9975a3a
This diff is collapsed.
src/components/Dropdown.vue
View file @ e9975a3a
......@@ -29,7 +29,7 @@
<span class="italic">{{ selected[1] }}</span>
</div>
<div v-else>
{{ selected }}
{{ selectedDisplay }}
</div>
</div>
<i
......@@ -40,10 +40,11 @@
<div :class="['menu', { 'visible transition': isOpen }]">
<div
v-for="(option, index) in filteredOptions || ['No results found.']"
:id="option.name && Array.isArray(option.name) ? option.name[0] : option.name || option"
:key="option + index"
:class="[
filteredOptions ? 'item' : 'message',
{ 'active selected': option.name === selected },
{ 'active selected': option.name === selected || option.id === selected },
]"
@click="select(index)"
>
......@@ -113,11 +114,19 @@ export default {
placehold() {
return this.input ? '' : this.placeholder;
},
selectedDisplay() { // for project attributes, option are object and selected is an id
if (this.options[0] && this.options[0].name) {
const option = this.options.find(opt => opt.id === this.selected);
if (option) return option.name;
}
return this.selected;
}
},
created() {
const crypto = window.crypto || window.msCrypto;
var array = new Uint32Array(1);
const array = new Uint32Array(1);
this.identifier = Math.floor(crypto.getRandomValues(array) * 10000);
window.addEventListener('mousedown', this.clickOutsideDropdown);
},
......@@ -166,7 +175,7 @@ export default {
},
clear() {
if (this.clearable) {
if (this.clearable && this.selected) {
this.input = '';
this.$emit('update:selection', '');
if (this.isOpen) {
......