☰

WME Colored Map Comments

Change the color of Map Comment Points based on HEX Color Code.

  1. // ==UserScript==
  2. // @name         WME Colored Map Comments
  3. // @namespace    Dude495
  4. // @version      2023.03.17.01
  5. // @author       Dude495
  6. // @description  Change the color of Map Comment Points based on HEX Color Code.
  7. // @include      /^https:\/\/(www|beta)\.waze\.com\/(?!user\/)(.{2,6}\/)?editor\/?.*$/
  8. // @require      https://greasyfork.org/scripts/24851-wazewrap/code/WazeWrap.js
  9. // @license      GNU GPLv3
  10. // @grant        none
  11. /* global W */
  12. /* global $ */
  13. /* global WazeWrap */
  14. // ==/UserScript==
  15.  
  16. (function() {
  17.     'use strict';
  18.     function ChangeColor() {
  19.         let defaultRules = W.map.getLayerByUniqueName('mapComments').styleMap.styles.default.rules;
  20.         let highlightRules = W.map.getLayerByUniqueName('mapComments').styleMap.styles.highlight.rules;
  21.         let selectRules = W.map.getLayerByUniqueName('mapComments').styleMap.styles.highlightselected.rules;
  22.         let mcStyle = defaultRules[0];
  23.         let hoverStyle = highlightRules[1];
  24.         let selectedStyle = selectRules[1];
  25.         if (mcStyle) {
  26.             if ($('#MCP').is(':checked')) {
  27.                 mcStyle.symbolizer.Point.fillColor = localStorage.getItem('CMC-Point');
  28.                 mcStyle.symbolizer.Point.fillOpacity = localStorage.getItem('CMC-MCPOpacity');
  29.                 hoverStyle.symbolizer.Point.fillColor = localStorage.getItem('CMC-Point');
  30.                 hoverStyle.symbolizer.Point.fillOpacity = localStorage.getItem('CMC-MCPOpacity')-0.1;
  31.                 selectedStyle.symbolizer.Point.fillColor = localStorage.getItem('CMC-Point');
  32.                 //selectedStyle.symbolizer.Point.fillOpacity = localStorage.getItem('CMC-MCPOpacity');
  33.                 W.map.getLayersByName("mapComments")[0].redraw();
  34.             } else {
  35.                 mcStyle.symbolizer.Point.fillColor = '#ffffff';
  36.                 mcStyle.symbolizer.Point.fillOpacity = '0.3'
  37.                 hoverStyle.symbolizer.Point.fillColor = '#ffffff';
  38.                 hoverStyle.symbolizer.Point.fillOpacity = '0.3'
  39.                 selectedStyle.symbolizer.Point.fillColor = '#ffffff';
  40.                 selectedStyle.symbolizer.Point.fillOpacity = '0.3'
  41.                 W.map.getLayersByName("mapComments")[0].redraw();
  42.             }
  43.             if ($('#MCA').is(':checked')) {
  44.                 mcStyle.symbolizer.Polygon.fillColor = localStorage.getItem('CMC-Area');
  45.                 mcStyle.symbolizer.Polygon.strokeColor = localStorage.getItem('CMC-Area');
  46.                 mcStyle.symbolizer.Polygon.fillOpacity = localStorage.getItem('CMC-MCAOpacity');
  47.                 hoverStyle.symbolizer.Polygon.fillColor = localStorage.getItem('CMC-Area');
  48.                 hoverStyle.symbolizer.Polygon.strokeColor = localStorage.getItem('CMC-Area');
  49.                 hoverStyle.symbolizer.Polygon.fillOpacity = localStorage.getItem('CMC-MCAOpacity')-0.1;
  50.                 selectedStyle.symbolizer.Polygon.fillColor = localStorage.getItem('CMC-Area');
  51.                 selectedStyle.symbolizer.Polygon.strokeColor = localStorage.getItem('CMC-Area');
  52.                 //selectedStyle.symbolizer.Polygon.fillOpacity = localStorage.getItem('CMC-MCAOpacity')
  53.                 W.map.getLayersByName("mapComments")[0].redraw();
  54.             } else {
  55.                 mcStyle.symbolizer.Polygon.fillColor = '#ffffff';
  56.                 mcStyle.symbolizer.Polygon.strokeColor = '#ffffff';
  57.                 mcStyle.symbolizer.Polygon.fillOpacity = '0.3'
  58.                 hoverStyle.symbolizer.Polygon.fillColor = '#ffffff';
  59.                 hoverStyle.symbolizer.Polygon.strokeColor = '#ffffff';
  60.                 hoverStyle.symbolizer.Polygon.fillOpacity = '0.3'
  61.                 selectedStyle.symbolizer.Polygon.fillColor = '#ffffff';
  62.                 selectedStyle.symbolizer.Polygon.strokeColor = '#ffffff';
  63.                 selectedStyle.symbolizer.Polygon.fillOpacity = '0.3'
  64.                 W.map.getLayersByName("mapComments")[0].redraw();
  65.             }
  66.         }
  67.     }
  68.     function Save() {
  69.         localStorage.setItem('CMC-Point', $('#CMC-Point').val());
  70.         localStorage.setItem('CMC-Area', $('#CMC-Area').val());
  71.         localStorage.setItem('CMC-MCPOpacity', $('#MCP-Slider').val()/100);
  72.         localStorage.setItem('CMC-MCAOpacity', $('#MCA-Slider').val()/100);
  73.         ChangeColor();
  74.         $('#CMC-colorWheelPoint')[0].value = localStorage.getItem('CMC-Point');
  75.         $('#CMC-colorWheelArea')[0].value = localStorage.getItem('CMC-Area');
  76.         localStorage.setItem('MCP', $('#MCP').is(':checked'));
  77.         localStorage.setItem('MCA', $('#MCA').is(':checked'));
  78.         /*console.log(['CMC Settings Saved:',
  79.                      'CMC-Point: '+localStorage.getItem('CMC-Point'),
  80.                      'CMC-Area: '+localStorage.getItem('CMC-Area'),
  81.                      'CMC-MCPOpacity: '+localStorage.getItem('CMC-MCPOpacity'),
  82.                      'CMC-MCAOpacity: '+localStorage.getItem('CMC-MCAOpacity'),
  83.                     ].join('\n'));*/
  84.     }
  85.     function init() {
  86.         var $section = $('<div id="CMC-Panel">');
  87.         $section.html([
  88.             '<h5 align="left" style="color:black">Colored Map Comments v'+GM_info.script.version+',</h5>',
  89.             '<input data-toggle="tooltip" type="checkbox" id="MCP" title="Enable Color Highlighting for MC Points">Colored MC Points</input>',
  90.             '<br>',
  91.             '<textarea style="resize: none; width: 85px; height: 25px;" rows="1" cols="10" maxlength="7" id="CMC-Point" data-toggle="tooltip" title="Enter the HEX Color Code for the color you want Map Comments to appear. (Include the #)" maxlength="7"></textarea>',
  92.             '<input style="width: 25px; margin-left: 5px; top: -7px; position: relative;" id="CMC-colorWheelPoint" type="color" value="'+localStorage.getItem("CMC-Point")+'"></input>',
  93.             '<div class="rangeslider" title="Set opacity level" style="resize: none; width: 100px;"><input type="range" min="1" max="100" value="10" class="myslider" id="MCP-Slider"></div>',
  94.             '<br>',
  95.             '<input id="MCA" type="checkbox" title="Enable Color Highlighting for MC Area Polygons" data-toggle="tooltip">Colored MC Areas</input><br>',
  96.             '<textarea style="resize: none; width: 85px; height: 25px;" rows="1" cols="10" maxlength="7" id="CMC-Area" data-toggle="tooltip" title="Enter the HEX Color Code for the color you want Map Comment Areas to appear. (Include the #)"></textarea>',
  97.             '<input style="width: 25px; margin-left: 5px; top: -7px; position: relative;" id="CMC-colorWheelArea" type="color" value="'+localStorage.getItem("CMC-Area")+'">',
  98.             '<div class="rangeslider" title="Set opacity level" style="resize: none; width: 100px;"><input type="range" min="1" max="100" value="10" id="MCA-Slider" class="myslider"></input></div>',
  99.             '<button class="btn btn-success" style="margin-bottom: 25px;" id="CMC-Save" data-toggle="tooltip" title="This button is only needed if you manually change the HEX Code">Save</button>'
  100.         ].join(' '));
  101.         //$('#sidepanel-prefs').append($section);
  102.         WazeWrap.Interface.Tab('MC Colors', $section.html(), ChangeColor, 'MC Colors');
  103.         if (localStorage.getItem('MCP') === "true") {
  104.             $('#MCP')[0].checked = true
  105.         } else {
  106.             $('#MCP')[0].checked = false
  107.         }
  108.         if (localStorage.getItem('MCA') === "true") {
  109.             $('#MCA')[0].checked = true
  110.         } else {
  111.             $('#MCA')[0].checked = false
  112.         }
  113.         $('#CMC-colorWheelPoint')[0].onchange = function() {
  114.             $('#CMC-Point')[0].value = $('#CMC-colorWheelPoint')[0].value;
  115.             Save();
  116.         }
  117.         $("#CMC-Point").val(localStorage.getItem('CMC-Point'));
  118.         $('#MCP-Slider').val(localStorage.getItem("CMC-MCPOpacity")*100);
  119.         $('#MCA-Slider').val(localStorage.getItem("CMC-MCAOpacity")*100);
  120.         $('#CMC-colorWheelArea')[0].onchange = function() {
  121.             $('#CMC-Area')[0].value = $('#CMC-colorWheelArea')[0].value;
  122.             Save();
  123.         }
  124.         $('#MCP-Slider')[0].onchange = function() {
  125.             Save();
  126.         }
  127.         $('#MCA-Slider')[0].onchange = function() {
  128.             Save();
  129.         }
  130.         $('#MCP')[0].onchange = function() {
  131.             Save();
  132.         }
  133.         $('#MCA')[0].onchange = function() {
  134.             Save();
  135.         }
  136.         $('#CMC-Save')[0].onclick = function() {
  137.             Save();
  138.         }
  139.         $("#CMC-Area").val(localStorage.getItem('CMC-Area'));
  140.         ChangeColor();
  141.         $('[data-toggle="tooltip"]').tooltip();
  142.     }
  143.     function bootstrap() {
  144.         if (W && W.loginManager && W.loginManager.user && WazeWrap.Ready) {
  145.             console.log(GM_info.script.name, 'Initialized');
  146.             init();
  147.             WazeWrap.Interface.ShowScriptUpdate(GM_info.script.name, GM_info.script.version, '<ul><li>Code Change<ol style="list-style-type: lower-alpha; padding-bottom: 0;"><li>Created tab in the <b>Scripts</b> section of the new WME interface instead of having the controls under WME Settings.</li></li></ul><br><br><br>', "https://greasyfork.org/en/scripts/380974-wme-colored-map-comments","https://www.waze.com/forum/viewtopic.php?f=819&t=279838");
  148.         } else {
  149.             console.log(GM_info.script.name, 'Bootstrap failed.  Trying again...');
  150.             window.setTimeout(() => bootstrap(), 500);
  151.         }
  152.     }
  153.     bootstrap();
  154. })();