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

# In[1]:


from IPython.display import HTML

hide_me = ''

HTML('''
<style>
    .container {
        box-shadow: none !important;
    }

    .output_html {
        shadow: none !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .title1 {
        color: #e74a49 !important;
    }
</style>

<script async>
code_show=true;
function code_toggle() {
  if (code_show) {
    $('div.input').each(function(id) {
      el = $(this).find('.cm-variable:first');
      if (id == 0 || el.text() == 'hide_me') {
        $(this).hide();
      }
    });
    $('div.output_prompt').css('opacity', 0);
  } else {
    $('div.input').each(function(id) {
      $(this).show();
    });
    $('div.output_prompt').css('opacity', 1);
  }
  code_show = !code_show
}
$( document ).ready(code_toggle);
</script>
<form action="javascript:code_toggle()"><input style="opacity:0" type="submit" value="Click here to toggle on/off the raw code."></form>''')


# <div>
#   <a href="https://github.com/rafpyprog/pymaps/" style="text-decoration: none">
#   <img src="https://raw.githubusercontent.com/rafpyprog/pymaps/master/images/pymaps-logo-36x36.png" style="margin:auto !important;text-align:center;"/>
#   <strong><p style="margin:auto !important;text-align:center !important;padding:10px 10px 0px 10px !important;font-size:36px !important;color:#000000 !important;">PyMaps</p></strong></a>
#   <p style="font-size:24px;text-align:center;color:#e74a49;padding:0 !important;margin:0.4em !important;">Markers</p> </div>
# 
# <div style="text-align:center;width:100%">
#   <div style="display: inline-block;">
#     <div style="float:left;margin:0.1em;">
#       <a href="https://pypi.python.org/pypi/pymaps"><img src="https://img.shields.io/pypi/v/pymaps.svg"></a>
#     </div>
#     <div style="float:left;margin:0.1em;">
#       <a href="https://pypi.python.org/pypi/pymaps"><img src="https://img.shields.io/pypi/pyversions/pymaps.svg">
#       </a>
#     </div>
#     <div style="float:left;margin:0.1em;">
#         <a href=""><img src="https://img.shields.io/pypi/l/pymaps.svg"></a>
#     </div>
#     <div style="float:left;margin:0.1em;">
#       <a href="https://travis-ci.org/rafpyprog/pymaps">
#           <img src="https://img.shields.io/travis/rafpyprog/pymaps.svg">
#       </a>
#     </div>
#   </div>
# </div>
# 

# A Marker identifies a location on a map. By default, a marker uses a standard image. 
# Markers can display custom images using the icon parameter.

# <h1 class="title1">Table of Contents</h1>
# * [Create a map with a marker](#marker1)
# * [Marker animation](#marker2)
# * [Custom icons](#marker3)
# * [Custom colors](#marker4)
# * [Custom icon from URL](#marker5)   
# * [Creating a MarkerCluster](#marker6)   

# In[2]:


import os
import random
from IPython.display import HTML, display
import pandas as pd


# <a id="marker1"></a>
# <h1 class="title1">Create a Map with a Marker</h1>

# In[3]:


API_KEY = os.environ['MAPS_API_KEY']

from pymaps import Map
from pymaps.marker import Marker, MarkerCluster


# In[4]:


fernando_de_noronha = (-3.8576, -32.4297)
m = Map(api_key=API_KEY, zoom=13)
title = 'Fernando de Noronha'  # hover the mouse over the marker to show the title
Marker(fernando_de_noronha, title=title).add_to(m)
m


# * Lets add more markers...

# In[5]:


cities = {"rome": (41.9028, 12.4964),           
          'paris' : (48.8566, 2.3522),
          'madrid' : (40.4168, -3.7038),
          'berlin' : (52.5200, 13.4050),          
          'amsterdan' : (52.3702, 4.8952),
          'london' : (51.509865,  -0.118092)}


# In[6]:


map = Map([-18.99, -44.04], api_key=API_KEY, zoom=6, show_pegman=False, disable_default_ui=True)

for n, values  in enumerate(cities.items(), 1):    
    city_name, latlgn = values
    title = city_name.title() 
    Marker(latlgn, title=title, label=n).add_to(map)
map.fit_bounds(cities.values())
map


# <a id="marker2"></a>
# ## Marker animation

# In[7]:


for marker in map.children['marker']:
    if marker.title == 'London':
        marker.set_animation('BOUNCE')
        marker.label = ''
map


# <a id="marker3"></a>
# ## Built-in custom icons

# In[8]:


from pymaps.icon import *
from pymaps.utils import random_latlng


# There are **8 customs** icons and **19 color sets** that you can use to customize your markers

# ### Custom Icons

# In[9]:


m = Map(api_key=API_KEY)

lat = 0
lng = -80

for n, shape in enumerate(SHAPES):
    color = list(COLORS.keys())[n]   
    icon = Icon(shape, color=color, size=2)
    Marker([lat, lng], icon=icon, title=shape).add_to(m) 
    lng += 20    
m


# <a id="marker4"></a>
# ## Built-in custom colors

# In[10]:


m = Map(api_key=API_KEY, style='grayscale')

lat = -30
lng = 0

for n, color in enumerate(COLORS.keys()):
    if n > 0 and n % 5 == 0:
        lat += 20
        lng -= 100
    icon = Icon('dot', color=color, size=2)
    Marker([lat, lng], icon=icon, title=color).add_to(m) 
    lng += 20    
m


# ### Customize everything !

# In[11]:


m = Map(api_key=API_KEY, zoom=1, style='silver')
for shape in SHAPES:
    size = random.randint(1, 3)
    color=random.choice([c for c in COLORS])
    icon = Icon(shape, color=color, size=size)
    coordinates = random_latlng()
    Marker(coordinates, icon=icon, title=shape + ' - ' + color).add_to(m)
m


# <a id="marker5"></a>
# ## Custom icon from URL

# * Markers's icons also can be customized from any image URL

# In[12]:


gb_icon = 'https://www.workaway.info/gfx/flags/flag_great_britain.png'
         
for marker in map.children['marker']:
    if marker.title == 'London':
        marker.icon = gb_icon
        marker.set_animation('BOUNCE')
        marker.label = ''
    else:
        marker.set_animation('DROP')
    

map.set_style('water')
map


# <a id="marker6"></a>
# # MarkerCluster

# In[13]:


cities['buenos_aires'] = (-34.6037, -58.3816)
cities['brasilia'] = (-15.7942, -47.8822)
cities['santiago'] = (-33.4489, -70.6693)


# In[14]:


map = Map(api_key=API_KEY, show_pegman=False, disable_default_ui=True)
cluster = MarkerCluster()
for n, values  in enumerate(cities.items(), 1):    
    city_name, latlgn = values
    title = city_name.title() 
    Marker(latlgn, title=title, label=n).add_to(cluster)
cluster.add_to(map)
map