Sobreposição de mapas no WME: Google, OSM, Trânsito, Apple Maps, Waze Live Map e agora Mapillary!
// ==UserScript==
// @name WME Map Overlay
// @namespace https://waze.com
// @version 3.0.1
// @description Sobreposição de mapas no WME: Google, OSM, Trânsito, Apple Maps, Waze Live Map e agora Mapillary!
// @author ChatGPT
// @match https://www.waze.com/*editor*
// @grant none
// @require https://greasyfork.org/scripts/24851-wazewrap/code/WazeWrap.js
// @license MIT
// ==/UserScript==
(function () {
'use strict';
let trafficDiv, sliderContainer, isSliderVisible = false;
let wazeLiveLayer, gmap, mapillaryDiv, trafficLayerRef;
function initOverlay() {
if (typeof W === 'undefined' || typeof W.map === 'undefined') {
setTimeout(initOverlay, 1000);
return;
}
const map = W.map;
const googleBaseLayer = new OpenLayers.Layer.XYZ(
"Google Maps (Base)",
"https://mt.google.com/vt/lyrs=m&x=${x}&y=${y}&z=${z}",
{ isBaseLayer: false, opacity: 0.00, visibility: true }
);
const osmLayer = new OpenLayers.Layer.XYZ(
"OpenStreetMap",
"https://tile.openstreetmap.org/${z}/${x}/${y}.png",
{ isBaseLayer: false, opacity: 0.00, visibility: true }
);
const appleLayer = new OpenLayers.Layer.XYZ(
"Apple Maps",
"https://maps.apple.com/frame?map=explore¢er=${lat},${lon}&span=${spanX},${spanY}",
{ isBaseLayer: false, opacity: 0.00, visibility: true }
);
wazeLiveLayer = new OpenLayers.Layer.XYZ(
"Waze Live Map",
"https://worldtiles1.waze.com/tiles/${z}/${x}/${y}.png",
{ isBaseLayer: false, opacity: 0.00, visibility: true }
);
map.addLayer(wazeLiveLayer);
map.addLayer(googleBaseLayer);
map.addLayer(osmLayer);
map.addLayer(appleLayer);
sliderContainer = document.createElement("div");
sliderContainer.style.position = "absolute";
sliderContainer.style.top = "80px";
sliderContainer.style.left = "50%";
sliderContainer.style.transform = "translateX(-50%)";
sliderContainer.style.zIndex = "1000";
sliderContainer.style.padding = "8px";
sliderContainer.style.background = "rgba(10, 25, 50, 0.95)";
sliderContainer.style.borderRadius = "10px";
sliderContainer.style.border = "1px solid white";
sliderContainer.style.boxShadow = "0 2px 6px rgba(0,0,0,0.3)";
sliderContainer.style.display = "none";
sliderContainer.style.flexDirection = "row";
sliderContainer.style.gap = "10px";
sliderContainer.style.fontFamily = "sans-serif";
sliderContainer.style.transition = "all 0.3s ease";
const layers = [
{
name: "Waze Live Map",
icon: "https://cdn-images-1.medium.com/max/1200/1*3kS1iOOTBrvtkecae3u2aA.png",
initial: 0.00,
onChange: value => wazeLiveLayer.setOpacity(value)
},
{
name: "Google Maps",
icon: "https://static.vecteezy.com/system/resources/previews/016/716/478/non_2x/google-maps-icon-free-png.png",
initial: 0.00,
onChange: value => googleBaseLayer.setOpacity(value)
},
{
name: "Traffic",
icon: "https://p7.hiclipart.com/preview/798/15/811/logo-font-traffic-jam-thumbnail.jpg",
initial: 0.00,
onChange: value => {
if (trafficLayerRef) trafficLayerRef.setOpacity(value);
}
},
{
name: "OSM",
icon: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Openstreetmap_logo.svg/2048px-Openstreetmap_logo.svg.png",
initial: 0.00,
onChange: value => osmLayer.setOpacity(value)
},
{
name: "Mapillary",
icon: "https://pbs.twimg.com/profile_images/1097399669158825984/aXZ49j3I_400x400.png",
initial: 0.00,
onChange: value => {
if (mapillaryDiv) mapillaryDiv.style.opacity = value;
}
},
{
name: "Apple Maps",
icon: "https://th.bing.com/th/id/R.7bbe9deedfa162a68a224e18fbad2dfc?rik=nsbux2xtDIgyUw&pid=ImgRaw&r=0",
initial: 0.00,
onChange: value => appleLayer.setOpacity(value)
},
{
name: "Websig PT",
icon: "https://cdn-icons-png.flaticon.com/512/5379/5379902.png",
initial: 0.00,
onChange: () => {},
isButton: true
}
];
layers.forEach(layer => {
const wrapper = document.createElement("div");
wrapper.style.width = "60px";
wrapper.style.textAlign = "center";
const img = document.createElement("img");
img.src = layer.icon;
img.alt = layer.name;
img.title = layer.name;
img.style.width = "60px";
img.style.height = "60px";
img.style.borderRadius = "12px";
img.style.border = "2px solid white";
img.style.transition = "transform 0.3s ease, border 0.3s ease";
img.style.display = "block";
img.style.marginBottom = "4px";
img.style.cursor = "pointer";
img.addEventListener("mouseenter", () => {
img.style.transform = "scale(1.1)";
img.style.border = "2px solid gold";
});
img.addEventListener("mouseleave", () => {
img.style.transform = "scale(1)";
img.style.border = "2px solid white";
});
img.addEventListener("click", () => {
const center = W.map.getCenter();
const zoom = Math.round(W.map.getZoom() - 3);
const lonlat = new OpenLayers.LonLat(center.lon, center.lat);
lonlat.transform(
new OpenLayers.Projection("EPSG:900913"),
new OpenLayers.Projection("EPSG:4326")
);
const lat = parseFloat(lonlat.lat.toFixed(6));
const lon = parseFloat(lonlat.lon.toFixed(6));
const span = 360 / Math.pow(2, zoom);
if (layer.name === "Google Maps")
window.open(`https://www.google.com/maps/@${lat},${lon},${zoom + 3}z`, '_blank');
if (layer.name === "OSM")
window.open(`https://www.openstreetmap.org/#map=${zoom + 3}/${lat}/${lon}`, '_blank');
if (layer.name === "Websig PT")
window.open(`https://www.arcgis.com/apps/mapviewer/index.html?webmap=8c00d5d66ee24a0d94a7e923ea8f653e¢er=${lon},${lat}&level=${zoom + 3}`, '_blank');
if (layer.name === "Apple Maps")
window.open(`https://maps.apple.com/frame?map=hybrid¢er=${lat}%2C${lon}&zoom=${zoom + 3}%2C${span}`, '_blank');
if (layer.name === "Waze Live Map")
window.open(`https://www.waze.com/livemap?lat=${lat}&lng=${lon}&zoom=${zoom}`, '_blank');
if (layer.name === "Mapillary")
window.open(`https://www.mapillary.com/app/?lat=${lat}&lng=${lon}&z=${zoom + 2}`, '_blank');
});
wrapper.appendChild(img);
if (!layer.isButton && layer.name !== "Apple Maps" && layer.name !== "Mapillary") {
const slider = document.createElement("input");
slider.type = "range";
slider.min = "0";
slider.max = "1";
slider.step = "0.01";
slider.value = layer.initial;
slider.style.width = "100%";
slider.addEventListener("input", () => {
layer.onChange(parseFloat(slider.value));
});
wrapper.appendChild(slider);
}
sliderContainer.appendChild(wrapper);
});
const toggleButton = document.createElement("button");
toggleButton.textContent = isSliderVisible ? "Hide Sliders" : "Show Sliders";
toggleButton.style.position = "absolute";
toggleButton.style.top = "37px";
toggleButton.style.left = "50%";
toggleButton.style.transform = "translateX(-50%)";
toggleButton.style.zIndex = "2000";
toggleButton.style.padding = "5px 10px";
toggleButton.style.backgroundColor = "rgba(10, 25, 50, 0.8)";
toggleButton.style.color = "white";
toggleButton.style.border = "1px solid white";
toggleButton.style.borderRadius = "5px";
toggleButton.style.cursor = "pointer";
toggleButton.addEventListener("click", () => {
isSliderVisible = !isSliderVisible;
sliderContainer.style.display = isSliderVisible ? "flex" : "none";
toggleButton.textContent = isSliderVisible ? "Hide Sliders" : "Show Sliders";
});
document.body.appendChild(toggleButton);
document.body.appendChild(sliderContainer);
initTrafficLayer();
initMapillaryLayer();
}
function initTrafficLayer() {
trafficLayerRef = new OpenLayers.Layer.XYZ(
"Google Traffic",
"https://mt1.google.com/vt?lyrs=h@159000000,traffic&hl=en&x=${x}&y=${y}&z=${z}",
{ isBaseLayer: false, opacity: 0.00, visibility: true }
);
W.map.addLayer(trafficLayerRef);
}
function initMapillaryLayer() {
mapillaryDiv = document.createElement("div");
mapillaryDiv.style.position = 'absolute';
mapillaryDiv.style.top = '0';
mapillaryDiv.style.left = '0';
mapillaryDiv.style.right = '0';
mapillaryDiv.style.bottom = '0';
mapillaryDiv.style.zIndex = '400';
mapillaryDiv.style.opacity = '0';
mapillaryDiv.style.pointerEvents = 'none';
const iframe = document.createElement("iframe");
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 'none';
mapillaryDiv.appendChild(iframe);
W.map.olMap.getViewport().appendChild(mapillaryDiv);
function updateIframe() {
const center = W.map.getCenter();
const zoom = W.map.getZoom();
const lonlat = new OpenLayers.LonLat(center.lon, center.lat);
lonlat.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
const lat = parseFloat(lonlat.lat.toFixed(6));
const lon = parseFloat(lonlat.lon.toFixed(6));
iframe.src = `https://www.mapillary.com/app/?lat=${lat}&lng=${lon}&z=${zoom}`;
}
updateIframe();
WazeWrap.Events.register('moveend', null, updateIframe);
WazeWrap.Events.register('zoomend', null, updateIframe);
}
setTimeout(initOverlay, 2000);
})();