משתמש:רציונל/monobook.js/addMapMarkers.js

מתוך ויקיפדיה, האנציקלופדיה החופשית

הערה: לאחר הפרסום, ייתכן שיהיה צורך לנקות את זיכרון המטמון (cache) של הדפדפן כדי להבחין בשינויים.

  • פיירפוקס / ספארי: להחזיק את המקש Shift בעת לחיצה על טעינה מחדש (Reload) או ללחוץ על צירוף המקשים Ctrl-F5 או Ctrl-R (במחשב מק: ⌘-R).
  • גוגל כרום: ללחוץ על צירוף המקשים Ctrl-Shift-R (במחשב מק: ⌘-Shift-R).
  • אינטרנט אקספלורר / אדג': להחזיק את המקש Ctrl בעת לחיצה על רענן (Refresh) או ללחוץ על צירוף המקשים Ctrl-F5.
  • אופרה: ללחוץ על Ctrl-F5.
//This script updates markers on a map, according to parameters given in the query string.
//Author: [[משתמש:רציונל]]
 
/*
* Parse a query String and get the requested variable
*/
function getQueryVariable(query, variable) {
 query = query.split("?")[1];
 var vars = query.split("&");
 for (var i=0;i<vars.length;i++) {
   var pair = vars[i].split("=");
   if (pair[0] == variable) {
     return pair[1];
   }
 }
 //alert('Query Variable ' + variable + ' not found');
}

/*
* Add markers to a map's display
*/
function addMapMarkers() {
 //check if specifically allowed to run
 if(getQueryVariable(location.search, "run") != "1") {
	return;
 }

 var markers = new Array();
 //red dot
 markers[0] = "http://upload.wikimedia.org/wikipedia/commons/f/f9/Red_Point_12_New.gif";
 //red star
 markers[1] = "http://upload.wikimedia.org/wikipedia/commons/2/2b/Red_Star.gif";
 //red triangle
 markers[2] = "http://upload.wikimedia.org/wikipedia/commons/0/0a/Red_Triangle.gif";
 //green rhombus
 markers[3] = "http://upload.wikimedia.org/wikipedia/commons/7/75/Green_Rhombus.gif";
 //Brown square
 markers[4] = "http://upload.wikimedia.org/wikipedia/commons/7/73/Brown_Square_12.gif"
 
 var imgDiv = document.getElementById("file");
 var images = imgDiv.getElementsByTagName("img");
 if(images.length != 1) {
   alert("Wrong number of images: " + images.length);
   return;
 }
 
 var img = images[0];
 img.border=0;
//Set width and height to the image's div, so we could place the dot relatively.
 imgDiv.style.width = img.width+"px";
 imgDiv.style.height = img.height+"px";
 imgDiv.style.position = "relative";
 var left = getQueryVariable(location.search, 'left');
 var top = getQueryVariable(location.search, 'top');
 //select marker type
 var markerType = getQueryVariable(location.search, 't');
 
 //Create a div for the marker to be in
 var dotDiv = document.createElement('div');
 //get relative position from left
 var left = getQueryVariable(location.search, 'left');
 //get relative position from top
 var top = getQueryVariable(location.search, 'top');
 //Set all style elements
 dotDiv.style.position="absolute";
 dotDiv.style.left=left+"%";
 dotDiv.style.top=top+"%";
 
 //Create an inner div tag for the image and set it's style (everything is fixed).
 dotInnerDiv = document.createElement('div');
 dotInnerDiv.style.padding="0px"; 
 dotInnerDiv.style.position="absolute";
 dotInnerDiv.style.width="12px";
 dotInnerDiv.style.height="12px";
 dotInnerDiv.style.top="-6px";
 dotInnerDiv.style.left="-6px";
 //Create the img tag
 var dotImg = document.createElement('img');
 //Set src to the chosen marker
 dotImg.src = markers[markerType];
 //set border, width and height
 dotImg.border="0";
 dotImg.width="12";
 dotImg.height="12";
 //append the marker to its inner div
 dotInnerDiv.appendChild(dotImg);
 //append the inner div to its outer div
 dotDiv.appendChild(dotInnerDiv);
 //finally, append the marker's outer div to the original image's div.
 imgDiv.appendChild(dotDiv);
}

$(addMapMarkers);