CINXE.COM
WikiMap
<!DOCTYPE html> <html> <head> <title>WikiMap</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8"> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } .checkboxes { background-color: #ccf; font-size: 15px; } </style> <link rel="stylesheet" href="lea/leaflet.css" /> <link rel="stylesheet" href="cluster/MarkerCluster.css" /> <link rel="stylesheet" href="cluster/MarkerCluster.Default.css" /> <link rel="stylesheet" href="spin/spin.css" /> <link rel="stylesheet" href="search/leaflet-search.css" /> <link rel="stylesheet" href="side/L.Control.Sidebar.css" /> <link rel="stylesheet" href="message/L.Control.Window.css" /> <script src="lea/leaflet.js"></script> <script src="cluster/leaflet.markercluster.js"></script> <script src="cluster/leaflet.markercluster.freezable.js"></script> <script src="spin/spin.js"></script> <script src="spin/leaflet.spin.js"></script> <script src="search/leaflet-search.js"></script> <script src="side/L.Control.Sidebar.js"></script> <script src="message/L.Control.Window.js"></script> <script src="rotate/leaflet.rotatedMarker.js"></script> <script src="KML/L.KML.js"></script> <script src="geojson/osmtogeojson.js"></script> <script src="info/info.js"></script> <script> var Fired=0; function GPS(position) { Fired=1; map.setView([position.coords.latitude,position.coords.longitude]); plot(); } function GPSError(error) { Fired=1; plot(); } function GetLang() { var lang=FixedLang; if (lang.length>0) return lang; if (navigator.languages) lang=navigator.languages[0]; else lang=navigator.language; var dash=lang.indexOf('-'); if (dash>-1) return lang.substring(0,dash); return lang; } function IsMobile() { return L.Browser.mobile; } function AddMobile() { return isMobile ? "m." : ""; } function SpecialMode(CatMode) { return Cat.length>0 || WPCat.length>0 || !CatMode && (Page.length>0 || CoPage.length>0 || CoFile.length>0 || User.length>0 || WPUser.length>0 || KML.length>0); } function GetParam(param) { var first; if (!(first=window.location.href.indexOf("?"+param+"=")!=-1) && window.location.href.indexOf("&"+param+"=")==-1) return ""; var ret=window.location.href.substring(window.location.href.indexOf((first?"?":"&")+param)+param.length+2); if (ret.indexOf('&')!=-1) ret=ret.substring(0,ret.indexOf('&')); return ret; } function initialize() { isMobile=IsMobile(); InPlot=false; InClick=false; FixedLang=GetParam("lang"); Cat=GetParam("cat"); WPCat=GetParam("wpcat"); CoPage=GetParam("copage"); CoFile=""; Page=GetParam("page"); var DecoPage=decodeURIComponent(Page); var CatNames=["Kategorie","Category","Kategori","Cat茅gorie"]; if (DecoPage.indexOf(':')!=-1) if (CatNames.indexOf(DecoPage.split(":")[0])!=-1) { WPCat=Page.split(":")[1];Page=""; } else if (DecoPage.split(":")[0]=="File") { CoFile=Page;Page=""; } Links=GetParam("links")=="true"; LinksHere=GetParam("linkshere")=="true"; Shape=GetParam("shape")!="false"; SubCats=GetParam("subcats")=="true"; SubCatDepth=GetParam("subcatdepth").length==0 ? 5 : GetParam("subcatdepth"); Image=GetParam("image")!="false" && GetParam("noimage")!="true"; Cluster=GetParam("cluster")!="false"; Popups=GetParam("popups")=="true"; AllCo=GetParam("allco")=="true"; User=GetParam("user"); WPUser=GetParam("wpuser"); KML=GetParam("kml"); Locator=GetParam("locator")=="true"; Sidebar=GetParam("sidebar")!="false"; Bearing=GetParam("bearing")!="false"; Camera=GetParam("camera")=="true"; Region=GetParam("region"); Year=GetParam("year"); BaseMap=GetParam("basemap"); Project=GetParam("project")=="" ? "wikipedia" : GetParam("project"); wps=L.markerClusterGroup({maxClusterRadius:function(zoom){return zoom<19 ? 80 : 0;},removeOutsideVisibleBounds:!Popups});commons=L.markerClusterGroup({/*spiderfyShapePositions: function(count, centerPt) { var markerDistance = 200, lineLength = markerDistance * (count - 1), lineStart = centerPt.x - lineLength / 2, res = [], i; res.length = count; for (i = count - 1; i >= 0; i--) { res[i] = new L.Point(lineStart + markerDistance * i,centerPt.y); } return res; },*/maxClusterRadius:function(zoom){return zoom<19 ? 80 : 0;},removeOutsideVisibleBounds:!Popups}); var layers=[]; if (GetParam("wp")!="false" && Cat.length==0 && CoPage.length==0 && CoFile.length==0 && User.length==0 && KML.length==0) layers.push(wps); if (GetParam("commons")!="false" && WPCat.length==0 && Page.length==0 && WPUser.length==0 && KML.length==0) layers.push(commons); var zoom = 13; if (GetParam("zoom").length>0) zoom=GetParam("zoom"); var lat=51.163361,lon=10.447683; if (GetParam("lat").length>0 && GetParam("lon").length>0) { lat=GetParam("lat");lon=GetParam("lon"); } wpsmarker=[];commonsmarker=[]; wiki1=Project=="wikipedia" ? L.icon({iconUrl:'wiki1.png',iconSize:[32,29]}) : Project=="wikivoyage" ? L.icon({iconUrl:'wiki3.png',iconSize:[32,32]}) : L.icon({iconUrl:'wiki4.png',iconSize:[32,18]}); wiki2=L.icon({iconUrl:'wiki2.png',iconSize:[32,43]}); camera=L.icon({iconUrl:'camera.png',iconSize:[32,32]}); def=new L.Icon.Default; var attrib1=(isMobile && !SpecialMode(false) ? (GetLang()=="de" ? 'Karte mit zwei Fingern verschieben<br/>' : 'Drag map with two fingers<br/>') : '')+'<a href="https://foundation.wikimedia.org/wiki/Maps_Terms_of_Use">';var attrib2='</a> per <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'; var osm1=L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png?lang='+GetLang(),{attribution:attrib1+'Wikimedia maps'+attrib2,maxZoom:22,maxNativeZoom:19}); //var osm2=L.tileLayer('https://tiles.wmflabs.org/osm/{z}/{x}/{y}.png',{attribution:attrib1+'WMFlabs map'+attrib2,maxZoom:22,maxNativeZoom:20}); var osm2=L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:attrib1+'OSM map'+attrib2,maxZoom:22,maxNativeZoom:19}); layers.push(BaseMap=="2" ? osm2 : osm1); if (SpecialMode(false)) map=L.map('map_canvas',{layers:layers,maxZoom:22}); else map=L.map('map_canvas',{center:[lat, lon],zoom:zoom,layers:layers,maxZoom:22,dragging:!isMobile}); L.control.scale().addTo(map); L.Control.Cluster=L.Control.extend({onAdd:function(map){var div=L.DomUtil.create('div','checkboxes');div.innerHTML='<form><label for="command"><input id="command" type="checkbox" onclick="if (checked) {wps.enableClustering();commons.enableClustering();} else {wps.disableClusteringKeepSpiderfy();commons.disableClusteringKeepSpiderfy();}Cluster=!Cluster;"'+(Cluster ? " checked" : "")+'/>'+(GetLang()=="de" ? "Eintr盲ge gruppieren" : "Cluster markers")+'</label>'+(SpecialMode(true) ? '<br/><label for="command2"><input id="command2" type="checkbox" onclick="SubCats=!SubCats;plot();"'+(SubCats ? " checked" : "")+'/>'+(GetLang()=="de" ? "Unterkategorien" : "Subcategories")+'</label>' : '')+'</form>';return div;}}); if (KML.length==0) new L.Control.Cluster().addTo(map); var baseLayers={'Wikimedia maps':osm1,'OSM map':osm2}; var _Layers={}; _Layers['<img src="wiki'+(Project=="wikipedia" ? '1' : Project=="wikivoyage" ? '3' : '4')+'.png"> '+Project[0].toUpperCase()+Project.slice(1)]=wps; _Layers['<img src="wiki2.png"> Commons']=commons; var Layers=SpecialMode(false) ? null : _Layers; L.control.layers(baseLayers,Layers).addTo(map); sidebar=new L.Control.Sidebar('sidebar'); map.addControl(sidebar); info=L.control.info({position:'bottomright',titleTooltip:GetLang()=="de" ? '脺ber WikiMap...' : 'About WikiMap...',content:'<p><b><center>WikiMap</center></b></p><p><a href="https://de.wikipedia.org/wiki/Benutzer:DB111/Tools#WikiMap">'+(GetLang()=="de" ? 'Dokumentation' : 'Documentation')+'</a></p><p><a href="https://wikimap.toolforge.org/gui.php">'+(GetLang()=="de" ? 'Oberfl盲che' : 'User interface')+'</a></p>'}); info.addTo(map); if (SpecialMode(false)) { plot(); return; } map.addControl(new L.Control.Search({url:'https://nominatim.toolforge.org/search?format=json&q={s}',propertyName:'display_name',propertyLoc:['lat','lon'],marker:false,autoCollapse:true,firstTipSubmit:true,minLength:3,textErr:(GetLang()=="de" ? "Ort nicht gefunden" : "Location not found"),textPlaceholder:(GetLang()=="de" ? "Suche..." : "Search...")})); map.on('moveend',function() { plot(); }); map.on('zoomend',function() { plot(); }); wps.on('add',function() { plot(); }); wps.on('remove',function() { plot(); }); commons.on('add',function() { plot(); }); commons.on('remove',function() { plot(); }); commons.on('clusterclick',function() { InClick=true; }); commons.on('spiderfied',function(e) { InClick=false; return; for (i=0;i<e.markers.length;i++) {e.markers[i].getPopup().options.autoClose=false;e.markers[i].getPopup().options.maxWidth=150;e.markers[i].openPopup();}}); if (navigator.geolocation && (GetParam("lat").length==0 || GetParam("lon").length==0)) { navigator.geolocation.getCurrentPosition(GPS,GPSError); setTimeout(function(){if (Fired==0) plot();},10000); } else plot(); } function plot() { setTimeout(_plot); } function _plot() { if (InPlot) return; InPlot=true; InClick=false; map.spin(true); var dist=10000; for (d=13;d<map.getZoom();d++) dist=dist/2; wps.clearLayers();commons.clearLayers(); wpsmarker=[];commonsmarker=[]; sidebar.setContent("");sidebar.hide(); var open; if (Cat.length>0) open="cat="+Cat; else if (WPCat.length>0) open="wpcat="+WPCat; else if (Page.length>0) open="page="+Page+(Links ? "&links" : "")+(LinksHere ? "&linkshere" : "")+(!Shape ? "&noshape" : ""); else if (CoPage.length>0) open="copage="+CoPage; else if (CoFile.length>0) open="cofile="+CoFile; else if (User.length>0) open="user="+User; else if (WPUser.length>0) open="wpuser="+WPUser; else if (KML.length>0) open="kml="+KML; else open="lat="+map.getCenter().lat+"&lon="+map.getCenter().lng+"&dist="+Math.round(dist)+(map.hasLayer(wps) ? "&wp" : "")+(map.hasLayer(commons) ? "&commons" : "")+(AllCo ? "&allco" : ""); open+="&lang="+GetLang()+(!Image ? "&noimage" : "")+(Project!="wikipedia" ? "&project="+Project : "")+(Camera || CoFile.length>0 ? "&camera" : ""); if (SpecialMode(false)) { open+=(Year.length>0 ? "&year="+Year : "")+(Region.length>0 ? "®ion="+Region : ""); document.title+=" - "+decodeURIComponent(open.split('=')[1].split('&')[0]).replace(/_/g,' '); } if (SpecialMode(true)) open+=SubCats ? "&subcats&subcatdepth="+SubCatDepth : ""; api = new XMLHttpRequest(); api.open("GET","api.php?"+open); api.onreadystatechange = endplot; api.send(); } function endplot() { if (api.readyState!=4 || api.status!=200 || api.responseText.length==0) { map.spin(false); InPlot=false; return; } if (KML.length>0) { var track=new L.KML(new DOMParser().parseFromString(api.responseText,'text/xml')); map.addLayer(track); map.fitBounds(track.getBounds()); map.spin(false); InPlot=false; return; } var names=[]; var colors=['Red','Green','Blue','Brown','Gray','Purple','Yellow','Orange','Pink','Navy']; var nextcolor=0; var categories={}; var json=JSON.parse(api.responseText); for (var i in json) { var elem=json[i]; var icon,content,url; var title=elem.title; if (Links && title=="Internet Archive") continue; if (elem.ns==-1) wpsmarker.push(L.geoJSON(elem.geojson)); else if (elem.ns==-2) wpsmarker.push(L.geoJSON(osmtogeojson(JSON.parse(elem.geojson)))); else if (elem.ns!=6 && CoPage.length==0) { url="https://"+(Project!="wikidata" ? GetLang()+"."+AddMobile()+Project : AddMobile()+"wikidata")+".org/wiki/"+encodeURIComponent(title); if (Project=="wikidata" && elem.hasOwnProperty('entityterms') && elem.entityterms.hasOwnProperty('label')) title=elem.entityterms.label; icon=wiki1; if (elem.hasOwnProperty('thumbnail')) content='<a href="'+url+'" target="_blank"><center><img width="150" src="'+elem.thumbnail.source+'"><p><small>'+title+'</small></p></center></a>'; else content='<a href="'+url+'" target="_blank"><center>'+title+'</center></a>'; } else { url="https://commons."+AddMobile()+"wikimedia.org/wiki/"+encodeURIComponent(title); if (elem.ns==6) title=title.substring(5,title.lastIndexOf('.')); icon=wiki2; if (elem.hasOwnProperty('imageinfo')) { if (elem.imageinfo[0].hasOwnProperty('extmetadata') && elem.imageinfo[0].extmetadata.hasOwnProperty('ImageDescription')) title=elem.imageinfo[0].extmetadata.ImageDescription.value; content='<a href="'+url+'" target="_blank"><center><img width="150" src="'+elem.imageinfo[0].thumburl+'"><p><small>'+title+'</small></p></center></a>'; } else if (elem.hasOwnProperty('thumbnail')) content='<a href="'+url+'" target="_blank"><center><img width="150" src="'+elem.thumbnail.source+'"><p><small>'+title+'</small></p></center></a>'; else content='<a href="'+url+'" target="_blank"><center>'+title+'</center></a>'; } if (elem.hasOwnProperty('tag')) { content+='<center><p><small><a href="https://'+(elem.ns!=6 ? GetLang()+'.'+AddMobile()+'wikipedia' : 'commons.'+AddMobile()+'wikimedia')+'.org/wiki/'+encodeURIComponent(elem.tag)+'" target="_blank">'+elem.tag+'</a></small></p></center>'; if (!categories.hasOwnProperty(elem.tag)) { categories[elem.tag]=colors[nextcolor++]; if (nextcolor==colors.length) nextcolor=0; } } if (elem.hasOwnProperty('coordinates')) for (var k in elem.coordinates) { var coord=elem.coordinates[k]; var fullcontent=content; if ((elem.coordinates.length>1 || !coord.primary) && coord.hasOwnProperty('name') && coord.name.length>0) { if (coord.name.indexOf('Bilderwunsch')!=-1) continue; fullcontent=fullcontent.replace(title+'</',title+'<br /><small>('+coord.name+')</small></').replace('" target="','#'+encodeURIComponent(coord.name.replace(/ /g,'_'))+'" target="'); names.push(coord.name); } else names.push(title); if (Locator && elem.ns==6) fullcontent+='<a href="https://locator-tool.toolforge.org/#/geolocate?files='+encodeURIComponent(elem.title)+'" target="_blank" title="Locator-Tool"><center><p><img width="15" src="locator-tool.svg"></p></center></a>'; var marker = !SubCats ? L.marker([coord.lat,coord.lon],{icon:coord.hasOwnProperty('cam') ? camera : map.hasLayer(wps) && map.hasLayer(commons) ? icon : def,rotationAngle:Bearing && coord.hasOwnProperty('bearing') ? coord.bearing : 0}) : L.circleMarker([coord.lat,coord.lon],{radius:8,fillColor:categories[elem.tag],fillOpacity:0.5}); //fullcontent+=fullcontent; marker.bindPopup(fullcontent,{autoPan:SpecialMode(false),autoClose:!Popups}); if (!isMobile) marker.on('mouseover',function() { if (!InClick) this.openPopup(); }); if (icon==wiki1) wpsmarker.push(marker); else commonsmarker.push(marker); } } wps.addLayers(wpsmarker);commons.addLayers(commonsmarker); if ((Cat.length>0 || CoPage.length>0 || CoFile.length>0 || User.length>0) && commons.getLayers().length>0) map.fitBounds(commons.getBounds()); else if ((WPCat.length>0 || Page.length>0 || WPUser.length>0) && wps.getLayers().length>0) map.fitBounds(wps.getBounds()); if (Sidebar && (WPCat.length>0 && !SubCats || Page.length>0 || CoPage.length>0)) { var sides=[]; for (var name in names) if (WPCat.length>0 || Links || LinksHere || names.length>1) sides.push('<a id="'+names[name]+'" href="#" onclick="var mark='+(CoPage.length==0 ? 'wps':'commons')+'marker['+name+'];'+(CoPage.length==0 ? 'wps':'commons')+'.zoomToShowLayer(mark,function(){mark.openPopup();});return false;">'+names[name]+'</a><br />'); if (sides.length>0) { var side=""; sides.sort(); for (var s in sides) side+=sides[s]; sidebar.setContent(side);sidebar.show(); } } if (SubCats && GetParam("cluster")!="true" && (wps.getLayers().length+commons.getLayers().length)<1000) { Cluster=false;document.getElementById('command').checked=false; } if (Cluster) { wps.enableClustering();commons.enableClustering(); } else { wps.disableClusteringKeepSpiderfy();commons.disableClusteringKeepSpiderfy(); } if (Popups) { wps.eachLayer(function(layer){layer.openPopup();});commons.eachLayer(function(layer){layer.openPopup();}); } map.spin(false); InPlot=false; if (wps.getLayers().length==0 && commons.getLayers().length==0) if (SpecialMode(true) && !SubCats) L.control.window(map,{modal:true,maxWidth:400}).title(GetLang()=="de" ? "Keine Ergebnisse" : "No results").content(GetLang()=="de" ? "Keine Ergebnisse in dieser Kategorie gefunden! Sollen Unterkategorien mit eingeblendet werden?" : "No items found! Add Subcategories to the view?").prompt({callback:function(){document.getElementById('command2').click();}}).show(); else if (SpecialMode(false)) L.control.window(map,{modal:true,maxWidth:400}).title(GetLang()=="de" ? "Keine Ergebnisse" : "No results").content(GetLang()=="de" ? "Keine Ergebnisse gefunden!" : "No items found!").show(); /*if (User.length>0) L.control.window(map,{modal:true}).title(GetLang()=="de" ? "Deine Meinung" : "Your opinion").content(GetLang()=="de" ? "Verletzt diese Tool-Funktion die Privatsph盲re bzw. kann Nutzer gef盲hrden? Schreib Deine Meinung: https://de.wikipedia.org/wiki/Benutzer_Diskussion:DB111/Tools#Privacy" : "Is this tool feature a violation of privacy or can cause harm to users? Leave a message: https://de.wikipedia.org/wiki/Benutzer_Diskussion:DB111/Tools#Privacy").show();*/ } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> <div id="sidebar"></div> </body> </html>