Open meilinger opened 9 years ago
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!
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': '© <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.
Thanks for sharing
Cheers, added to docs via #249 while I'm at it - hope that's ok.
Would love WMS support (as well as regular TILE services).