Download ppt - Building A Map Caching Tile Server

Building a Map Caching Tile Building a Map Caching Tile ServerServer

• Using your own map in the Map APIUsing your own map in the Map API• GM/VE/YM tile scheme and projections GM/VE/YM tile scheme and projections • Cut tiles using ArcIMS or ArcMapCut tiles using ArcIMS or ArcMap• Optimization for fast cuttingOptimization for fast cutting• Cache tiles with SQL serverCache tiles with SQL server• Cache tiles using Web Server cachingCache tiles using Web Server caching• Querying data behind tiles Querying data behind tiles

Replacing Online Map with your Replacing Online Map with your own mapown map

Your GIS System has more accurate and up-to-date Your GIS System has more accurate and up-to-date spatial data. spatial data.

Most likely you have a mapping engine to produce Most likely you have a mapping engine to produce maps, for example, ArcIMS or MapServer.maps, for example, ArcIMS or MapServer.

The most efficient way to serve your own map is The most efficient way to serve your own map is replacing their map with yours. replacing their map with yours.

Means generating maps according to the JavaScript Means generating maps according to the JavaScript API’s tile schema. API’s tile schema.

Map API’s support of tile layersMap API’s support of tile layers Google Map (as of 2.7) has the most comprehensive support. Google Map (as of 2.7) has the most comprehensive support.

You can:You can: Create customized tile layer and add to existing map types, such Create customized tile layer and add to existing map types, such

as “map”, “satellite”, “hybrid”.as “map”, “satellite”, “hybrid”. Add additional map types.Add additional map types. Completely replace the default map types. Completely replace the default map types. Add a single map image on the view port.Add a single map image on the view port.

Virtual Earth (as of 5.0) has limited support. You can:Virtual Earth (as of 5.0) has limited support. You can: Create customized tile layer and add on top of default maps. Create customized tile layer and add on top of default maps. Can NOT replace the default maps.Can NOT replace the default maps.

Yahoo AJAX Map (as of 3.7) does not support custom tile layer. Yahoo AJAX Map (as of 3.7) does not support custom tile layer. There is a undocumented feature that can be used to substitute There is a undocumented feature that can be used to substitute

default tile server.default tile server.

GMap, GMapType and GMap, GMapType and GTileLayerGTileLayer

GMap is the Google map instance.GMap is the Google map instance. A GMap has a collection of GMapTypes, e.g. NORMAL, A GMap has a collection of GMapTypes, e.g. NORMAL,

SATELLITE, HYBRIDSATELLITE, HYBRID A GMapType has one or more GTileLayer, e.g. HYBRID A GMapType has one or more GTileLayer, e.g. HYBRID

maptype has two Tile Layers: one street name and one maptype has two Tile Layers: one street name and one satellite image.satellite image.

A GTileLayer is a collection of small tiled images and A GTileLayer is a collection of small tiled images and stitch together to form a seamless View port.stitch together to form a seamless View port.

The API use getTileUrl function to retrieve images. The API use getTileUrl function to retrieve images.

Using Custom Tile Layers In Google MapUsing Custom Tile Layers In Google Map

The key function is getTileUrl(tile, zoom).The key function is getTileUrl(tile, zoom). The API will pass in a tile context, which include tile The API will pass in a tile context, which include tile

coordinates x, y and zoom level.coordinates x, y and zoom level. The API will retrieve the image from the return the The API will retrieve the image from the return the

URL and position the image on view port.URL and position the image on view port. All Default Maps (normal, satellite, hybrid) use same All Default Maps (normal, satellite, hybrid) use same

mechanism to retrieve images from Google’s tile mechanism to retrieve images from Google’s tile server.server.

Use Custom Tiles in Google Map Use Custom Tiles in Google Map

1. Replace the default MapTypes’s default layers’ Image 1. Replace the default MapTypes’s default layers’ Image URLURL G_NORMAL_MAP and G_SATELLITEG_NORMAL_MAP and G_SATELLITE _MAP has 1 _MAP has 1

tile layer, and G_HYBRID_MAP has 2 layers;tile layer, and G_HYBRID_MAP has 2 layers; Simple swap the image URL with Simple swap the image URL with

G_NORMAL_MAP.getTileLayers()[0].getTileUrl=function G_NORMAL_MAP.getTileLayers()[0].getTileUrl=function (t , z){…}(t , z){…}

All other features of the default map type, All other features of the default map type, including copyright information are unchanged, including copyright information are unchanged, which is not desirable. which is not desirable.

Have minimal impact on other coding dealing with Have minimal impact on other coding dealing with Markers etc.Markers etc.

Sample: GMap/1_replace_def_url.htm.Sample: GMap/1_replace_def_url.htm.

2. Add custom Tile Layer on top of default Map Type2. Add custom Tile Layer on top of default Map Type Setup up Copyright informationSetup up Copyright information

var var myCopymyCopy=new GCopyrightCollection('Data ©2007');=new GCopyrightCollection('Data ©2007'); Create a instance of GTileLayerCreate a instance of GTileLayer

var var myMapTileLayermyMapTileLayer = new GTileLayer( = new GTileLayer(myCopymyCopy, 10, 18);, 10, 18); Override is getTileUrl(tile, zoom)Override is getTileUrl(tile, zoom)

myMapTileLayer.getTileUrl=function(tile,zoom){..}myMapTileLayer.getTileUrl=function(tile,zoom){..} Add the tile layer into the default map type.Add the tile layer into the default map type.

G_NORMAL_MAP.getTileLayers().push(G_NORMAL_MAP.getTileLayers().push(myLayermyLayer);); Will still load images from Google, which may not be necessary because Will still load images from Google, which may not be necessary because

it may be covered by your layer.it may be covered by your layer. Code Sample: GMap/2_add_on_top.htmCode Sample: GMap/2_add_on_top.htm

Use Custom Tiles in Google MapUse Custom Tiles in Google Map

3. Replace Tile Layers in default Map Type3. Replace Tile Layers in default Map Type Create a custom tile layer.Create a custom tile layer.

var var myCopymyCopy=new GCopyrightCollection('Data ©2007');=new GCopyrightCollection('Data ©2007');var var myMapTileLayermyMapTileLayer = new GTileLayer( = new GTileLayer(myCopymyCopy, 10, 18);, 10, 18);myMapTileLayer.getTileUrl=function(tile,zoom){..}myMapTileLayer.getTileUrl=function(tile,zoom){..}

Replace the tile layer in default map type.Replace the tile layer in default map type. G_NORMAL_MAP.getTileLayers()G_NORMAL_MAP.getTileLayers()[0]= myMapTileLayer[0]= myMapTileLayer;;

Will NOT load images from Google. Can be placed in a external Will NOT load images from Google. Can be placed in a external file or server script and have minimal impact on API coding.file or server script and have minimal impact on API coding.

Ideal for assisting non-GIS developers doing Google Map Ideal for assisting non-GIS developers doing Google Map development.development.

Sample: GMap\3_replace_def_layer.htmSample: GMap\3_replace_def_layer.htm


4. Create custom Map Type4. Create custom Map Type Create a custom tile layer.Create a custom tile layer.

var var myCopymyCopy=new GCopyrightCollection('Data ©2007');=new GCopyrightCollection('Data ©2007');var var myMapTileLayermyMapTileLayer = new GTileLayer( = new GTileLayer(myCopymyCopy, 10, 18);, 10, 18);myMapTileLayer.getTileUrl=function(tile,zoom){..}myMapTileLayer.getTileUrl=function(tile,zoom){..}

Create a new Map TypeCreate a new Map Type var myMapType = new GMapType([myMapTileLayer], var myMapType = new GMapType([myMapTileLayer],

new GMercatorProjection(19), "MyMap");new GMercatorProjection(19), "MyMap"); If needed, remove default Map Types before add the new typeIf needed, remove default Map Types before add the new type

map.getMapTypes().length = 0; map.getMapTypes().length = 0; Add the new Map Type to MapAdd the new Map Type to Map

mmap.addMapType(myMapType );ap.addMapType(myMapType ); Sample: GMap\4_custom_maptype.htmSample: GMap\4_custom_maptype.htm


5. Using Tile Overlay5. Using Tile Overlay As overlay in all map types, should be transparent layerAs overlay in all map types, should be transparent layer Create a custom tile layer.Create a custom tile layer.

var var myMapTileLayermyMapTileLayer = new GTileLayer( = new GTileLayer(myCopymyCopy, 10, 18);, 10, 18);myMapTileLayer.getTileUrl=function(tile,zoom){..}myMapTileLayer.getTileUrl=function(tile,zoom){..}

Create a Tile Overlay.Create a Tile Overlay. var myTileOverlay=new GTileLayerOverlay(myMapTileLayer);var myTileOverlay=new GTileLayerOverlay(myMapTileLayer);

Add Overlay to Map, AFTER setCenter().Add Overlay to Map, AFTER setCenter(). map.addOverlay(myTileOverlay);map.addOverlay(myTileOverlay);

Idea for non-basemap, special subject layers, such as bus Idea for non-basemap, special subject layers, such as bus routes..routes..

Sample: GMap\5_tileoverlay.htmSample: GMap\5_tileoverlay.htm


Virtual Earth API only allows custom tile on top Virtual Earth API only allows custom tile on top of default layersof default layers Default Tiles are loaded from Microsoft even they are covered.Default Tiles are loaded from Microsoft even they are covered. Functions like GTileLayerOverlay in Google Map API.Functions like GTileLayerOverlay in Google Map API. Opacity can be defined to allow see-through default Maps, if Opacity can be defined to allow see-through default Maps, if

necessary.necessary. Use the same tiling schema as Google Map V2.x.Use the same tiling schema as Google Map V2.x. Have very good documentation on Tile Schema for V4. Have very good documentation on Tile Schema for V4. The PNG8 transparency may not rendered correctly.The PNG8 transparency may not rendered correctly.

Use Custom Tiles in Virtual EarthUse Custom Tiles in Virtual Earth

Add Custom Tile Layer in Virtual EarthAdd Custom Tile Layer in Virtual Earth Create a VETileSourceSpecification instance.Create a VETileSourceSpecification instance.

var tileSourceSpec = new VETileSourceSpecification("myMap", var tileSourceSpec = new VETileSourceSpecification("myMap", "GetTilePath");"GetTilePath");

Define GetTilePath (tileContext) function.Define GetTilePath (tileContext) function. tileSourceSpec.GetTilePath=function (tile){tileSourceSpec.GetTilePath=function (tile){… }… }

Framework will pass tileContext with XPos, YPos, and Framework will pass tileContext with XPos, YPos, and ZoomLevel.ZoomLevel.

Add Tile Layer to mapAdd Tile Layer to map map.AddTileLayer(tileSourceSpec, true);map.AddTileLayer(tileSourceSpec, true);

Sample: VEMap/1_add_on_top.htm, 2_png8_problem.htmSample: VEMap/1_add_on_top.htm, 2_png8_problem.htm

Use Custom Tiles in Virtual EarthUse Custom Tiles in Virtual Earth

Yahoo’s Primary Map API is Flash based. Yahoo’s Primary Map API is Flash based. The AJAX API has less features compare to those of The AJAX API has less features compare to those of

Google Map and Virtual Earth.Google Map and Virtual Earth. Does not officially support custom Tile Layer.Does not officially support custom Tile Layer. Useful if you plan to use YUI (Yahoo User Interface) as Useful if you plan to use YUI (Yahoo User Interface) as

your front end development because it shares some your front end development because it shares some common JavaScript library from Yahoo. common JavaScript library from Yahoo.

Use Custom Tiles in Yahoo AJAX mapUse Custom Tiles in Yahoo AJAX map

Use a slightly different tile schema than Google Map and Virtual Use a slightly different tile schema than Google Map and Virtual Earth, use equator as 0 instead of latitude ~85, longitude 0.Earth, use equator as 0 instead of latitude ~85, longitude 0.

The zoom level is reverse of GM2 and VE, 1 is most detail. 18 is The zoom level is reverse of GM2 and VE, 1 is most detail. 18 is global.global.

There is an undocumented method can be used to replace the There is an undocumented method can be used to replace the default map tiles:default map tiles: YMapConfig.setRegTile(YMapConfig.setRegTile(……+"&tilename=basemap&");+"&tilename=basemap&"); YMapConfig.setSatTile(YMapConfig.setSatTile(……+"&tilename=aerial&");+"&tilename=aerial&"); YMapConfig.setHybTile(tileServerBaseURL+"&tilename=hybrid&");YMapConfig.setHybTile(tileServerBaseURL+"&tilename=hybrid&");

The URL is in the format of The URL is in the format of baseurl&x=&y=&z=baseurl&x=&y=&z= Sample: YMap\1_replace_tile.htmSample: YMap\1_replace_tile.htm

Use Custom Tiles in Yahoo AJAXUse Custom Tiles in Yahoo AJAX

Understanding Tile SystemUnderstanding Tile System

Compare to traditional GIS web applications, the tile Compare to traditional GIS web applications, the tile maps are pre-rendered according to a specific tile maps are pre-rendered according to a specific tile system, and the API retrieves the pre-rendered tile system, and the API retrieves the pre-rendered tile images and display in a view port. images and display in a view port.

Google Map, Virtual Earth and Yahoo Map uses a Google Map, Virtual Earth and Yahoo Map uses a similar tile system with small variation.similar tile system with small variation.

The Same tile set can be used in all three APIs with The Same tile set can be used in all three APIs with simple conversion.simple conversion.

The basic idea is to prepare a list of fixed zoom The basic idea is to prepare a list of fixed zoom levels, divide earth into small square tiles and levels, divide earth into small square tiles and create small images for each tile.create small images for each tile.


Microsoft has an excellent article about the tile Microsoft has an excellent article about the tile system used in VE, available at system used in VE, available at http://msdn2.microsoft.com/en-us/library/bb259689.aspxhttp://msdn2.microsoft.com/en-us/library/bb259689.aspx

Mercator Projection is used by all three vendorsm Mercator Projection is used by all three vendorsm because it’s simple, fast, and preserve shape and because it’s simple, fast, and preserve shape and direction. It is also relatively simple to implement in direction. It is also relatively simple to implement in JavaScript. JavaScript.

The actual Coordinate system is The actual Coordinate system is Sphere_MercatorSphere_Mercator (53004) (53004) instead ofinstead of World_MercatorWorld_Mercator (54004). (54004). Some Some small gaps between tiles maybe visible at smaller scale if small gaps between tiles maybe visible at smaller scale if the projection is not set correctly. See below.the projection is not set correctly. See below.


World Mercator (54004) Sphere Mercator (53004)

Map ScalesMap Scales

The tile system started at zoom level 1, and the earth is The tile system started at zoom level 1, and the earth is rendered as 4 tiles, 256x256 each.rendered as 4 tiles, 256x256 each.

Each successive zoom level, the map width and height Each successive zoom level, the map width and height grew by factor of 2grew by factor of 2

At zoom level n, the map size is 256 * 2 ^ level pixelsAt zoom level n, the map size is 256 * 2 ^ level pixels Assuming DPI of 96, at latitude 0, the actual zoom scale Assuming DPI of 96, at latitude 0, the actual zoom scale

can be calculated, and a set of commonly used map can be calculated, and a set of commonly used map scale can be used as reference to set up the map engine scale can be used as reference to set up the map engine for cutting tiles. for cutting tiles.

For most local governments, the relevant zoom level are For most local governments, the relevant zoom level are from 10-19. from 10-19.

Map ScalesMap Scales

Zoom Level True Scale

10 1 : 577,791.71

11 1 : 288,895.85

12 1 : 144,447.93

13 1 : 72,223.96

14 1 : 36,111.98

15 1 : 18,055.99

16 1 : 9,028.00

17 1 : 4,514.00

18 1 : 2,257.00

19 1 : 1,128.50

Source: http://msdn2.microsoft.com/en-us/library/bb259689.aspx, modified

Common Scale

1:1,000,000

1:500,000

1:200,000

1:100,000

1:50,000

1:20,000

1:10,000

1:5000 or 7500

1:4,000

1:2,000

Pixel and Tile CoordinatesPixel and Tile Coordinates

At each zoom level, the earth is rendered as a giant At each zoom level, the earth is rendered as a giant virtual image of (256*2^level)x(256*2^level). Each pixel virtual image of (256*2^level)x(256*2^level). Each pixel will have a coordinate from 0 to the max size of the will have a coordinate from 0 to the max size of the virtual image. virtual image.

When converting Lat/Lon to pixel, the actual radius of the When converting Lat/Lon to pixel, the actual radius of the earth actually does not matter. It will be cancelled in the earth actually does not matter. It will be cancelled in the calculation in Mercator projection. calculation in Mercator projection.

The virtual image is then split into 2^level number of tiles The virtual image is then split into 2^level number of tiles in each dimension. in each dimension.

The tile coordinates is pixel coordinates divided by tile The tile coordinates is pixel coordinates divided by tile size then take the floor part. size then take the floor part.

QuadkeysQuadkeys Quadkey is used by Virtual Earth to optimize indexing and storage of map Quadkey is used by Virtual Earth to optimize indexing and storage of map

tiles.tiles. The length of the key is same as zoom level.The length of the key is same as zoom level. Each digit (0-3) at each level is decided by the tile’s position in it’s parent tile.Each digit (0-3) at each level is decided by the tile’s position in it’s parent tile.

Image Source: http://msdn2.microsoft.com/en-us/library/bb259689.aspx

Cutting your TilesCutting your Tiles

What you need:What you need: 1) A Mapping Engine. It must be able to 1) A Mapping Engine. It must be able to

render a bitmap for a given specific render a bitmap for a given specific geographic area, output the image in geographic area, output the image in Sphere Mercator projection. Sphere Mercator projection. Examples include ArcIMS, UMN Map Server, Examples include ArcIMS, UMN Map Server,

Any WMS Server, and, ArcMap!Any WMS Server, and, ArcMap!


2) A Data Storage Repository. It must be 2) A Data Storage Repository. It must be able to store large amount of binary data able to store large amount of binary data and can be retrieved quickly.and can be retrieved quickly. Examples: File System, SQL Server Examples: File System, SQL Server

(Express), Oracle, or any RDBMs that can (Express), Oracle, or any RDBMs that can handle binary format. handle binary format.


3) A Web Server and possibly some 3) A Web Server and possibly some server code written in programming server code written in programming language of your choice, unless you language of your choice, unless you choose file system as storage repository choose file system as storage repository and do not want additional flexibility. and do not want additional flexibility.

4) Some code to run across the tile system 4) Some code to run across the tile system and making request to Map engine. and making request to Map engine.

Cut Tiles: Define Interfaces and Cut Tiles: Define Interfaces and core classescore classes

Common Interface, different Common Interface, different implementations.implementations.

Two Interface is needed for a tile server:Two Interface is needed for a tile server: ITileMap: to make a image based on a geographic ITileMap: to make a image based on a geographic

area. The actual implementation can be ArcIMS or area. The actual implementation can be ArcIMS or something else.something else.

ITileCache: to store and retrieve images. The ITileCache: to store and retrieve images. The actual implementation can be file system or actual implementation can be file system or RDBMS.RDBMS.

Helper classes: Tiles, Images, Coordinate Helper classes: Tiles, Images, Coordinate transformation classes. transformation classes.

Cutting Tiles: Define Interfaces and core Cutting Tiles: Define Interfaces and core classesclasses

Cutting Tiles: Implementing InterfacesCutting Tiles: Implementing Interfaces

Organize tools by technology type as “Resources”.Organize tools by technology type as “Resources”. Each resource can implement one or more Each resource can implement one or more

interfaces. For example, an ArcIMS resource can interfaces. For example, an ArcIMS resource can produce Map and perform query, and a SQL produce Map and perform query, and a SQL resource can store, retrieve image and possibly resource can store, retrieve image and possibly query. While a File resource can only store and query. While a File resource can only store and retrieve image. retrieve image.

A particular tile set can mix and match its A particular tile set can mix and match its functionalities. For example, the base map tiles can functionalities. For example, the base map tiles can use SQL server to store tiles, use ArcIMS to make use SQL server to store tiles, use ArcIMS to make tiles on the fly, and use MS Spatial for data query. tiles on the fly, and use MS Spatial for data query.

Cutting Tiles: Implementing InterfacesCutting Tiles: Implementing Interfaces

A Simple ScenarioA Simple Scenario

Use ArcIMS to make tile images.Use ArcIMS to make tile images. Store Tile Images in a file systemStore Tile Images in a file system Retrieve tile from the file systemRetrieve tile from the file system

Use ArcIMS to make imagesUse ArcIMS to make images

The Input coordinate system should be WGS The Input coordinate system should be WGS Geographic Coordinate System, unless Geographic Coordinate System, unless converted in the cutter.converted in the cutter.

The output image should be in Sphere Mercator The output image should be in Sphere Mercator Coordinate System (53004).Coordinate System (53004).

Reaspect must be set to false to avoid ArcIMS Reaspect must be set to false to avoid ArcIMS automatically adjust the envelopment if the automatically adjust the envelopment if the filtercoordinate system is GCS 4326.filtercoordinate system is GCS 4326.

For vector layers, it maybe necessary to set a For vector layers, it maybe necessary to set a transparent background for PNG output types. transparent background for PNG output types.

For Vector layers, PNG8 is recommended for For Vector layers, PNG8 is recommended for smaller size. For raster, JPG is best.smaller size. For raster, JPG is best.

Sample code: Sample code: TileSystem\Resource\ArcIMS\TileSystem\Resource\ArcIMS\ArcIMSTileResource.csArcIMSTileResource.cs

Use ArcIMS to make imagesUse ArcIMS to make images

public TileImage MakeTile(LatLngBounds bnds, int public TileImage MakeTile(LatLngBounds bnds, int imageSize, string imageType, bool transparent) {imageSize, string imageType, bool transparent) {…… string axlReq = String.Format("<?xml string axlReq = String.Format("<?xml version='1.0' encoding='UTF-8'?><ARCXML version='1.0' encoding='UTF-8'?><ARCXML version='1.1'><REQUEST><GET_IMAGE><PROPversion='1.1'><REQUEST><GET_IMAGE><PROPERTIES><FEATURECOORDSYS id='53004' ERTIES><FEATURECOORDSYS id='53004' datumtransformid='1188' /><FILTERCOORDSYS datumtransformid='1188' /><FILTERCOORDSYS id='4326' id='4326' datumtransformid='1188'/><IMAGESIZE datumtransformid='1188'/><IMAGESIZE width='{0}' height='{0}'/> <ENVELOPE width='{0}' height='{0}'/> <ENVELOPE reaspect='false' minx='{1}' miny='{2}' reaspect='false' minx='{1}' miny='{2}' maxx='{3}' maxy='{4}' /><LEGEND maxx='{3}' maxy='{4}' /><LEGEND display='false' /><BACKGROUND display='false' /><BACKGROUND color='254,254,254' {5} /><OUTPUT color='254,254,254' {5} /><OUTPUT type='{6}'/></PROPERTIES></GET_IMAGE></REtype='{6}'/></PROPERTIES></GET_IMAGE></REQUEST></ARCXML>", imageSize, QUEST></ARCXML>", imageSize, bnds.SouthWest.Lng, bnds.SouthWest.Lat, bnds.SouthWest.Lng, bnds.SouthWest.Lat, bnds.NorthEast.Lng, bnds.NorthEast.Lat, bnds.NorthEast.Lng, bnds.NorthEast.Lat, transparent ? "transcolor = '254,254,254'" : "", transparent ? "transcolor = '254,254,254'" : "", imageType);imageType);}}

Use File System to store Use File System to store imagesimages

Simple and can be checked directly. Simple and can be checked directly. The best storage file structure is \TileSetName\z**\x**\The best storage file structure is \TileSetName\z**\x**\

y**.*y**.*

Store and Retrieve Images from Store and Retrieve Images from File SystemFile System

Conversion between file directory and tile Conversion between file directory and tile coordinate systemcoordinate system <name>\z<>\x<>\y<>.type<name>\z<>\x<>\y<>.type

Setup configuration about some metadata about Setup configuration about some metadata about the tile set, for example, type (png8, jpg etc)the tile set, for example, type (png8, jpg etc)

Create directory tree as needed in cut process.Create directory tree as needed in cut process. Using File IO API to read/write images from disk.Using File IO API to read/write images from disk. Sample code: Sample code: TileSystem\Resource\FileSys\TileSystem\Resource\FileSys\

FileTileResource.csFileTileResource.cs

Build The CutterBuild The Cutter The Cutter will travel the tile system, make calls to map The Cutter will travel the tile system, make calls to map

engine (implementing ITileMap) to create map, then call engine (implementing ITileMap) to create map, then call storage engine (implementing ITileCache) to store storage engine (implementing ITileCache) to store images.images.

First query the map engine for initial map extent, in First query the map engine for initial map extent, in Lat/Lng format.Lat/Lng format.

Use Coordinate transformation tool to find the southwest Use Coordinate transformation tool to find the southwest and northeast corner's pixel coordinates, then convert to and northeast corner's pixel coordinates, then convert to tile coordinates.tile coordinates.

With the known boundary of tile coordinates, travel With the known boundary of tile coordinates, travel horizontally then vertically for all tiles in the range.horizontally then vertically for all tiles in the range.

Repeat for each Zoom Level. Repeat for each Zoom Level.

Build The CutterBuild The Cutter

Config and Run CutterConfig and Run Cutter

Config image type, tile size, transparency for tile Config image type, tile size, transparency for tile set.set.

Config storage mechanism (cacheSource)Config storage mechanism (cacheSource) Config map maker (mapSource)Config map maker (mapSource) Set up additional parameters (zoom level, force Set up additional parameters (zoom level, force

refresh etc)refresh etc) If the tile cache is file system image can be If the tile cache is file system image can be

directly referenced in getTileUrl. directly referenced in getTileUrl. Code: TileCutter.csCode: TileCutter.cs Check results: GMap\6_filesystem_direct.htmCheck results: GMap\6_filesystem_direct.htm

Serving Image with Server side Serving Image with Server side componentscomponents

Serving images from a server component has Serving images from a server component has several advantages over direct url reference to several advantages over direct url reference to image file: image file: Meta data configuration to allow more flexibility on Meta data configuration to allow more flexibility on

image type (png/gif/jpg etc)image type (png/gif/jpg etc) Allow storage other than file system.Allow storage other than file system. Possible more flexibility in server caching. Possible more flexibility in server caching. Allow more tile system(GM/VE/YM) conversion. Allow more tile system(GM/VE/YM) conversion.

In ASP.NET, use a generic HTTP Handler.In ASP.NET, use a generic HTTP Handler. In Java, use an HTTP Servlet. In Java, use an HTTP Servlet.

Serving Image with Server side Serving Image with Server side components (ASP.NET)components (ASP.NET)

Use similar tile set configuration in Tile cutter.Use similar tile set configuration in Tile cutter. Perform tile system conversion if necessary.Perform tile system conversion if necessary. Cache Tile set metadata. Cache Tile set metadata. Find the Cache source for the requested tile Find the Cache source for the requested tile

set.set. Retrieve the actual image from the cache Retrieve the actual image from the cache

source and write to browser.source and write to browser. Code: TileServer\MapTile.cs, GMap\Code: TileServer\MapTile.cs, GMap\

7_filesystem_handler.htm7_filesystem_handler.htm

Store Tile Image In DatabaseStore Tile Image In Database

SQL Express is a good option for moderate datasets SQL Express is a good option for moderate datasets (4GB limit).(4GB limit).

Faster to move between systems( detach, attach)Faster to move between systems( detach, attach) More meta data options such as timeout rules etc.More meta data options such as timeout rules etc. Can use x, y, z index or Quadkey. Can use x, y, z index or Quadkey. Tile Image store as Image type (or varbinary)Tile Image store as Image type (or varbinary) MDF file can be put into TileServer application’s MDF file can be put into TileServer application’s

App_Data folder, or register with SQLExpress using App_Data folder, or register with SQLExpress using Management Studio.Management Studio.

The Cutter write bytes into a table, and tile server The Cutter write bytes into a table, and tile server handler read from database and send to browser.handler read from database and send to browser.

Improving Tile Cutter QualityImproving Tile Cutter Quality

Tuning Cartography.Tuning Cartography. Because the map will be pre-rendered, it is Because the map will be pre-rendered, it is

acceptable to use advanced cartographic features acceptable to use advanced cartographic features such as antialiasing.such as antialiasing.

Use scale dependent renderers for different zoom Use scale dependent renderers for different zoom level, using the map scale table for reference. level, using the map scale table for reference.

Use multiple composite renderers to achieve outline Use multiple composite renderers to achieve outline effects for polyline feature classeffects for polyline feature class

Use multiple layers to make sure correct symbol Use multiple layers to make sure correct symbol order. e.g Freeway on top of local streets.order. e.g Freeway on top of local streets.

Improve cutting performanceImprove cutting performance Only Google Map API supports tile size other than Only Google Map API supports tile size other than

256x256. Larger tile means less server requests but 256x256. Larger tile means less server requests but larger download size. larger download size.

Having map engine render 256 tiles is not very efficient Having map engine render 256 tiles is not very efficient considering data IO, rendering etc.considering data IO, rendering etc.

For most map engine, rendering a 512 x 512, even 1024 For most map engine, rendering a 512 x 512, even 1024 x 1024 map takes only slightly longer time than x 1024 map takes only slightly longer time than rendering a 256x256 map. rendering a 256x256 map.

Cut larger tiles then slice into smaller pieces will Cut larger tiles then slice into smaller pieces will dramatically decrease the number of map images the dramatically decrease the number of map images the map engine has to make. Cut 512 instead of 256 will map engine has to make. Cut 512 instead of 256 will need only about ¼ of map requests (the boundary may need only about ¼ of map requests (the boundary may cause small variations)cause small variations)

Improve cutting performanceImprove cutting performance

Use Graphics API such as GDI+ or Java2D can slice Use Graphics API such as GDI+ or Java2D can slice images into smaller pieces.images into smaller pieces.

PNG8 can cause smaller problem because the GDI+ will PNG8 can cause smaller problem because the GDI+ will convert it to PNG24 and the saved file will lose convert it to PNG24 and the saved file will lose

transparency setting.transparency setting. To fix the PNG8 problem, use the Image Color To fix the PNG8 problem, use the Image Color

Quantization code from Quantization code from

http://msdn2.microsoft.com/en-us/library/aa479306.aspxhttp://msdn2.microsoft.com/en-us/library/aa479306.aspx The cutter uses larger steps when traveling in tile The cutter uses larger steps when traveling in tile

system, requesting larger images from map engine, then system, requesting larger images from map engine, then slice them, store in tile repository in normal size. slice them, store in tile repository in normal size.

Caching TilesCaching Tiles

Most web server or application framework has Most web server or application framework has some caching mechanism.some caching mechanism.

Tiles can be cached in memory of web server Tiles can be cached in memory of web server and served directly if someone requested same and served directly if someone requested same tile within a timeout window.tile within a timeout window.

ASP.NET has built-in HttpContext.Cache ASP.NET has built-in HttpContext.Cache system, along with configurable system, along with configurable CacheDependency, the tile server will have a CacheDependency, the tile server will have a better performance.better performance.

Tile On-DemandTile On-Demand

For less popular area, the tile can be For less popular area, the tile can be rendered on demand and store in to the rendered on demand and store in to the tile repository. tile repository.

There are multiple level of caching:There are multiple level of caching: If the browser can not find the tile or expired.If the browser can not find the tile or expired. Server in-memoryServer in-memory Tile repositoryTile repository Generate on demand then store the tile.Generate on demand then store the tile.

Spatial Query/IdentifySpatial Query/Identify

Push-pin or Markers are generally clickable in Push-pin or Markers are generally clickable in GM/VE/YM API.GM/VE/YM API.

The map itself can not be clicked, or “identified”The map itself can not be clicked, or “identified” However, click events can be captured, along However, click events can be captured, along

with information about the clicked point, with information about the clicked point, including lat/lon, zoom level, map view point including lat/lon, zoom level, map view point extent etc.extent etc.

Those information can be passed via AJAX Those information can be passed via AJAX request to server and query the underline spatial request to server and query the underline spatial data.data.


Normally a query engine can work off the same Normally a query engine can work off the same map service that produces the actual map map service that produces the actual map image, in that case, the scale control on layer image, in that case, the scale control on layer can be used to check which layer should be can be used to check which layer should be queried.queried.

Identify function can be de-coupled from the Identify function can be de-coupled from the map service, so additional tools and features map service, so additional tools and features can be used. can be used.

A Common interface ITileData can be defined A Common interface ITileData can be defined and resources can implement the interface.and resources can implement the interface.


The query can be implemented by ArcIMS query The query can be implemented by ArcIMS query server, or MS spatial, or ArcSDE API, or other server, or MS spatial, or ArcSDE API, or other spatially enabled RDBMS, such as PostGIS etc.spatially enabled RDBMS, such as PostGIS etc.

Attach click event to Google Map instanceAttach click event to Google Map instance Upon click, form an http request and send to Upon click, form an http request and send to

server via XmlHttpserver via XmlHttp Perform spatial query based on clicked location, Perform spatial query based on clicked location,

adjust to correct spatial reference system.adjust to correct spatial reference system. Display results in callback.Display results in callback.

Putting it togetherPutting it together

An example that:An example that: Replace the default Map type’s tile layerReplace the default Map type’s tile layer Add a new map type for a new tile set.Add a new map type for a new tile set. Tile cut from an ArcIMS map service.Tile cut from an ArcIMS map service. Store/retrieve map tiles in SQL expressStore/retrieve map tiles in SQL express Render on demand when the requested tile is not pre-Render on demand when the requested tile is not pre-

rendered.rendered. Identify map features from ArcIMS map service.Identify map features from ArcIMS map service.