Adds kadastr layer to the map
// ==UserScript==
// @name WME Kadastr 🇺🇦
// @author Andrei Pavlenko, Anton Shevchuk, madnut
// @version 2024.07.03.001
// @match https://beta.waze.com/*editor*
// @match https://www.waze.com/*editor*
// @exclude https://www.waze.com/*user/*editor/*
// @grant none
// @description Adds kadastr layer to the map
// @require https://greasyfork.org/scripts/24851-wazewrap/code/WazeWrap.js
// @require https://greasyfork.org/scripts/450160-wme-bootstrap/code/WME-Bootstrap.js
// @require https://update.greasyfork.org/scripts/450320/1281847/WME-UI.js
// @namespace https://greasyfork.org/uk/users/160654-waze-ukraine
// ==/UserScript==
/* jshint esversion: 11 */
/* global $ */
/* global W */
/* global WazeWrap */
/* global WMEUIHelper */
/* global WMEUI */
/* global OpenLayers */
(function () {
'use strict';
const NAME = 'kadastr-ua';
const LOCAL_STORAGE_ITEM = NAME + '-layer';
const KADASTR_ID = '#' + NAME;
const SWITCHER_ID = '#layer-switcher-item_map_' + NAME;
const AREA_DATA_ID = `.${NAME}-area-data`;
const LOCALITY_ID = `${NAME}-locality-name`;
const KAD_TITLE_EN = "Kadastr 🇺🇦";
const KAD_TITLE_UA = "Кадастр 🇺🇦";
const RESOLUTIONS = [156543.03390625,
78271.516953125,
39135.7584765625,
19567.87923828125,
9783.939619140625,
4891.9698095703125,
2445.9849047851562,
1222.9924523925781,
611.4962261962891,
305.74811309814453,
152.87405654907226,
76.43702827453613,
38.218514137268066,
19.109257068634033,
9.554628534317017,
4.777314267158508,
2.388657133579254,
1.194328566789627,
0.5971642833948135,
0.298582141697406,
0.1,
0.05,
0.025
];
let isLoaded = false;
let kadastrLayer, markerLayer, markerIcon;
let helper, tab;
let visibility = !!localStorage.getItem(LOCAL_STORAGE_ITEM);
const markerIconURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABR5JREFUeNrsXF1uEzEQdtKkSX/TqDwUISCIV6TkGQklHACpPQHhBuEG2xOQnIDkBqk4AImQeC4Sz9DwQh9AZUtp0iZtmakcRMG760121/bujGStlLU93vlmxp/t3aSurq4YiTpJkwkIAAKAhAAgAEgIAAKAhAAgAEgIAAKAhAAgAEgIgERIxqTBHj57UoELlpJDlQMo+1tv3u2b8kwp3c8DwOh1uGxDqUEpSDazofSgdAGMNgHg3+gbcGnwUpizOwSjiQXA+EEAeBsfjW4FYHgREBaA0CQAnL2+C6Uasqo+pjRdokELAPjk2gvB692ioabDZJ1OoPEZ19XjupMLgCLjawWCshQED45cft+v8S9hvKPJBTsdj2/8vpzNsnxmgaVTqVnSUQXS0UHSFmJdP8a3z87Z0WjEzsD4Ivk+HF1fcwBCMZ9nhdyin0jo8gVeMlIQeD/SzLJM3ZPzMft0ZLPDk1+Oxv9bsA7WxTbYVlLKfEzxT0F+Ug8aEj1/rkQPkbC1uqJtKlIRAVZUxp+mLuxLMhVZsY4Avtg6isr4M0ZCMcpFWtQRUJfJ+R7Gx1TRgbID5SkvO/w32y0SJOeEepQGyegEAFLMr+7pAo3cqL7/KPLQbv/xI4ww3Ot5LmqMfT8sFryoap33Ea8UJJN+vp0O/9BJgbwAw7dldAEQaMTXonubS3l2a3lJmzQUZQqqeVU4dk49LVnjo/C6LZ86fI3VRAAqXvx9fHkpujWYkZ1YvO0NQR0S64lK4gA4nUycbrUdcr5XFGCbtk9dsQZgw+3mhdj7p1sW82x3+NElNVbjtyJEMnTwSvDkmffsndoOvSOAJQ6ApIo2AOQWFpwoZWnWPp3aOulKNAAui6N5KGHNp65YA9Bzu4kHKiFsDdR96pIaq6kAHLgD4LgrUoVUsj1D+sE2VZH3u+iSGmssIwDF5RSrDQat+DB+xWkNsLaYDWSsxgHADzoGbnU2nfdorg/QwbA1CePXmMtB/6b3PtAgykOZqCdh10VVNp1mxXzODYS3YOCuKCXhb3gP6zgZH/tGHfOMMWiJ+kAGaeFntzq4Jf3l+KfU+S/IB371PF/Gw/p762syDOhBbCOAP1jfi47eXlmRpYplGeP76LOflDNhKW+VSBdMti+8BjE24wEAD8MJsiNjuNLGOluVYy1CwbY+jN/hY0vEShhfQbdlUsedtVV2F4wowd1vrCmwDbaVTGU2H1PkovLVRHzgV37a4GEKHqyfTSb/Hd5gusplMtdeP0PqeqnquwGlr6cDCDjh3Ve8HYO8v6RKuerNuDpTL0rHoBQAPun1FQ6hr2Li1SkCVHug8ghUDgBf+LQUqG6p+iZAtwiYLoDsCPXZKhZd2gLA30KL0iAWfSUppqX4FkM5ZDUfwPgVXZ5Zt7ciGjHRYSYAnBLuhahiTzXt1D0CwvbQhm4Pqx0AnBruhtD1rg6004QIQGkGTEun/5jCCAB5Whpkumjo+Fc12tHQkGipVrTTlBQU5KTZ0PkBtQYgAFqqHe00LQLm9eCG7g+nPQBz0FItaaeJETClpQMf9Qe60k4jAZhht9TSlXYaRUMFtBQnVK8/9cNjxpopz2TaN2JWQHUIgDloqdtbdR3daafpETD1cNE+kW2a9xsJAKeWIobTNIF2xiECRLTUGNoZCwAEtNQY2mk0DXWgpcwk2vmvZJjZ0jB8/GZHQByE/qyDACAASAgAAoCEACAASAgAAoCEACAASAgAAoCEAEiG/BZgAIdH+4FfAgoVAAAAAElFTkSuQmCC';
WMEUI.addStyle(`
#loader-thinking {
display: inline-block;
margin: 0;
padding: 0;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
`);
$(document)
.on('bootstrap.wme', ready);
function ready() {
if (isLoaded) {
// ugly fix for script duplications
return;
}
isLoaded = true;
polyfillOpenLayers();
createMarkerIcon();
addKadastrLayer();
addMarkerLayer();
createSwitcher();
createTab();
addHandlers();
}
function createSwitcher() {
let $ul = $('.collapsible-GROUP_DISPLAY');
let $li = document.createElement('li');
let checkbox = document.createElement("wz-checkbox");
checkbox.id = 'layer-switcher-item_map_' + NAME;
checkbox.className = "hydrated";
checkbox.checked = visibility;
checkbox.appendChild(document.createTextNode(KAD_TITLE_UA));
$li.append(checkbox);
$ul.append($li);
}
function switchLayer(flag) {
localStorage.setItem(LOCAL_STORAGE_ITEM, flag ? '1' : '');
visibility = flag;
kadastrLayer.setVisibility(flag);
markerLayer.setVisibility(flag);
if (flag) {
$(KADASTR_ID).tab('show');
$(AREA_DATA_ID).html("Оберіть об'єкт для отримання інформації");
}
}
function createTab() {
// Setup Tab with options
helper = new WMEUIHelper(NAME);
tab = helper.createTab(KAD_TITLE_UA, '');
let text = visibility
? "Оберіть об'єкт для отримання посилання"
: "Ввімкніть шар кадастру та оберіть об'єкт для отримання інформації";
tab.addText('area-data', text);
tab.inject();
}
function addKadastrLayer() {
const maxZoom = 22;
kadastrLayer = new OpenLayers.Layer.XYZ(
KAD_TITLE_EN,
'https://cdn.kadastr.live/tiles/raster/styles/parcels/${z}/${x}/${y}.png',
{
sphericalMercator: true,
isBaseLayer: false,
visibility: visibility,
zoomOffset: 12,
RESOLUTION_PROPERTIES: {},
resolutions: RESOLUTIONS,
serverResolutions: RESOLUTIONS.slice(0, maxZoom),
transitionEffect: "resize",
attribution: "",
uniqueName: NAME
}
);
W.map.addLayer(kadastrLayer);
}
function addMarkerLayer() {
markerLayer = new OpenLayers.Layer.Markers(
'Kadastr marker',
{
isBaseLayer: false,
visibility: visibility
}
);
W.map.addLayer(markerLayer);
}
function addHandlers() {
W.map.events.register('click', null, e => {
if (!visibility) return false;
let coordinates = W.map.getLonLatFromPixel(e.xy);
drawMarker(coordinates);
prepareLink(coordinates);
//fetchAreaData(coordinates);
$(KADASTR_ID).tab('show');
});
$(document).on('click', SWITCHER_ID, e => {
switchLayer(e.target.checked);
});
/* name, desc, group, title, shortcut, callback, scope */
new WazeWrap.Interface.Shortcut(
KAD_TITLE_EN,
'Відображення кадастру',
'layers',
KAD_TITLE_UA,
'S+K',
function () {
let checked = localStorage.getItem(LOCAL_STORAGE_ITEM);
switchLayer(!checked);
$(SWITCHER_ID).prop('checked', !checked);
},
null
).add();
}
function createMarkerIcon() {
const size = new OpenLayers.Size(50, 50);
const offset = new OpenLayers.Pixel(-(size.w/2), -size.h*0.8);
markerIcon = new OpenLayers.Icon(markerIconURL, size, offset);
}
function drawMarker(coordinates) {
let {lon, lat} = coordinates;
let lonLat = new OpenLayers.LonLat(lon, lat);
markerLayer.clearMarkers();
markerLayer.addMarker(new OpenLayers.Marker(lonLat, markerIcon));
}
function prepareLink(coordinates) {
// https://kadastr.live/parcel/4610136300:04:017:0088
let url = new URL('https://kadastr.live/parcel/');
//url.searchParams.set('cc', coordinates.lon +','+ coordinates.lat);
//url.searchParams.set('z', '16');
//url.searchParams.set('l', 'kadastr');
//url.searchParams.set('bl', 'ortho10k_all');
let $area = $(AREA_DATA_ID);
$area.html('');
//$area.html('<a href="'+ url.toString() +'" target="_blank">'+ url.hostname +'?cc='+ url.searchParams.get('cc') +'</a>');
$area.html('<a href="'+ url.toString() +'" target="_blank">'+ url.toString() +'</a>');
}
function fetchAreaData(coordinates) {
// https://cdn.kadastr.live/tiles/maps/kadastr/16/37131/22279.pbf
let $area = $(AREA_DATA_ID);
$area.html('<div id="loader-thinking">🤔</div> Завантаження');
let params = new URLSearchParams();
params.set('x', coordinates.lat);
params.set('y', coordinates.lon);
params.set('zoom', '13');
params.set('actLayers[]', 'kadastr');
fetch('https://waze.com.ua/kadastr_api', {
method: 'POST',
body: params
}).then(data => data.json()).then(data => {
let parcel = data.parcel;
let district = data.district;
if (!parcel) {
$area.html('😕 Ділянку не знайдено');
return;
}
parcel = parcel[0];
$area.html('');
$area.append(`
<div><strong>Ділянка: </strong>${parcel.cadnum}</div>
<div><strong>Область: </strong>${district.natoobl}</div>
<div><strong>Населений пункт: </strong><span id="${LOCALITY_ID}">не визначено</span></div>
<div><strong>Тип власності: </strong>${parcel.ownership}</div>
<div><strong>Цільове призначення: </strong>${parcel.use}</div>
<div><strong>Площа: </strong>${parcel.area+' '+parcel.unit_area}</div>
<div style="margin-top: 10px;"><a target="_blank" style="color: #26bae8; padding: 5px 0;" href="${parcel.linkToOwnershipInfo}">Інформація про ділянку</a></div>
`);
getLocalityName(parcel.koatuu, data.ikk.zona);
}).catch(err => {
$area.html('⛔ Помилка');
console.error(err);
});
}
function getLocalityName(koatuu, zoneNumber) {
fetch(`https://waze.com.ua/kadastr_locality?code=${koatuu}&zone_number=${zoneNumber}`)
.then(response => response.json())
.then(data => {
if (data.name) {
let localityName = data.name.toLowerCase().replace(/^./, data.name[0].toUpperCase());
if (/\//.test(localityName)) return;
$('#' + LOCALITY_ID).html(localityName);
}
});
}
/**
* This polyfill is required for OpenLayers.Icon functionality
* @link ?
*/
function polyfillOpenLayers() {
OpenLayers.Icon = OpenLayers.Class({
url: null,
size: null,
offset: null,
calculateOffset: null,
imageDiv: null,
px: null,
initialize: function initialize(a, b, c, d) {
this.url = a, this.size = b || {w: 20, h: 20}, this.offset = c || {
x: -(this.size.w / 2),
y: -(this.size.h / 2)
}, this.calculateOffset = d;
var e = OpenLayers.Util.createUniqueID("OL_Icon_");
this.imageDiv = OpenLayers.Util.createAlphaImageDiv(e)
},
destroy: function destroy() {
this.erase(), OpenLayers.Event.stopObservingElement(this.imageDiv.firstChild), this.imageDiv.innerHTML = "", this.imageDiv = null
},
clone: function clone() {
return new OpenLayers.Icon(this.url, this.size, this.offset, this.calculateOffset)
},
setSize: function setSize(a) {
null != a && (this.size = a), this.draw()
},
setUrl: function setUrl(a) {
null != a && (this.url = a), this.draw()
},
draw: function draw(a) {
return OpenLayers.Util.modifyAlphaImageDiv(this.imageDiv, null, null, this.size, this.url, "absolute"), this.moveTo(a), this.imageDiv
},
erase: function erase() {
null != this.imageDiv && null != this.imageDiv.parentNode && OpenLayers.Element.remove(this.imageDiv)
},
setOpacity: function setOpacity(a) {
OpenLayers.Util.modifyAlphaImageDiv(this.imageDiv, null, null, null, null, null, null, null, a)
},
moveTo: function moveTo(a) {
null != a && (this.px = a), null != this.imageDiv && (null == this.px ? this.display(!1) : (this.calculateOffset && (this.offset = this.calculateOffset(this.size)), OpenLayers.Util.modifyAlphaImageDiv(this.imageDiv, null, {
x: this.px.x + this.offset.x,
y: this.px.y + this.offset.y
})))
},
display: function display(a) {
this.imageDiv.style.display = a ? "" : "none"
},
isDrawn: function isDrawn() {
return this.imageDiv && this.imageDiv.parentNode && 11 !== this.imageDiv.parentNode.nodeType;
},
CLASS_NAME: "OpenLayers.Icon"
});
}
})();