We needed to add a base layer provided by a WMS service, so I've added support for WMS within the hook_leaflet_map_info() API.
With this patch, you can add a WMS layer using the following properties within the layers sub-array:
- 'type' => 'wms' - uses the tileLayer.WMS method (http://leafletjs.com/reference.html#tilelayer-wms) (the type key is already used, as in 'type' => 'tilestream' so it makes sense to use it again)
- 'urlTemplate' => '[baseURL]' - set the base URL of the WMS service (eg. http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi) (not really semantically the best name for the baseURL property, but it is already available so makes sense to reuse)
- 'layers' => '[wms-layers]' - required by leaflet, "comma-separated list of WMS layers to show." (eg. "nexrad-n0r-900913") (set within the options in leaflet call, but not optional, so I think this is better placed alongside type and urlTemplate, than inside the "options" sub-array)
For example, you can add the GMRT ocean base layer using their WMS service (see http://www.marine-geo.org/tools/web_services.php#sec1), using:
function mymodule_leaflet_map_info() {
return array(
'GMRT' => array(
'label' => 'GMRT',
'description' => t('Global Multi-Resolution Topography'),
'settings' => array(
'dragging' => TRUE,
'touchZoom' => TRUE,
'scrollWheelZoom' => TRUE,
'doubleClickZoom' => TRUE,
'zoomControl' => TRUE,
'attributionControl' => TRUE,
'trackResize' => TRUE,
'fadeAnimation' => TRUE,
'zoomAnimation' => TRUE,
'closePopupOnClick' => TRUE,
'layerControl' => TRUE,
),
'layers' => array(
'mercator-unmasked' => array(
'urlTemplate' => 'http://gmrt.marine-geo.org/cgi-bin/mapserv?map=/public/mgg/web/gmrt.marine-geo.org/htdocs/services/map/wms_merc.map',
'type' => 'wms',
'layers' => 'topo',
'options' => array(
'attribution' => 'Marine Geoscience Data System (http://marine-geo.org)',
),
),
'mercator-masked' => array(
'urlTemplate' => 'http://gmrt.marine-geo.org/cgi-bin/mapserv?map=/public/mgg/web/gmrt.marine-geo.org/htdocs/services/map/wms_merc_mask.map',
'type' => 'wms',
'layers' => 'topo-mask',
'options' => array(
'attribution' => 'Marine Geoscience Data System (http://marine-geo.org)',
),
),
),
),
);
}
This is on the roadmap, so hopefully it will get in! Feedback welcome.
Thanks, David
Comments
Comment #1
dbassendine commentedComment #2
alexkb commentedJust used this on an older 1.x version of the leaflet module and it solved my problem for me, thanks so much.
Only difference I had to make (due to my old version) was:
var map_layer = new L.TileLayer(layer.urlTemplate);instead of
var map_layer = new L.TileLayerZoomSwitch(layer.urlTemplate);+1 to get the original patch committed. Cheers.
Comment #3
robertwb commentedGood stuff here (we should also work up a patch for the 1.x branch based on code from @alexkb - it would be cool if you wanted to post up in a new feature request for 1.x). I had worked up (but never posted) a revision for the dev version to do the same. I have a slightly different set of params though, I am wondering if anyone could comment on the difference between passing "layer.options" (as I have done), and "{layers: layer.layers }"??
Maybe by doing it the way you are doing it you avoid overwriting something?
Comment #4
alexkb commented@robertwb - I've just had the same need as you, that is, to pass more options through to Leaflet. I tried your way, but in order for it to work I had to have the layers property set in options. So my hook_leaflet_map_info() was like so (see <LAYERNAME>):
I don't think it matters what LAYERNAME is so much, unless you want to interact with the layer later on then you might want to give it a unique name (but I'm not doing that, at least not yet).
So, +1 to @robertwb's suggestion for passing options through to leaflet.
Comment #5
robertwb commentedThanks for taking this a step further @alexkb - I think that is a really good use case for passing in a full options array. @dbassendine - unless you have some real concerns about this, I am going to post up a modification to your patch.
Comment #6
dbassendine commentedSorry for the very long response time on this one. I agree, it makes sense to pass the full options array through, rather than just the layers.
We need to document somewhere that options:layers is a required option for WMS to work, according to Leaflet docs (http://leafletjs.com/reference.html#tilelayer-wms).
I've reworked the patch so that "layers" is set inside options (as in https://www.drupal.org/node/2392651#comment-10118524) and the full options array is passed through.
Thanks for the feedback :)
Comment #7
robertwb commentedThanks @dbassendine - I have been using the earlier patches for quite some time now and they are working, I will test this one as soon as possible (in the next week or two). I am linking in two other threads that might be of interest:
Comment #8
robertwb commentedI just noticed that the most recent patch needs to be reconfigured because it was created from the drupal root directory rather than the module directory. I am in a bit of a rush but will check back in a day or 3 and reconfigure myself if someone else doesn't get to it.
Comment #9
robertwb commentedPatch re-configured from leaflet module directory. Applies cleanly on dev. Hoping someonme else has a chance to test this and mark RTBC.
Comment #10
madan879 commentedThanks alexkb, I also faced same problem in leaflet module and it solved my problem after replaced TileLayer instead of TileLayerZoomSwitch...
Comment #11
dbassendine commentedThe re-rolled patch #9 applies cleanly on 1.x-dev. It works well for my GMRT WMS base map definition (see below), on a clean d7 build.
Hopefully this can be rtbc soon, we might need one more test? To speed up testing I've put together a feature module that includes a geofield-enabled Locations vocabulary, view and my GMRT base map definition - see attached leaflet_testing module.
To test:
My example WMS base layer definition:
Comment #12
dbassendine commentedWe should probably test against a wider range of WMS base map services eg. from http://gis.stackexchange.com/questions/6345/list-of-available-online-wms....
Comment #13
robertwb commentedGreat stuff @dbassendine - a feature set if perfect for wider testing.
Comment #14
d0t101101 commentedAfter manually applying #9 and #10 (replaced TileLayer instead of TileLayerZoomSwitch), I was able to get my custom geoserver WMS layer (hosted on another dedicated server) working with Leaflet v8.x-dev. AWESOME!
Much to be done yet, but very pleased to see this working. After adequate testing I will contribute a patch.
.
Comment #15
karbuk commentedHI there, I know this is an old thread, but I have been checking forum after forum trying to find a resolution to this problem. I currently work at NOAA and have been tasked with taking out antiquated page and bringing it into drupal using Leaflet. I am trying to convert this page: http://www.cpc.noaa.gov/products/predictions/610day/interactive/index.php which is written in Google Maps and bound to a WMS mapserver, into Drupal 7 using Leaflet. I have applied all the patches for getting WMS to work with layering, the drupal.leaflet.js, etc. but I just can't get it to work in Drupal. I have a stand alone that uses the Leaflet JS API and it works as expected. But it just won't happen in Drupal. The layers (TOPO Map and Temperature have to be shown at the same time.
In the Leaflet module code this is what I am trying to do:
function leaflet_leaflet_map_info() {
return array(
'NOAA' => array(
'label' => 'NOAA',
'description' => t('NOAA map plus Temperature'),
'settings' => array(
'dragging' => TRUE,
'touchZoom' => TRUE,
'scrollWheelZoom' => TRUE,
'doubleClickZoom' => TRUE,
'zoomControl' => TRUE,
'attributionControl' => TRUE,
'trackResize' => TRUE,
'fadeAnimation' => TRUE,
'zoomAnimation' => TRUE,
'closePopupOnClick' => TRUE,
'layerControl' => TRUE,
),
'layers' => array(
'temperature' => array(
'urlTemplate' => 'https://idpgis.ncep.noaa.gov/arcgis/services/NWS_Climate_Outlooks/cpc_6_...',
'type' => 'wms',
'layers' => 'topo',
'options' => array(
'attribution' => 'NOAA',
),
),
),
),
);
}
This gives me either the white screen of death, or just shows the ESRI Topo map that my view is using as the base, and not the colored temp lines.
Full disclosure: I've only been working with this API since April. I am the sole developer, and we HAD to move to ESRI/WMS instead of Google maps for budgetary reasons.
Any help would be appreciated!
Leaflet: 7.x-1.4
Leaflet More Maps: 7.x-1.17
Leaflet Views: 7.x-1.4
Comment #16
karbuk commented@d0t101101 have you been able to get that patch out? I'm sorta lost in the woods about getting any WMS layers working at all and was wondering if you came up with anything. There is no support for this module in the forums. I know the JS API well, but how it (a WMS overlay) hooks into Drupal (7) completely eludes me.
Thanks!
Comment #17
jncrucesThe following patch is for Drupal 8 version of the module.
Comment #18
guncha25 commentedUpdated patch for Drupal 8.x - ^1.39 version of the module.
Comment #20
itamair commentedFinally this feature has been committed into dev. Will be part of the next Leaflet module release.
Comment #21
itamair commentedComment #22
itamair commented