Zh YandexMap CustomMapType

From Documentation
Jump to navigation Jump to search

Creating Custom Map Type

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

Create new one

YM-Tutorial-Custom-Map-Type-1.png

YM-Tutorial-Custom-Map-Type-2.png

In Map Types Details you have to fill required filds

  • Title - this is Name of your map name in map type control
  • minZoom and maxZoom for map (you should know for what zoom tiles exists)
  • size of tiles
  • Get Tile URL function by using it Yandex Maps API can get tiles
  • Projection - you have to know in what projection your tiles are created
  • 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.


In our case we have tiles URL for getting tile as

http://tile.openstreetmap.org/%z/%x/%y.png

In this case our Get Tile URL function will be

function (tileNumber, zoom) {    
  return ['http://tile.openstreetmap.org', zoom, tileNumber[0], tileNumber[1]].join('/') + '.png';
}

Save and close.

Now you can see, that your map ID is 1

YM-Tutorial-Custom-Map-Type-MapType-List.png


After that we need to allow to use this map type on our map.

Go to your map. Open map details.

YM-Tutorial-Custom-Map-Type-MapProperties.png


Set Allow Custom Map Types to appropriate value

  • Yes - you allow custom map type, but it is not appeared in Map Type Control
  • Map Type Control - you allow custom map type, and it is appeared in Map Type Control

Enter your Map Type ID into Custom Map Types List

You can also set Map Type to First Custom Map Type if you want to show your map type by default.

As a result our map will be like

YM-Tutorial-Custom-Map-Type-Result.png

When change map type to our new one

YM-Tutorial-Custom-Map-Type-ResultOSM.png