| View previous topic :: View next topic |
| Author |
Message |
dvs_code AFC Team

Joined: 09 May 2006 Posts: 2131
|
Posted: Mon Feb 18, 2008 9:13 am Post subject: Custom Map Types & Tile Layers |
|
|
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 |
|
 |
pbohny AFC Space Explorer
Joined: 16 Dec 2007 Posts: 47
|
Posted: Mon Feb 18, 2008 4:21 pm Post subject: Working well! |
|
|
Thank you Dmitry. Many Thanks to Vladimir (deep2see).
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 |
|
 |
deep2see AFC Space Ninja
Joined: 31 Jul 2007 Posts: 167
|
Posted: Fri Feb 22, 2008 9:32 am Post subject: interactivity Tile maping |
|
|
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 |
|
 |
jatorre AFC Space Explorer
Joined: 06 Feb 2008 Posts: 19
|
Posted: Fri Feb 22, 2008 5:37 pm Post subject: Cool! |
|
|
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 |
|
 |
andreit AFC Team

Joined: 20 Aug 2005 Posts: 2016
|
Posted: Fri Feb 22, 2008 6:16 pm Post subject: |
|
|
| 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 |
|
 |
jatorre AFC Space Explorer
Joined: 06 Feb 2008 Posts: 19
|
|
| Back to top |
|
 |
deep2see AFC Space Ninja
Joined: 31 Jul 2007 Posts: 167
|
Posted: Fri Feb 22, 2008 6:45 pm Post subject: Demis technologies |
|
|
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 |
|
 |
jatorre AFC Space Explorer
Joined: 06 Feb 2008 Posts: 19
|
Posted: Fri Feb 22, 2008 7:05 pm Post subject: WMS |
|
|
Yes, I know it is slow 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 |
|
 |
deep2see AFC Space Ninja
Joined: 31 Jul 2007 Posts: 167
|
Posted: Fri Feb 22, 2008 7:22 pm Post subject: caching with WMS |
|
|
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 |
|
 |
jatorre AFC Space Explorer
Joined: 06 Feb 2008 Posts: 19
|
Posted: Mon Feb 25, 2008 5:23 pm Post subject: WMS Tiles support |
|
|
Hi all,
I managed to create my WMSLayer to be able to use WMS servers as a TileLayer
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 |
|
 |
erich_erlangga AFC Space Invader
Joined: 26 Apr 2007 Posts: 57
|
Posted: Fri Feb 29, 2008 4:38 pm Post subject: how remove tileLayer? |
|
|
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 |
|
 |
darianaden AFC Member
Joined: 27 Feb 2008 Posts: 3
|
Posted: Fri Feb 29, 2008 8:33 pm Post subject: |
|
|
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 |
|
 |
pbohny AFC Space Explorer
Joined: 16 Dec 2007 Posts: 47
|
Posted: Wed Mar 05, 2008 10:14 am Post subject: Problem with version 0.6 |
|
|
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 |
|
 |
erich_erlangga AFC Space Invader
Joined: 26 Apr 2007 Posts: 57
|
Posted: Thu Mar 06, 2008 5:07 am Post subject: |
|
|
| for TileLayer, the new package location --> com.afcomponents.umap.providers.TileLayer |
|
| Back to top |
|
 |
dvs_code AFC Team

Joined: 09 May 2006 Posts: 2131
|
Posted: Thu Mar 06, 2008 5:34 am Post subject: |
|
|
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 |
|
 |
|