#!/usr/bin/env python
# coding: utf-8

# <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>

# In[ ]:


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


# 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:

# In[ ]:


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


# One thing to note about tile sources is that they are always defined in the [pseudo-Mercator projection](https://epsg.io/3857), 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](http://geoviews.org/) 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:

# In[ ]:


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)


# For full documentation and the available style and plot options, use ``hv.help(hv.Tiles).``

# ### Vector Mapbox Tiles
# 
# In addition to displaying raster tiles loaded from a tile source URL, the Plotly backend can also display vector tiles provided by Mapbox. A vector tile style is specified using the `mapboxstyle` option, and requires a Mapbox
# access token to be provided as the `accesstoken` option.
# 
# ```python
# hv.Tiles('').opts(
#     mapboxstyle="dark",
#     accesstoken="pk...",
#     width=600,
#     height=600
# )
# ```