Add WMS support

[meilinger]

Would love WMS support (as well as regular TILE services).

[leplatrem]

Thanks for your interest in django-leaflet! If you're interested in contributing some code to provide this, we would be happy to review it and merge!

[florianm]

Having a fullscreen Leaflet widget with custom overlays for reference is a major must-have for my users. Short of sending a PR supporting WMS layers in the LEAFLET_CONFIG, here's a quick and dirty way.

settings:

LEAFLET_CONFIG = {
...
    'PLUGINS': {
        'forms': {'auto-include': True},
        'fullscreen': {
            'css': ['/static/css/leaflet.fullscreen.css', ],
            'js': ['/static/js/Leaflet.fullscreen.min.js', ],
            'auto-include': True
        },
    },
    'TILES': [
        ('Aerial Image',
         '//server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
         {'attribution': 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'}),  # noqa

        ('Place names',
         'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
         {'attribution': '&copy; <a href="//www.openstreetmap.org/copyright">OpenStreetMap</a>'}),
... # and others from [leaflet-providers](https://leaflet-extras.github.io/leaflet-providers/preview/)
]}

Note the static assets for the fullscreen control, including icons, are copied to local static files. The CSS references the icons.

Form:

{% extends "base.html" %}
{% load staticfiles leaflet_tags ... crispy_forms_tags bootstrap4  %}

{% block content %}
<div class="row">
  <div class="col-12">
  {% crispy form form.helper %}
  </div><!-- .col -->
</div><!-- .row -->
{% endblock %}

{% block extrastyle %}
{% leaflet_css plugins="ALL" %}
{{ form.media.css }}
{% endblock %}

{% block extrajs %}
{% leaflet_js plugins="ALL" %}
{{ form.media.js }}
<script type="text/javascript">
  window.addEventListener("map:init", function (event) {
    var map = event.detail.map;
    {% include 'shared/overlays.html' %}
    map.addControl(new L.Control.Fullscreen()); // add a fullscreen control
});
</script>
{% endblock extrajs %}

The actual WMS layers are in a reusable snippet shared/overlays.html, which is the next best thing to a global Leaflet config.

/* Transparent overlay layers */
var lc = map.layerscontrol;
var kmi_wms = 'https://kmi.dbca.wa.gov.au/geoserver/cddp/wms';
var wmsoptions = function(lyr){return {layers: lyr, format: 'image/png', transparent: true}}
lc.addOverlay(L.tileLayer.wms(kmi_wms, wmsoptions('cddp:townsite_poly')), 'WA Townsites');
// and many more

There might be more supported WMS options, the ones shown are the only ones I need in my case. See Leaflet docs on tile layers.

[leplatrem]

Thanks for sharing

[florianm]

Cheers, added to docs via #249 while I'm at it - hope that's ok.