Advanced Flash Components
Search!
Search!
Home >  Forum
  SearchSearch   
Custom Map Types & Tile Layers
Goto page 1, 2, 3, 4  Next
 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.     Forum Index -> UMap ActionScript 3.0
View previous topic :: View next topic  
Author Message
dvs_code
AFC Team


Joined: 09 May 2006
Posts: 2131

PostPosted: Mon Feb 18, 2008 9:13 am    Post subject: Custom Map Types & Tile Layers Reply with quote

Hi, All!

OK, now we have seen a lot of requests on the MapType & TileLayer functionality. We are now able to give you an example code for this. Thanks to Vladimir (deep2see) from Kazakhstan, who has created many samples, which use UMap & custom map types. You can see his work here: http://new-tech.intway.info/p1.htm

Here is how you do it:

1. Create new .fla file and save it somewhere.
2. Drag & drop UMap component instance on Stage, give it an instance name "map".
3. Copy & paste this AS to the first frame of your movie:

Code:
import com.afcomponents.umap.abstract.MapType;
import com.afcomponents.umap.abstract.TileLayer;
import com.afcomponents.umap.types.LatLng;
import com.afcomponents.umap.events.MapEvent;
import com.afcomponents.umap.providers.google.GoogleProvider;
import com.afcomponents.umap.providers.google.GoogleTileLayer;

// create new map type
var errorMessage:String = "We are sorry, but we don't have maps at this zoom level for this region. <p>Try zooming out for a broader look.</p>";
var myMapType:MapType = new MapType("Kazakhstan", 0x0, 0xFF0000, "KZ", errorMessage);

// create basic layer for the map type
// it is just a normal Goole Map layer
var googleLayer:GoogleTileLayer = new GoogleTileLayer("[server]/mt?n=[n]&v=[version]&x=[x]&y=[y]&zoom=[zoom]", 0, 20, true, "ap.66");
// add server(s), can be the same url
googleLayer.addServer("http://mt0.google.com");
googleLayer.addServer("http://mt1.google.com");
googleLayer.addServer("http://mt2.google.com");
googleLayer.addServer("http://mt3.google.com");

// add basic layer
myMapType.addLayer(googleLayer);

// create special Kazakhstan layer and add it to the map type
myMapType.addLayer(new KZTileLayer());

// create new Google Provider
map.control.provider = new GoogleProvider();
// add new map type
map.control.provider.addMapType(myMapType);

// listen for READY event
map.addEventListener(MapEvent.READY, ready);

function ready(event:MapEvent):void
{
   // set map type by name
   map.setMapType("Kazakhstan");
}

// adjust map size, position & viewport
map.setCenter(new LatLng(43.235519, 76.945239), 11);
map.x = map.y = 0;
map.setSize(stage.stageWidth, stage.stageHeight);


4. Now we need to create a KZTileLayer class. Create new AS file, add the following code, and save the script in the same folder as your .fla file by the name KZTileLayer.as

Code:
package
{
   import com.afcomponents.umap.providers.TileLayer;
   import flash.geom.Point;
   
   // this class extends the abstract TileLayer class
   // it adds servers, and defines the path to our tiles
   public class KZTileLayer extends TileLayer
   {
      public function KZTileLayer()
      {
         super("[server]/Z[zoom]/[y]_[x].png", 0, 17, true, "");
         
         // add server(s), can be the same url
         this.addServer("http://new-tech.intway.info/gog");
         this.addServer("http://new-tech.intway.info/gog");
         this.addServer("http://new-tech.intway.info/gog");
         this.addServer("http://new-tech.intway.info/gog");

      }
      
      // return path to the requested tile
      override public function getTileURL(tile:Point, zoom:uint):String
      {
         return "[server]/Z" + zoom + "/" + tile.y + "_" + tile.x + ".png";
      }
   }
}


5. Save everything & publish. Hopefully, you will see the city of Almati, KZ.

Once again thank you Vladimir (deep2see) for your great tiles and testing of our component.
Please visit http://new-tech.intway.info/p1.htm for the samples of what you can do with this functionality.

If are in need of interface & class definitions, please look into the
[url href=http://www.afcomponents.com/components/umap_as3/docs/]API Documentation[/url].

PS. If you add map type control to the map, it will correctly show you available map types.
_________________
Dmitry Stolyarov
AFC Team


Last edited by dvs_code on Thu Mar 06, 2008 5:35 am; edited 1 time in total
Back to top
View user's profile Send private message Visit poster's website
pbohny
AFC Space Explorer


Joined: 16 Dec 2007
Posts: 47

PostPosted: Mon Feb 18, 2008 4:21 pm    Post subject: Working well! Reply with quote

Thank you Dmitry. Many Thanks to Vladimir (deep2see).Very Happy Very Happy

I really appreciate this input. It was what I needed to get further.
I have been playing around, adapting a view things to my needs an I am able to publish my custom maps now. I still have view issues to solve on my map tiles, but the Umap part seems to function well.
Back to top
View user's profile Send private message
deep2see
AFC Space Ninja


Joined: 31 Jul 2007
Posts: 167

PostPosted: Fri Feb 22, 2008 9:32 am    Post subject: interactivity Tile maping Reply with quote

Laughing Hi Dmitry, Pbhony, All !
Today we have begun a stage of application of interactivity to Tile maping.
In our Demo to Gallery it is possible to see (point 9).
http://new-tech.intway.info/p1.htm
Join!
Vladimir
Back to top
View user's profile Send private message
jatorre
AFC Space Explorer


Joined: 06 Feb 2008
Posts: 19

PostPosted: Fri Feb 22, 2008 5:37 pm    Post subject: Cool! Reply with quote

Hey, this is really cool!

One question. What does

x=[x]&y=[y]

stands for.

I mean, how do you define your tiles by x and y? is the top left corner or something like this?

I wanna create a WMS Tile layer.

Javier.
Back to top
View user's profile Send private message
andreit
AFC Team


Joined: 20 Aug 2005
Posts: 2016

PostPosted: Fri Feb 22, 2008 6:16 pm    Post subject: Reply with quote

Those parameters define the way you image grid is referenced. Is there a specific WMS tile server that you are trying to connect? How are your images are named?
Back to top
View user's profile Send private message Visit poster's website
jatorre
AFC Space Explorer


Joined: 06 Feb 2008
Posts: 19

PostPosted: Fri Feb 22, 2008 6:28 pm    Post subject: WMS server Reply with quote

WMS dynamically creates images on the fly, so it is not really tile files...

an example URL to generate a 256*256 half world view map would be:

http://geoserver.gbif.org/wms?LAYERS=gbif%3AgbifDensityLayer&VERSION=1.0.0&TRANSPARENT=true&FORMAT=image%2Fpng&SERVICE=WMS&STYLES=&REQUEST=GetMap&EXCEPTIONS=application%2Fvnd.ogc.se_inimage&SRS=EPSG%3A4326&BBOX=-180,-90,0,90&WIDTH=256&HEIGHT=256

I am trying to transform your X Y into my bounding box defined in this param:

&BBOX=-180,-90,0,90

I have found some Javascript doing something similar in:
http://maps.kylemulka.com/wms/GMaps_WMSSpec_0.1.js

And now I am trying to make it work and see what I get.
Back to top
View user's profile Send private message
deep2see
AFC Space Ninja


Joined: 31 Jul 2007
Posts: 167

PostPosted: Fri Feb 22, 2008 6:45 pm    Post subject: Demis technologies Reply with quote

Exclamation Andrey!
About it you need to look here:
http://www.demis.nl/home/pages/Gallery/examples.htm
We worked with WMS Demis technologies much.
It works very slowly. These are old approaches.
Google with Tile technologies it decides better much more!
Vladimir
Back to top
View user's profile Send private message
jatorre
AFC Space Explorer


Joined: 06 Feb 2008
Posts: 19

PostPosted: Fri Feb 22, 2008 7:05 pm    Post subject: WMS Reply with quote

Yes, I know it is slow Sad But with some caching could work fine.
WMS is a standard, and that is cool, there is a lot of maps around there already published this way and hopefully at some point there will be some tile mechanism based on WMS... whatever...

But still, what does the X and Y represent? I suppose is like a point that tells you somehow a grid cell in your system. But if it is a grid, why do you have X and Y and not just the ID of the cell somehow...

Aghh I am confused...

Can I asked Vladimir how did you get your tiles done? This looks like coming from ArcIMS or something like this.

Thanks in advance.
Back to top
View user's profile Send private message
deep2see
AFC Space Ninja


Joined: 31 Jul 2007
Posts: 167

PostPosted: Fri Feb 22, 2008 7:22 pm    Post subject: caching with WMS Reply with quote

Hi jatorre!
Any caching with WMS is not present!
It is at Google, Yahoo, Microsoft, etc.
Therefore we have stopped on Tile technologies
On other questions to you will answer AFC
On ARC - look http://new-tech.intway.info/p1.htm point 8
Thanks,
Vladimir
Back to top
View user's profile Send private message
jatorre
AFC Space Explorer


Joined: 06 Feb 2008
Posts: 19

PostPosted: Mon Feb 25, 2008 5:23 pm    Post subject: WMS Tiles support Reply with quote

Hi all,

I managed to create my WMSLayer to be able to use WMS servers as a TileLayer Smile

The only tricky part is converting from the Google tile system to Lat/Long bounding box. I hope everything is correctly explained in the code.
The other tricky part is that Google maps uses different projections at different zoom levels so might have to adapt a little bit... In any case here goes the code (look at the WMSLayer constructor):

This goes to the file where you create your map:
Code:

var myWms:WMSLayer = new WMSLayer('http://myWMSserver.org/wms?,'gbif%3AgbifDensityLayer','','')

myMapType.addLayer(myWms);
gmap.control.provider = new GoogleProvider();
gmap.control.provider.addMapType(myMapType);


And this is the WMSLayer class:
Code:

package
{
   import com.afcomponents.umap.abstract.TileLayer;
   
   import flash.geom.Point;
   
   // this class extends the abstract TileLayer class
   // it adds servers, and defines the path to our tiles
   
   public class WMSLayer extends TileLayer {
     public var baseServerUrl:String;
     public var layers:String;
     public var styles:String;
     public var filter:String;    
    
     //Needed for transformations
     private var offset:Number=16777216;
     private var radius:Number=offset / Math.PI;

      public function WMSLayer(baseServerUrl:String, layers:String, styles:String, filter:String)
      {

         this.baseServerUrl = baseServerUrl;
         this.layers = layers;
         this.styles = styles;
         this.filter = filter;
         
         //construct the base URL
         var urlBase:String = baseServerUrl +
                        "FORMAT=image%2Fpng&SERVICE=WMS&REQUEST=GetMap&WIDTH=256&HEIGHT=256&VERSION=1.0.0&TRANSPARENT=true&" +
                        "STYLES=" + styles + "&" +
                        "LAYERS="+ layers + "&" +
                        "FILTER="+ filter + "&";

         super("[server]", 0, 17, true, "");
         
         this.addServer(urlBase);
         this.addServer(urlBase);
         this.addServer(urlBase);
         this.addServer(urlBase);
      }
     
      // return path to the requested tile
      override public function getTileURL(tile:Point, zoom:uint):String
      {
         //Adjust the zoom level from the new to the old, as the server side tiles depend on the old one.
         var zoomLevel:Number = 17 - zoom;
         
         //LowerLeft Corner
      var tileIndexLL:Point = new Point(256*tile.x, 256*(tile.y+1));
      //UpperRight Corner
      var tileIndexUR:Point = new Point(256*(tile.x+1), 256*(tile.y));
      
      //We set the SRS depending on the zoom level, Google uses different projections st different zoom levels
      var SRS:String;
      if (zoom < 6 ) {
         SRS = 'EPSG%3A41001';
      } else {
         SRS = 'EPSG%3A4326';
      }

      return "[server]SRS="+SRS+"&BBOX=" + XToL(zoomLevel,tileIndexLL.x) + ","+YToL(zoomLevel,tileIndexLL.y)+","+XToL(zoomLevel,tileIndexUR.x)+","+YToL(zoomLevel,tileIndexUR.y);
      }   
      
    
     //TRANSFORMATION EQUATIONS FROM PIXEL TO LATLON
      private function LToX(z:Number,x:Number):Number {
         return (offset+radius*x*Math.PI/180)>>z;
      }

      private function LToY(z:Number,y:Number):Number {
         return (offset-radius*Math.log((1+Math.sin(y*Math.PI/180))/(1-Math.sin(y*Math.PI/180)))/2)>>z;
      }

      private function XToL(z:Number,x:Number):Number {
           return (((x<<z)-offset)/radius)*180/Math.PI;
      }

      private function YToL(z:Number,y:Number):Number {
          return (Math.PI/2-2*Math.atan(Math.exp(((y<<z)-offset)/radius)))*180/Math.PI;
      }
    
         
   }
}
Back to top
View user's profile Send private message
erich_erlangga
AFC Space Invader


Joined: 26 Apr 2007
Posts: 57

PostPosted: Fri Feb 29, 2008 4:38 pm    Post subject: how remove tileLayer? Reply with quote

thanks to this excellent post! and also thanks for vladimir for his kind help through email
i've just successfully load tiles from http://www.maps-for-free.com/ provider but still having a hard time
to remove tileLayer that's already been added to MapType using addLayer().
The application has several checkboxes to add/remove spesific tileLayer base on checkboxes current selection.
Any hint of how to get reference to specific tileLayer and remove it?
Back to top
View user's profile Send private message
darianaden
AFC Member


Joined: 27 Feb 2008
Posts: 3

PostPosted: Fri Feb 29, 2008 8:33 pm    Post subject: Reply with quote

I am new to the AFComponent and would like to use it in a specific way.

We are using a City map of Baltimore exported from ArcGIS as a vector image and uploaded into Flash where we created Census Block groups (710 of them) as a layer to allow the user to select and save block groups they are developing projects in.

Once the selection is made the block groups are saved together with numerical identifiers in a database and then recalled into the map so that all users can see which block groups contain which projects. Some projects will occupy the same block groups so we need to be able to use markers to indicate multiple projects - your approach in UMAP 0.6 would work perfectly - but will it work over a Flash movie clip - where the provider would be the movie clip itself?

Thanks for any information.
Back to top
View user's profile Send private message
pbohny
AFC Space Explorer


Joined: 16 Dec 2007
Posts: 47

PostPosted: Wed Mar 05, 2008 10:14 am    Post subject: Problem with version 0.6 Reply with quote

After updating to v 0.6 I do get compile errors:
Code:

Line 8:   1017: The definition of base class TileLayer was not found.
Line 22: 1020: Method marked override must override another


with the example code posted on 18 Feb 2008.

Could somebody please update the example to run with version 0.6

Thanks
Back to top
View user's profile Send private message
erich_erlangga
AFC Space Invader


Joined: 26 Apr 2007
Posts: 57

PostPosted: Thu Mar 06, 2008 5:07 am    Post subject: Reply with quote

for TileLayer, the new package location --> com.afcomponents.umap.providers.TileLayer
Back to top
View user's profile Send private message
dvs_code
AFC Team


Joined: 09 May 2006
Posts: 2131

PostPosted: Thu Mar 06, 2008 5:34 am    Post subject: Reply with quote

Please change:

Code:
import com.afcomponents.umap.abstract.TileLayer;


to:

Code:
import com.afcomponents.umap.providers.TileLayer;


Sorry for the inconvenience.
_________________
Dmitry Stolyarov
AFC Team
Back to top
View user's profile Send private message Visit poster's website
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.     Forum Index -> UMap ActionScript 3.0 All times are GMT
Goto page 1, 2, 3, 4  Next
Page 1 of 4

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group