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

dbassendine’s picture

StatusFileSize
new767 bytes
new726 bytes
alexkb’s picture

Just 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.

robertwb’s picture

Good 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?

      if (layer.options['wms']) {
        var map_layer = new L.TileLayer.WMS(layer.urlTemplate, layer.options);
      } else {
        var map_layer = new L.TileLayerZoomSwitch(layer.urlTemplate);
      }
alexkb’s picture

@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>):


function <MODULE>_leaflet_map_info() {
  return array(
    'mymaps' => array(
....
        'mylayer' => array(
          'urlTemplate' => '<HOST>/geoserver/<WORKSPACE>/wms?tiled=true',
          'type' => 'wms',
          'options' => array(
            'styles' => 'polygon',
            'format' => 'image/png',
            'layers' => '<LAYERNAME>',
            'transparent' => 'true'
          )
    );
}

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.

robertwb’s picture

Thanks 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.

dbassendine’s picture

StatusFileSize
new791 bytes

Sorry 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 :)

robertwb’s picture

Thanks @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:

  • Token Support - I am using this combined with my WMS layers to display some data from Drupal geofield as a WMS layer
  • Leaflet Roadmap - this is an overview you may have seen already, but I am trying to keep it up to date witth stuff like this.
robertwb’s picture

I 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.

robertwb’s picture

StatusFileSize
new832 bytes

Patch re-configured from leaflet module directory. Applies cleanly on dev. Hoping someonme else has a chance to test this and mark RTBC.

madan879’s picture

Thanks alexkb, I also faced same problem in leaflet module and it solved my problem after replaced TileLayer instead of TileLayerZoomSwitch...

dbassendine’s picture

StatusFileSize
new2.95 KB

The 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:

  • Download, install and enable dependencies (Chaos tools, Features, Geofield, geoPHP, Leaflet, Leaflet views, Number, Strongarm , Taxonomy, Views), including leaflet.js library
  • Enable leaflet_testing feature
  • Add a Location term with lat/lon
  • Go to /map - for GMRT
  • Add new WMS base layers in leaflet_testing.module leaflet_testing_leaflet_map_info()
  • Edit location_map view to switch to your new base layer

My example WMS base layer definition:

/**
 * Implements hook_leaflet_map_info()
 */
function leaflet_testing_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',
          'options' => array(
            'layers' => 'topo',
            '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',
          'options' => array(
            'layers' => 'topo-mask',
            'attribution' => 'Marine Geoscience Data System (http://marine-geo.org)',
          ),
        ),
      ),
    ),
  );
}
dbassendine’s picture

We 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....

robertwb’s picture

Great stuff @dbassendine - a feature set if perfect for wider testing.

d0t101101’s picture

After 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.

.

karbuk’s picture

HI 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

karbuk’s picture

@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!

jncruces’s picture

StatusFileSize
new554 bytes

The following patch is for Drupal 8 version of the module.

guncha25’s picture

StatusFileSize
new470 bytes

Updated patch for Drupal 8.x - ^1.39 version of the module.

  • itamair committed 01ec338 on 8.x-1.x authored by guncha25
    Issue #2392651 by dbassendine, robertwb, jncruces, guncha25: WMS layer...
itamair’s picture

Finally this feature has been committed into dev. Will be part of the next Leaflet module release.

itamair’s picture

Status: Needs review » Fixed
itamair’s picture

Version: 7.x-1.x-dev » 8.x-1.39

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.