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