☰

WME Open Other Maps

Links for opening external resources at the WME location and WME from external resources

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