Karte mit Falk Map Stage get the code

Dieses Beispiel kombiniert die FalkMapStage mit der Implementierung eines Controls zur Anzeige der Position und Ausdehnung der FalkMapStage.

Zum Ausprobieren am einfachsten "adjust by geocode/boundingbox" verwenden. Dabei die Falk Map Stage einschalten (Set Stage) oder ausschalten (Reset Stage).

Parameter for geocode
area-height:
area-width:
offset.x:
offset.y:

Parameters for geocode
zoomlevel:
x:
y:

Parameters for boundingBox
West:
North:
East:
South:

MapStage Geoinformation
No Stage set.

 
© 2025 Falk Verlag, map data © OpenStreetMap contributors, License
500m

Falk OSM

Falk Original

X

Im Unterschied zu einem Overlay behält ein Control seine Position auf der Karte bei, ein Overlay bewegt sich mit der Karte mit. Ein Control sollten sie also implementieren, wenn sie eine feste Position auf der Karte einnehmen wollen, wie in diesem Bespiel.

Ein Overlay stellt Daten in Abhängigkeit von der Karte dar, z.B. die Visualisierung einer BoundingBox, welche von geografischen Koordinaten abhängig ist. Das entsprechende Beispiel finden Sie in unserem Beispiel für ein BoundingBox-Overlay

Initializing the map

view plaincopy to clipboardprint?
  1. registerNodeListener(window, "load", main);  
  2. // define map gobal  
  3. var map;  
  4. var options = {fitToWorld:false};  
  5. var zoomlevel;  
  6. var geocode = new FalkPoint();  
  7. var geocode1 = new FalkPoint();  
  8. var geocode2 = new FalkPoint();  
  9. var bb = new FalkArea(geocode1, geocode2);  
  10. var stageViewerControl;  
  11. var fmo;  
  12. var layerFalkStage;  
  13. // html loaded  
  14. function main(){  
  15.   
  16.   // create a new map  
  17.   map = new FalkMap("mymap");  
  18.   map.enableMapFeature(FalkMap.FEATURE_ZOOM_MAP_ON_MOUSE_WHEEL);  
  19.   map.enableMapFeature (FalkMap.FEATURE_ANIMATED_ZOOM_ON_MAP);  
  20.   map.subscribe(FalkMap.MSG_MAP_CHANGED, handleMapChanged);  
  21.   bigMapControl = new FalkBigMapControl("mycontrol");  
  22.   map.addMapControl(bigMapControl);  
  23.   map.addMapControl(new FalkMapSwitchControl());  
  24.   
  25.   geocode = new FalkPoint(parseFloat(YAHOO.util.Dom.get("geoX").value, 10),  
  26.           parseFloat(YAHOO.util.Dom.get("geoY").value, 10));  
  27.   map.centerMapToGeocode(geocode, parseInt(YAHOO.util.Dom.get("zoomlevel").value, 10));  
  28.   stageViewerControl = new YAHOO.Custom.Control.StageViewer()  
  29.   map.addMapControl(stageViewerControl);  
  30.   
  31.   // get the overlay    
  32.   var overlay = map.getMapOverlay();    
  33.   // create a FMO    
  34.   fmo = new FalkMapObject();    
  35.   fmo.setGeocode(geocode);    
  36.   // add the falk map object to the overlay    
  37.   overlay.addFalkMapObject (fmo);    
  38.   
  39.   layerFalkStage = new FalkLayer("FalkStage");  
  40.   overlay.addLayer (layerFalkStage);  
  41.   
  42. }  
  43.   
  44. function centerByGeocode() {  
  45.   geocode.x = parseFloat(YAHOO.util.Dom.get("geoX").value, 10);  
  46.   geocode.y = parseFloat(YAHOO.util.Dom.get("geoY").value, 10);  
  47.   zoomlevel = parseInt(YAHOO.util.Dom.get("zoomlevel").value, 10);  
  48.   map.centerMapToGeocode(geocode, zoomlevel, options);  
  49.   fmo.setGeocode(geocode);   
  50.   map.getMapOverlay().update();  
  51. }  
  52.   
  53. function centerByBoundingBox() {  
  54.   geocode1.x = parseFloat(YAHOO.util.Dom.get("geoX1").value, 10);  
  55.   geocode1.y = parseFloat(YAHOO.util.Dom.get("geoY1").value, 10);  
  56.   geocode2.x = parseFloat(YAHOO.util.Dom.get("geoX2").value, 10);  
  57.   geocode2.y = parseFloat(YAHOO.util.Dom.get("geoY2").value, 10);  
  58.   
  59.   var bb = new FalkArea(geocode1, geocode2  );  
  60.   map.centerMapToBoundingBox(bb, options);  
  61. }  
  62.   
  63. function handleMapChanged(){  
  64.     var stage = map.getFalkMapStage();  
  65.     if(is_null(stage)){  
  66.         YDom.get("geocode").innerHTML = "No Stage set."  
  67.         return;  
  68.     }  
  69.     var pNW = map.getGeocodeOfPixelPosition(new FalkPoint(stage.offsetX, stage.offsetY));    
  70.     var pSE = map.getGeocodeOfPixelPosition(new FalkPoint(stage.width + stage.offsetX, stage.height + stage.offsetY));  
  71.     var NW = {lat: pNW.y.toFixed(6), lon:pNW.x.toFixed(6)};  
  72.     var SE = {lat: pSE.y.toFixed(6), lon:pSE.x.toFixed(6)};  
  73.     var out = [  
  74.         "<p>",  
  75.         "Geo NW:<br/>",  
  76.         objToString(NW).replace(/>/g, "&gt;"),  
  77.         "</p>",  
  78.         "<p>",  
  79.         "Geo SE:<br/>",  
  80.         objToString(SE).replace(/>/g, "&gt;"),  
  81.         "</p>"  
  82.     ].join("");  
  83.     YDom.get("geocode").innerHTML = out;  
  84.       
  85. }  
  86.   
  87. function setMapStage() {  
  88.   var offsetX  = parseInt(YAHOO.util.Dom.get("offsetX").value, 10);  
  89.   var offsetY  = parseInt(YAHOO.util.Dom.get("offsetY").value, 10);  
  90.   var width = parseInt(YAHOO.util.Dom.get("width").value, 10);  
  91.   var height = parseInt(YAHOO.util.Dom.get("height").value, 10);  
  92.   var mapStage = new FalkMapStage (width, height, offsetX, offsetY);  
  93.   map.setFalkMapStage(mapStage);  
  94.   stageViewerControl.displayFalkMapStage(mapStage);  
  95.   handleMapChanged();  
  96. }  
  97.   
  98. function resetMapStage() {  
  99.   map.setFalkMapStage(null);  
  100.   stageViewerControl.displayFalkMapStage(null);  
  101. }  
  102.   
  103. /** 
  104.  * format address info to be shown in falk info window 
  105.  */  
  106. function createInfoContent(point){  
  107.     var geo = "";  
  108.     if(!is_null(point)){  
  109.         geo = ['<span class="geo">',   
  110.              '<abbr class="latitude" title="Lat: ',  
  111.                 normalize(point.y, 6),  
  112.              '">',  
  113.                 getGeoMinSec(point.y, "lat"),  
  114.              '</abbr>,<br/>',  
  115.              '<abbr class="longitude" title="Lon: ',  
  116.                  normalize(point.x, 6),  
  117.              '">',  
  118.                 getGeoMinSec(point.x, "lon"),  
  119.              '</abbr>',   
  120.              '</span>'].join("");  
  121.     }  
  122.     return geo;  
  123. }  
  124.   
  125. /** 
  126.  * formates lat or lon values to degree minutes seconds. 
  127.  * 
  128.  * @param {Number} number: lat/lon values are WGS-84 coordinates 
  129.  * @param {String} dir: one of "lat" or "lon"  
  130.  */  
  131. function getGeoMinSec(number, dir){  
  132.     var absNumber = Math.abs(number);  
  133.     var degree = Math.floor(absNumber);  
  134.     var min = Math.floor((absNumber-degree)*60);  
  135.     var sec = normalize((((absNumber-degree)*60)-min)*60, 2);  
  136.   
  137.     var gms = degree + "° " + min + "' " + sec + "''";  
  138.     if(dir === "lat"){  
  139.         gms += number < 0 ? "S " : "N ";  
  140.     } else if(dir === "lon"){  
  141.         gms += number < 0 ? "W " : "E ";  
  142.     }  
  143.     return gms;  
  144. }  
  145.   
  146. /** 
  147.  * formats a float value with given digits 
  148.  *  
  149.  * param {Number} number: float value 
  150.  * param {Number} digits: digits, must be an integer value 
  151.  */  
  152. function normalize(number, digits){  
  153.     return Math.round( number * Math.pow(10, digits) ) / Math.pow(10, digits);  
  154. }  

Visual Map Stage Control

Dieses Control dunkelt die Teile der Karte ab, die nicht zur Stage gehören und dient ausschließlich der Visualisierung. Ein Control verschiebt sich mit der Karte nicht mit, sondern liegt immer über der Karte. Das führt unter anderem dazu, die abgedunkelten Teile der Karte nicht auf MouseEvents reagieren.

Bei Benutzung der FalkMapStage ohne diese Control reagiert natürlich die gesamte Karte auf MouseEvents.

Implementiert man dieses Feature nicht als Control sondern als FalkOverlay, reagiert die gesamte Karte auf MouseEvents, ein Beispiel dazu findet sich im Beispiel FalkMap: BoundingBox Overlay. Dieses Overlay verdeutlicht aber nicht die Arbeitsweise der FalkMapStage.

CSS