☰

WME BeenThere

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

目前为 2017-02-10 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name                WME BeenThere
  3. // @namespace           https://greasyfork.org/users/30701-justins83-waze
  4. // @description         This lets you drop boxes around the map to help visualize where you have been editing
  5. // @include             https://www.waze.com/editor/*
  6. // @include             https://www.waze.com/*/editor/*
  7. // @include             https://beta.waze.com/*
  8. // @require             https://greasyfork.org/scripts/24851-wazewrap/code/WazeWrap.js
  9. // @require             https://greasyfork.org/scripts/27023-jscolor/code/JSColor.js
  10. // @require             https://greasyfork.org/scripts/27254-clipboard-js/code/clipboardjs.js
  11. // @version             0.4.3
  12. // @grant               none
  13. // ==/UserScript==
  14. //---------------------------------------------------------------------------------------
  15.  
  16.     var beenTheresettings = [];
  17.     var attributes = {
  18.         name: ""
  19.     };
  20.     var layerFuture = [];
  21.     var pointStyle = {
  22. 			pointRadius: 3,
  23. 			fillOpacity: 50,
  24. 			strokeColor: '#00ece3',
  25. 			strokeWidth: '2',
  26. 			strokeLinecap: 'round'
  27. 		};
  28.     var clickCount = 0;
  29.     var userRectPoint1 = null;
  30.     var userCircleCenter = null;
  31.     var currColor;
  32.  
  33. (function() {
  34.     function bootstrap(tries) {
  35.         tries = tries || 1;
  36.  
  37.         if (window.W &&
  38.             window.W.map &&
  39.             window.W.model &&
  40.             window.W.loginManager.user &&
  41.             $ &&
  42.             window.jscolor) {
  43.             InitMapRaidOverlay();
  44.         } else if (tries < 1000) {
  45.             setTimeout(function () {bootstrap(tries++);}, 200);
  46.         }
  47.     }
  48.  
  49.     bootstrap();
  50.  
  51.     function AddExtent() {
  52.         var point = Waze.map.getExtent();
  53.  
  54.         var groupPoints2 = {
  55.             topLeft : {
  56.                 lon:point.left,
  57.                 lat:point.top
  58.             },
  59.             botLeft : {
  60.                 lon: point.left,
  61.                 lat: point.bottom
  62.             },
  63.             botRight: {
  64.                 lon: point.right,
  65.                 lat: point.bottom
  66.             },
  67.             topRight:{
  68.                 lon: point.right,
  69.                 lat: point.top
  70.             },
  71.             color: currColor,
  72.             type: "rectangle",
  73.             radius: null
  74.         };
  75.  
  76.         beenTheresettings.layerHistory.push(groupPoints2);
  77.         DrawFeature(groupPoints2);
  78.     }
  79.  
  80.     function DrawFeature(obj){
  81.         var pnt = [];
  82.         //var pnt2 = [];
  83.         //var pnt4326;
  84.         var feature;
  85.         var style = {
  86.                 strokeColor: obj.color, strokeOpacity: 1, strokeWidth: 5, fillColor: obj.color, fillOpacity: 0.0,
  87.                 label: "", labelOutlineColor: "black", labelOutlineWidth: 3, fontSize: 14,
  88.                 fontColor: "orange", fontOpacity: 1, fontWeight: "bold"};
  89.         if(beenTheresettings.DrawShapeBorder)
  90.             style.strokeOpacity = 1;
  91.         else
  92.             style.strokeOpacity = 0;
  93.  
  94.         if(beenTheresettings.FillShape)
  95.             style.fillOpacity = 1;
  96.         else
  97.             style.fillOpacity = 0;
  98.  
  99.         if(obj.type === "rectangle"){
  100.             var convPoint = new OpenLayers.Geometry.Point(obj.topLeft.lon, obj.topLeft.lat);
  101.             pnt.push(convPoint);
  102.             //pnt4326 = WazeWrap.Geometry.ConvertTo4326(obj.topLeft.lon,obj.topLeft.lat);
  103.             //pnt2.push(new OpenLayers.Geometry.Point(pnt4326.lon, pnt4326.lat));
  104.  
  105.             convPoint = new OpenLayers.Geometry.Point(obj.botLeft.lon, obj.botLeft.lat);
  106.             pnt.push(convPoint);
  107.             //pnt4326 = WazeWrap.Geometry.ConvertTo4326(obj.botLeft.lon,obj.botLeft.lat);
  108.             //pnt2.push(new OpenLayers.Geometry.Point(pnt4326.lon, pnt4326.lat));
  109.  
  110.             convPoint = new OpenLayers.Geometry.Point(obj.botRight.lon, obj.botRight.lat);
  111.             pnt.push(convPoint);
  112.             //pnt4326 = WazeWrap.Geometry.ConvertTo4326(obj.botRight.lon,obj.botRight.lat);
  113.             //pnt2.push(new OpenLayers.Geometry.Point(pnt4326.lon, pnt4326.lat));
  114.  
  115.             convPoint = new OpenLayers.Geometry.Point(obj.topRight.lon, obj.topRight.lat);
  116.             pnt.push(convPoint);
  117.             //pnt4326 = WazeWrap.Geometry.ConvertTo4326(obj.topRight.lon,obj.topRight.lat);
  118.             //pnt2.push(new OpenLayers.Geometry.Point(pnt4326.lon, pnt4326.lat));
  119.  
  120.             convPoint = new OpenLayers.Geometry.Point(obj.topLeft.lon, obj.topLeft.lat);
  121.             pnt.push(convPoint);
  122.             //pnt4326 = WazeWrap.Geometry.ConvertTo4326(obj.topLeft.lon,obj.topLeft.lat);
  123.             //pnt2.push(new OpenLayers.Geometry.Point(pnt4326.lon, pnt4326.lat));
  124.  
  125.             var ring = new OL.Geometry.LinearRing(pnt);
  126.             var polygon = new OL.Geometry.Polygon([ring]);
  127.             feature = new OL.Feature.Vector(polygon, attributes, style);
  128.         }
  129.         else{ //circle
  130.             console.log("circle!");
  131.             var poly = new OL.Geometry.Polygon.createRegularPolygon(obj.centerPoint, obj.radius, 40, 0);
  132.             console.log(obj);
  133.             feature = new OL.Feature.Vector(poly, attributes, style);
  134.         }
  135.  
  136.         mapLayers.addFeatures([feature]);
  137.         updateTotalRectCount();
  138.         /*
  139.         var ring2 = new OL.Geometry.LinearRing(pnt2);
  140.         var polygon2 = new OL.Geometry.Polygon([ring2]);
  141.         var feature2 = new OL.Feature.Vector(polygon2);
  142.  
  143.         var pnt3 = [];
  144.         pnt3.push(new OL.Geometry.Point(-84.3197299999999,40.100960000000285));
  145.         pnt3.push(new OL.Geometry.Point(-84.3197299999999,40.04566000000004));
  146.         pnt3.push(new OL.Geometry.Point(-84.24969999999959,40.04566000000004));
  147.         pnt3.push(new OL.Geometry.Point(-84.24969999999959,40.100960000000285));
  148.         pnt3.push(new OL.Geometry.Point(-84.3197299999999,40.100960000000285));
  149.         var ring3 = new OL.Geometry.LinearRing(pnt3);
  150.         var polygon3 = new OL.Geometry.Polygon([ring3]);
  151.         var feature3 = new OL.Feature.Vector(polygon3);
  152.  
  153.         var geoJSON = new OpenLayers.Format.GeoJSON();
  154.         //var geoJSONText = geoJSON.write(feature3, true);
  155.         //var geoJSONText2 = geoJSON.write(feature2, true);
  156.         //console.log("geoJSONText = " + geoJSONText);
  157.         //console.log("geoJSONText2 = " + geoJSONText2);
  158.  
  159.         var turfpolygon = turf.polygon([[
  160.  [-84.3197299999999, 40.100960000000285],
  161.  [-84.3197299999999, 40.04566000000004],
  162.  [-84.24969999999959, 40.04566000000004],
  163.  [-84.24969999999959, 40.100960000000285],
  164.  [-84.3197299999999, 40.100960000000285]
  165. ]]);
  166.         var turfpoly2 = turf.polygon([[
  167.         [-84.3034299999997, 40.11526999999987],
  168.         [-84.3034299999997, 40.085729999999806],
  169.         [-84.24437, 40.085729999999806],
  170.         [-84.24437, 40.11526999999987],
  171.         [-84.3034299999997, 40.11526999999987]
  172.         ]]);
  173.  
  174.         var union = turf.union(turfpolygon, turfpoly2);
  175.         console.log("Justin");
  176.         console.log(union);*/
  177.     }
  178.  
  179.     function updateTotalRectCount(){
  180.         $('#rectCount')[0].innerHTML = mapLayers.features.length;
  181.     }
  182.  
  183.     function NewBox(e) {
  184.         e.stopPropagation();
  185.         AddExtent();
  186.         saveSettings();
  187.     }
  188.  
  189.     function NewUserRect(e){
  190.         e.stopPropagation();
  191.         EndUserCircleMode();
  192.         clickCount = 0;
  193.         clearLayer();
  194.         $("#map").on('mousemove', MouseMoveHandlerRect);
  195.         document.addEventListener('keyup', keyUpHandler, false);
  196.         $("#map").click(ClickHandler);
  197.     }
  198.  
  199.     function NewUserCircle(e){
  200.         e.stopPropagation();
  201.         EndUserRectMode();
  202.         clickCount = 0;
  203.         clearLayer();
  204.         $("#map").on('mousemove', MouseMoveHandlerCircle);
  205.         document.addEventListener('keyup', keyUpHandler, false);
  206.         $("#map").click(ClickHandlerCircle);
  207.     }
  208.  
  209.     function ClickHandlerCircle(){
  210.         if(clickCount === 0){
  211.             userCircleCenter = getMousePos900913();
  212.             clickCount++;
  213.         }
  214.         else{
  215.             var point2 = getMousePos900913();
  216.             var points = [new OL.Geometry.Point(userCircleCenter.lon, userCircleCenter.lat), new OL.Geometry.Point(point2.lon, point2.lat)];
  217.             var radius = WazeWrap.Geometry.calculateDistance(points);
  218.             var circleData = {
  219.                 centerPoint : new OL.Geometry.Point(userCircleCenter.lon, userCircleCenter.lat),
  220.                 radius : radius,
  221.                 color: currColor,
  222.                 type : "circle"
  223.             };
  224.  
  225.             beenTheresettings.layerHistory.push(circleData);
  226.             saveSettings();
  227.             DrawFeature(circleData);
  228.             EndUserCircleMode();
  229.         }
  230.     }
  231.  
  232.     function ClickHandler(){
  233.         if(clickCount === 0){ //first point chosen - draw rectangle as the mouse moves
  234.             userRectPoint1 = getMousePos900913();
  235.             clickCount++;
  236.         }
  237.         else{ //second point chose - take both coordinates and draw a rectangle on the BeenThere layer
  238.             var point2 = getMousePos900913();
  239.  
  240.             var groupPoints2 = {
  241.                 topLeft : {
  242.                     lon: userRectPoint1.lon,
  243.                     lat: userRectPoint1.lat
  244.                 },
  245.                 botLeft : {
  246.                     lon: userRectPoint1.lon,
  247.                     lat: point2.lat
  248.                 },
  249.                 botRight: {
  250.                     lon: point2.lon,
  251.                     lat: point2.lat
  252.                 },
  253.                 topRight:{
  254.                     lon: point2.lon,
  255.                     lat: userRectPoint1.lat
  256.                 },
  257.                 color: currColor,
  258.                 type: "rectangle"
  259.             };
  260.             beenTheresettings.layerHistory.push(groupPoints2);
  261.             saveSettings();
  262.             DrawFeature(groupPoints2);
  263.             EndUserRectMode();
  264.         }
  265.     }
  266.  
  267.     function MouseMoveHandlerRect(e){
  268.         clearLayer();
  269. 		drawPointer(getMousePos900913(), false);
  270.         drawRect(userRectPoint1);
  271.     }
  272.  
  273.     function MouseMoveHandlerCircle(e){
  274.         clearLayer();
  275.         var currMousePos = getMousePos900913();
  276. 		drawPointer(currMousePos, true);
  277.         if(userCircleCenter){
  278.             var points = [new OL.Geometry.Point(userCircleCenter.lon, userCircleCenter.lat), new OL.Geometry.Point(currMousePos.lon, currMousePos.lat)];
  279.             var radius = WazeWrap.Geometry.calculateDistance(points);
  280.             drawCircle(userCircleCenter, radius);
  281.         }
  282.     }
  283.  
  284.     function clearLayer() {
  285. 		var layer = W.map.getLayersByName("BeenThereUserRect")[0];
  286. 		layer.removeAllFeatures();
  287. 	}
  288.  
  289.     function drawRect(e){
  290.         if(e !== null){
  291.             var color = currColor;
  292.             var style = {
  293.                 strokeColor: color, strokeOpacity: 1, strokeWidth: 5, fillColor: color, fillOpacity: 0.0,
  294.                 label: "", labelOutlineColor: "black", labelOutlineWidth: 3, fontSize: 14,
  295.                 fontColor: color, fontOpacity: 0.85, fontWeight: "bold"};
  296.             if(beenTheresettings.DrawShapeBorder)
  297.                 style.strokeOpacity = 1;
  298.             else
  299.                 style.strokeOpacity = 0;
  300.  
  301.             if(beenTheresettings.FillShape)
  302.                 style.fillOpacity = 1;
  303.             else
  304.                 style.fillOpacity = 0;
  305.  
  306.             var point2 = getMousePos900913();
  307.  
  308.             var pnt = [];
  309.             var convPoint = new OpenLayers.Geometry.Point(e.lon, e.lat);
  310.             pnt.push(convPoint);
  311.             convPoint = new OpenLayers.Geometry.Point(e.lon, point2.lat);
  312.             pnt.push(convPoint);
  313.             convPoint = new OpenLayers.Geometry.Point(point2.lon, point2.lat);
  314.             pnt.push(convPoint);
  315.             convPoint = new OpenLayers.Geometry.Point(point2.lon, e.lat);
  316.             pnt.push(convPoint);
  317.             convPoint = new OpenLayers.Geometry.Point(e.lon, e.lat);
  318.             pnt.push(convPoint);
  319.  
  320.             var ring = new OL.Geometry.LinearRing(pnt);
  321.             var polygon = new OL.Geometry.Polygon([ring]);
  322.             var feature = new OL.Feature.Vector(polygon, attributes, style);
  323.             W.map.getLayersByName("BeenThereUserRect")[0].addFeatures([feature]);
  324.         }
  325.     }
  326.  
  327.     function drawCircle(e, radius){
  328.         if(e !== null){
  329.             var color = currColor;
  330.             var style = {
  331.                 strokeColor: color, strokeOpacity: 0.8, strokeWidth: 5, fillColor: color, fillOpacity: 0.0,
  332.                 label: "", labelOutlineColor: "black", labelOutlineWidth: 3, fontSize: 14,
  333.                 fontColor: color, fontOpacity: 0.85, fontWeight: "bold"};
  334.             if(beenTheresettings.DrawShapeBorder)
  335.                 style.strokeOpacity = 1;
  336.             else
  337.                 style.strokeOpacity = 0;
  338.  
  339.             if(beenTheresettings.FillShape)
  340.                 style.fillOpacity = 1;
  341.             else
  342.                 style.fillOpacity = 0;
  343.  
  344.             var point2 = getMousePos900913();
  345.             var pt = new OL.Geometry.Point(e.lon, e.lat);
  346.             var polygon = new OL.Geometry.Polygon.createRegularPolygon(pt,radius, 40, 0);
  347.             var feature = new OL.Feature.Vector(polygon, attributes, style);
  348.             W.map.getLayersByName("BeenThereUserRect")[0].addFeatures([feature]);
  349.         }
  350.     }
  351.  
  352.     function drawPointer(e, circle){
  353.         var color = currColor;
  354.         pointStyle.strokeColor = color;
  355.         pointStyle.fillColor = color;
  356.         if(circle && circle === true)
  357.             pointStyle.fillOpacity = 0;
  358.         else
  359.             pointStyle.fillOpacity = 1;
  360.         var pointFeature = new OL.Feature.Vector(new OL.Geometry.Point(e.lon, e.lat), {}, pointStyle);
  361. 		W.map.getLayersByName("BeenThereUserRect")[0].addFeatures([pointFeature]);
  362.     }
  363.  
  364.     function getMousePos900913(){
  365.         var mousePosition = $('.WazeControlMousePosition').text().split(" ");
  366.         return WazeWrap.Geometry.ConvertTo900913(mousePosition[0], mousePosition[1]);
  367.     }
  368.  
  369.     function keyUpHandler(e){
  370.         if (e.keyCode == 27){
  371.             EndUserRectMode();
  372.             EndUserCircleMode();
  373.          }
  374.     }
  375.  
  376.     function EndUserRectMode(){
  377.         $('#map').css('cursor', 'initial');
  378.         $("#map").off('click');
  379.         $("#map").off('mousemove', MouseMoveHandlerRect);
  380.         clearLayer();
  381.         document.removeEventListener('keyup', keyUpHandler);
  382.         clickCount = 0;
  383.         userRectPoint1 = null;
  384.     }
  385.  
  386.     function EndUserCircleMode(){
  387.         $("#map").off('click');
  388.         $("#map").off('mousemove', MouseMoveHandlerCircle);
  389.         clearLayer();
  390.         document.removeEventListener('keyup', keyUpHandler);
  391.         clickCount = 0;
  392.         userCircleCenter = null;
  393.     }
  394.  
  395.     function RemoveLastBox() {
  396.         var mro_Map = Waze.map;
  397.         var mro_mapLayers = mro_Map.getLayersBy("uniqueName", "__beenThere");
  398.  
  399.         var mro_mapLayers_mapLayerLength = mro_mapLayers[0].features.length;
  400.         if (mro_mapLayers_mapLayerLength > 0)
  401.             mro_mapLayers[0].features[mro_mapLayers_mapLayerLength - 1].destroy();
  402.         if(beenTheresettings.layerHistory.length > 0)
  403.             layerFuture.push(beenTheresettings.layerHistory.pop());
  404.         saveSettings();
  405.         updateTotalRectCount();
  406.     }
  407.  
  408.     function RedoLastBox(){
  409.         if(layerFuture.length >0){
  410.             var rect = layerFuture.pop();
  411.             beenTheresettings.layerHistory.push(rect);
  412.             DrawFeature(rect);
  413.         }
  414.     }
  415.  
  416.     function RemoveAllBoxes() {
  417.         if(beenTheresettings.layerHistory.length > 0)
  418.             if(confirm("Clearing all boxes cannot be undone.\nPress OK to clear all boxes.")){
  419.                 var mro_Map = Waze.map;
  420.                 var mro_mapLayers = mro_Map.getLayersBy("uniqueName", "__beenThere");
  421.  
  422.                 var mro_mapLayers_mapLayerLength = mro_mapLayers[0].features.length;
  423.                 if (mro_mapLayers_mapLayerLength > 0)
  424.                     mro_mapLayers[0].destroyFeatures();
  425.                 beenTheresettings.layerHistory = [];
  426.                 layerFuture = [];
  427.                 saveSettings();
  428.                 updateTotalRectCount();
  429.             }
  430.     }
  431.  
  432.     var mapLayers;
  433.     var userRectLayer;
  434.     function InitMapRaidOverlay() {
  435.         mapLayers = new OpenLayers.Layer.Vector("Been There", {
  436.             displayInLayerSwitcher: true,
  437.             uniqueName: "__beenThere"
  438.         });
  439.  
  440.         userRectLayer = new OpenLayers.Layer.Vector("BeenThereUserRect", {
  441.             displayInLayerSwitcher: false,
  442.             uniqueName: "__beenThereUserRect"
  443.         });
  444.         //$.getScript('https://npmcdn.com/@turf/turf@3.9.0/turf.min.js');
  445.         Waze.map.addLayer(mapLayers);
  446.         mapLayers.setVisibility(true);
  447.         mapLayers.setOpacity(0.6);
  448.         W.map.addLayer(userRectLayer);
  449.         userRectLayer.setOpacity(0.6);
  450.  
  451.         var mro_Map = Waze.map;
  452.         if (mro_Map === null) return;
  453.  
  454.         LoadSettingsObj();
  455.  
  456.         //append our css to the head
  457.         var g = '.beenThereButtons {font-size:26px; color:#59899e; cursor:pointer;} .flex-container {display: -webkit-flex; display: flex; background-color:black;}';
  458.         $("head").append($('<style type="text/css">' + g + '</style>'));
  459.  
  460.         //add controls to the map
  461.         var $section = $("<div>", {style:"padding:8px 16px", id:"WMEBeenThere"});
  462.         $section.html([
  463.             '<div id="beenThere" class="flex-container" style="width:65px; position: absolute;top:' + beenTheresettings.LocTop + '; left: ' + beenTheresettings.LocLeft + '; z-index: 1040 !important; border-radius: 5px; padding: 4px; background-color: #000000;">',
  464.             '<div class="flex-container" style="width:32px; flex-wrap:wrap;" >',//left side container
  465.             '<div id="NewBox" class="waze-icon-plus_neg beenThereButtons" style="margin-top:-10px; display:block; float:left;" title="Draw a box around the visible area"></div>',
  466.             '<div id="UserRect" class="fa fa-pencil-square-o" style="display:block; float:left; margin-left:3px; color:#59899e; cursor:pointer; font-size:25px;"></div>',
  467.             '<div id="UserCirc" class="fa-stack" style="margin-top:10px; display:block; float:left; color:#59899e; cursor:pointer;"><span class="fa fa-circle-thin fa-stack-2x"></span><span class="fa fa-pencil" style="font-size:20px; margin-left:8px;"></span></div>',
  468.             '<div id="RemoveLastBox" class="waze-icon-undo beenThereButtons" style="display:block;margin-bottom:-10px;" title="Remove last box"></div>',
  469.             '<div id="Redo" class="waze-icon-redo beenThereButtons" style="display:block;margin-bottom:-10px;" title="Redo last box"></div>',
  470.             '<div id="TrashBox" class="waze-icon-trash beenThereButtons" style="margin-bottom:-5px; display:block;" title="Remove all boxes">',
  471.             '<span id="rectCount" style="position:absolute; top:150px; right:16px;font-size:12px;">0</span></div>',
  472.             '<div id="Settings" class="fa fa-cog" style="display:block; float:left; margin-left:3px; color:#59899e; cursor:pointer; font-size:20px;"></div>',
  473.             '</div>',//close left side container
  474.             '<div class="flex-container" style="width:30px; height:90px; flex-wrap:wrap; justify-content:flex-start;">', //right side container
  475.             '<input type="radio" name="currColor" value="colorPicker1" style="width:10px;" checked="checked">',
  476.             '<button class="jscolor {valueElement:null,hash:true,closable:true}" style="float:right;width:15px; height:15px;border:2px solid black" id="colorPicker1"></button>',
  477.             '<input type="radio" name="currColor" value="colorPicker2" style="width:10px;">',
  478.             '<button class="jscolor {valueElement:null,hash:true,closable:true}" style="float:right;width:15px; height:15px;border:2px solid black" id="colorPicker2"></button>',
  479.             '<input type="radio" name="currColor" value="colorPicker3" style="width:10px;">',
  480.             '<button class="jscolor {valueElement:null,hash:true,closable:true}" style="float:right;width:15px; height:15px;border:2px solid black" id="colorPicker3"></button>',
  481.             '<input type="radio" name="currColor" value="colorPicker4" style="width:10px;">',
  482.             '<button class="jscolor {valueElement:null,hash:true,closable:true}" style="float:right;width:15px; height:15px;border:2px solid black" id="colorPicker4"></button>',
  483.             '</div>' //close right side container
  484.             ].join(' '));
  485.  
  486.         $("#WazeMap").append($section.html());
  487.  
  488.         BuildSettings();
  489.  
  490.         //set up listeners
  491.         $("#NewBox").click(NewBox);
  492.         $('#UserRect').click(NewUserRect);
  493.         $('#UserCirc').click(NewUserCircle);
  494.         $("#RemoveLastBox").click(RemoveLastBox);
  495.         $('#Redo').click(RedoLastBox);
  496.         $("#TrashBox").click(RemoveAllBoxes);
  497.         $('#Settings').click(function(){
  498.             $('#BTSettings')[0].innerHTML = localStorage.beenThere_Settings;
  499.             setChecked('chkBTShapeBorder',beenTheresettings.DrawShapeBorder);
  500.             setChecked('chkBTShapeFill',beenTheresettings.FillShape);            
  501.             $('#BeenThereSettings').css({'visibility':'visible'});
  502.         });
  503.  
  504.         $('[name="currColor"]').change(function() {
  505.             currColor = '#' + $('#' + this.value)[0].jscolor.toString();
  506.         });
  507.  
  508.         if($.ui){
  509.             $('#beenThere').draggable({
  510.                 stop: function(event, ui) {
  511.                     beenTheresettings.LocLeft = $('#beenThere').css('left');
  512.                     beenTheresettings.LocTop = $('#beenThere').css('top');
  513.                     saveSettings();
  514.                 }
  515.             });
  516.         }
  517.  
  518.         initColorPicker();
  519.         LoadSettings();
  520.     }
  521.  
  522.     /*
  523.     Takes the settings loaded into the settings obj and loads them into the interface and draws any features that were saved
  524.     */
  525.     function LoadSettings(){
  526.         if(beenTheresettings.layerHistory.length > 0)
  527.             for(var i=0;i<beenTheresettings.layerHistory.length;i++)
  528.                 DrawFeature(beenTheresettings.layerHistory[i]);
  529.  
  530.         if ($('#colorPicker1')[0].jscolor && $('#colorPicker2')[0].jscolor && $('#colorPicker3')[0].jscolor && $('#colorPicker4')[0].jscolor){
  531.             $('#colorPicker1')[0].jscolor.fromString(beenTheresettings.CP1);
  532.             $('#colorPicker2')[0].jscolor.fromString(beenTheresettings.CP2);
  533.             $('#colorPicker3')[0].jscolor.fromString(beenTheresettings.CP3);
  534.             $('#colorPicker4')[0].jscolor.fromString(beenTheresettings.CP4);
  535.         }
  536.     }
  537.  
  538.     function BuildSettings(){
  539.         var $section = $("<div>", {style:"padding:8px 16px", id:"WMEBeenThereSettings"});
  540.         $section.html([
  541.             '<div id="BeenThereSettings" style="visibility:hidden; position:fixed; top:40%; left:50%; width:388px; height:240px; z-index:1000; background-color:white; border-width:3px; border-style:solid; border-radius:10px; padding:4px;">',
  542.             '<div>',
  543.             '<h3>Drawing</h3>',
  544.             '<input type="radio" name="DrawOptions" id="chkBTShapeBorder">Draw shape border</br>',
  545.             '<input type="radio" name="DrawOptions" id="chkBTShapeFill">Fill shape</br>',
  546.             '</div></br>',//close drawing div
  547.             '<div>',
  548.             '<h3>Export/Import</h3>',
  549.             '<div>',
  550.             '<button class="fa fa-upload fa-2x" aria-hidden="true" id="btnBTCopySettings" style="cursor:pointer;border: 0; background: none; box-shadow:none;" title="Copy BeenThere settings to the clipboard" data-clipboard-target="#BTSettings"></button>',
  551.             '<textarea rows="4" cols="30" readonly id="BTSettings" style="resize:none;">Test</textarea>',
  552.             '</div>',//end export div
  553.             '<div>',
  554.             '<button class="fa fa-download fa-2x" aria-hidden="true" id="btnBTImportSettings" style="cursor:pointer;border: 0; background: none; box-shadow:none;" title="Import copied settings"></button>',
  555.             '<textarea rows="4" cols="30" id="txtBTImportSettings" style="resize:none;"></textarea>',
  556.             '</div>',//end import div
  557.             '</div>',//close import/export div
  558.             '<div style="position: relative; float: right; top:10px; display: inline-block">', //save/cancel buttons
  559.             '<button id="BeenThereSettingsSave" style="width: 85px;" class="btn btn-primary">Save</button>',
  560.             '<button id="BeenThereSettingsCancel" class="btn btn-default">Cancel</button>',
  561.             '</div>',//end save/cancel buttons
  562.             '</div>'
  563.             ].join(' '));
  564.  
  565.         $("#WazeMap").append($section.html());
  566.  
  567.         $("#BeenThereSettingsCancel").click(function(){
  568.             $('#BeenThereSettings').css({'visibility':'hidden'}); //hide the settings window
  569.         });
  570.  
  571.         $("#BeenThereSettingsSave").click(function(){
  572.             beenTheresettings.DrawShapeBorder = isChecked('chkBTShapeBorder');
  573.             beenTheresettings.FillShape = isChecked('chkBTShapeFill');
  574.             saveSettings();
  575.  
  576.             $('#BeenThereSettings').css({'visibility':'hidden'}); //hide the settings window
  577.         });
  578.  
  579.         $('#btnBTImportSettings').click(function(){
  580.             if($('#txtBTImportSettings')[0].value !== ""){
  581.                 localStorage.beenThere_Settings = $('#txtBTImportSettings')[0].value;
  582.                 LoadSettingsObj();
  583.                 LoadSettings();
  584.             }
  585.         });
  586.  
  587.         new Clipboard('#btnBTCopySettings');
  588.     }
  589.  
  590.     function isChecked(checkboxId) {
  591.         return $('#' + checkboxId).is(':checked');
  592.     }
  593.  
  594.     function setChecked(checkboxId, checked) {
  595.         $('#' + checkboxId).prop('checked', checked);
  596.     }
  597.  
  598.     function initColorPicker(tries){
  599.          tries = tries || 1;
  600.  
  601.         if ($('#colorPicker1')[0].jscolor && $('#colorPicker2')[0].jscolor) {
  602.             $('#colorPicker1')[0].jscolor.fromString(beenTheresettings.CP1);
  603.             $('#colorPicker2')[0].jscolor.fromString(beenTheresettings.CP2);
  604.             $('#colorPicker3')[0].jscolor.fromString(beenTheresettings.CP3);
  605.             $('#colorPicker4')[0].jscolor.fromString(beenTheresettings.CP4);
  606.             $('[id^="colorPicker"]')[0].jscolor.closeText = 'Close';
  607.             $('#colorPicker1')[0].jscolor.onChange = jscolorChanged;
  608.             $('#colorPicker2')[0].jscolor.onChange = jscolorChanged;
  609.             $('#colorPicker3')[0].jscolor.onChange = jscolorChanged;
  610.             $('#colorPicker4')[0].jscolor.onChange = jscolorChanged;
  611.  
  612.  
  613.         } else if (tries < 1000) {
  614.             setTimeout(function () {initColorPicker(tries++);}, 200);
  615.         }
  616.     }
  617.  
  618.     function jscolorChanged(){
  619.         beenTheresettings.CP1 = "#" + $('#colorPicker1')[0].jscolor.toString();
  620.         beenTheresettings.CP2 = "#" + $('#colorPicker2')[0].jscolor.toString();
  621.         beenTheresettings.CP3 = "#" + $('#colorPicker3')[0].jscolor.toString();
  622.         beenTheresettings.CP4 = "#" + $('#colorPicker4')[0].jscolor.toString();
  623.         //In case they changed the color of the currently selected color, re-set currColor
  624.         currColor = '#' + $('#' + $("input[type='radio'][name='currColor']:checked").val())[0].jscolor.toString();
  625.         saveSettings();
  626.     }
  627.  
  628.     function LoadSettingsObj() {
  629.         var loadedSettings;
  630.         try{
  631.             loadedSettings = $.parseJSON(localStorage.getItem("beenThere_Settings"));
  632.         }
  633.         catch(err){
  634.             loadedSettings = null;
  635.         }
  636.         var defaultSettings = {
  637.             layerHistory: [],
  638.             LocLeft: "6px",
  639.             LocTop: "280px",
  640.             CP1: "#FDA400",
  641.             CP2: "#fd0303",
  642.             CP3: "#1303fd",
  643.             CP4: "#00fd22",
  644.             DrawShapeBorder: true,
  645.             FillShape: false
  646.         };
  647.         beenTheresettings = loadedSettings ? loadedSettings : defaultSettings;
  648.         for (var prop in defaultSettings) {
  649.             if (!beenTheresettings.hasOwnProperty(prop))
  650.                 beenTheresettings[prop] = defaultSettings[prop];
  651.         }
  652.  
  653.         currColor = beenTheresettings.CP1;
  654.     }
  655.  
  656.     function saveSettings() {
  657.         if (localStorage) {
  658.             var localsettings = {
  659.                 layerHistory: beenTheresettings.layerHistory,
  660.                 LocLeft: beenTheresettings.LocLeft,
  661.                 LocTop: beenTheresettings.LocTop,
  662.                 CP1: beenTheresettings.CP1,
  663.                 CP2: beenTheresettings.CP2,
  664.                 CP3: beenTheresettings.CP3,
  665.                 CP4: beenTheresettings.CP4,
  666.                 DrawShapeBorder: beenTheresettings.DrawShapeBorder,
  667.                 FillShape: beenTheresettings.FillShape
  668.             };
  669.             localStorage.setItem("beenThere_Settings", JSON.stringify(localsettings));
  670.         }
  671.     }
  672. })();