// ==UserScript==
// @name WME JSON IBGE Loader
// @description Carrega a camada JSON/GeoJSON do IBGE diretamente no WME.
// @namespace [email protected]
// @version 1.0.2
// @author T0NINI
// @include https://www.waze.com/*/editor*
// @include https://www.waze.com/editor*
// @include https://beta.waze.com/*
// @exclude https://www.waze.com/*user/*editor/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=waze.com
// @grant none
// @require https://greasyfork.org/scripts/24851-wazewrap/code/WazeWrap.js
// ==/UserScript==
(function() {
'use strict';
const SCRIPT_VERSION = "1.0.2";
let lineLayer = null;
let clickControl = null;
let selectedFeature = null;
let isInitialized = false;
function bootstrap() {
if (typeof W === 'undefined' || typeof W.map === 'undefined' || typeof OpenLayers === 'undefined' || !WazeWrap.Ready) {
setTimeout(bootstrap, 500);
return;
}
initializeScript();
}
function initializeScript() {
if (isInitialized) return;
isInitialized = true;
console.log(`JSON IBGE Loader: Script inicializado com sucesso! (v${SCRIPT_VERSION})`);
createUI();
createPopup();
initializeHotkeyControls();
}
function createUI() {
const tabTitle = 'JSON IBGE Loader';
const navTabs = document.querySelector('#user-info .nav-tabs');
const tabContent = document.querySelector('#user-info .tab-content');
if (!navTabs || !tabContent || document.getElementById('sidepanel-jsonloader')) {
return;
}
const newTab = document.createElement('li');
newTab.innerHTML = `<a href="#sidepanel-jsonloader" data-toggle="tab">${tabTitle}</a>`;
navTabs.appendChild(newTab);
const newTabPanel = document.createElement('div');
newTabPanel.id = 'sidepanel-jsonloader';
newTabPanel.className = 'tab-pane';
newTabPanel.innerHTML = `
<style>
#sidepanel-jsonloader .side-panel-section { padding: 10px; border-bottom: 1px solid #e5e5e5; }
#sidepanel-jsonloader h4 { font-size: 28px; font-weight: 500; margin-bottom: 3px; }
#sidepanel-jsonloader h5 { margin-top: 0; margin-bottom: 10px; font-size: 14px; }
#sidepanel-jsonloader .w-100 { width: 100%; } #json-hotkey-input { cursor: pointer; }
</style>
<div class="side-panel-section"><h4>${tabTitle}</h4><p>Versão: <b>${SCRIPT_VERSION}</b></p></div>
<div class="side-panel-section">
<h5>Carregar Arquivo GeoJSON</h5>
<input type="file" id="json-file-input" accept=".json,.geojson" class="form-control" />
<p id="json-status"></p>
</div>
<div class="side-panel-section"><button id="json-clear-button" class="btn btn-danger w-100" disabled>Limpar Camada</button></div>
<div class="side-panel-section">
<h5>Ocultar Camada de Linhas (Atalho)</h5>
<input type="text" id="json-hotkey-input" class="form-control" placeholder="Definir novo atalho" readonly>
<p style="font-size: 11px; color: #888;">Pressione a tecla de atalho para mostrar/ocultar a camada. O padrão é <b>TAB</b>. Clique na caixa acima para definir um novo atalho.</p>
</div>`;
tabContent.appendChild(newTabPanel);
document.getElementById('json-file-input').addEventListener('change', handleFileSelect);
document.getElementById('json-clear-button').addEventListener('click', clearLayer);
}
function toggleLayerVisibility() {
if (lineLayer) {
lineLayer.setVisibility(!lineLayer.getVisibility());
}
}
function initializeHotkeyControls() {
const hotkeyInput = document.getElementById('json-hotkey-input');
if(!hotkeyInput) return;
const storageKey = 'wme_json_loader_hotkey';
const defaultHotkey = 'TAB';
hotkeyInput.value = localStorage.getItem(storageKey) || defaultHotkey;
hotkeyInput.addEventListener('keydown', (event) => {
event.preventDefault();
let hotkeyString = [
event.ctrlKey && 'Ctrl',
event.altKey && 'Alt',
event.shiftKey && 'Shift',
!['Control', 'Alt', 'Shift'].includes(event.key) && event.key.toUpperCase()
].filter(Boolean).join(' + ');
hotkeyInput.value = hotkeyString;
localStorage.setItem(storageKey, hotkeyString);
});
document.addEventListener('keydown', (event) => {
const activeEl = document.activeElement;
if (activeEl && (activeEl.tagName === 'INPUT' || activeEl.tagName === 'TEXTAREA')) return;
const targetHotkey = localStorage.getItem(storageKey) || defaultHotkey;
const currentPress = [
event.ctrlKey && 'Ctrl',
event.altKey && 'Alt',
event.shiftKey && 'Shift',
!['Control', 'Alt', 'Shift'].includes(event.key) && event.key.toUpperCase()
].filter(Boolean).join(' + ');
if (currentPress === targetHotkey) {
event.preventDefault();
toggleLayerVisibility();
}
});
}
function createPopup() {
if (document.getElementById('wme-json-popup')) return;
const styleSheet = document.createElement("style");
styleSheet.type = "text/css";
styleSheet.innerText = `
#wme-json-popup {
position: absolute; display: none; background: white; color: black; padding: 8px 12px;
border-radius: 6px; border: 1px solid #ccc; z-index: 2001; font-family: sans-serif;
font-size: 13px; font-weight: bold; pointer-events: none; transform: translate(-50%, -125%);
white-space: nowrap; box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
#wme-json-popup::after, #wme-json-popup::before { content: ''; position: absolute; top: 100%; left: 50%;
transform: translateX(-50%); border-style: solid; border-color: transparent; border-top-color: #ccc; }
#wme-json-popup::after { border-width: 8px; margin-top: -1px; border-top-color: white; }
#wme-json-popup::before { border-width: 9px; }`;
document.head.appendChild(styleSheet);
const popup = document.createElement('div');
popup.id = 'wme-json-popup';
document.getElementById('WazeMap').appendChild(popup);
}
function onFeatureSelect(feature, lonlat) {
const popup = document.getElementById('wme-json-popup');
const attr = feature.attributes;
const nomeCompleto = [attr.NM_TIP_LOG, attr.NM_TIT_LOG, attr.NM_LOG].filter(Boolean).join(' ') || "Nome não disponível";
popup.innerText = nomeCompleto;
const pixel = W.map.getPixelFromLonLat(lonlat);
popup.style.left = `${pixel.x}px`;
popup.style.top = `${pixel.y}px`;
popup.style.display = 'block';
}
function onFeatureUnselect() {
const popup = document.getElementById('wme-json-popup');
if (popup) popup.style.display = 'none';
if (selectedFeature && lineLayer) {
lineLayer.drawFeature(selectedFeature, 'default');
}
selectedFeature = null;
}
function initializeCustomClickHandler() {
const OL = OpenLayers;
const CustomClick = OL.Class(OL.Control, {
defaultHandlerOptions: { 'single': true, 'double': false, 'pixelTolerance': 2, 'stopSingle': false, 'stopDouble': false },
initialize: function(options) {
this.handlerOptions = OL.Util.extend({}, this.defaultHandlerOptions);
OL.Control.prototype.initialize.apply(this, arguments);
this.handler = new OL.Handler.Click(this, { 'click': this.trigger }, this.handlerOptions);
},
trigger: function(e) {
if (!lineLayer) return;
const lonlat = W.map.getLonLatFromPixel(e.xy);
const clickPoint = new OL.Geometry.Point(lonlat.lon, lonlat.lat).transform(new OL.Projection("EPSG:4326"), W.map.getProjectionObject());
let closestFeature = null, minDistance = Infinity;
for (const feature of lineLayer.features) {
const distance = feature.geometry.distanceTo(clickPoint, {details: false});
if (distance < minDistance) {
minDistance = distance;
closestFeature = feature;
}
}
if (closestFeature && minDistance < 3) {
if (selectedFeature !== closestFeature) {
onFeatureUnselect();
selectedFeature = closestFeature;
lineLayer.drawFeature(closestFeature, 'select');
onFeatureSelect(closestFeature, lonlat);
}
}
}
});
clickControl = new CustomClick();
W.map.addControl(clickControl);
clickControl.activate();
W.map.events.register('movestart', null, onFeatureUnselect);
}
function handleFileSelect(event) {
const file = event.target.files[0]; if (!file) return;
const reader = new FileReader();
const statusEl = document.getElementById('json-status');
reader.onload = function(e) {
statusEl.textContent = 'Analisando arquivo...';
try {
const geojson = JSON.parse(e.target.result);
statusEl.textContent = `Arquivo válido. Desenhando ${geojson.features.length} linhas...`;
setTimeout(() => drawGeoJSON(geojson), 50);
} catch (error) {
alert('Erro: O arquivo não parece ser um JSON válido.');
console.error("Erro de Análise JSON:", error);
clearLayer();
}
};
reader.readAsText(file);
}
function drawGeoJSON(geojson) {
const OL = OpenLayers;
clearLayer();
const sourceProjection = new OL.Projection("EPSG:4326");
const mapProjection = W.map.getProjectionObject();
const lineStyleMap = new OL.StyleMap({
'default': new OL.Style({ strokeColor: '#0078FF', strokeWidth: 2, strokeOpacity: 0.8 }),
'select': new OL.Style({ strokeColor: '#00FF00', strokeWidth: 4, strokeOpacity: 1.0 })
});
lineLayer = new OL.Layer.Vector("JSON Linhas", { styleMap: lineStyleMap });
const allFeatures = [];
for (const feature of geojson.features) {
if (feature.geometry && feature.geometry.type === 'LineString' && feature.geometry.coordinates.length > 1) {
const points = feature.geometry.coordinates.map(coord => new OL.Geometry.Point(coord[0], coord[1]));
const line = new OL.Geometry.LineString(points);
const vectorFeature = new OL.Feature.Vector(line, feature.properties);
allFeatures.push(vectorFeature);
}
}
allFeatures.forEach(f => f.geometry.transform(sourceProjection, mapProjection));
lineLayer.addFeatures(allFeatures);
W.map.addLayer(lineLayer);
initializeCustomClickHandler();
document.getElementById('json-status').textContent = `Camada desenhada com ${allFeatures.length} linhas.`;
document.getElementById('json-clear-button').disabled = false;
}
function clearLayer() {
onFeatureUnselect();
if (clickControl) {
W.map.events.unregister('movestart', null, onFeatureUnselect);
clickControl.deactivate();
W.map.removeControl(clickControl);
clickControl = null;
}
if (lineLayer) {
W.map.removeLayer(lineLayer);
lineLayer.destroy();
lineLayer = null;
}
selectedFeature = null;
const status = document.getElementById('json-status');
if (status) status.textContent = '';
const fileInput = document.getElementById('json-file-input');
if (fileInput) fileInput.value = '';
const clearButton = document.getElementById('json-clear-button');
if(clearButton) clearButton.disabled = true;
}
bootstrap();
})();
