diff --git a/L.Control.Basemaps-min.js b/L.Control.Basemaps-min.js index 8727b41..21ada63 100644 --- a/L.Control.Basemaps-min.js +++ b/L.Control.Basemaps-min.js @@ -1 +1 @@ -L.Control.Basemaps=L.Control.extend({_map:null,includes:L.Mixin.Events,options:{position:"bottomright",tileX:0,tileY:0,tileZ:0,layers:[]},basemap:null,onAdd:function(t){this._map=t;var e=L.DomUtil.create("div","basemaps leaflet-control closed");return L.DomEvent.disableClickPropagation(e),L.Browser.touch||L.DomEvent.disableScrollPropagation(e),this.options.basemaps.forEach(function(a,s){var o="basemap";0===s?(this.basemap=a,this._map.addLayer(a),o+=" active"):1===s&&(o+=" alt");var i={x:this.options.tileX,y:this.options.tileY},l=L.Util.template(a._url,L.extend({s:a._getSubdomain(i),x:i.x,y:a.options.tms?a._globalTileRange.max.y-i.y:i.y,z:this.options.tileZ},a.options)),n=L.DomUtil.create("div",o,e),m=L.DomUtil.create("img",null,n);m.src=l,a.options&&a.options.label&&(m.title=a.options.label),L.DomEvent.on(n,"click",function(){if(a!=this.basemap){t.removeLayer(this.basemap),t.addLayer(a),a.bringToBack(),t.fire("baselayerchange",a),this.basemap=a,L.DomUtil.removeClass(document.getElementsByClassName("basemap active")[0],"active"),L.DomUtil.addClass(n,"active");var e=(s+1)%this.options.basemaps.length;L.DomUtil.removeClass(document.getElementsByClassName("basemap alt")[0],"alt"),L.DomUtil.addClass(document.getElementsByClassName("basemap")[e],"alt")}},this)},this),L.DomEvent.on(e,"mouseenter",function(){L.DomUtil.removeClass(e,"closed")},this),L.DomEvent.on(e,"mouseleave",function(){L.DomUtil.addClass(e,"closed")},this),this._container=e,this._container}}),L.control.basemaps=function(t){return new L.Control.Basemaps(t)}; \ No newline at end of file +L.Control.Basemaps=L.Control.extend({_map:null,includes:L.Mixin.Events,options:{position:"bottomright",tileX:0,tileY:0,tileZ:0,layers:[]},basemap:null,onAdd:function(t){this._map=t;var e=L.DomUtil.create("div","basemaps leaflet-control closed");return L.DomEvent.disableClickPropagation(e),L.Browser.touch||L.DomEvent.disableScrollPropagation(e),this.options.basemaps.forEach(function(o,s){var a="basemap";0===s?(this.basemap=o,this._map.addLayer(o),a+=" active"):1===s&&(a+=" alt");var i={x:this.options.tileX,y:this.options.tileY},n=L.Util.template(o._url,L.extend({s:o._getSubdomain(i),x:i.x,y:o.options.tms?o._globalTileRange.max.y-i.y:i.y,z:this.options.tileZ},o.options));if(o instanceof L.TileLayer.WMS){o._map=t;var l=o.options.crs||t.options.crs,r=L.extend({},o.wmsParams),m=parseFloat(r.version),p=m>=1.3?"crs":"srs";r[p]=l.code;var c=L.point(i);c.z=this.options.tileZ;var d=o._tileCoordsToBounds(c),v=l.project(d.getNorthWest()),h=l.project(d.getSouthEast()),b=(m>=1.3&&l===EPSG4326?[h.y,v.x,v.y,h.x]:[v.x,h.y,h.x,v.y]).join(",");n+=L.Util.getParamString(r,n,o.options.uppercase)+(o.options.uppercase?"&BBOX=":"&bbox=")+b}var u=L.DomUtil.create("div",a,e),y=L.DomUtil.create("img",null,u);y.src=n,o.options&&o.options.label&&(y.title=o.options.label),L.DomEvent.on(u,"click",function(){if(o!=this.basemap){t.removeLayer(this.basemap),t.addLayer(o),o.bringToBack(),t.fire("baselayerchange",o),this.basemap=o,L.DomUtil.removeClass(document.getElementsByClassName("basemap active")[0],"active"),L.DomUtil.addClass(u,"active");var e=(s+1)%this.options.basemaps.length;L.DomUtil.removeClass(document.getElementsByClassName("basemap alt")[0],"alt"),L.DomUtil.addClass(document.getElementsByClassName("basemap")[e],"alt")}},this)},this),L.DomEvent.on(e,"mouseenter",function(){L.DomUtil.removeClass(e,"closed")},this),L.DomEvent.on(e,"mouseleave",function(){L.DomUtil.addClass(e,"closed")},this),this._container=e,this._container}}),L.control.basemaps=function(t){return new L.Control.Basemaps(t)}; \ No newline at end of file diff --git a/L.Control.Basemaps.js b/L.Control.Basemaps.js index 70c052c..7e31779 100755 --- a/L.Control.Basemaps.js +++ b/L.Control.Basemaps.js @@ -39,6 +39,35 @@ L.Control.Basemaps = L.Control.extend({ z: this.options.tileZ }, d.options)); + if (d instanceof L.TileLayer.WMS) { + // d may not yet be initialized, yet functions below expect ._map to be set + d._map = map; + + // unfortunately, calling d.getTileUrl() does not work due to scope issues + // have to replicate some of the logic from L.TileLayer.WMS + + // adapted from L.TileLayer.WMS::onAdd + var crs = d.options.crs || map.options.crs; + var wmsParams = L.extend({}, d.wmsParams); + var wmsVersion = parseFloat(wmsParams.version); + var projectionKey = wmsVersion >= 1.3 ? 'crs' : 'srs'; + wmsParams[projectionKey] = crs.code; + + // adapted from L.TileLayer.WMS::getTileUrl + var coords2 = L.point(coords); + coords2.z = this.options.tileZ; + var tileBounds = d._tileCoordsToBounds(coords2); + var nw = crs.project(tileBounds.getNorthWest()); + var se = crs.project(tileBounds.getSouthEast()); + var bbox = (wmsVersion >= 1.3 && crs === EPSG4326 ? + [se.y, nw.x, nw.y, se.x] : + [nw.x, se.y, se.x, nw.y]).join(','); + + url += L.Util.getParamString(wmsParams, url, d.options.uppercase) + + (d.options.uppercase ? '&BBOX=' : '&bbox=') + bbox; + } + + var basemapNode = L.DomUtil.create('div', basemapClass, container); var imgNode = L.DomUtil.create('img', null, basemapNode); imgNode.src = url; diff --git a/README.md b/README.md index 07fba61..31ac4fa 100644 --- a/README.md +++ b/README.md @@ -44,12 +44,14 @@ Include the JavaScript: The control expects a list of TileLayer instances, constructed in the [normal way](http://leafletjs.com/reference.html#tilelayer). -An optional `layer` property can be added in the options for each basemap, and this will be used to populate the tooltip +An optional `label` property can be added in the options for each basemap, and this will be used to populate the tooltip (HTML `title` attribute) for that basemap. Each basemap is represented using a tile from the underlying tile service. Choose the tile x, y, z that provides the best looking representative basemap image for your application. +`TileLayer.WMS` layers can also be used, and tile coordinates will be converted to bounding boxes to request the preview thumbnail. + The preview shows an alternative basemap to the currently selected basemap to be more apparent as a toggle between basemaps. Note: this automatically adds the first basemap in your list to the map during initialization, so you don't need to add that @@ -80,6 +82,10 @@ var basemaps = [ maxZoom: 16, minZoom: 1, label: 'Watercolor' + }), + L.tileLayer.wms('https://maps.ngdc.noaa.gov/soap/web_mercator/gebco08_hillshade/MapServer/WMSServer', { + layers: 'GEBCO_08 hillshade with Natural Earth 2', + label: 'GEBCO Hillshade' }) ]; diff --git a/bower.json b/bower.json index 3478873..28c4526 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "Leaflet.Basemaps", - "version": "0.1.2", + "version": "0.1.3", "homepage": "https://github.com/consbio/Leaflet.Basemaps", "authors": [ "Brendan Ward " diff --git a/index.html b/index.html index e7807d8..1859988 100644 --- a/index.html +++ b/index.html @@ -35,6 +35,10 @@ maxZoom: 16, minZoom: 1, label: 'Watercolor' + }), + L.tileLayer.wms('https://maps.ngdc.noaa.gov/soap/web_mercator/gebco08_hillshade/MapServer/WMSServer', { + layers: 'GEBCO_08 hillshade with Natural Earth 2', + label: 'GEBCO Hillshade' }) ]; diff --git a/package.json b/package.json index 4006e85..7f232b2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "leaflet-basemaps", - "version": "0.1.2", + "version": "0.1.3", "description": "Basemaps Control for Leaflet", "homepage": "http://github.com/consbio/Leaflet.Basemaps", "author": {