import holoviews as hv
from holoviews import opts
hv.extension('plotly')

"""
Explanation: <div class="contentcontainer med left" style="margin-left: -50px;">
<dl class="dl-horizontal">
  <dt>Title</dt> <dd> Tiles Element</dd>
  <dt>Dependencies</dt> <dd>Plotly</dd>
  <dt>Backends</dt>
    <dd><a href='../bokeh/Tiles.ipynb'>Bokeh</a></dd>
    <dd><a href='Tiles.ipynb'>Plotly</a></dd>
</dl>
</div>
End of explanation
"""


hv.Tiles('https://maps.wikimedia.org/osm-intl/{Z}/{X}/{Y}@2x.png', name="Wikipedia").opts(width=600, height=550)

"""
Explanation: The Tiles element represents a so called web mapping tile source usually used for geographic plots, which fetches tiles appropriate to the current zoom level. To declare a Tiles element simply provide a URL to the tile server. A standard tile server URL has a number of templated variables that describe the location and zoom level. In the most common case of a WMTS tile source, the URL looks like this:
'https://maps.wikimedia.org/osm-intl/{Z}/{X}/{Y}@2x.png'

Here {X}, {Y} and {Z} describe the location and zoom level of each tile.
A simple example of a WMTS tile source is the Wikipedia maps:
End of explanation
"""


hv.Layout([ts().relabel(name) for name, ts in hv.element.tiles.tile_sources.items()]).opts(
    opts.Tiles(xaxis=None, yaxis=None, width=225, height=225),
    opts.Layout(hspacing=10, vspacing=40)
).cols(4)

"""
Explanation: One thing to note about tile sources is that they are always defined in the pseudo-Mercator projection, which means that if you want to overlay any data on top of a tile source the values have to be expressed as eastings and northings. If you have data in another projection, e.g. latitudes and longitudes, it may make sense to use GeoViews for it to handle the projections for you.
Both HoloViews and GeoViews provides a number of tile sources by default, provided by CartoDB, Stamen, OpenStreetMap, Esri and Wikipedia. These can be imported from the holoviews.element.tiles module and are provided as callable functions that return a Tiles element:
The full set of predefined tile sources can be accessed on the holoviews.element.tiles.tile_sources dictionary:
End of explanation
"""


