leaflet.py¶

"""
This example demonstrates the use of Leaflet to display a slippy map.
"""


import os
from urllib.request import urlopen, Request
import re
import base64
import mimetypes

import flexx
from flexx import event, app
from flexx.pyscript.stubs import window, L
from flexx.ui import Widget


_leaflet_url = 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/'
_leaflet_version = '1.0.3'
_leaflet_icons = [
    'marker-icon.png',
    'marker-icon-2x.png',
    'marker-shadow.png',
]


if 'LEAFLET_DIR' in os.environ:
    _base_url = 'file://%s' % os.environ['LEAFLET_DIR']
else:
    _base_url = '%s/%s' % (_leaflet_url, _leaflet_version)
mimetypes.init()


def _get_code(item):
    """ Get a text item from _base_url
    """
    url = '%s/%s' % (_base_url, item)
    req = Request(url, headers={'User-Agent': 'flexx/%s' % flexx.__version__})
    return urlopen(req).read().decode()


def _get_data(item_or_url):
    """ Get a binary item from url or _base_url
    """
    if '://' in item_or_url:
        url = item_or_url
    else:
        url = '%s/%s' % (_base_url, item_or_url)
    req = Request(url, headers={'User-Agent': 'flexx/%s' % flexx.__version__})
    return urlopen(req).read()


def _embed_css_resources(css, types=('.png',)):
    """ Replace urls in css with data urls
    """
    type_str = '|'.join('\%s' % t for t in types)
    rx = re.compile('(url\s*\(\s*(.*(%s))\s*\))' % type_str)
    found = rx.findall(css)
    for match, item, ext in found:
        data = base64.b64encode(_get_data(item)).decode()
        mime = mimetypes.types_map[ext]
        repl = 'url(data:%s;base64,%s)' % (mime, data)
        css = css.replace(match, repl)
    return css


app.assets.associate_asset(
    __name__,
    'leaflet.js',
    lambda: _get_code('leaflet.js'),
)
app.assets.associate_asset(
    __name__,
    'leaflet.css',
    lambda: _embed_css_resources(_get_code('leaflet.css')),
)
for icon in _leaflet_icons:
    app.assets.add_shared_data(icon, _get_data('images/%s' % icon))


class LeafletWidget(Widget):
    """ A widget that shows a slippy/tile-map using Leaflet.
    """

    @event.prop
    def layers(self, layers=None):
        """ Array of tilemap layer urls.
        """
        # We expect the layers to be determined server side so
        # this can be a python only property
        if layers is None:
            layers = []
        if isinstance(layers, str):
            layers = [(layers, 'Layer')]
        if not isinstance(layers, list):
            layers = list(layers)
        for i, layer in enumerate(layers):
            if not isinstance(layer, tuple) and not isinstance(layer, list):
                layers[i] = (layer, 'Layer')
        return layers

    @event.prop
    def min_zoom(self, min_zoom=0):
        """ Minimum zoom level for the map
        """
        return int(min_zoom)

    @event.prop
    def max_zoom(self, max_zoom=18):
        """ Maximum zoom level for the map
        """
        return int(max_zoom)

    class Both:

        @event.prop
        def zoom(self, zoom=8):
            """ Zoom level for the map. This property is defined in Python and
            JS because the zoomlevel can be adjusted by the server as well as
            by the user through the map widget.
            """
            return int(zoom)

        @event.prop
        def center(self, center=(52.0, 5.5)):
            """ Center of the map. Can be set by the user panning the map, or by
            Python server code.
            """
            return float(center[0]), float(center[1])

        @event.prop
        def show_layers(self, show_layers=False):
            """ Show layers icon on the top-right of the map
            """
            return bool(show_layers)

        @event.prop
        def show_scale(self, show_scale=False):
            """ Show scale at bottom-left of map
            """
            return bool(show_scale)

    class JS:

        def _init_phosphor_and_node(self):
            self.phosphor = self._create_phosphor_widget('div')
            self.node = self.phosphor.node
            self.mapnode = window.document.createElement('div')
            self.node.appendChild(self.mapnode)
            self.mapnode.id = 'maproot'
            self.mapnode.style.position = 'absolute'
            self.mapnode.style.top = '0px'
            self.mapnode.style.left = '0px'
            self.map = L.map(self.mapnode)
            self.map.on('zoomend', self.map_handle_zoom)
            self.map.on('moveend', self.map_handle_move)
            self.map.on('click', self.map_handle_mouse)
            self.map.on('dblclick', self.map_handle_mouse)
            # Container to keep track of leaflet layer objects
            self.layer_container = []
            self.layer_control = L.control.layers()
            self.scale = L.control.scale({'imperial': False, 'maxWidth': 200})
            # Set the path for icon images
            L.Icon.Default.prototype.options.imagePath = '_data/shared/'

        def map_handle_zoom(self, e):
            zoom = self.map.getZoom()
            if window.isNaN(zoom):
                return
            if zoom != self.zoom:
                self.zoom = zoom

        def map_handle_move(self, e):
            center_coord = self.map.getCenter()
            center = center_coord.lat, center_coord.lng
            if center != self.center:
                self.center = center

        def map_handle_mouse(self, e):
            latlng = [e.latlng.lat, e.latlng.lng]
            xy = [e.layerPoint.x, e.layerPoint.y]
            self.mouse_event(e.type, latlng, xy)

        @event.emitter
        def mouse_event(self, event, latlng, xy):
            return {'event': event, 'latlng': latlng, 'xy': xy}

        @event.connect('zoom')
        def _handle_zoom(self, *events):
            self.map.setZoom(events[-1].new_value)

        @event.connect('min_zoom')
        def _handle_min_zoom(self, *events):
            self.map.setMinZoom(events[-1].new_value)

        @event.connect('max_zoom')
        def _handle_max_zoom(self, *events):
            self.map.setMaxZoom(events[-1].new_value)

        @event.connect('center')
        def _handle_center(self, *events):
            self.map.panTo(events[-1].new_value)

        @event.connect('show_layers')
        def _handle_show_layers(self, *events):
            if events[-1].new_value:
                self.map.addControl(self.layer_control)
            else:
                self.map.removeControl(self.layer_control)

        @event.connect('show_scale')
        def _handle_show_scale(self, *events):
            if events[-1].new_value:
                self.map.addControl(self.scale)
            else:
                self.map.removeControl(self.scale)

        @event.connect('size')
        def _size_changed(self, *events):
            size = self.size
            if size[0] or size[1]:
                self.mapnode.style.width = size[0] + 'px'
                self.mapnode.style.height = size[1] + 'px'
                # Notify the map that it's container's size changed
                self.map.invalidateSize()

        @event.connect('layers')
        def _layers_changed(self, *events):
            for layer in self.layer_container:
                self.layer_control.removeLayer(layer)
                if self.map.hasLayer(layer):
                    self.map.removeLayer(layer)
            for layer_url, layer_name in events[-1].new_value:
                if not layer_url.endswith('.png'):
                    if not layer_url.endswith('/'):
                        layer_url += '/'
                    layer_url += '{z}/{x}/{y}.png'
                new_layer = L.tileLayer(layer_url)
                self.layer_container.append(new_layer)
                self.map.addLayer(new_layer)
                self.layer_control.addOverlay(new_layer, layer_name)


class LeafletExample(flexx.ui.Widget):

    def init(self):
        with flexx.ui.HBox():
            self.leaflet = LeafletWidget(
                flex=1,
                layers=['http://a.tile.openstreetmap.org/'],
                center=(52, 4.1),
                zoom=12
            )
            with flexx.ui.VBox():
                self.btna = flexx.ui.Button(text='Add SeaMap')
                self.btnr = flexx.ui.Button(text='Remove SeaMap')
                self.cbs = flexx.ui.CheckBox(text='Show scale')
                self.cbl = flexx.ui.CheckBox(text='Show layers')
                self.list = flexx.ui.VBox()
                flexx.ui.Widget(flex=1)

    @event.connect('btna.mouse_click')
    def handle_seamap_add(self, *events):
        self.leaflet.layers = [
            ('http://a.tile.openstreetmap.org/', 'OpenStreetMap'),
            ('http://t1.openseamap.org/seamark/', 'OpenSeaMap'),
        ]

    @event.connect('btnr.mouse_click')
    def handle_seamap_remove(self, *events):
        self.leaflet.layers = [
            ('http://a.tile.openstreetmap.org/', 'OpenStreetMap'),
        ]

    @event.connect('cbs.checked', 'cbl.checked')
    def handle_checkboxes(self, *events):
        self.leaflet.show_scale = self.cbs.checked
        self.leaflet.show_layers = self.cbl.checked

    @event.connect('leaflet.mouse_event')
    def handle_leaflet_mouse(self, *events):
        ev = events[-1]
        latlng = tuple(ev['latlng'])
        flexx.ui.Label(text='%.5f, %.5f' % tuple(latlng), parent=self.list)

    class JS:
        @event.connect('leaflet.mouse_event')
        def handle_leaflet_mouse(self, *events):
            ev = events[-1]
            latlng = tuple(ev['latlng'])
            if ev['event'] == 'click':
                m = L.marker(ev['latlng'])
                m.bindTooltip('%f, %f' % (latlng[0], latlng[1]))
                m.addTo(self.leaflet.map)


if __name__ == '__main__':
    app.launch(LeafletExample, 'app')
    app.run()