您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Adds Paraguay GIS layers in WME
/* eslint-disable camelcase */ /* eslint-disable brace-style, curly, nonblock-statement-body-position, no-template-curly-in-string, func-names */ // ==UserScript== // @name WME GIS Layers // @namespace https://greasyfork.org/users/324334 // @version 2023.09.27.001-py028 // @description Adds Paraguay GIS layers in WME // @author MapOMatic // @match *://*.waze.com/*editor* // @exclude *://*.waze.com/user/editor* // @require https://greasyfork.org/scripts/24851-wazewrap/code/WazeWrap.js // @require https://cdnjs.cloudflare.com/ajax/libs/Turf.js/4.7.3/turf.min.js // @grant GM_xmlhttpRequest // @connect greasyfork.org // @grant GM_info // @license GNU GPLv3 // @contributionURL https://github.com/WazeDev/Thank-The-Authors // @connect * // @connect www.asuncion.gov.py // @connect analisis.stp.gov.py // @connect www.arcgis.com // @connect services1.arcgis.com // @connect services2.arcgis.com // @connect services3.arcgis.com // @connect services5.arcgis.com // @connect services6.arcgis.com // @connect services8.arcgis.com // @connect services9.arcgis.com // @connect geohidroinformatica.itaipu.gov.py // @connect geobosques.pti.org.py // @connect catastro.gov.py // @connect geo1.skycop.com.py // @connect sigcosiplan.unasursg.org // @connect snmf.infona.gov.py // @connect 190.52.167.121 // @connect sedac.ciesin.columbia.edu // @connect 190.128.205.76 // @connect wwf-sight-maps.org // @connect www.geosur.info // @connect a.mapillary.com // @connect geoshape.unasursg.org // @connect geo-ide.carto.com // @connect 201.217.59.143 // @connect pese.pti.org.py // @connect geo.pti.org.py // @connect www.mapadeasentamientos.org.py // @connect gis-gfw.wri.org // @connect opengeo.pol.una.py // @connect gis.mic.gov.py // @connect vigisalud.gov.py // @connect mapaescolar.mec.gov.py // @connect apps.mades.gov.py // @connect www.mopc.gov.py // ==/UserScript== // This version is for Paraguay Only, modified by ancho85 /* global OpenLayers */ /* global W */ /* global WazeWrap */ /* global _ */ /* global turf */ (function main() { 'use strict'; // ************************************************************************************************************** // IMPORTANT: Update this when releasing a new version of script that includes changes to the spreadsheet format // that may cause old code to break. This # should match the version listed in the spreadsheet // i.e. update them at the same time. // const LAYER_DEF_VERSION = '2018.04.27.001'; // NOT ACTUALLY USED YET // ************************************************************************************************************** // const UPDATE_MESSAGE = 'Bug fix due to WME update'; // const UPDATE_MESSAGE = `<ul>${[ // 'Added ability to shift layers. Right click a layer in the list to bring up the layer settings window.' // ].map(item => `<li>${item}</li>`).join('')}</ul><br>`; const GF_URL = 'https://greasyfork.org/en/scripts/388277-wme-paraguay-gis-layers'; // Used in tooltips to tell people who to report issues to. Update if a new author takes ownership of this script. const SCRIPT_AUTHOR = 'ancho85'; // MapOMatic is the original author, but he won't fix any Paraguay related issues // const LAYER_INFO_URL = 'https://spreadsheets.google.com/feeds/list/1cEG3CvXSCI4TOZyMQTI50SQGbVhJ48Xip-jjWg4blWw/o7gusx3/public/values?alt=json'; const LAYER_DEF_SPREADSHEET_URL = 'https://sheets.googleapis.com/v4/spreadsheets/1aePOmux2IBxE_2CGPOequGnubr9g4hWr1wH_qAjcM24/values/layerDefs'; const API_KEY = 'UVVsNllWTjVSSEJvYm5sQ05FdElNa3BqV1RBMFZtZHRSMDFRYm5Ca1ZURkZNRGRIYUVkbg=='; const REQUEST_FORM_URL = 'https://docs.google.com/forms/d/e/1FAIpQLSfMhBxF0P6bn8dFfOoNTAF1LHBFXr5w9oXvzqsii_TfA-_Bmw/viewform?usp=pp_url&entry.831784226={username}'; const DEC = s => atob(atob(s)); const PRIVATE_LAYERS = { 'nc-henderson-sl-signs': ['the_cre8r', 'mapomatic'] }; // case sensitive -- use all lower case // const COUNTRIES = { // 'United States': { // sheetId: '1cEG3CvXSCI4TOZyMQTI50SQGbVhJ48Xip-jjWg4blWw', // sheetLayerRange: 'layerDefs' // } // }; const DEFAULT_STYLE = { fillColor: '#000', pointRadius: 4, label: '${label}', strokeColor: '#ffa500', strokeOpacity: '0.95', strokeWidth: 1.5, fontColor: '#ffc520', fontSize: '13', labelOutlineColor: 'black', labelOutlineWidth: 3 }; const LAYER_STYLES = { cities: { fillOpacity: 0.3, fillColor: '#f65', strokeColor: '#f65', fontColor: '#f62' }, forests_parks: { fillOpacity: 0.4, fillColor: '#585', strokeColor: '#484', fontColor: '#8b8' }, milemarkers: { strokeColor: '#fff', fontColor: '#fff', fontWeight: 'bold', fillOpacity: 0, labelYOffset: 10, pointRadius: 2, fontSize: 12 }, parcels: { fillOpacity: 0, fillColor: '#ffa500' }, points: { strokeColor: '#000', fontColor: '#0ff', fillColor: '#0ff', labelYOffset: -10, labelAlign: 'ct' }, post_offices: { strokeColor: '#000', fontColor: '#f84', fillColor: '#f84', fontWeight: 'bold', labelYOffset: -10, labelAlign: 'ct' }, state_parcels: { fillOpacity: 0, strokeColor: '#e62', fillColor: '#e62', fontColor: '#e73' }, state_points: { strokeColor: '#000', fontColor: '#3cf', fillColor: '#3cf', labelYOffset: -10, labelAlign: 'ct' }, road_labels: { strokeOpacity: 0, fillOpacity: 0, fontColor: '#faf' }, structures: { fillOpacity: 0, strokeColor: '#f7f', fontColor: '#f7f' }, water: { fillOpacity: 1, strokeColor: '#13a1dd', fillColor: '#13a1dd', fontColor: '#13a1dd', fontWeight: 'bold' } }; let ROAD_STYLE; function initRoadStyle() { ROAD_STYLE = new OpenLayers.Style({ pointRadius: 12, fillColor: '#369', pathLabel: '${label}', label: '', fontColor: '#faf', labelSelect: true, pathLabelYOffset: '${getOffset}', pathLabelCurve: '${getSmooth}', pathLabelReadable: '${getReadable}', labelAlign: '${getAlign}', labelOutlineWidth: 3, labelOutlineColor: '#000', strokeWidth: 3, stroke: true, strokeColor: '#f0f', strokeOpacity: 0.4, fontWeight: 'bold', fontSize: 11 }, { context: { getOffset() { return -(W.map.getZoom() + 5); }, getSmooth() { return ''; }, getReadable() { return '1'; }, getAlign() { return 'cb'; } } }); } // eslint-disable-next-line no-unused-vars const _regexReplace = { // Strip leading zeros or blank full label for any label starting with a non-digit or // is a Zero Address, use with '' as replace. r0: /^(0+(\s.*)?|\D.*)/, // Strip Everything After Street Type to end of the string by use $1 and $2 capture // groups, use with replace '$1$2' // eslint-disable-next-line max-len r1: /^(.* )(Ave(nue)?|Dr(ive)?|St(reet)?|C(our)?t|Cir(cle)?|Blvd|Boulevard|Pl(ace)?|Ln|Lane|Fwy|Freeway|R(oa)?d|Ter(r|race)?|Tr(ai)?l|Way|Rte \d+|Route \d+)\b.*/gi, // Strip SPACE 5 Digits from end of string, use with replace '' r2: /\s\d{5}$/, // Strip Everything after a "~", ",", ";" to the end of the string, use with replace '' r3: /(~|,|;|\s?\r\n).*$/, // Move the digits after the last space to before the rest of the string using, use with // replace '$2 $1' r4: /^(.*)\s(\d+).*/, // Insert newline between digits (including "-") and everything after the digits, // except(and before) a ",", use with replace '$1\n$2' r5: /^([-\d]+)\s+([^,]+).*/, // Insert newline between digits and everything after the digits, use with // replace '$1\n$2' r6: /^(\d+)\s+(.*)/ }; let _gisLayers = []; // const _layerRefinements = [ // { // id: 'us-post-offices', // labelHeaderFields: ['LOCALE_NAME'] // } // ]; const STATES = { _states: [ ['PRY (Pais)', 'PRY', -1], ['Asuncion (Capital)', 'ASU', 0], ['Concepcion', 'CON', 1], ['San Pedro', 'SAN', 2], ['Cordillera', 'COR', 3], ['Guaira', 'GUA', 4], ['Caaguazu', 'CAG', 5], ['Caazapa', 'CAZ', 6], ['Itapua', 'ITA', 7], ['Misiones', 'MIS', 8], ['Paraguari', 'PAR', 9], ['Alto Parana', 'ANA', 10], ['Central', 'CEN', 11], ['Neembucu', 'NEE', 12], ['Amambay', 'AMA', 13], ['Canindeyu', 'CAN', 14], ['Presidente Hayes', 'PHA', 15], ['Boqueron', 'BOQ', 16], ['Alto Paraguay', 'AAY', 17], ], toAbbr(fullName) { return this._states.find(a => a[0] === fullName)[1]; }, toFullName(abbr) { return this._states.find(a => a[1] === abbr)[0]; }, toFullNameArray() { return this._states.map(a => a[0]); }, toAbbrArray() { return this._states.map(a => a[1]); }, fromId(id) { return this._states.find(a => a[2] === id); } }; const DEFAULT_VISIBLE_AT_ZOOM = 6; const SETTINGS_STORE_NAME = 'wme_gis_layers'; const COUNTIES_URL = 'https://analisis.stp.gov.py:443/user/ine/api/v2/'; // const COUNTIES_URL2 = 'https://services2.arcgis.com/tnyi76ruua1nbtl3/ArcGIS/rest/services/Paraguay_Interactive/FeatureServer/0'; const COUNTIES_URL2 = 'https://services2.arcgis.com/Xim64FzemN4fqY1y/ArcGIS/rest/services/PY_Departamentos_y_Municipios/FeatureServer/0'; const ALERT_UPDATE = false; const SCRIPT_NAME = GM_info.script.name; const SCRIPT_VERSION = GM_info.script.version; const DOWNLOAD_URL = 'https://greasyfork.org/scripts/388277-wme-paraguay-gis-layers/code/WME%20Paraguay%20GIS%20Layers.user.js'; const SCRIPT_VERSION_CHANGES = []; let _mapLayer = null; let _roadLayer = null; let _settings = {}; let _ignoreFetch = false; let _lastToken = {}; const DEBUG = true; //function log(message) { console.log('PY GIS Layers:', message); } function logError(message) { console.error(`${SCRIPT_NAME}:`, message); } function logDebug(message) { if (DEBUG) console.debug(`${SCRIPT_NAME}:`, message); } // function logWarning(message) { console.warn('PY GIS Layers:', message); } let _layerSettingsDialog; class LayerSettingsDialog { constructor() { this._$titleText = $('<span>'); this._$closeButton = $('<span>', { style: 'cursor:pointer;padding-left:4px;font-size:17px;color:#d6e6f3;float:right;', class: 'fa fa-window-close' }).click(() => this._onCloseButtonClick()); this._$shiftUpButton = LayerSettingsDialog._createShiftButton('fa-angle-up').click(() => this._onShiftButtonClick(0, 1)); this._$shiftLeftButton = LayerSettingsDialog._createShiftButton('fa-angle-left').click(() => this._onShiftButtonClick(-1, 0)); this._$shiftRightButton = LayerSettingsDialog._createShiftButton('fa-angle-right').click(() => this._onShiftButtonClick(1, 0)); this._$shiftDownButton = LayerSettingsDialog._createShiftButton('fa-angle-down').click(() => this._onShiftButtonClick(0, -1)); this._$resetButton = $('<button>', { class: 'form-control', style: 'height: 24px; width: auto; padding: 2px 6px 0px 6px; display: inline-block; float: right;' }).text('Reset').click(() => this._onResetButtonClick()); this._dialogDiv = $('<div>', { style: 'position: fixed; top: 15%; left: 400px; width: 200px; z-index: 100; background-color: #73a9bd; border-width: 1px; border-style: solid;' + 'border-radius: 10px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7); border-color: #50667b; padding: 4px;' }).append($('<div>').append( // The extra div is needed here. When the header text wraps, the main dialog div won't expand properly without it. // HEADER $('<div>', { style: 'border-radius:5px 5px 0px 0px; padding: 4px; color: #fff; font-weight: bold; text-align:left; cursor: default;' }).append( this._$closeButton, this._$titleText ), // BODY $('<div>', { style: 'border-radius: 5px; width: 100%; padding: 4px; background-color:#d6e6f3; display:inline-block; margin-right:5px;' }).append( this._$resetButton, $('<input>', { type: 'radio', id: 'gisLayerShiftAmt1', name: 'gisLayerShiftAmt', value: '1', checked: 'checked' }), $('<label>', { for: 'gisLayerShiftAmt1' }).text('1m'), $('<input>', { type: 'radio', id: 'gisLayerShiftAmt10', name: 'gisLayerShiftAmt', value: '10', style: 'margin-left: 6px' }), $('<label>', { for: 'gisLayerShiftAmt10' }).text('10m'), $('<div>', { style: 'padding: 4px' }).append( $('<table>', { style: 'table-layout:fixed; width:60px; height:84px; margin-left:auto;margin-right:auto;' }).append( $('<tr>', { style: 'width: 20px; height: 28px;' }).append( $('<td>', { align: 'center' }), $('<td>', { align: 'center' }).append(this._$shiftUpButton), $('<td>', { align: 'center' }) ), $('<tr>', { style: 'width: 20px; height: 28px;' }).append( $('<td>', { align: 'center' }).append(this._$shiftLeftButton), $('<td>', { align: 'center' }), $('<td>', { align: 'center' }).append(this._$shiftRightButton) ), $('<tr>', { style: 'width: 20px; height: 28px;' }).append( $('<td>', { align: 'center' }), $('<td>', { align: 'center' }).append(this._$shiftDownButton), $('<td>', { align: 'center' }) ) ) ) ) )); this.hide(); this._dialogDiv.appendTo('body'); if (typeof jQuery.ui !== 'undefined') { const that = this; this._dialogDiv.draggable({ // Gotta nuke the height setting the dragging inserts otherwise the panel cannot dynamically resize stop() { that._dialogDiv.css('height', ''); } }); } } get gisLayer() { return this._gisLayer; } set gisLayer(value) { if (value !== this._gisLayer) { this._gisLayer = value; this.title = value.name; } } get title() { return this._$titleText.text(); } set title(value) { this._$titleText.text(value); } // eslint-disable-next-line class-methods-use-this getShiftAmount() { return $('input[name=gisLayerShiftAmt]:checked').val(); } show() { this._dialogDiv.show(); } hide() { this._dialogDiv.hide(); } _onCloseButtonClick() { this.hide(); } _onShiftButtonClick(x, y) { const shiftAmount = this.getShiftAmount(); x *= shiftAmount; y *= shiftAmount; this._shiftLayerFeatures(x, y); const { id } = this._gisLayer; let offset = _settings.getLayerSetting(id, 'offset'); if (!offset) { offset = { x: 0, y: 0 }; _settings.setLayerSetting(id, 'offset', offset); } offset.x += x; offset.y += y; saveSettingsToStorage(); } _onResetButtonClick() { const offset = _settings.getLayerSetting(this._gisLayer.id, 'offset'); if (offset) { this._shiftLayerFeatures(offset.x * -1, offset.y * -1); delete _settings.layers[this._gisLayer.id].offset; saveSettingsToStorage(); } } _shiftLayerFeatures(x, y) { const layer = this.gisLayer.isRoadLayer ? _roadLayer : _mapLayer; layer.getFeaturesByAttribute('layerID', this.gisLayer.id).forEach(f => f.geometry.move(x, y)); layer.redraw(); } static _createShiftButton(fontAwesomeClass) { return $('<button>', { class: 'form-control', style: 'cursor:pointer;font-size:14px;padding: 3px;border-radius: 5px;width: 21px;height: 21px;' }).append( $('<i>', { class: 'fa', style: 'vertical-align: super' }).addClass(fontAwesomeClass) ); } } function loadSettingsFromStorage() { const loadedSettings = $.parseJSON(localStorage.getItem(SETTINGS_STORE_NAME)); const defaultSettings = { lastVersion: null, visibleLayers: [], onlyShowApplicableLayers: false, selectedStates: [], enabled: true, fillParcels: false, toggleHnsOnlyShortcut: '', oneTimeAlerts: {}, layers: {} }; _settings = loadedSettings || defaultSettings; Object.keys(defaultSettings).forEach(prop => { if (!_settings.hasOwnProperty(prop)) { _settings[prop] = defaultSettings[prop]; } }); _settings.getLayerSetting = function getLayerSetting(layerID, settingName) { const layerSettings = this.layers[layerID]; if (!layerSettings) { return undefined; } return layerSettings[settingName]; }; _settings.setLayerSetting = function setLayerSetting(layerID, settingName, value) { let layerSettings = this.layers[layerID]; if (!layerSettings) { layerSettings = {}; this.layers[layerID] = layerSettings; } layerSettings[settingName] = value; }; } function saveSettingsToStorage() { // Check for existance of action first, due to WME beta issue. if (W.accelerators.Actions.GisLayersAddrDisplay) { let keys = ''; const { shortcut } = W.accelerators.Actions.GisLayersAddrDisplay; if (shortcut) { if (shortcut.altKey) keys += 'A'; if (shortcut.shiftKey) keys += 'S'; if (shortcut.ctrlKey) keys += 'C'; if (keys.length) keys += '+'; if (shortcut.keyCode) keys += shortcut.keyCode; } _settings.toggleHnsOnlyShortcut = keys; } _settings.lastVersion = SCRIPT_VERSION; localStorage.setItem(SETTINGS_STORE_NAME, JSON.stringify(_settings)); logDebug('Configuracion guardada'); } function getUrl(extent, gisLayer) { if (gisLayer.spatialReference) { const proj = new OpenLayers.Projection(`EPSG:${gisLayer.spatialReference}`); let new_extent = extent.clone(); new_extent.transform(W.map.getProjectionObject(), proj); // do not transform original extent extent = new_extent; } let layerOffset = _settings.getLayerSetting(gisLayer.id, 'offset'); if (!layerOffset) { layerOffset = { x: 0, y: 0 }; } const geometry = { xmin: extent.left - layerOffset.x, ymin: extent.bottom - layerOffset.y, xmax: extent.right - layerOffset.x, ymax: extent.top - layerOffset.y, spatialReference: { wkid: gisLayer.spatialReference ? gisLayer.spatialReference : 102100, latestWkid: gisLayer.spatialReference ? gisLayer.spatialReference : 3857 } }; const geometryStr = JSON.stringify(geometry); let fields = gisLayer.labelFields.filter(function (e) { return e != ""}); if (gisLayer.labelHeaderFields) { fields = fields.concat(gisLayer.labelHeaderFields); } if (gisLayer.distinctFields) { fields = fields.concat(gisLayer.distinctFields); } let url = "" if (gisLayer.isFeatureSet) { url = gisLayer.url; // no extra filters for this resource (caching) } else if (gisLayer.serverType == "GeoNode"){ url = gisLayer.url; url += `&CRS=EPSG:${geometry.spatialReference.latestWkid}`; if (gisLayer.where){ var geom_field = gisLayer.cql_the_geom ? gisLayer.cql_the_geom : "the_geom"; //some geom fields are called simply 'geom' var where = `(bbox(${geom_field},${geometry.xmin},${geometry.ymin},${geometry.xmax},${geometry.ymax},'EPSG:${geometry.spatialReference.latestWkid}') and ${gisLayer.where})`; url += `&cql_filter=${encodeURIComponent(where)}`; } else { url += `&bbox=${geometry.xmin},${geometry.ymin},${geometry.xmax},${geometry.ymax},EPSG:${geometry.spatialReference.latestWkid}`; } url += `&srsName=EPSG:${geometry.spatialReference.latestWkid}&outputFormat=${gisLayer.output? gisLayer.output : "application/json"}`; } else if (gisLayer.serverType == "CartoDB"){ // url with query format 'SELECT the_geom_webmercator AS the_geom FROM user.table_name' url =`${gisLayer.url} WHERE ST_Intersects(ST_SetSRID(ST_MakeBox2D(ST_Point(${extent.left},${extent.top}),ST_Point(${extent.right},${extent.bottom})),3857),the_geom_webmercator)`; if (fields.length){ url = url.replace("the_geom_webmercator AS the_geom", `the_geom_webmercator AS the_geom%2C${encodeURIComponent(fields.join(','))}`) } if (gisLayer.where){ url += `AND ${gisLayer.where}`; } url += '&format=GeoJSON' } else { //default ArcGIS server url = `${gisLayer.url}/query?geometry=${encodeURIComponent(geometryStr)}`; url += gisLayer.token ? `&token=${gisLayer.token}` : ''; url += `&outFields=${encodeURIComponent(fields.join(','))}`; url += '&returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometryType=esriGeometryEnvelope'; url += `&inSR=${gisLayer.spatialReference ? gisLayer.spatialReference : '102100'}`; url += '&outSR=3857&f=json'; url += gisLayer.where ? `&where=${encodeURIComponent(gisLayer.where)}` : ''; } logDebug(`Request URL: ${url}`); return url; } function hashString(value) { let hash = 0; if (value.length === 0) return hash; for (let i = 0; i < value.length; i++) { const chr = value.charCodeAt(i); // eslint-disable-next-line no-bitwise hash = ((hash << 5) - hash) + chr; // eslint-disable-next-line no-bitwise hash |= 0; // Convert to 32bit integer } return hash; } function getCountiesUrl(extent) { const geometry = { xmin: extent.left, ymin: extent.bottom, xmax: extent.right, ymax: extent.top, spatialReference: { wkid: 102100, latestWkid: 3857 } }; const url = `${COUNTIES_URL2}/query?geometry=${encodeURIComponent(JSON.stringify(geometry))}`; return `${url}&outFields=NAME as BASENAME%2CCODE as STATE&returnGeometry=false&spatialRel=esriSpatialRelIntersects` + '&geometryType=esriGeometryEnvelope&inSR=102100&outSR=3857&f=json'; /*const url = `${COUNTIES_URL}sql?q=SELECT dist_desc_ AS BASENAME, dpto AS STATE FROM ine.paraguay_2019_distritos `; var gps1 = WazeWrap.Geometry.ConvertTo4326(extent.left, extent.top); var gps2 = WazeWrap.Geometry.ConvertTo4326(extent.right, extent.bottom); return `${url} WHERE ST_Intersects( ST_SetSRID( ST_MakeBox2D( ST_Point(${gps1.lon},${gps1.lat}), ST_Point(${gps2.lon},${gps2.lat}) ), 4326 ), the_geom)`;*/ } let _countiesInExtent = []; let _statesInExtent = []; function getFetchableLayers(getInvisible) { if (W.map.getZoom() < 12 - 12) return []; //TODO: CHECK THIS LINE return _gisLayers.filter(gisLayer => { const isValidUrl = gisLayer.url && gisLayer.url.trim().length > 0; const isVisible = (getInvisible || _settings.visibleLayers.includes(gisLayer.id)) && _settings.selectedStates.includes(gisLayer.state); const isInState = gisLayer.state === 'PRY' || _countiesInExtent.some(county => county.stateInfo[1] === gisLayer.state); // Be sure to use hasOwnProperty when checking this, since 0 is a valid value. const isValidZoom = getInvisible || W.map.getZoom() - 12 >= (gisLayer.hasOwnProperty('visibleAtZoom') ? gisLayer.visibleAtZoom : DEFAULT_VISIBLE_AT_ZOOM); return isValidUrl && isInState && isVisible && isValidZoom; }); } function filterLayerCheckboxes() { const applicableLayers = getFetchableLayers(true).filter(layer => { const hasCounties = layer.hasOwnProperty('counties'); return (hasCounties && layer.counties.some(countyName => _countiesInExtent.some(county => county.name === countyName.toLowerCase() && layer.state === county.stateInfo[1]))) || !hasCounties; }); const statesToHide = STATES.toAbbrArray(); _gisLayers.forEach(gisLayer => { const id = `#gis-layer-${gisLayer.id}-container`; if (!_settings.onlyShowApplicableLayers || applicableLayers.includes(gisLayer)) { $(id).show(); $(`#gis-layers-for-${gisLayer.state}`).show(); const idx = statesToHide.indexOf(gisLayer.state); if (idx > -1) statesToHide.splice(idx, 1); } else { $(id).hide(); } }); if (_settings.onlyShowApplicableLayers) { statesToHide.forEach(st => $(`#gis-layers-for-${st}`).hide()); } } function convertFeatureGeometry(gisLayer, featureGeometry) { if (gisLayer.spatialReference) { const proj = new OpenLayers.Projection(`EPSG:${gisLayer.spatialReference}`); featureGeometry.transform(proj, W.map.getProjectionObject()); } return featureGeometry; } function setStateFullAddress() { if (document.getElementsByClassName("location-info")){ var full = document.getElementsByClassName("location-info")[0]; if (full != undefined){ var yy = full.innerText; if (yy.includes("Paraguay")){ var deptos = _statesInExtent.join(', '); yy = yy.replace(/\[.*\]/g, ''); yy += " [" + deptos + "]"; document.getElementsByClassName("location-info")[0].innerText = yy; } } } } const ROAD_ABBR = [ [/\bAVDA./gi, 'Av.'], [/\bAVENIDA/gi, 'Av.'], [/\bCOURT$/, 'CT'], [/\bDRIVE$/, 'DR'], [/\bLANE$/, 'LN'], [/\bPARK$/, 'PK'], [/\bPLACE$/, 'PL'], [/\bROAD$/, 'RD'], [/\bSTREET$/, 'ST'], [/\bTERRACE$/, 'TER'] ]; function processFeatures(data, token, gisLayer) { const features = []; if (data.skipIt) { // do nothing } else if (data.error) { logError(`Error in layer "${gisLayer.name}": ${data.error.message}`); } else { let items = {} if (gisLayer.isFeatureSet){ // storing result as cache if not already there if (!sessionStorage.getItem(gisLayer.id)){ sessionStorage.setItem(gisLayer.id, JSON.stringify(data)); } if (gisLayer.isFeatureSet == 1) { items = data.layers[0].featureSet.features; } else if (gisLayer.isFeatureSet == 2){ // 2 is for GeoNode items = data.features; } else if (gisLayer.isFeatureSet == 3){ // RawData items = data; } } else { items = data.features || []; } if (!token.cancel) { let error = false; const distinctValues = []; items.forEach(item => { let skipIt = false; if (!token.cancel && !error) { let feature; let featureGeometry; let area; if (gisLayer.distinctFields) { if (distinctValues.some(v => gisLayer.distinctFields.every( fld => v[fld] === item.attributes[fld] ))) { skipIt = true; } else { const dist = {}; gisLayer.distinctFields.forEach(fld => (dist[fld] = item.attributes[fld])); distinctValues.push(dist); } } if (!skipIt) { let isPolyLine = false; let layerOffset = _settings.getLayerSetting(gisLayer.id, 'offset'); if (!layerOffset) { layerOffset = { x: 0, y: 0 }; } // Special handling for this layer, because it doesn't have a geometry property. // Coordinates are stored in the attributes. // if (gisLayer.id === 'nc-richmond-co-pts') { // const pt = new OpenLayers.Geometry.Point(item.attributes.XCOOR, item.attributes.YCOOR); // pt.transform(W.map.getOLMap().displayProjection, W.map.getProjectionObject()); // item.geometry = pt; // } if (!item.geometry && ["RawPointData",].indexOf(gisLayer.serverType) >= 0){ item.geometry = "RawPointData" } if (item.geometry) { if (item.geometry.x) { featureGeometry = new OpenLayers.Geometry.Point( item.geometry.x + layerOffset.x, item.geometry.y + layerOffset.y ); } else if (item.geometry.points) { // @TODO Fix for multiple points instead of just grabbing first. featureGeometry = new OpenLayers.Geometry.Point( item.geometry.points[0][0] + layerOffset.x, item.geometry.points[0][1] + layerOffset.y ); } else if (item.geometry.rings) { const rings = []; item.geometry.rings.forEach(ringIn => { const pnts = []; for (let i = 0; i < ringIn.length; i++) { pnts.push(new OpenLayers.Geometry.Point( ringIn[i][0] + layerOffset.x, ringIn[i][1] + layerOffset.y )); } rings.push(new OpenLayers.Geometry.LinearRing(pnts)); }); featureGeometry = new OpenLayers.Geometry.Polygon(rings); if (gisLayer.areaToPoint) { featureGeometry = featureGeometry.getCentroid(); } else { area = featureGeometry.getArea(); } } else if (data.geometryType === 'esriGeometryPolyline') { // We have to handle polylines differently since each item can have multiple features. // In terms of ArcGIS, each feature's geometry can have multiple paths. For instance // a single road can be broken into parts that are physically not connected to each other. let label = ''; const hasVisibleAtZoom = gisLayer.hasOwnProperty('visibleAtZoom'); const hasLabelsVisibleAtZoom = gisLayer.hasOwnProperty('labelsVisibleAtZoom'); const displayLabelsAtZoom = hasLabelsVisibleAtZoom ? gisLayer.labelsVisibleAtZoom : (hasVisibleAtZoom ? gisLayer.visibleAtZoom : DEFAULT_VISIBLE_AT_ZOOM) + 1; if (gisLayer.labelHeaderFields) { label = `${gisLayer.labelHeaderFields.map( fieldName => item.attributes[fieldName] ).join(' ').trim()}\n`; } if (W.map.getZoom() - 12 >= displayLabelsAtZoom || area >= 5000) { //TODO: CHECK THIS LINE label += gisLayer.labelFields.map( fieldName => item.attributes[fieldName] ).join(' ').trim(); if (gisLayer.processLabel) { label = gisLayer.processLabel(label, item.attributes); label = label ? label.trim() : ''; } } // Use Turf library to clip the geometry to the screen bounds. // This allows labels to stay in view on very long roads. const mls = turf.multiLineString(item.geometry.paths); const e = W.map.getExtent(); const bbox = [e.left, e.bottom, e.right, e.top]; const clipped = turf.bboxClip(mls, bbox); if (clipped.geometry.type === 'LineString') { item.geometry.paths = [clipped.geometry.coordinates]; } else if (clipped.geometry.type === 'MultiLineString') { item.geometry.paths = clipped.geometry.coordinates; } item.geometry.paths.forEach(path => { const pointList = []; path.forEach(point => pointList.push(new OpenLayers.Geometry.Point( point[0] + layerOffset.x, point[1] + layerOffset.y ))); featureGeometry = new OpenLayers.Geometry.LineString(pointList); featureGeometry.skipDupeCheck = true; const attributes = { layerID: gisLayer.id, label }; const lineFeature = new OpenLayers.Feature.Vector(featureGeometry, attributes); features.push(lineFeature); }); isPolyLine = true; } else if (["GeoNode", "CartoDB"].indexOf(gisLayer.serverType) >= 0){ if (item.geometry.type == "GeometryCollection") { let props = item.properties; item = item.geometry.geometries[0]; item.geometry = item; item.properties = props; } if (item.geometry.type == "Point") { featureGeometry = new OpenLayers.Geometry.Point( item.geometry.coordinates[0] + layerOffset.x, item.geometry.coordinates[1] + layerOffset.y ); } else if (item.geometry.type == "MultiPoint") { const rings = []; const pnts = []; item.geometry.coordinates.forEach(ringIn => { pnts.push(new OpenLayers.Geometry.Point( ringIn[0] + layerOffset.x, ringIn[1] + layerOffset.y )); }); rings.push(new OpenLayers.Geometry.LinearRing(pnts)); featureGeometry = new OpenLayers.Geometry.Polygon(rings); } else if (item.geometry.type == "Polygon") { const rings = []; item.geometry.coordinates.forEach(ringIn => { const pnts = []; for (let i = 0; i < ringIn.length; i++) { pnts.push(new OpenLayers.Geometry.Point( ringIn[i][0] + layerOffset.x, ringIn[i][1] + layerOffset.y )); } rings.push(new OpenLayers.Geometry.LinearRing(pnts)); }); featureGeometry = new OpenLayers.Geometry.Polygon(rings); if (gisLayer.areaToPoint) { featureGeometry = featureGeometry.getCentroid(); } else { area = featureGeometry.getArea(); } } else if (item.geometry.type == "MultiPolygon") { const source = item.geometry.coordinates[0]; const polygonList = []; for (var i = 0; i < source.length; i += 1) { const pointList = []; for (var j = 0; j < source[i].length; j += 1) { var point = new OpenLayers.Geometry.Point( source[i][j][0], source[i][j][1] ); pointList.push(point); } var linearRing = new OpenLayers.Geometry.LinearRing(pointList); var polygon = new OpenLayers.Geometry.Polygon([linearRing]); polygonList.push(polygon); } featureGeometry = new OpenLayers.Geometry.MultiPolygon(polygonList); } else if (item.geometry.type == "MultiLineString") { const pointList = []; item.geometry.coordinates.forEach(path => { path.forEach(point => pointList.push(new OpenLayers.Geometry.Point( point[0] + layerOffset.x, point[1] + layerOffset.y ))); }); featureGeometry = new OpenLayers.Geometry.LineString(pointList); featureGeometry.skipDupeCheck = true; } else if (item.geometry.type == "LineString") { const pointList = []; item.geometry.coordinates.forEach(point => { pointList.push(new OpenLayers.Geometry.Point( point[0] + layerOffset.x, point[1] + layerOffset.y )); }); featureGeometry = new OpenLayers.Geometry.LineString(pointList); } featureGeometry = convertFeatureGeometry(gisLayer, featureGeometry); } else if (["RawPointData",].indexOf(gisLayer.serverType) >= 0){ featureGeometry = new OpenLayers.Geometry.Point(item[`${gisLayer.processLon}`] + layerOffset.x, item[`${gisLayer.processLat}`] + layerOffset.y); featureGeometry = convertFeatureGeometry(gisLayer, featureGeometry); } else { logDebug(`Unexpected feature type in layer: ${JSON.stringify(item)}`); logError(`Error: Unexpected feature type in layer "${gisLayer.name}"`); error = true; } if (!error && !isPolyLine) { const hasVisibleAtZoom = gisLayer.hasOwnProperty('visibleAtZoom'); const hasLabelsVisibleAtZoom = gisLayer.hasOwnProperty('labelsVisibleAtZoom'); const displayLabelsAtZoom = hasLabelsVisibleAtZoom ? gisLayer.labelsVisibleAtZoom : (hasVisibleAtZoom ? gisLayer.visibleAtZoom : DEFAULT_VISIBLE_AT_ZOOM) + 1; let label = ''; let attrs = []; if (["GeoNode", "CartoDB"].indexOf(gisLayer.serverType) >= 0){ attrs = item.properties; } else if (["RawPointData"].indexOf(gisLayer.serverType) >= 0) { attrs = item; } else { attrs = item.attributes; } if (gisLayer.labelHeaderFields) { label = `${gisLayer.labelHeaderFields.map( fieldName => attrs[fieldName] ).join(' ').trim()}\n`; } if (W.map.getZoom() - 12 >= displayLabelsAtZoom || area >= 5000) { label += gisLayer.labelFields.map( fieldName => attrs[fieldName] ).join(' ').trim(); if (gisLayer.processLabel) { label = gisLayer.processLabel(label, attrs); label = label ? label.trim() : ''; } } if (label && [ LAYER_STYLES.points, LAYER_STYLES.parcels, LAYER_STYLES.state_points, LAYER_STYLES.state_parcels ].includes(gisLayer.style)) { if (_settings.addrLabelDisplay === 'hn') { const m = label.match(/^\d+/); label = m ? m[0] : ''; } else if (_settings.addrLabelDisplay === 'street') { const m = label.match(/^(?:\d+\s)?(.*)/); label = m ? m[1].trim() : ''; } else if (_settings.addrLabelDisplay === 'none') { label = ''; } } const attributes = { layerID: gisLayer.id, label }; if (gisLayer.isFeatureSet){ // avoid drawing features that are not in extent const isFeatureInExtent = W.map.getExtent().intersectsBounds(featureGeometry.getBounds()); if (!isFeatureInExtent) return; } feature = new OpenLayers.Feature.Vector(featureGeometry, attributes); features.push(feature); } } } } }); } } if (!token.cancel) { // Check for duplicate geometries. for (let i = 0; i < features.length; i++) { const f1 = features[i]; let labels = [f1.attributes.label]; if (!f1.geometry.skipDupeCheck) { const c1 = f1.geometry.getCentroid(); for (let j = i + 1; j < features.length; j++) { const f2 = features[j]; if (!f2.geometry.skipDupeCheck && f2.geometry.getCentroid().distanceTo(c1) < 1) { features.splice(j, 1); labels.push(f2.attributes.label); j--; } } } labels = _.uniq(labels); if (labels.length > 1) { labels.forEach((label, idx) => { label = label.replace(/\n/g, ' ').replace(/\s{2,}/, ' ').replace(/\bUNIT\s.{1,5}$/i, '').trim(); ROAD_ABBR.forEach(abbr => (label = label.replace(abbr[0], abbr[1]))); labels[idx] = label; }); labels = _.uniq(labels); labels.sort(); if (labels.length > 12) { const len = labels.length; labels = labels.slice(0, 10); labels.push(`(${len - 10} more...)`); } f1.attributes.label = _.uniq(labels).join('\n'); } else { let { label } = f1.attributes; ROAD_ABBR.forEach(abbr => (label = label.replace(abbr[0], abbr[1]))); f1.attributes.label = label; } } const layer = gisLayer.isRoadLayer ? _roadLayer : _mapLayer; layer.removeFeatures(layer.getFeaturesByAttribute('layerID', gisLayer.id)); layer.addFeatures(features); if (features.length) { $(`label[for="gis-layer-${gisLayer.id}"]`).css({ color: '#00a009' }); } } } // END processFeatures() function fetchFeatures() { if (!_settings.enabled) return; if (_ignoreFetch) return; if (W.map.getZoom() < 12 - 12) {// TODO: CHECK THIS LINE filterLayerCheckboxes(); return; } _lastToken.cancel = true; _lastToken = { cancel: false, features: [], layersProcessed: 0 }; $('.gis-state-layer-label').css({ color: '#777' }); let _layersCleared = false; // if (layersToFetch.length) { const extent = W.map.getExtent(); GM_xmlhttpRequest({ url: getCountiesUrl(extent), method: 'GET', onload(res) { if (res.status < 400) { const data = $.parseJSON(res.responseText); if (data.error) { logError(`Error in PY Census counties data: ${data.error.message}`); } else { _countiesInExtent = data.features.map(feature => { const name = feature.attributes.BASENAME.toLowerCase(); const stateInfo = STATES.fromId(parseInt(feature.attributes.STATE, 10)); return { name, stateInfo }; }); logDebug(`PY Census counties: ${_countiesInExtent.map(c => `${c.name} ${c.stateInfo[1]}`).join(', ')}`); _statesInExtent = _.uniq(data.features.map( // eslint-disable-next-line radix feature => STATES.fromId(parseInt(feature.attributes.STATE, 10))[0] )); setStateFullAddress(); let layersToFetch; if (!_layersCleared) { _layersCleared = true; layersToFetch = getFetchableLayers(); // Remove features of any layers that won't be mapped. _gisLayers.forEach(gisLayer => { if (!layersToFetch.includes(gisLayer)) { _mapLayer.removeFeatures(_mapLayer.getFeaturesByAttribute('layerID', gisLayer.id)); _roadLayer.removeFeatures(_roadLayer.getFeaturesByAttribute('layerID', gisLayer.id)); } }); } layersToFetch = layersToFetch.filter(layer => !layer.hasOwnProperty('counties') || layer.counties.some(countyName => _countiesInExtent.some(county => county.name === countyName.toLowerCase() && layer.state === county.stateInfo[1]))); filterLayerCheckboxes(); logDebug(`Fetching ${layersToFetch.length} layers...`); logDebug(layersToFetch); layersToFetch.forEach(gisLayer => { const url = getUrl(extent, gisLayer); if (gisLayer.isFeatureSet){ // trying to retrieve cached data from sessionStorage let sessionValue = sessionStorage.getItem(gisLayer.id); if (sessionValue){ logDebug(`Processing features of ${gisLayer.id} from storage (RawData)...`); processFeatures($.parseJSON(sessionValue), {}, gisLayer); return; } } GM_xmlhttpRequest({ url, context: _lastToken, method: 'GET', headers: (gisLayer.customHeaders) ? $.parseJSON(gisLayer.customHeaders): {}, onload(res2) { if (res2.status < 400) { // Handle stupid issue where http 4## is considered success processFeatures($.parseJSON(res2.responseText), res2.context, gisLayer); } else { logDebug(`HTTP request error: ${JSON.stringify(res2)}`); logError(`Could not fetch layer "${gisLayer.id}". Request returned ${res2.status}`); $(`label[for="gis-layer-${gisLayer.id}"]`).css({ color: '#ff0000' }); } }, onerror(res3) { logDebug(`xmlhttpRequest error:${JSON.stringify(res3)}`); logError(`Could not fetch layer "${gisLayer.id}". An error was thrown.`); $(`label[for="gis-layer-${gisLayer.id}"]`).css({ color: '#ff0000' }); } }); }); } } else { logDebug(`HTTP request error: ${JSON.stringify(res)}`); logError(`Could not fetch counties from PY Census site. Request returned ${res.status}`); } }, onerror(res) { logDebug(`xmlhttpRequest error:${JSON.stringify(res)}`); logError('Could not fetch counties from PY Census site. An error was thrown.'); } }); } function showScriptInfoAlert() { /* Check version and alert on update */ if (ALERT_UPDATE && SCRIPT_VERSION !== _settings.lastVersion) { // alert(SCRIPT_VERSION_CHANGES); let releaseNotes = ''; releaseNotes += '<p>What\'s New:</p>'; if (SCRIPT_VERSION_CHANGES.length > 0) { releaseNotes += '<ul>'; for (let idx = 0; idx < SCRIPT_VERSION_CHANGES.length; idx++) releaseNotes += `<li>${SCRIPT_VERSION_CHANGES[idx]}`; releaseNotes += '</ul>'; } else { releaseNotes += '<ul><li>Nothing major.</ul>'; } WazeWrap.Interface.ShowScriptUpdate(GM_info.script.name, SCRIPT_VERSION, releaseNotes, GF_URL); } } function setEnabled(value) { _settings.enabled = value; saveSettingsToStorage(); _mapLayer.setVisibility(value); _roadLayer.setVisibility(value); const color = value ? '#00bd00' : '#ccc'; $('span#gis-layers-power-btn').css({ color }); if (value) fetchFeatures(); $('#layer-switcher-item_gis_layers').prop('checked', value); } function onGisLayerToggleChanged() { const checked = $(this).is(':checked'); const layerId = $(this).data('layer-id'); const idx = _settings.visibleLayers.indexOf(layerId); if (checked) { const gisLayer = _gisLayers.find(l => l.id === layerId); if (gisLayer.oneTimeAlert) { const lastAlertHash = _settings.oneTimeAlerts[layerId]; const newAlertHash = hashString(gisLayer.oneTimeAlert); if (lastAlertHash !== newAlertHash) { // alert(`Layer: ${gisLayer.name}\n\nMessage:\n${gisLayer.oneTimeAlert}`); WazeWrap.Alerts.info(GM_info.script.name, `Layer: ${gisLayer.name}<br><br>Message:<br>${gisLayer.oneTimeAlert}`); _settings.oneTimeAlerts[layerId] = newAlertHash; saveSettingsToStorage(); } } if (idx === -1) _settings.visibleLayers.push(layerId); } else if (idx > -1) _settings.visibleLayers.splice(idx, 1); if (!_ignoreFetch) { saveSettingsToStorage(); fetchFeatures(); } } function onOnlyShowApplicableLayersChanged() { _settings.onlyShowApplicableLayers = $(this).is(':checked'); saveSettingsToStorage(); fetchFeatures(); } function onStateCheckChanged(evt) { const state = evt.data; const idx = _settings.selectedStates.indexOf(state); if (evt.target.checked) { if (idx === -1) _settings.selectedStates.push(state); } else if (idx > -1) _settings.selectedStates.splice(idx, 1); if (!_ignoreFetch) { saveSettingsToStorage(); initLayersTab(); fetchFeatures(); } } function onLayerCheckboxChanged(checked) { setEnabled(checked); } function setFillParcels(doFill) { [LAYER_STYLES.parcels, LAYER_STYLES.state_parcels].forEach(style => { style.fillOpacity = doFill ? 0.2 : 0; }); } function onFillParcelsCheckedChanged(evt) { const { checked } = evt.target; setFillParcels(checked); _settings.fillParcels = checked; saveSettingsToStorage(); fetchFeatures(); } function onMapMove() { if (_settings.enabled) fetchFeatures(); } function onRefreshLayersClick() { const $btn = $('#gis-layers-refresh'); if (!$btn.hasClass('fa-spin')) { $btn.css({ cursor: 'auto' }); $btn.addClass('fa-spin'); init(false); } } function onChevronClick(evt) { const $target = $(evt.currentTarget); $($target.children()[0]) .toggleClass('fa fa-fw fa-chevron-down') .toggleClass('fa fa-fw fa-chevron-right'); $($target.siblings()[0]).toggleClass('collapse'); } function doToggleABunch(evt, checkState) { _ignoreFetch = true; $(evt.target).closest('fieldset').find('input').prop('checked', !checkState).trigger('click'); _ignoreFetch = false; saveSettingsToStorage(); if (evt.data) initLayersTab(); fetchFeatures(); } function onSelectAllClick(evt) { doToggleABunch(evt, true); } function onSelectNoneClick(evt) { doToggleABunch(evt, false); } function onGisAddrDisplayChange(evt) { _settings.addrLabelDisplay = evt.target.value; saveSettingsToStorage(); fetchFeatures(); } function onAddressDisplayShortcutKey() { if (!$('#gisAddrDisplay-hn').is(':checked')) { $('#gisAddrDisplay-hn').click(); } else { $('#gisAddrDisplay-all').click(); } } function initLayer() { const rules = _gisLayers.map(gisLayer => new OpenLayers.Rule({ filter: new OpenLayers.Filter.Comparison({ type: OpenLayers.Filter.Comparison.EQUAL_TO, property: 'layerID', value: gisLayer.id }), symbolizer: gisLayer.style })); setFillParcels(_settings.fillParcels); const style = new OpenLayers.Style(DEFAULT_STYLE, { rules }); let existingLayer; let uniqueName; uniqueName = 'wmeGISLayersDefault'; existingLayer = W.map.layers.find(l => l.uniqueName === uniqueName); // Note: W.map.getLayerByUniqueName(...) isn't working. if (existingLayer) W.map.removeLayer(existingLayer); _mapLayer = new OpenLayers.Layer.Vector('PY GIS Layers - Default', { uniqueName, styleMap: new OpenLayers.StyleMap(style) }); uniqueName = 'wmeGISLayersRoads'; existingLayer = W.map.layers.find(l => l.uniqueName === uniqueName); // Note: W.map.getLayerByUniqueName(...) isn't wworking. if (existingLayer) W.map.removeLayer(existingLayer); _roadLayer = new OpenLayers.Layer.Vector('PY GIS Layers - Roads', { uniqueName, styleMap: new OpenLayers.StyleMap(ROAD_STYLE) }); _mapLayer.setVisibility(_settings.enabled); _roadLayer.setVisibility(_settings.enabled); W.map.addLayers([_roadLayer, _mapLayer]); } // END InitLayer function initLayersTab() { const user = W.loginManager.user.attributes.userName.toLowerCase(); const states = _.uniq(_gisLayers.map(l => l.state)).filter(st => _settings.selectedStates.includes(st)); $('#panel-gis-state-layers').empty().append( $('<div>', { class: 'controls-container' }).css({ 'padding-top': '0px' }).append( $('<input>', { type: 'checkbox', id: 'only-show-applicable-gis-layers' }).change( onOnlyShowApplicableLayersChanged ).prop('checked', _settings.onlyShowApplicableLayers), $('<label>', { for: 'only-show-applicable-gis-layers' }) .css({ 'white-space': 'pre-line' }).text('Solo mostrar capas aplicables') ), $('.gis-layers-state-checkbox:checked').length === 0 ? $('<div>').text('Marcar categoria de capas en solapa Configuraciones') : states.map(st => $('<fieldset>', { id: `gis-layers-for-${st}`, style: 'border:1px solid silver;padding:4px;border-radius:4px;-webkit-padding-before: 0;' }).append( $('<legend>', { style: 'margin-bottom:0px;border-bottom-style:none;width:auto;' }) .click(onChevronClick).append( $('<i>', { class: 'fa fa-fw fa-chevron-down', style: 'cursor: pointer;font-size: 12px;margin-right: 4px' }), $('<span>', { style: 'font-size:14px;font-weight:600;text-transform: uppercase; cursor: pointer' }).text(STATES.toFullName(st)) ), $('<div>', { id: `${st}_body` }).append( $('<div>').css({ 'font-size': '11px' }).append( $('<span>').append( 'Select ', $('<a>', { href: '#' }) .text('Todos') .click(onSelectAllClick), ' / ', $('<a>', { href: '#' }) .text('Ninguno') .click(onSelectNoneClick) ) ), $('<div>', { class: 'controls-container', style: 'padding-top:0px;' }).append( _gisLayers.filter(l => (l.state === st && (!PRIVATE_LAYERS.hasOwnProperty(l.id) || PRIVATE_LAYERS[l.id].includes(user)))) .map(gisLayer => { const id = `gis-layer-${gisLayer.id}`; return $('<div>', { class: 'controls-container', id: `${id}-container` }) .css({ 'padding-top': '0px', display: 'block' }) .append( $('<input>', { type: 'checkbox', id }) .data('layer-id', gisLayer.id) .change(onGisLayerToggleChanged) .prop('checked', _settings.visibleLayers.includes(gisLayer.id)), $('<label>', { for: id, class: 'gis-state-layer-label' }) .css({ 'white-space': 'pre-line' }) .text(`${gisLayer.name}${gisLayer.restrictTo ? ' *' : ''}`) .attr('title', gisLayer.restrictTo ? `Restringido a: ${gisLayer.restrictTo}` : '') .contextmenu(evt => { evt.preventDefault(); // TODO - enable the layer if it isn't already. // Tried using click function on the evt target, but that didn't work. _layerSettingsDialog.gisLayer = gisLayer; _layerSettingsDialog.show(); }) ); }) ) ) )) ); } function initSettingsTab() { const states = _.uniq(_gisLayers.map(l => l.state)); const createRadioBtn = (name, value, text, checked) => { const id = `${name}-${value}`; return [$('<input>', { type: 'radio', id, name, value }).prop('checked', checked), $('<label>', { for: id }).text(text).css({ paddingLeft: '15px', marginRight: '4px' })]; }; $('#panel-gis-layers-settings').empty().append( $('<fieldset>', { style: 'border:1px solid silver;padding:8px;border-radius:4px;-webkit-padding-before: 0;margin-top:-8px;' }).append( $('<legend>', { style: 'margin-bottom:0px;border-bottom-style:none;width:auto;' }).append($('<span>', { style: 'font-size:14px;font-weight:600;text-transform: uppercase;' }).text('Etiquetas')), $('<div>', { id: 'labelSettings' }).append( $('<div>', { class: 'controls-container' }).css({ 'padding-top': '2px' }).append( $('<label>', { style: 'font-weight:normal;' }).text('Addresses:'), createRadioBtn('gisAddrDisplay', 'hn', 'Nro Casa', _settings.addrLabelDisplay === 'hn'), createRadioBtn('gisAddrDisplay', 'street', 'Calle', _settings.addrLabelDisplay === 'street'), createRadioBtn('gisAddrDisplay', 'all', 'Ambos', _settings.addrLabelDisplay === 'all'), createRadioBtn('gisAddrDisplay', 'none', 'None', _settings.addrLabelDisplay === 'none'), $('<i>', { class: 'waze-tooltip', id: 'gisAddrDisplayInfo', 'data-toggle': 'tooltip', style: 'margin-left:8px; font-size:12px', 'data-placement': 'bottom', title: `This may not work properly for all layers. Please report issues to ${SCRIPT_AUTHOR}.` }).tooltip() ) ) ), $('<fieldset>', { style: 'border:1px solid silver;padding:8px;border-radius:4px;-webkit-padding-before: 0;' }).append( $('<legend>', { style: 'margin-bottom:0px;border-bottom-style:none;width:auto;' }).append($('<span>', { style: 'font-size:14px;font-weight:600;text-transform: uppercase;' }).text('Categoria de Capas')), $('<div>', { id: 'states_body' }).append( $('<div>').css({ 'font-size': '11px' }).append( $('<span>').append( 'Select ', $('<a>', { href: '#' }).text('All').click(true, onSelectAllClick), ' / ', $('<a>', { href: '#' }).text('None').click(true, onSelectNoneClick) ) ), $('<div>', { class: 'controls-container', style: 'padding-top:0px;' }).append( states.map(st => { const fullName = STATES.toFullName(st); const id = `gis-layer-enable-state-${st}`; return $('<div>', { class: 'controls-container' }) .css({ 'padding-top': '0px', display: 'block' }) .append( $('<input>', { type: 'checkbox', id, class: 'gis-layers-state-checkbox' }) .change(st, onStateCheckChanged) .prop('checked', _settings.selectedStates.includes(st)), $('<label>', { for: id }).css({ 'white-space': 'pre-line', color: '#777' }).text(fullName) ); }) ) ) ) ); $('#panel-gis-layers-settings').append( $('<fieldset>', { style: 'border:1px solid silver;padding:8px;border-radius:4px;-webkit-padding-before: 0;' }) .append( $('<legend>', { style: 'margin-bottom:0px;border-bottom-style:none;width:auto;' }) .append( $('<span>', { style: 'font-size:14px;font-weight:600;text-transform: uppercase;' }) .text('Apariencia') ), $('<div>', { class: 'controls-container' }).css({ 'padding-top': '2px' }).append( $('<input>', { type: 'checkbox', id: 'fill-parcels' }) .change(onFillParcelsCheckedChanged) .prop('checked', _settings.fillParcels), $('<label>', { for: 'fill-parcels' }).css({ 'white-space': 'pre-line', color: '#777' }).text('Llenar parcelas') ) ) ); $('input[name=gisAddrDisplay]').change(onGisAddrDisplayChange); } async function initTab(firstCall = true) { if (firstCall) { const { user } = W.loginManager; const content = $('<div>').append( $('<span>', { style: 'font-size:14px;font-weight:600' }).text('Paraguay GIS Layers'), $('<span>', { style: 'font-size:11px;margin-left:10px;color:#aaa;' }).text(GM_info.script.version), // <a href="https://docs.google.com/forms/d/e/1FAIpQLSfMhBxF0P6bn8dFfOoNTAF1LHBFXr5w9oXvzqsii_TfA-_Bmw/viewform?usp=pp_url&entry.831784226=test" target="_blank" style="color: #6290b7;font-size: 12px;margin-left: 8px;" title="Report broken layers, bugs, request new layers, script features">Report an issue</a> $('<a>', { href: REQUEST_FORM_URL.replace('{username}', user.userName), target: '_blank', style: 'color: #6290b7;font-size: 12px;margin-left: 8px;', title: 'Reportar capas rotas, bugs, solicitar nuevas capas, nuevas caracteristicas' }).text('Enviar una solicitud'), $('<span>', { id: 'gis-layers-refresh', class: 'fa fa-refresh', style: 'float: right;', 'data-toggle': 'tooltip', title: 'Obtener nuevas informaciones del planilla primaria y refrescar todas las capas.' }), '<ul class="nav nav-tabs">' + '<li class="active"><a data-toggle="tab" href="#panel-gis-state-layers" aria-expanded="true">' + 'Capas' + '</a></li>' + '<li><a data-toggle="tab" href="#panel-gis-layers-settings" aria-expanded="true">' + 'Configuracion' + '</a></li> ' + '</ul>', $('<div>', { class: 'tab-content', style: 'padding:8px;padding-top:2px' }).append( $('<div>', { class: 'tab-pane active', id: 'panel-gis-state-layers', style: 'padding: 4px 0px 0px 0px; width: auto' }), $('<div>', { class: 'tab-pane', id: 'panel-gis-layers-settings', style: 'padding: 4px 0px 0px 0px; width: auto' }) ) ).html(); const powerButtonColor = _settings.enabled ? '#00bd00' : '#ccc'; const labelText = $('<div>').append( $('<span>', { class: 'fa fa-power-off', id: 'gis-layers-power-btn', style: `margin-right: 5px;cursor: pointer;color: ${powerButtonColor};font-size: 13px;`, title: 'Activar/Desactivar Paraguay GIS Layers' }), $('<span>', { title: 'PY GIS Layers' }).text('PY GIS-L') ).html(); const { tabLabel, tabPane } = W.userscripts.registerSidebarTab('PY GIS-L'); tabLabel.innerHTML = labelText; tabPane.innerHTML = content; // Fix tab content div spacing. $(tabPane).parent().css({ width: 'auto', padding: '6px' }); await W.userscripts.waitForElementConnected(tabPane); $('#gis-layers-power-btn').click(evt => { evt.stopPropagation(); setEnabled(!_settings.enabled); }); $('#gis-layers-refresh').click(onRefreshLayersClick); } initSettingsTab(); initLayersTab(); } function initGui(firstCall = true) { initLayer(); if (firstCall) { initTab(true); WazeWrap.Interface.AddLayerCheckbox('Display', 'PY GIS Layers', _settings.enabled, onLayerCheckboxChanged); // W.map.events.register('moveend', null, onMapMove); WazeWrap.Events.register('moveend', null, onMapMove); showScriptInfoAlert(); } else { initTab(firstCall); } } async function loadSpreadsheetAsync() { let data; try { data = await $.getJSON(`${LAYER_DEF_SPREADSHEET_URL}?key=${DEC(API_KEY)}`); } catch (err) { throw new Error(`Spreadsheet call failed. (${err.status}: ${err.statusText})`); } const [[minVersion], fieldNames, ...layerDefRows] = data.values; const REQUIRED_FIELD_NAMES = [ 'state', 'name', 'id', 'counties', 'url', 'where', 'labelFields', 'processLabel', 'style', 'visibleAtZoom', 'labelsVisibleAtZoom', 'enabled', 'restrictTo', 'oneTimeAlert', "areaToPoint", "isFeatureSet", "serverType" ]; const result = { error: null }; const checkFieldNames = fldName => fieldNames.includes(fldName); if (SCRIPT_VERSION < minVersion) { result.error = `Script must be updated to at least version ${ minVersion} before layer definitions can be loaded.`; } else if (fieldNames.length < REQUIRED_FIELD_NAMES.length) { result.error = `Expected ${ REQUIRED_FIELD_NAMES.length} columns in layer definition data. Spreadsheet returned ${ fieldNames.length}.`; } else if (!REQUIRED_FIELD_NAMES.every(fldName => checkFieldNames(fldName))) { result.error = 'Script expected to see the following column names in the layer ' + `definition spreadsheet:\n${REQUIRED_FIELD_NAMES.join(', ')}\n` + `But the spreadsheet returned these:\n${fieldNames.join(', ')}`; } if (!result.error) { layerDefRows.filter(row => row.length).forEach(layerDefRow => { const layerDef = { enabled: '0' }; fieldNames.forEach((fldName, fldIdx) => { let value = layerDefRow[fldIdx]; if (value !== undefined && value.trim().length > 0) { value = value.trim(); if (fldName === 'counties' || fldName === 'labelFields') { value = value.split(',').map(item => item.trim()); } else if (fldName === 'processLabel') { try { // eslint-disable-next-line no-eval value = eval(`(function(label, fieldValues){${value}})`); } catch (ex) { logError(`Error loading label processing function for layer "${ layerDef.id}".`); logDebug(ex); } } else if (fldName === 'style') { layerDef.isRoadLayer = value === 'roads'; if (LAYER_STYLES.hasOwnProperty(value)) { value = LAYER_STYLES[value]; } else if (!layerDef.isRoadLayer) { // If style is not defined, try to read in as JSON (custom style) try { value = JSON.parse(value); } catch (ex) { // ignore error } } } else if (fldName === 'state') { value = value ? value.toUpperCase() : value; } else if (fldName === 'restrictTo') { try { const { user } = W.loginManager; const values = value.split(',').map(v => v.trim().toLowerCase()); layerDef.notAllowed = !values.some(entry => { const rankMatch = entry.match(/^r(\d)(\+am)?$/); if (rankMatch) { if (rankMatch[1] <= (user.attributes.rank + 1) && (!rankMatch[2] || user.attributes.isAreaManager)) { return true; } } else if (entry === 'am' && user.attributes.isAreaManager) { return true; } else if (entry === user.attributes.userName.toLowerCase()) { return true; } return false; }); } catch (ex) { logError(ex); } } layerDef[fldName] = value; } else if (fldName === 'labelFields') { layerDef[fldName] = ['']; } }); const enabled = layerDef.enabled && !['0', 'false', 'no', 'n'].includes(layerDef.enabled.toString().trim().toLowerCase()); if (!layerDef.notAllowed && (enabled || layerDef.restrictTo)) { _gisLayers.push(layerDef); } }); } return result; } function loadScriptUpdateMonitor() { try { const updateMonitor = new WazeWrap.Alerts.ScriptUpdateMonitor(SCRIPT_NAME, SCRIPT_VERSION, DOWNLOAD_URL, GM_xmlhttpRequest); updateMonitor.start(); } catch (ex) { // Report, but don't stop if ScriptUpdateMonitor fails. logError(ex); } } async function init(firstCall = true) { _gisLayers = []; if (firstCall) { loadScriptUpdateMonitor(); initRoadStyle(); loadSettingsFromStorage(); installPathFollowingLabels(); // W.accelerators.events.listeners was removed in WME beta, so check for it here before calling WazeWrap.Interface.Shortcut // Hopefully there will be a fix or workaround for this issue. if (W.accelerators.events.listeners) { new WazeWrap.Interface.Shortcut( 'GisLayersAddrDisplay', 'Activar/desactivar etiquetas/direcciones solo con numero casa (Paraguay GIS Layers)', 'layers', 'layersToggleGisAddressLabelDisplay', _settings.toggleHnsOnlyShortcut, onAddressDisplayShortcutKey, null ).add(); } window.addEventListener('beforeunload', saveSettingsToStorage, false); _layerSettingsDialog = new LayerSettingsDialog(); } const t0 = performance.now(); try { const result = await loadSpreadsheetAsync(); if (result.error) { logError(result.error); return; } // _layerRefinements.forEach(layerRefinement => { // const layerDef = _gisLayers.find(layerDef2 => layerDef2.id === layerRefinement.id); // if (layerDef) { // Object.keys(layerRefinement).forEach(fldName => { // const value = layerRefinement[fldName]; // if (fldName !== 'id' && layerDef.hasOwnProperty(fldName)) { // logDebug(`The "${fldName}" property of layer "${ // layerDef.id}" has a value hardcoded in the script, and also defined in the spreadsheet.` // + ' The spreadsheet value takes precedence.'); // } else if (value) layerDef[fldName] = value; // }); // } else { // logDebug(`Refined layer "${layerRefinement.id}" does not have a corresponding layer defined` // + ' in the spreadsheet. It can probably be removed from the script.'); // } // }); logDebug(`Loaded ${_gisLayers.length} layer definitions in ${Math.round(performance.now() - t0)} ms.`); initGui(firstCall); fetchFeatures(); $('#gis-layers-refresh').removeClass('fa-spin').css({ cursor: 'pointer' }); logDebug('Inicializado.'); } catch (err) { logError(err); } } function onWmeReady() { if (WazeWrap && WazeWrap.Ready) { logDebug('Inicializando...'); init(); } else { logDebug('Bootstrap ha fallado. Reintentando...'); setTimeout(onWmeReady, 100); } } function bootstrap() { if (typeof W === 'object' && W.userscripts?.state.isReady) { onWmeReady(); } else { document.addEventListener('wme-ready', onWmeReady, { once: true }); } } bootstrap(); /*eslint-disable*/ function installPathFollowingLabels() { // Copyright (c) 2015 by Jean-Marc.Viglino [at]ign.fr // Dual-licensed under the CeCILL-B Licence (http://www.cecill.info/) // and the Beerware license (http://en.wikipedia.org/wiki/Beerware), // feel free to use and abuse it in your projects (the code, not the beer ;-). // //* Overwrite the SVG function to allow text along a path //* setStyle function //* //* Add new options to the Openlayers.Style // pathLabel: {String} Label to draw on the path // pathLabelXOffset: {String} Offset along the line to start drawing text in pixel or %, default: "50%" // pathLabelYOffset: {Number} Distance of the line to draw the text // pathLabelCurve: {String} Smooth the line the label is drawn on (empty string for no) // pathLabelReadable: {String} Make the label readable (empty string for no) // * Extra standard values : all label and text values // * // * Method: removeChildById // * Remove child in a node. // * function removeChildById(node, id) { if (node.querySelector) { var c = node.querySelector('#' + id); if (c) node.removeChild(c); return; } // For old browsers var c = node.childNodes; if (c) for (var i = 0; i < c.length; i++) { if (c[i].id === id) { node.removeChild(c[i]); return; } } } // * // * Method: setStyle // * Use to set all the style attributes to a SVG node. // * // * Takes care to adjust stroke width and point radius to be // * resolution-relative // * // * Parameters: // * node - {SVGDomElement} An SVG element to decorate // * style - {Object} // * options - {Object} Currently supported options include // * 'isFilled' {Boolean} and // * 'isStroked' {Boolean} var setStyle = OpenLayers.Renderer.SVG.prototype.setStyle; OpenLayers.Renderer.SVG.LABEL_STARTOFFSET = { 'l': '0%', 'r': '100%', 'm': '50%' }; OpenLayers.Renderer.SVG.prototype.pathText = function (node, style, suffix) { var label = this.nodeFactory(null, 'text'); label.setAttribute('id', node._featureId + '_' + suffix); if (style.fontColor) label.setAttributeNS(null, 'fill', style.fontColor); if (style.fontStrokeColor) label.setAttributeNS(null, 'stroke', style.fontStrokeColor); if (style.fontStrokeWidth) label.setAttributeNS(null, 'stroke-width', style.fontStrokeWidth); if (style.fontOpacity) label.setAttributeNS(null, 'opacity', style.fontOpacity); if (style.fontFamily) label.setAttributeNS(null, 'font-family', style.fontFamily); if (style.fontSize) label.setAttributeNS(null, 'font-size', style.fontSize); if (style.fontWeight) label.setAttributeNS(null, 'font-weight', style.fontWeight); if (style.fontStyle) label.setAttributeNS(null, 'font-style', style.fontStyle); if (style.labelSelect === true) { label.setAttributeNS(null, 'pointer-events', 'visible'); label._featureId = node._featureId; } else { label.setAttributeNS(null, 'pointer-events', 'none'); } function getpath(pathStr, readeable) { var npath = pathStr.split(','); var pts = []; if (!readeable || Number(npath[0]) - Number(npath[npath.length - 2]) < 0) { while (npath.length) pts.push({ x: Number(npath.shift()), y: Number(npath.shift()) }); } else { while (npath.length) pts.unshift({ x: Number(npath.shift()), y: Number(npath.shift()) }); } return pts; } var path = this.nodeFactory(null, 'path'); var tpid = node._featureId + '_t' + suffix; var tpath = node.getAttribute('points'); if (style.pathLabelCurve) { var pts = getpath(tpath, style.pathLabelReadable); var p = pts[0].x + ' ' + pts[0].y; var dx, dy, s1, s2; dx = (pts[0].x - pts[1].x) / 4; dy = (pts[0].y - pts[1].y) / 4; for (var i = 1; i < pts.length - 1; i++) { p += ' C ' + (pts[i - 1].x - dx) + ' ' + (pts[i - 1].y - dy); dx = (pts[i - 1].x - pts[i + 1].x) / 4; dy = (pts[i - 1].y - pts[i + 1].y) / 4; s1 = Math.sqrt(Math.pow(pts[i - 1].x - pts[i].x, 2) + Math.pow(pts[i - 1].y - pts[i].y, 2)); s2 = Math.sqrt(Math.pow(pts[i + 1].x - pts[i].x, 2) + Math.pow(pts[i + 1].y - pts[i].y, 2)); p += ' ' + (pts[i].x + s1 * dx / s2) + ' ' + (pts[i].y + s1 * dy / s2); dx *= s2 / s1; dy *= s2 / s1; p += ' ' + pts[i].x + ' ' + pts[i].y; } p += ' C ' + (pts[i - 1].x - dx) + ' ' + (pts[i - 1].y - dy); dx = (pts[i - 1].x - pts[i].x) / 4; dy = (pts[i - 1].y - pts[i].y) / 4; p += ' ' + (pts[i].x + dx) + ' ' + (pts[i].y + dy); p += ' ' + pts[i].x + ' ' + pts[i].y; path.setAttribute('d', 'M ' + p); } else { if (style.pathLabelReadable) { var pts = getpath(tpath, style.pathLabelReadable); var p = ''; for (var i = 0; i < pts.length; i++) p += ' ' + pts[i].x + ' ' + pts[i].y; path.setAttribute('d', 'M ' + p); } else path.setAttribute('d', 'M ' + tpath); } path.setAttribute('id', tpid); var defs = this.createDefs(); removeChildById(defs, tpid); defs.appendChild(path); var textPath = this.nodeFactory(null, 'textPath'); textPath.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + tpid); var align = style.labelAlign || OpenLayers.Renderer.defaultSymbolizer.labelAlign; label.setAttributeNS(null, 'text-anchor', OpenLayers.Renderer.SVG.LABEL_ALIGN[align[0]] || 'middle'); textPath.setAttribute('startOffset', style.pathLabelXOffset || OpenLayers.Renderer.SVG.LABEL_STARTOFFSET[align[0]] || '50%'); label.setAttributeNS(null, 'dominant-baseline', OpenLayers.Renderer.SVG.LABEL_ALIGN[align[1]] || 'central'); if (style.pathLabelYOffset) label.setAttribute('dy', style.pathLabelYOffset); //textPath.setAttribute('method','stretch'); //textPath.setAttribute('spacing','auto'); textPath.textContent = style.pathLabel; label.appendChild(textPath); removeChildById(this.textRoot, node._featureId + '_' + suffix); this.textRoot.appendChild(label); }; OpenLayers.Renderer.SVG.prototype.setStyle = function (node, style, options) { if (node._geometryClass === 'OpenLayers.Geometry.LineString' && style.pathLabel) { if (node._geometryClass === 'OpenLayers.Geometry.LineString' && style.pathLabel) { var drawOutline = (!!style.labelOutlineWidth); // First draw text in halo color and size and overlay the // normal text afterwards if (drawOutline) { var outlineStyle = OpenLayers.Util.extend({}, style); outlineStyle.fontColor = outlineStyle.labelOutlineColor; outlineStyle.fontStrokeColor = outlineStyle.labelOutlineColor; outlineStyle.fontStrokeWidth = style.labelOutlineWidth; if (style.labelOutlineOpacity) outlineStyle.fontOpacity = style.labelOutlineOpacity; delete outlineStyle.labelOutlineWidth; this.pathText(node, outlineStyle, 'txtpath0'); } this.pathText(node, style, 'txtpath'); setStyle.apply(this, arguments); } } else setStyle.apply(this, arguments); return node; }; // * // * Method: drawGeometry // * Remove the textpath if no geometry is drawn. // * // * Parameters: // * geometry - {<OpenLayers.Geometry>} // * style - {Object} // * featureId - {String} // * // * Returns: // * {Boolean} true if the geometry has been drawn completely; null if // * incomplete; false otherwise var drawGeometry = OpenLayers.Renderer.SVG.prototype.drawGeometry; OpenLayers.Renderer.SVG.prototype.drawGeometry = function (geometry, style, id) { var rendered = drawGeometry.apply(this, arguments); if (rendered === false) { removeChildById(this.textRoot, id + '_txtpath'); removeChildById(this.textRoot, id + '_txtpath0'); } return rendered; }; // * // * Method: eraseGeometry // * Erase a geometry from the renderer. In the case of a multi-geometry, // * we cycle through and recurse on ourselves. Otherwise, we look for a // * node with the geometry.id, destroy its geometry, and remove it from // * the DOM. // * // * Parameters: // * geometry - {<OpenLayers.Geometry>} // * featureId - {String} var eraseGeometry = OpenLayers.Renderer.SVG.prototype.eraseGeometry; OpenLayers.Renderer.SVG.prototype.eraseGeometry = function (geometry, featureId) { eraseGeometry.apply(this, arguments); removeChildById(this.textRoot, featureId + '_txtpath'); removeChildById(this.textRoot, featureId + '_txtpath0'); }; } })();