Leaflet - Color by Regions


In [1]:
from matplotlib import pyplot as plt
from IPython.display import display, HTML, Javascript
from jinja2 import Template


/home/xmn/anaconda3/lib/python3.5/site-packages/matplotlib/font_manager.py:273: UserWarning: Matplotlib is building the font cache using fc-list. This may take a moment.
  warnings.warn('Matplotlib is building the font cache using fc-list. This may take a moment.')
/home/xmn/anaconda3/lib/python3.5/site-packages/matplotlib/font_manager.py:273: UserWarning: Matplotlib is building the font cache using fc-list. This may take a moment.
  warnings.warn('Matplotlib is building the font cache using fc-list. This may take a moment.')

In [2]:
def inline_html(stuff):
    """
    Embeds the HTML source of the dc charts directly into the IPython notebook.
    
    This method will not work if the dc charts depends on any files(json data). 
    Also this uses the HTML5 srcdoc attribute, which may not be supported in 
    all browsers.
    """

    return HTML('''
        <iframe srcdoc="{srcdoc}" 
        style="width: 500px; height: 300px; border: none"></iframe>
    '''.format(srcdoc=stuff.replace('"', '&quot;')))

In [5]:
with open('../data/br-states.json') as f:
    br_states = f.read()

In [6]:
html_template = Template("""
<html>

<head>
<link
    rel="stylesheet" 
    href="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css" 
/>

<script 
    src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"
></script>

</head>

<body>
    <div id="map" style="height:350px;"></div>
    
<script>
var map = L.map('map');

map.setView([-16, -50.528742], 3);

// create the tile layer with correct attribution
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(
    osmUrl, {minZoom: 1, maxZoom: 12, attribution: osmAttrib}
);


function onEachFeature(feature, layer) {
    //bind click
    layer.on({
        click: function(){
            l_name = feature.properties.nome;
            rid = regionIds[l_name];
            
            geojson_layer.eachLayer(function (_layer) {  
                _rid = regionIds[_layer.feature.properties.nome];
                
                if (_rid == rid) {
                    _layer.setStyle({weight: 2});
                    _layer.setStyle({color: '#333333'});
                    _layer.bringToFront();
                } else {
                    _layer.setStyle({weight: 1});
                    _layer.setStyle({color: '#333333'});
                }
            });
        }
    });
}

br_states = {{br_states}};

var colorRegion = {
    1: '#1C287E',
    2: '#74AD1B',
    3: '#E4F4FA',
    4: '#ff9900',
};

var regionIds = {
    'Acre': 1,
    'Alagoas': 2,
    'Amapá': 1,
    'Amazonas': 1,
    'Bahia': 2,
    'Ceará': 2,
    'Distrito Federal': 3,
    'Espírito Santo': 2,
    'Goiás': 3,
    'Maranhão': 3,
    'Mato Grosso': 3,
    'Mato Grosso do Sul': 3,
    'Minas Gerais': 4,
    'Paraná': 4,
    'Paraíba': 2,
    'Pará': 1,
    'Pernambuco': 2,
    'Piauí': 3,
    'Rio de Janeiro': 2,
    'Rio Grande do Norte': 2,
    'Rio Grande do Sul': 4,
    'Rondônia': 1,
    'Roraima': 1,
    'Santa Catarina': 4,
    'Sergipe': 2,
    'São Paulo': 4,
    'Tocantins': 3
};

var geojson_layer = L.geoJson(br_states, {
    onEachFeature: onEachFeature,
    style: function(feature) {
        l_name = feature.properties.nome;

        style_properties= {
            fillColor: colorRegion[regionIds[l_name]],
            color: '#333333',
            fillOpacity: 0.5,
            weight: 1,
        };

        return style_properties;
    }
});

geojson_layer.addTo(map);
osm.addTo(map);

</script>
</body>

</html>
""")

In [7]:
# push data to notebook
# display(df_alert.keys())
inline_html(html_template.render(
    br_states=br_states
))


Out[7]: