Zh GoogleMap CustomMapType

Creating Custom Map Type

In this tutorial we will create two Custom Map Types

Creating custom map type for common map

This map types for map, which you are not created (not create tiles), but you want use it in component (or plugin).

For example create custom map type for Open Street Map (which is included in component as predefined map type)

Go to Map Types

Lets create new type

In Map Types Details you have to fill required filds

• Title - this is Name of your button on map
• Descripion - tooltip for button
• minZoom and maxZoom for map (you should know for what zoom tiles exists)
• size and type of tiles
• Get Tile URL function by using it Google Maps API can get tiles
• Layer Type - it is way to how map of this type will be displayed
  • Map - displays only your tiles
  • Overlay - display your tiles over main map. This useful if your map covers only part of world and you want to show the other part too.

The result is

This is function code (this is JavaScript function)

function(ll, z) {
	var X = ll.x % (1 << z);  /* wrap */
	return "http://tile.openstreetmap.org/" + z + "/" + X + "/" + ll.y + ".png";
}

After creating map type lets show map of this type.

Set 'Published to yes (in other case this type would be skipped)

Go to Maps tab.

Open your map (if exists), or create new one.

Set Allow Custom Map Types to yes.

In next field Custom Map Types List enter your new custom map type ID. As you can see on first picture, my map type ID=1

Save changes and look at results

It is simple example of custom map type.

Creating custom map type for your tiles

For example you have an image of map, and want to use it in your site. Lets do that.

Open your favorite program to create tiles.

Create tiles from your image. Addition to tiles you've got a html-page to show your map.

Copy your tiles to folder on site, where you want store tiles.

Find the function in HTML-document, which return URL for tiles. Copy and paste function definition into Get Tile URL function field. Include into function body the other functions (if it is exists and needs). Correct address URL in your function to get tiles from right site folder.

Save and add your new map type to your map as we do in first example.

If your program for created tiles create more than one function, you have to the other functions include in main function for getting tiles.