add more ways to control the viewer from JavaScript
authorRichard Fairhurst <richard@systemed.net>
Fri, 9 Oct 2009 17:40:35 +0000 (17:40 +0000)
committerRichard Fairhurst <richard@systemed.net>
Fri, 9 Oct 2009 17:40:35 +0000 (17:40 +0000)
halcyon_viewer.as
net/systemeD/halcyon/Map.as
net/systemeD/halcyon/POI.as
net/systemeD/halcyon/styleparser/RuleSet.as
resources/halcyon.html

index d0fb05f..7a8070f 100755 (executable)
@@ -8,6 +8,7 @@ package {
        import flash.events.MouseEvent;
        import flash.display.*;
        import flash.text.TextField;
+       import flash.external.*;
 //     import bustin.dev.Inspector;
 
        public class halcyon_viewer extends Sprite {
@@ -33,7 +34,7 @@ package {
                        t.multiline=true;
                        addChild(t);
                        Globals.vars.debug=t;
-                       t.visible = true;
+            t.visible = loaderInfo.parameters["show_debug"] == 'true';
 
                        stage.addEventListener(MouseEvent.MOUSE_UP, theMap.mouseUpHandler);
                        stage.addEventListener(MouseEvent.MOUSE_MOVE, theMap.mouseMoveHandler);
@@ -61,9 +62,22 @@ package {
                var controller:JSController = new JSController(theMap, loaderInfo.parameters['responder']);
                                controller.setActive();
                        }
+
+                       ExternalInterface.addCallback('refreshCSS', onRefreshCSS);
+                       ExternalInterface.addCallback('jumpTo', onJumpTo);
+               }
+
+               private function onRefreshCSS(str:String):void {
+                       theMap.ruleset.loadFromCSS(str);
+                       theMap.redraw();
+               }               
+               private function onJumpTo(lat:Number,lon:Number):void {
+                       theMap.init(lat,lon);
                }
-               
+
                private function zoomInHandler(e:MouseEvent):void  { e.stopPropagation(); theMap.zoomIn(); }
                private function zoomOutHandler(e:MouseEvent):void { e.stopPropagation(); theMap.zoomOut(); }
+
+
        }
 }
index 24d8525..d98b794 100755 (executable)
@@ -84,17 +84,25 @@ package net.systemeD.halcyon {
                // Map constructor function
 
         public function Map(initparams:Object) {
+                       this.initparams=initparams;
+                       connection = Connection.getConnection(initparams);
+            connection.addEventListener(Connection.NEW_WAY, newWayCreated);
+            connection.addEventListener(Connection.NEW_POI, newPOICreated);
+                       gotEnvironment(null);
 
-                       // Add 900913 tile background
-                       tileset=new TileSet(this);
-                       addChild(tileset);
-                       tileset.init("http://npe.openstreetmap.org/$z/$x/$y.png");
+                       addEventListener(Event.ENTER_FRAME, everyFrame);
+        }
+
+               // Set up layering
+               // [layer][3]                   - names
+               // [layer][2][sublayer] - stroke
+               // [layer][1]                   - casing
+               // [layer][0]                   - fill
 
-                       // Set up layering
-                       // [layer][3]                   - names
-                       // [layer][2][sublayer] - stroke
-                       // [layer][1]                   - casing
-                       // [layer][0]                   - fill
+               private function createSprites():void {
+                       tileset=new TileSet(this);                                      // 900913 background
+                       addChild(tileset);                                                      //  |
+                       addChild(new Sprite());                                         // GPS
 
                        for (var l:int=0; l<13; l++) {                          // 11 layers (11 is +5, 1 is -5)
                                var s:Sprite = getHitSprite();          //  |
@@ -112,15 +120,11 @@ package net.systemeD.halcyon {
                        }
                        addChild(getPaintSprite());                             // 12 - POIs
                        addChild(getPaintSprite());                             // 13 - shields and POI names
-
-                       this.initparams=initparams;
-                       connection = Connection.getConnection(initparams);
-            connection.addEventListener(Connection.NEW_WAY, newWayCreated);
-            connection.addEventListener(Connection.NEW_POI, newPOICreated);
-                       gotEnvironment(null);
-
-                       addEventListener(Event.ENTER_FRAME, everyFrame);
-        }
+               }
+               
+               private function removeSprites():void {
+                       while (numChildren) { removeChildAt(0); }
+               }
 
         private function getPaintSprite():Sprite {
             var s:Sprite = new Sprite();
@@ -149,23 +153,29 @@ package net.systemeD.halcyon {
                                init(initparams['lat'],
                                         initparams['lon'],
                                         initparams['zoom'],
-                                        initparams['style']);
+                                        initparams['style'],
+                                        initparams['tileurl']);
 
                        } else {
                                // somewhere innocuous
-                               init(53.09465,-2.56495,17,"test.css?d="+Math.random());
+                               init(53.09465,-2.56495,17,"test.css?d="+Math.random(),"");
                        }
                }
 
                // ------------------------------------------------------------------------------------------
                // Initialise map at a given lat/lon
 
-        public function init(startlat:Number,startlon:Number,startscale:uint,style:String):void {
-                       ruleset=new RuleSet(this,redrawPOIs);
-                       ruleset.loadFromCSS(style);
-                       //updateSize();
+        public function init(startlat:Number,startlon:Number,startscale:uint=0,style:String=null,tileurl:String=''):void {
+                       removeSprites();
+                       createSprites();
+                       tileset.init(tileurl);
+
+                       if (style) {
+                               ruleset=new RuleSet(this,redrawPOIs);
+                               ruleset.loadFromCSS(style);
+                       }
+                       if (startscale>0) { scale=startscale; }
 
-                       scale=startscale;
                        scalefactor=MASTERSCALE/Math.pow(2,13-scale);
                        baselon    =startlon          -(mapwidth /2)/scalefactor;
                        basey      =lat2latp(startlat)+(mapheight/2)/scalefactor;
@@ -364,7 +374,7 @@ package net.systemeD.halcyon {
                // Do every frame
 
                private function everyFrame(event:Event):void {
-                       tileset.serviceQueue();
+                       if (tileset) { tileset.serviceQueue(); }
                }
 
                // ------------------------------------------------------------------------------------------
index 31ddd53..b139fa8 100644 (file)
@@ -36,7 +36,7 @@ package net.systemeD.halcyon {
                        var tags:Object = node.getTagsCopy();
                        // ** apply :hover etc.
                        if (!sl) { sl=map.ruleset.getStyles(this.node,tags); }
-                       if (!sl.hasStyles()) { return false; }
+                       if (!sl.hasStyles() && iconname=='') { return false; }
                        
                        var r:Boolean=false;    // ** rendered
                        var l:DisplayObject;
@@ -84,13 +84,13 @@ package net.systemeD.halcyon {
                        icon.addChild(Bitmap(event.target.content));
                        var l:DisplayObject=map.getChildAt(map.POISPRITE);
                        Sprite(l).addChild(icon);
+                       loaded=true;
                        updatePosition();
 
             icon.addEventListener(MouseEvent.CLICK, mouseEvent);
             icon.buttonMode = true;
             icon.mouseEnabled = true;
 
-                       loaded=true;
                }
 
         private function mouseEvent(event:MouseEvent):void {
@@ -98,6 +98,7 @@ package net.systemeD.halcyon {
         }
 
                private function updatePosition():void {
+                       if (!loaded) { return; }
                        icon.x=map.lon2coord(node.lon)-icon.width/2;
                        icon.y=map.latp2coord(node.latp)-icon.height/2;
                }
index 42d6179..91db022 100644 (file)
@@ -36,8 +36,10 @@ package net.systemeD.halcyon.styleparser {
                // ---------------------------------------------------------------------------------------------------------
                // Loading stylesheet
 
-               public function loadFromCSS(url:String):void {
-                       var request:URLRequest=new URLRequest(url);
+               public function loadFromCSS(str:String):void {
+                       if (str.match(/[\s\n\r\t]/)!=null) { parseCSS(str); return; }
+
+                       var request:URLRequest=new URLRequest(str);
                        var loader:URLLoader=new URLLoader();
 
                        request.method=URLRequestMethod.GET;
@@ -50,8 +52,12 @@ package net.systemeD.halcyon.styleparser {
                }
 
                private function loadedCSS(event:Event):void {
+                       parseCSS(event.target.data);
+               }
+               
+               private function parseCSS(str:String):void {
                        var css:MapCSS=new MapCSS(map);
-                       choosers=css.parse(event.target.data);
+                       choosers=css.parse(str);
 //                     Inspector.getInstance().show();
 //                     Inspector.getInstance().shelf('Choosers', choosers);
                        loadImages();
index b7cff97..6f84375 100644 (file)
@@ -9,7 +9,7 @@
 
 <body>
 
-<div id="map" style="width:800px; height: 600px; border: 1px solid black">
+<div id="map" style="width:800px; height: 600px; border: 1px solid black; float:left; margin-right: 10px">
 </div>
 
 <script>
                alert (event+": "+object+" "+id+", highway="+attr['highway']);
        }
 
-       var fo = new SWFObject("halcyon_viewer.swf?d="+Math.round(Math.random()*1000), "map", "100%", "100%", "9", "#FFFFFF");
+       var fo = new SWFObject("halcyon_viewer.swf?d="+Math.round(Math.random()*1000), "mapswf", "100%", "100%", "9", "#FFFFFF");
        fo.addVariable("lat",51.875);
        fo.addVariable("lon",-1.482);
-       fo.addVariable("zoom",16);
+       fo.addVariable("zoom",14);
        fo.addVariable("api","http://www.openstreetmap.org/api/0.6/");
        fo.addVariable("policy","http://www.openstreetmap.org/api/crossdomain.xml");
        fo.addVariable("connection","AMF");
        fo.addVariable("responder","respond");
-       fo.addVariable("style","test.css");
+       fo.addVariable("tileurl","http://npe.openstreetmap.org/$z/$x/$y.png");
+       fo.addVariable("style","test.css?d="+Math.round(Math.random()*1000));
        fo.addVariable("show_debug","false");
        fo.write("map");
 
+       function refreshCSS() {
+               if (document.getElementById("mapswf")) { 
+                       document.getElementById("mapswf").refreshCSS(document.getElementById("mapcss").value);
+               }
+       }
+
+       function jumpTo() {
+               if (document.getElementById("mapswf")) { 
+                       document.getElementById("mapswf").jumpTo(document.getElementById("lat").value,document.getElementById("lon").value);
+               }
+       }
+       
 </script>
 
+<div id="ui">
+<p>Lat: <input id='lat' value='51.875' size='6'> Lon: <input id='lon' value='-1.482' size='6'>
+<input type='button' onClick='javascript:jumpTo();' value=" Go ">
+<p>
+<input type='button' onClick='javascript:refreshCSS();' value=" Refresh CSS ">
+<textarea cols=40 rows=40 id='mapcss'>
+/* Type MapCSS here */
+</textarea>
+</p>
+</div>
+
 </body>
 </html>