WME BeenThere

This lets you drop boxes around the map to help visualize where you have been editing

目前為 2017-02-03 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name                WME BeenThere
// @namespace           https://greasyfork.org/users/30701-justins83-waze
// @description         This lets you drop boxes around the map to help visualize where you have been editing
// @include             https://www.waze.com/editor/*
// @include             https://www.waze.com/*/editor/*
// @include             https://beta.waze.com/*
// @require             https://greasyfork.org/scripts/27023-jscolor/code/JSColor.js
// @version             0.0.2
// @grant               none
// ==/UserScript==
//---------------------------------------------------------------------------------------

    var beenTheresettings = [];
    var attributes = {
        name: ""
    };
    var layerFuture = [];

(function() {
    function bootstrap(tries) {
        tries = tries || 1;

        if (window.W &&
            window.W.map &&
            window.W.model &&
            window.W.loginManager.user &&
            $ &&
            window.jscolor) {
            InitMapRaidOverlay();
        } else if (tries < 1000) {
            setTimeout(function () {bootstrap(tries++);}, 200);
        }
    }

    bootstrap();

    function AddExtent() {
        var point = Waze.map.getExtent();

        var groupPoints2 = {
            topLeft : {
                lon:point.left,
                lat:point.top
            },
            botLeft : {
                lon: point.left,
                lat: point.bottom
            },
            botRight: {
                lon: point.right,
                lat: point.bottom
            },
            topRight:{
                lon: point.right,
                lat: point.top
            },
            color: "#" + $('#colorPicker')[0].jscolor.toString(),
            type: "rectangle"
        };

        var mro_Map = Waze.map;
        beenTheresettings.layerHistory.push(groupPoints2);

        DrawRectangle(groupPoints2);
    }

    function DrawRectangle(obj){
        var pnt = [];
        var convPoint = new OpenLayers.Geometry.Point(obj.topLeft.lon, obj.topLeft.lat);
        pnt.push(convPoint);
        convPoint = new OpenLayers.Geometry.Point(obj.botLeft.lon, obj.botLeft.lat);
        pnt.push(convPoint);
        convPoint = new OpenLayers.Geometry.Point(obj.botRight.lon, obj.botRight.lat);
        pnt.push(convPoint);
        convPoint = new OpenLayers.Geometry.Point(obj.topRight.lon, obj.topRight.lat);
        pnt.push(convPoint);
        convPoint = new OpenLayers.Geometry.Point(obj.topLeft.lon, obj.topLeft.lat);
        pnt.push(convPoint);
        var style = {
        strokeColor: obj.color, strokeOpacity: 0.8, strokeWidth: 8, fillColor: obj.color, fillOpacity: 0.0,
            label: "", labelOutlineColor: "black", labelOutlineWidth: 3, fontSize: 14,
            fontColor: "orange", fontOpacity: 0.85, fontWeight: "bold"};

        var ring = new OL.Geometry.LinearRing(pnt);
        var polygon = new OL.Geometry.Polygon([ring]);
        var feature = new OL.Feature.Vector(polygon, attributes, style);
        mapLayers.addFeatures([feature]);
        updateTotalRectCount();
    }

    function updateTotalRectCount(){
        $('#rectCount')[0].innerHTML = mapLayers.features.length;
    }

    function NewBox() {
        AddExtent();
        saveSettings();
    }

    function RemoveLastBox() {
        var mro_Map = Waze.map;
        var mro_mapLayers = mro_Map.getLayersBy("uniqueName", "__beenThere");

        var mro_mapLayers_mapLayerLength = mro_mapLayers[0].features.length;
        if (mro_mapLayers_mapLayerLength > 0)
            mro_mapLayers[0].features[mro_mapLayers_mapLayerLength - 1].destroy();
        if(beenTheresettings.layerHistory.length > 0)
            layerFuture.push(beenTheresettings.layerHistory.pop());
        saveSettings();
        updateTotalRectCount();
    }

    function RedoLastBox(){
        if(layerFuture.length >0){
            var rect = layerFuture.pop();
            beenTheresettings.layerHistory.push(rect);
            DrawRectangle(rect);
        }
    }

    function RemoveAllBoxes() {
        var mro_Map = Waze.map;
        var mro_mapLayers = mro_Map.getLayersBy("uniqueName", "__beenThere");

        var mro_mapLayers_mapLayerLength = mro_mapLayers[0].features.length;
        if (mro_mapLayers_mapLayerLength > 0)
            mro_mapLayers[0].destroyFeatures();
        beenTheresettings.layerHistory = [];
        layerFuture = [];
        saveSettings();
        updateTotalRectCount();
    }

    var mapLayers;
    function InitMapRaidOverlay() {
        mapLayers = new OpenLayers.Layer.Vector("Been Here", {
            displayInLayerSwitcher: true,
            uniqueName: "__beenThere"
        });

        Waze.map.addLayer(mapLayers);
        mapLayers.setVisibility(true);

        var mro_Map = Waze.map;
        if (mro_Map === null) return;

        //append our css to the head
        var g = '.beenThereButtons {font-size:30px; color:#59899e;}';
        $("head").append($('<style type="text/css">' + g + '</style>'));

        //add controls to the map
        var c = '<div id="beenThere" style="position: absolute; top:280px; left: 6px; z-index: 1040 !important; border-radius: 5px; padding: 4px; background-color: #000000;);">';
        c+= '<div><div id="NewBox" class="waze-icon-plus_neg beenThereButtons" style="display:block; float:left;" title="Draw a box around the visible area"></div>';
        c+= "<button class='jscolor {valueElement:null,hash:true,closable:true}' style='float:right;width:15px; height:15px;border:2px solid black' id='colorPicker'></button></div>";
        c+= '<div id="RemoveLastBox" class="waze-icon-undo beenThereButtons" style="display:block;" title="Remove last box"></div>';
        c+= '<div id="Redo" class="waze-icon-redo beenThereButtons" style="display:block;" title="Redo last box"></div>';
        c+= '<div id="TrashBox" class="waze-icon-trash beenThereButtons" style="display:block;" title="Remove all boxes">';
        c+= '<span id="rectCount" style="float:right; top:0; right:0;font-size:12px;">0</span></div></div>';

        $("#WazeMap").append(c);

        //set up listeners
        $("#NewBox").click(NewBox);
        $("#RemoveLastBox").click(RemoveLastBox);
        $('#Redo').click(RedoLastBox);
        $("#TrashBox").click(RemoveAllBoxes);

        loadSettings();
        if(beenTheresettings.layerHistory.length > 0)
            for(var i=0;i<beenTheresettings.layerHistory.length;i++)
                DrawRectangle(beenTheresettings.layerHistory[i]);

        initColorPicker();
    }


    function initColorPicker(tries){
         tries = tries || 1;

        if ($('#colorPicker')[0].jscolor) {
            $('#colorPicker')[0].jscolor.fromString('#FDA400');
            $('#colorPicker')[0].jscolor.closeText = 'Close';
            //$('#colorPicker')[0].jscolor.onFineChange = update;

        } else if (tries < 1000) {
            setTimeout(function () {initColorPicker(tries++);}, 200);
        }
    }

    function loadSettings() {
        var loadedSettings = $.parseJSON(localStorage.getItem("beenThere_Settings"));
        var defaultSettings = {
            layerHistory: []
        };
        beenTheresettings = loadedSettings ? loadedSettings : defaultSettings;
        for (var prop in defaultSettings) {
            if (!beenTheresettings.hasOwnProperty(prop))
                beenTheresettings[prop] = defaultSettings[prop];
        }
    }

    function saveSettings() {
        if (localStorage) {
            var localsettings = {
                layerHistory: beenTheresettings.layerHistory
            };
            localStorage.setItem("beenThere_Settings", JSON.stringify(localsettings));
        }
    }
})();