☰

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      2025.06.06.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. // @license      GNU GPLv3
  9. // @connect      greasyfork.org
  10. // @grant        GM_xmlhttpRequest
  11. // @grant        GM_addElement
  12. // @require      https://greasyfork.org/scripts/24851-wazewrap/code/WazeWrap.js
  13. // @require      https://update.greasyfork.org/scripts/509664/WME%20Utils%20-%20Bootstrap.js
  14.  
  15. // ==/UserScript==
  16.  
  17. /* global W */
  18. /* global WazeWrap */
  19. /* global bootstrap */
  20.  
  21. (function main() {
  22.     'use strict';
  23.  
  24.     let originalPointStyle = null;
  25.     let originalHoverPointStyle = null;
  26.     let originalSelectedPointStyle = null;
  27.     let originalPolygonStyle = null;
  28.     let originalHoverPolygonStyle = null;
  29.     let originalSelectedPolygonStyle = null;
  30.  
  31.     const updateMessage = 'Restored the functionality of stopping the color shifting/flashing on mousehover<br><br>';
  32.     const scriptName = GM_info.script.name;
  33.     const scriptVersion = GM_info.script.version;
  34.     const downloadUrl = 'https://update.greasyfork.org/scripts/380974/WME%20Colored%20Map%20Comments.user.js';
  35.     const forumUrl = 'https://www.waze.com/forum/viewtopic.php?f=819&t=279838';
  36.  
  37.     function ChangeColor() {
  38.         const defaultRules = W.map.getLayerByUniqueName('mapComments').styleMap.styles.default.rules;
  39.         const highlightRules = W.map.getLayerByUniqueName('mapComments').styleMap.styles.highlight.rules;
  40.         const selectRules = W.map.getLayerByUniqueName('mapComments').styleMap.styles.highlightselected.rules;
  41.         const mcStyle = defaultRules[0];
  42.         const hoverStyle = highlightRules[1];
  43.         const selectedStyle = selectRules[1];
  44.  
  45.         if (!originalPointStyle && mcStyle && mcStyle.symbolizer.Point) {
  46.             originalPointStyle = { ...mcStyle.symbolizer.Point };
  47.             originalHoverPointStyle = { ...hoverStyle.symbolizer.Point };
  48.             originalSelectedPointStyle = { ...selectedStyle.symbolizer.Point };
  49.         }
  50.         if (!originalPolygonStyle && mcStyle && mcStyle.symbolizer.Polygon) {
  51.             originalPolygonStyle = { ...mcStyle.symbolizer.Polygon };
  52.             originalHoverPolygonStyle = { ...hoverStyle.symbolizer.Polygon };
  53.             originalSelectedPolygonStyle = { ...selectedStyle.symbolizer.Polygon };
  54.         }
  55.  
  56.         if (mcStyle) {
  57.         // MC Points
  58.             if ($('#MCP').is(':checked')) {
  59.                 mcStyle.symbolizer.Point.fillColor = localStorage.getItem('CMC-Point');
  60.                 mcStyle.symbolizer.Point.fillOpacity = localStorage.getItem('CMC-MCPOpacity');
  61.                 hoverStyle.symbolizer.Point.fillColor = localStorage.getItem('CMC-Point');
  62.                 hoverStyle.symbolizer.Point.fillOpacity = localStorage.getItem('CMC-MCPOpacity') - 0.1;
  63.                 selectedStyle.symbolizer.Point.fillColor = localStorage.getItem('CMC-Point');
  64.             } else {
  65.                 mcStyle.symbolizer.Point.fillColor = '#ffffff';
  66.                 mcStyle.symbolizer.Point.fillOpacity = '0.3';
  67.                 hoverStyle.symbolizer.Point.fillColor = '#ffffff';
  68.                 hoverStyle.symbolizer.Point.fillOpacity = '0.3';
  69.                 selectedStyle.symbolizer.Point.fillColor = '#ffffff';
  70.                 selectedStyle.symbolizer.Point.fillOpacity = '0.3';
  71.             }
  72.  
  73.             // MC Areas
  74.             if ($('#MCA').is(':checked')) {
  75.                 mcStyle.symbolizer.Polygon.fillColor = localStorage.getItem('CMC-Area');
  76.                 mcStyle.symbolizer.Polygon.strokeColor = localStorage.getItem('CMC-Area');
  77.                 mcStyle.symbolizer.Polygon.fillOpacity = localStorage.getItem('CMC-MCAOpacity');
  78.                 hoverStyle.symbolizer.Polygon.fillColor = localStorage.getItem('CMC-Area');
  79.                 hoverStyle.symbolizer.Polygon.strokeColor = localStorage.getItem('CMC-Area');
  80.                 hoverStyle.symbolizer.Polygon.fillOpacity = localStorage.getItem('CMC-MCAOpacity') - 0.1;
  81.                 selectedStyle.symbolizer.Polygon.fillColor = localStorage.getItem('CMC-Area');
  82.                 selectedStyle.symbolizer.Polygon.strokeColor = localStorage.getItem('CMC-Area');
  83.             } else {
  84.                 mcStyle.symbolizer.Polygon.fillColor = '#ffffff';
  85.                 mcStyle.symbolizer.Polygon.strokeColor = '#ffffff';
  86.                 mcStyle.symbolizer.Polygon.fillOpacity = '0.3';
  87.                 hoverStyle.symbolizer.Polygon.fillColor = '#ffffff';
  88.                 hoverStyle.symbolizer.Polygon.strokeColor = '#ffffff';
  89.                 hoverStyle.symbolizer.Polygon.fillOpacity = '0.3';
  90.                 selectedStyle.symbolizer.Polygon.fillColor = '#ffffff';
  91.                 selectedStyle.symbolizer.Polygon.strokeColor = '#ffffff';
  92.                 selectedStyle.symbolizer.Polygon.fillOpacity = '0.3';
  93.             }
  94.             W.map.getLayersByName('mapComments')[0].redraw();
  95.         }
  96.     }
  97.     function Save() {
  98.         localStorage.setItem('CMC-Point', $('#CMC-Point').val());
  99.         localStorage.setItem('CMC-Area', $('#CMC-Area').val());
  100.         localStorage.setItem('CMC-MCPOpacity', $('#MCP-Slider').val() / 100);
  101.         localStorage.setItem('CMC-MCAOpacity', $('#MCA-Slider').val() / 100);
  102.         ChangeColor();
  103.         $('#CMC-colorWheelPoint')[0].value = localStorage.getItem('CMC-Point');
  104.         $('#CMC-colorWheelArea')[0].value = localStorage.getItem('CMC-Area');
  105.         localStorage.setItem('MCP', $('#MCP').is(':checked'));
  106.         localStorage.setItem('MCA', $('#MCA').is(':checked'));
  107.         /* console.log(['CMC Settings Saved:',
  108.                      'CMC-Point: '+localStorage.getItem('CMC-Point'),
  109.                      'CMC-Area: '+localStorage.getItem('CMC-Area'),
  110.                      'CMC-MCPOpacity: '+localStorage.getItem('CMC-MCPOpacity'),
  111.                      'CMC-MCAOpacity: '+localStorage.getItem('CMC-MCAOpacity'),
  112.                     ].join('\n')); */
  113.     }
  114.     function init() {
  115.         const $section = $('<div id="CMC-Panel">');
  116.         $section.html([
  117.             `<h5 align="left" style="color:black">Colored Map Comments v${GM_info.script.version},</h5>`,
  118.             '<input data-toggle="tooltip" type="checkbox" id="MCP" title="Enable Color Highlighting for MC Points">Colored MC Points</input>',
  119.             '<br>',
  120.             '<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>',
  121.             `<input style="width: 25px; margin-left: 5px; top: -7px; position: relative;" id="CMC-colorWheelPoint" type="color" value="${localStorage.getItem('CMC-Point')}"></input>`,
  122.             '<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>',
  123.             '<br>',
  124.             '<input id="MCA" type="checkbox" title="Enable Color Highlighting for MC Area Polygons" data-toggle="tooltip">Colored MC Areas</input><br>',
  125.             '<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>',
  126.             `<input style="width: 25px; margin-left: 5px; top: -7px; position: relative;" id="CMC-colorWheelArea" type="color" value="${localStorage.getItem('CMC-Area')}">`,
  127.             '<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>',
  128.             '<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>'
  129.         ].join(' '));
  130.  
  131.         WazeWrap.Interface.Tab('MC Colors', $section.html(), () => {
  132.             $('#MCP')[0].checked = localStorage.getItem('MCP') === 'true';
  133.             $('#MCA')[0].checked = localStorage.getItem('MCA') === 'true';
  134.             $('#CMC-colorWheelPoint')[0].onchange = function onCmcColorWheelPointChange() {
  135.                 $('#CMC-Point')[0].value = $('#CMC-colorWheelPoint')[0].value;
  136.                 Save();
  137.             };
  138.             $('#CMC-Point').val(localStorage.getItem('CMC-Point'));
  139.             $('#MCP-Slider').val(localStorage.getItem('CMC-MCPOpacity') * 100);
  140.             $('#MCA-Slider').val(localStorage.getItem('CMC-MCAOpacity') * 100);
  141.             $('#CMC-colorWheelArea')[0].onchange = function onCmcColorWheelAreaChange() {
  142.                 $('#CMC-Area')[0].value = $('#CMC-colorWheelArea')[0].value;
  143.                 Save();
  144.             };
  145.             $('#MCP-Slider')[0].onchange = function onMcpSliderChange() {
  146.                 Save();
  147.             };
  148.             $('#MCA-Slider')[0].onchange = function onMcaSliderChange() {
  149.                 Save();
  150.             };
  151.             $('#MCP')[0].onchange = function onMcpChange() {
  152.                 Save();
  153.             };
  154.             $('#MCA')[0].onchange = function onMcaChange() {
  155.                 Save();
  156.             };
  157.             $('#CMC-Save')[0].onclick = function onCmcSaveClick() {
  158.                 Save();
  159.             };
  160.             $('#CMC-Area').val(localStorage.getItem('CMC-Area'));
  161.             ChangeColor();
  162.             $('[data-toggle="tooltip"]').tooltip();
  163.         }, 'MC Colors');
  164.     }
  165.  
  166.     function sandboxBootstrap() {
  167.         if (WazeWrap?.Ready) {
  168.             bootstrap({
  169.                 scriptUpdateMonitor: { downloadUrl }
  170.             });
  171.             init();
  172.             WazeWrap.Interface.ShowScriptUpdate(scriptName, scriptVersion, updateMessage, downloadUrl, forumUrl);
  173.         } else {
  174.             setTimeout(sandboxBootstrap, 250);
  175.         }
  176.     }
  177.  
  178.     // Start the "sandboxed" code.
  179.     sandboxBootstrap();
  180.     console.log(`${scriptName} initialized.`);
  181. })();