☰

WME BeenThere

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

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

// ==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));
        }
    }
})();