☰

WME Open Other Maps

Links for opening external resources at the WME location

当前为 2018-01-24 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         WME Open Other Maps
  3. // @namespace    https://greasyfork.org/users/30701-justins83-waze
  4. // @version      2018.01.24.01
  5. // @description  Links for opening external resources at the WME location
  6. // @author       JustinS83
  7. // @include      https://www.waze.com/editor*
  8. // @include      https://www.waze.com/*/editor*
  9. // @include      https://beta.waze.com*
  10. // @include      https://www.google.com/maps*
  11. // @exclude      https://www.waze.com/user/editor*
  12. // @require      https://greasyfork.org/scripts/24851-wazewrap/code/WazeWrap.js
  13. // @resource     jqUI_CSS  https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css
  14. // @grant        GM_addStyle
  15. // @grant        GM_getResourceText
  16. // ==/UserScript==
  17.  
  18. (function() {
  19.     'use strict';
  20.     var jqUI_CssSrc = GM_getResourceText("jqUI_CSS");
  21.     GM_addStyle(jqUI_CssSrc);
  22.  
  23.     var settings = {};
  24.  
  25.     function initInterface(){
  26.         var $section = $("<div>");
  27.         $section.html([
  28.             '<div>',
  29.             "<p>The below maps are for <span style='color:red; font-weight:bold;'>reference only</span> and <b>no data</b> should be copied from them as it violates copyright.</br>",
  30.             '<div><input type="checkbox" id="chkGMaps" class="OOMchk"><label for="chkGMaps"><img src="http://i.imgur.com/whsQQFE.png" height="18" width="18">Google Maps</label></div>',
  31.             '<div><input type="checkbox" id="chkMapillary" class="OOMchk"><label for="chkMapillary"><img src="https://i.imgur.com/vG2qieS.png" height="18" width="18">Mapillary</label></div>',
  32.             '<div><input type="checkbox" id="chkTerraserver" class="OOMchk"><label for="chkTerraserver"><img src="https://imgur.com/IPUFNnR.png" height="18" width="18">Terraserver</label></div>',
  33.             '<div><input type="checkbox" id="chkWikimapia" class="OOMchk"><label for="chkWikimapia"><img src="https://imgur.com/UsOwmvT.png" height="18" width="18">Wikimapia</label></div>',
  34.             '<div><input type="checkbox" id="chkBing" class="OOMchk"><label for="chkBing"><img src="https://imgur.com/CF430d2.png" height="18" width="18">Bing Maps</label></div>',
  35.             '<div><input type="checkbox" id="chkOSM" class="OOMchk"><label for="chkOSM"><img src="https://imgur.com/xVqNdmm.png" height="18" width ="18">Open Street Map</label></div>',
  36.             '<div><input type="checkbox" id="chkYandex" class="OOMchk"><label for="chkYandex"><img src="https://imgur.com/wpoUA1E.png" height="18" width ="18">Yandex</label></div>',
  37.             '<div><input type="checkbox" id="chkHere" class="OOMchk"><label for="chkHere"><img src="https://imgur.com/6XGwxUg.png" height="18" width ="18">Here</label></div>',
  38.             '</br><div>',
  39.             '<fieldsetstyle="border: 1px solid silver; padding: 8px; border-radius: 4px;">',
  40.             '<legend style="margin-bottom:0px; border-bottom-style:none;width:auto;"><h4>Map Language (where applicable)</h4></legend>',
  41.             '<input type="radio" name="radOOMLanguage" id="radOOMNoLang">Do not set a language</br>',
  42.             '<input type="radio" name="radOOMLanguage" id="radOOMWMELang">Use WME language</br>',
  43.             '<input type="radio" name="radOOMLanguage" id="radOOMCustomLang">Custom language <input type="text" name="txtOOMLanguage" id="txtOOMLanguage" style="border: 1px solid #000000;" size="4"/>',
  44.             '</fieldset>',
  45.             '</div>',
  46.             '</div>'
  47.         ].join(' '));
  48.  
  49.         new WazeWrap.Interface.Tab('OOM', $section.html(), init);
  50.     }
  51.  
  52.     function init(){
  53.         loadSettings();
  54.         setChecked('chkGMaps', settings.GMaps);
  55.         setChecked('chkMapillary', settings.Mapillary);
  56.         setChecked('chkTerraserver', settings.Terraserver);
  57.         setChecked('chkWikimapia', settings.Wikimapia);
  58.         setChecked('chkBing', settings.Bing);
  59.         setChecked('chkOSM', settings.OSM);
  60.         setChecked('chkYandex', settings.Yandex);
  61.         setChecked('chkHere', settings.Here);
  62.  
  63.         if(settings.LangSetting == 0)
  64.             setChecked("radOOMNoLang", true);
  65.         else if(settings.LangSetting == 1)
  66.             setChecked("radOOMWMELang", true);
  67.         else
  68.             setChecked("radOOMCustomLang", true);
  69.  
  70.         $('#txtOOMLanguage')[0].value = settings.CustLang;
  71.  
  72.         $('.olControlAttribution').css("right", "400px");
  73.  
  74.         LoadMapButtons();
  75.         $('.OOMchk').change(function() {
  76.              var settingName = $(this)[0].id.substr(3);
  77.             settings[settingName] = this.checked;
  78.             saveSettings();
  79.             LoadMapButtons();
  80.         });
  81.         $("[id^='rad']").change(function() {
  82.             if(isChecked("radOOMNoLang"))
  83.                 settings.LangSetting = 0;
  84.             else if(isChecked("radOOMWMELang"))
  85.                 settings.LangSetting = 1;
  86.             else
  87.                 settings.LangSetting = 2;
  88.             saveSettings();
  89.         });
  90.         $('#txtOOMLanguage').focusout(function(){
  91.             settings.CustLang = $('#txtOOMLanguage').val();
  92.             saveSettings();
  93.         });
  94.     }
  95.  
  96.     function GetLanguage()
  97.     {
  98.         if(isChecked("radOOMNoLang"))
  99.             return "";
  100.         else if(isChecked("radOOMWMELang"))
  101.             return I18n.currentLocale().replace("en-US", "en");
  102.         else //Custom Language
  103.             return $('#txtOOMLanguage').val();
  104.     }
  105.  
  106.     function LoadMapButtons()
  107.     {
  108.         $('#OOMGMaps').remove();
  109.         if(settings.GMaps)
  110.         {
  111.             var $section = $("<div>", {style:"padding:8px 16px"});
  112.             $section.html([
  113.                 '<span id="OOMGMaps">',
  114.                 '<img src="http://i.imgur.com/whsQQFE.png" alt="Google Maps" width="18" height="18" id="OOMGMapsImg" title="Open in Google Maps" style="cursor:pointer; float: left; display:inline-block; margin: 2px 5px 0 3px;">',
  115.                 '</span>'
  116.             ].join(' '));
  117.  
  118.             $('.view-area.olMap >div > div > div.WazeControlPermalink').append($section.html());
  119.  
  120.             $('#OOMGMapsImg').click(function(){
  121.                 let projI = new OpenLayers.Projection("EPSG:900913");
  122.                 let projE = new OpenLayers.Projection("EPSG:4326");
  123.                 let center_lonlat = (new OpenLayers.LonLat(Waze.map.center.lon, Waze.map.center.lat)).transform(projI,projE);
  124.                 let lat = Math.round(center_lonlat.lat * 1000000) / 1000000;
  125.                 let lon = Math.round(center_lonlat.lon * 1000000) / 1000000;
  126.                 let lang = GetLanguage();
  127.  
  128.                 window.open('https://www.google.com/maps/@' + lat + ',' + lon + ',' + ( W.map.zoom + 12) + 'z' + (lang != "" ? "?hl=" + lang : ""), 'Google Maps');
  129.             });
  130.         }
  131.  
  132.  
  133.         //************** Mapillary *****************
  134.         $('#OOMMapillary').remove();
  135.         if(settings.Mapillary){
  136.             var $sectionMapillary = $("<div>", {style:"padding:8px 16px"});
  137.             $sectionMapillary.html([
  138.                 '<span id="OOMMapillary">',
  139.                 '<img src="https://i.imgur.com/vG2qieS.png" alt="Mapillary" width="18" height="18" id="OOMMapillaryImg" title="Open in Mapillary" style="cursor:pointer; float: left; display:inline-block; margin: 2px 5px 0 3px;">',
  140.                 '</span>'
  141.             ].join(' '));
  142.  
  143.             $('.view-area.olMap >div > div > div.WazeControlPermalink').append($sectionMapillary.html());
  144.             $('#OOMMapillaryImg').click(function(){
  145.                 var projI=new OpenLayers.Projection("EPSG:900913");
  146.                 var projE=new OpenLayers.Projection("EPSG:4326");
  147.                 var center_lonlat = (new OpenLayers.LonLat(Waze.map.center.lon, Waze.map.center.lat)).transform(projI,projE);
  148.                 var lat = Math.round(center_lonlat.lat * 1000000) / 1000000;
  149.                 var lon = Math.round(center_lonlat.lon * 1000000) / 1000000;
  150.  
  151.                 window.open(`https://www.mapillary.com/app/?lat=${lat}&lng=${lon}&z=${( W.map.zoom + 11)}`, 'Mapillary');
  152.             });
  153.         }
  154.  
  155.  
  156.         //****************** Terraserver *********************
  157.         $('#OOMTerraserver').remove();
  158.         if(settings.Terraserver){
  159.             var $sectionTerraserver = $("<div>", {style:"padding:8px 16px"});
  160.             $sectionTerraserver.html([
  161.                 '<span id="OOMTerraserver">',
  162.                 '<img src="https://imgur.com/IPUFNnR.png" alt="Terraserver" width="18" height="18" id="OOMTerraserverImg" title="Open in Terraserver" style="cursor:pointer; float: left; display:inline-block; margin: 2px 5px 0 3px;">',
  163.                 '</span>'
  164.             ].join(' '));
  165.  
  166.             $('.view-area.olMap >div > div > div.WazeControlPermalink').append($sectionTerraserver.html());
  167.             $('#OOMTerraserverImg').click(function(){
  168.                 var center_lonlat=OpenLayers.Layer.SphericalMercator.inverseMercator(Waze.map.getCenter().lon,Waze.map.getCenter().lat);
  169.                 window.open(`http://www.terraserver.com/view?utf8=✓&searchLng=${center_lonlat.lon}&searchLat=${center_lonlat.lat}`);
  170.             });
  171.         }
  172.  
  173.  
  174.         //********************* Wikimapia *********************
  175.         $('#OOMWikimapia').remove();
  176.         if(settings.Wikimapia){
  177.             let $sectionWikimapia = $("<div>", {style:"padding:8px 16px"});
  178.             $sectionWikimapia.html([
  179.                 '<span id="OOMWikimapia">',
  180.                 '<img src="https://imgur.com/UsOwmvT.png" alt="Wikimapia" width="18" height="18" id="OOMWikimapiaImg" title="Open in Wikimapia" style="cursor:pointer; float: left; display:inline-block; margin: 2px 5px 0 3px;">',
  181.                 '</span>'
  182.             ].join(' '));
  183.  
  184.             $('.view-area.olMap >div > div > div.WazeControlPermalink').append($sectionWikimapia.html());
  185.             $('#OOMWikimapiaImg').click(function(){
  186.                 //var center_lonlat=OpenLayers.Layer.SphericalMercator.inverseMercator(Waze.map.getCenter().lon,Waze.map.getCenter().lat);
  187.                 var projI=new OpenLayers.Projection("EPSG:900913");
  188.                 var projE=new OpenLayers.Projection("EPSG:4326");
  189.                 var center_lonlat = (new OpenLayers.LonLat(Waze.map.center.lon, Waze.map.center.lat)).transform(projI,projE);
  190.                 var lat = Math.round(center_lonlat.lat * 1000000) / 1000000;
  191.                 var lon = Math.round(center_lonlat.lon * 1000000) / 1000000;
  192.                 let lang = GetLanguage();
  193.                 if(lang === "")
  194.                     lang = "en";
  195.                 window.open(`http://wikimapia.org/#${(lang !== "" ? "lang=" + lang : "")}&lat=${lat}&lon=${lon}&z=${( W.map.zoom + 12)}&m=b`);
  196.             });
  197.         }
  198.  
  199.         $('#OOMBing').remove();
  200.         if(settings.Bing)
  201.         {
  202.             let $sectionBing = $("<div>", {style:"padding:8px 16px"});
  203.             $sectionBing.html([
  204.                 '<span id="OOMBing">',
  205.                 '<img src="https://imgur.com/CF430d2.png" alt="Bing Maps" width="18" height="18" id="OOMBingImg" title="Open in Bing Maps" style="cursor:pointer; float: left; display:inline-block; margin: 2px 5px 0 3px;">',
  206.                 '</span>'
  207.             ].join(' '));
  208.  
  209.             $('.view-area.olMap >div > div > div.WazeControlPermalink').append($sectionBing.html());
  210.  
  211.             $('#OOMBingImg').click(function(){
  212.                 let projI = new OpenLayers.Projection("EPSG:900913");
  213.                 let projE = new OpenLayers.Projection("EPSG:4326");
  214.                 let center_lonlat = (new OpenLayers.LonLat(Waze.map.center.lon, Waze.map.center.lat)).transform(projI,projE);
  215.                 let lat = Math.round(center_lonlat.lat * 1000000) / 1000000;
  216.                 let lon = Math.round(center_lonlat.lon * 1000000) / 1000000;
  217.                 //let lang = I18n.currentLocale().replace("en-US", "en");
  218.  
  219.                 window.open(`https://www.bing.com/maps?&cp=${lat}~${lon}&lvl=${( W.map.zoom + 12)}`);
  220.             });
  221.         }
  222.  
  223.         $('#OOMOSM').remove();
  224.         if(settings.OSM){
  225.             //https://www.openstreetmap.org/#map=16/39.5588/-84.2365
  226.             let $sectionOSM = $("<div>", {style:"padding:8px 16px"});
  227.             $sectionOSM.html([
  228.                 '<span id="OOMOSM">',
  229.                 '<img src="https://imgur.com/xVqNdmm.png" alt="Open Street Map" width="18" height="18" id="OOMOSMImg" title="Open in Open Street Maps" style="cursor:pointer; float: left; display:inline-block; margin: 2px 5px 0 3px;">',
  230.                 '</span>'
  231.             ].join(' '));
  232.  
  233.             $('.view-area.olMap >div > div > div.WazeControlPermalink').append($sectionOSM.html());
  234.  
  235.             $('#OOMOSMImg').click(function(){
  236.                 let projI = new OpenLayers.Projection("EPSG:900913");
  237.                 let projE = new OpenLayers.Projection("EPSG:4326");
  238.                 let center_lonlat = (new OpenLayers.LonLat(Waze.map.center.lon, Waze.map.center.lat)).transform(projI,projE);
  239.                 let lat = Math.round(center_lonlat.lat * 1000000) / 1000000;
  240.                 let lon = Math.round(center_lonlat.lon * 1000000) / 1000000;
  241.                 //let lang = I18n.currentLocale().replace("en-US", "en");
  242.  
  243.                 window.open(`https://www.openstreetmap.org/#map=${(W.map.zoom + 12)}/${lat}/${lon}`);
  244.             });
  245.         }
  246.  
  247.         $('#OOMYandex').remove();
  248.         if(settings.Yandex){
  249.             //https://n.maps.yandex.ru/#!/?z=14&ll=46.019795%2C51.505120&l=nk%23sat
  250.             let $sectionYandex = $("<div>", {style:"padding:8px 16px"});
  251.             $sectionYandex.html([
  252.                 '<span id="OOMYandex">',
  253.                 '<img src="https://imgur.com/wpoUA1E.png" alt="Yandex" width="18" height="18" id="OOMYandexImg" title="Open in Yandex" style="cursor:pointer; float: left; display:inline-block; margin: 2px 5px 0 3px;">',
  254.                 '</span>'
  255.             ].join(' '));
  256.  
  257.             $('.view-area.olMap >div > div > div.WazeControlPermalink').append($sectionYandex.html());
  258.  
  259.             $('#OOMYandexImg').click(function(){
  260.                 let projI = new OpenLayers.Projection("EPSG:900913");
  261.                 let projE = new OpenLayers.Projection("EPSG:4326");
  262.                 let center_lonlat = (new OpenLayers.LonLat(Waze.map.center.lon, Waze.map.center.lat)).transform(projI,projE);
  263.                 let lat = Math.round(center_lonlat.lat * 1000000) / 1000000;
  264.                 let lon = Math.round(center_lonlat.lon * 1000000) / 1000000;
  265.                 //let lang = I18n.currentLocale().replace("en-US", "en");
  266.  
  267.                 window.open(`https://n.maps.yandex.ru/#!/?z=${(W.map.zoom + 12)}&ll=${lon}%2C${lat}&l=nk%23sat`);
  268.             });
  269.         }
  270.  
  271.         $('#OOMHere').remove();
  272.         if(settings.Here){
  273.             //https://wego.here.com/?map=39.56508,-84.26224,16,normal&x=ep
  274.             let $sectionHere = $("<div>", {style:"padding:8px 16px"});
  275.             $sectionHere.html([
  276.                 '<span id="OOMHere">',
  277.                 '<img src="https://imgur.com/6XGwxUg.png" alt="Here" width="18" height="18" id="OOMHereImg" title="Open in Here" style="cursor:pointer; float: left; display:inline-block; margin: 2px 5px 0 3px;">',
  278.                 '</span>'
  279.             ].join(' '));
  280.  
  281.             $('.view-area.olMap >div > div > div.WazeControlPermalink').append($sectionHere.html());
  282.  
  283.             $('#OOMHereImg').click(function(){
  284.                 let projI = new OpenLayers.Projection("EPSG:900913");
  285.                 let projE = new OpenLayers.Projection("EPSG:4326");
  286.                 let center_lonlat = (new OpenLayers.LonLat(Waze.map.center.lon, Waze.map.center.lat)).transform(projI,projE);
  287.                 let lat = Math.round(center_lonlat.lat * 1000000) / 1000000;
  288.                 let lon = Math.round(center_lonlat.lon * 1000000) / 1000000;
  289.                 //let lang = I18n.currentLocale().replace("en-US", "en");
  290.  
  291.                 window.open(`https://wego.here.com/?map=${lat},${lon},${(W.map.zoom + 12)},satellite&x=ep`);
  292.             });
  293.         }
  294.     }
  295.  
  296.     function loadSettings() {
  297.         var loadedSettings = $.parseJSON(localStorage.getItem("OOM_Settings"));
  298.         var defaultSettings = {
  299.             GMaps: true,
  300.             Mapillary: true,
  301.             Terraserver: true,
  302.             Wikimapia: false,
  303.             Bing: false,
  304.             OSM: false,
  305.             LangSetting: 1,
  306.             CustLang: "",
  307.             Yandex: false,
  308.             Here: false
  309.         };
  310.         settings = loadedSettings ? loadedSettings : defaultSettings;
  311.         for (var prop in defaultSettings) {
  312.             if (!settings.hasOwnProperty(prop))
  313.                 settings[prop] = defaultSettings[prop];
  314.         }
  315.     }
  316.  
  317.     function saveSettings() {
  318.         if (localStorage) {
  319.             var localsettings = {
  320.                 GMaps: settings.GMaps,
  321.                 Mapillary: settings.Mapillary,
  322.                 Terraserver: settings.Terraserver,
  323.                 Wikimapia: settings.Wikimapia,
  324.                 Bing: settings.Bing,
  325.                 OSM: settings.OSM,
  326.                 LangSetting: settings.LangSetting,
  327.                 CustLang: settings.CustLang,
  328.                 Yandex: settings.Yandex,
  329.                 Here: settings.Here
  330.             };
  331.  
  332.             localStorage.setItem("OOM_Settings", JSON.stringify(localsettings));
  333.         }
  334.     }
  335.  
  336.     function isChecked(checkboxId) {
  337.         return $('#' + checkboxId).is(':checked');
  338.     }
  339.  
  340.     function setChecked(checkboxId, checked) {
  341.         $('#' + checkboxId).prop('checked', checked);
  342.     }
  343.  
  344.     function bootstrap(tries) {
  345.         tries = tries || 1;
  346.  
  347.         if(location.href.indexOf("google.com/maps") > -1)
  348.             bootstrapGM();
  349.         else{
  350.             if (W &&
  351.                 W.map &&
  352.                 W.model &&
  353.                 $ && WazeWrap.Interface) {
  354.                 initInterface();
  355.             } else if (tries < 1000) {
  356.                 setTimeout(function () {bootstrap(tries++);}, 200);
  357.             }}
  358.     }
  359.  
  360.     function initGoogleMaps(){
  361.         let $OOMWazeButton = document.createElement("div");
  362.         $OOMWazeButton.innerHTML = '<div id="OOMWazeButtonDiv" style="height:30px; width:34px; position: fixed; right:30px; top:75px; cursor: pointer; background-image: url(https://imgur.com/NTLWfFz.png); background-repeat: no-repeat;" title="Open in WME"></div>';
  363.         let parent = document.getElementById("content-container");
  364.         parent.appendChild($OOMWazeButton);
  365.  
  366.         document.getElementById("OOMWazeButtonDiv").addEventListener("click", GMToWaze);
  367.     }
  368.  
  369.     function GMToWaze(){
  370.         let lon, lat, zoom;
  371.         let curURL = location.href.split('@').pop().split(',');
  372.         lon = curURL[1];
  373.         lat = curURL[0];
  374.         zoom = parseInt(curURL[2]);
  375.         window.open(`https://www.waze.com/en-US/editor/?lon=${lon}&lat=${lat}&zoom=${(Math.max(0,Math.min(10,(zoom - 12))))}`);
  376.     }
  377.  
  378.     function bootstrapGM(tries = 1){
  379.         if(document.readyState !== 'complete' )
  380.             setTimeout(function() {bootstrapGM(tries++);}, 200);
  381.         else
  382.             initGoogleMaps();
  383.     }
  384.  
  385.  
  386.     bootstrap();
  387. })();