@raruto/leaflet-elevation 2.0.3 → 2.0.4

package/images/elevation-steelblue.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><defs/><path fill="#4682b4" fill-opacity=".8" d="M23.1 20.8l-4.2-8-3.9-.2-2.7 1.8-2.4-5.5-5.2 6.2v5.7" opacity=".9"/><path fill="none" stroke="#174a75" stroke-width="1.5" d="M4.7 14.8h1.1l4.3-6.2 2.5 5.6 2.5-2.3 3.7.2 4 8.3v.4"/><path fill="none" stroke="#737373" stroke-linecap="square" d="M3.4 5v19.8M24.7 22.4H.9"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><defs/><path fill="#4682b4" fill-opacity=".8" d="M23.1 20.8l-4.2-8-3.9-.2-2.7 1.8-2.4-5.5-5.2 6.2v5.7" opacity=".9"/><path fill="none" stroke="#174a75" stroke-width="1.5" d="M4.7 14.8h1.1l4.3-6.2 2.5 5.6 2.5-2.3 3.7.2 4 8.3v.4"/><path fill="none" stroke="#737373" stroke-linecap="square" d="M3.4 5v19.8M24.7 22.4H.9"/></svg>

package/libs/fullpage.css

@@ -0,0 +1,13 @@
+html,
+body,
+.leaflet-map {
+    height: 100%;
+    width: 100%;
+    padding: 0px;
+    margin: 0px;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+}

package/libs/leaflet-gpxgroup.js

@@ -164,7 +164,7 @@ L.GpxGroup = L.Class.extend({
       .then(text => this._elevation._parseFromString(text))
       .then(geojson => {
         if(geojson) {
-          geojson.name = geojson.name ?? (geojson[0] && geojson[0].properties.name) ?? track.split('/').pop().split('#')[0].split('?')[0];
+          geojson.name = geojson.name || (geojson[0] && geojson[0].properties.name) || track.split('/').pop().split('#')[0].split('?')[0];
           this._loadRoute(geojson);
         }
       });

package/libs/leaflet-gpxgroup.min.js

@@ -1 +1 @@
-L.Mixin.Selectable={includes:L.Mixin.Events,setSelected:function(s){var selected=!!s;this._selected!==selected&&(this._selected=selected,this.fire("selected"))},isSelected:function(){return!!this._selected}},L.Mixin.Selection={includes:L.Mixin.Events,getSelection:function(){return this._selected},setSelection:function(item){this._selected===item?null!==item&&(item.setSelected(!item.isSelected()),item.isSelected()||(this._selected=null)):(this._selected&&this._selected.setSelected(!1),this._selected=item,this._selected&&this._selected.setSelected(!0)),this.fire("selection_changed")}},L.Control.LayersLegend=L.Control.Layers.extend({_onInputClick:function(){var inputs=this._layerControlInputs,input,layer,addedLayers=[],removedLayers=[];this._handlingClick=!0;for(var i=inputs.length-1;i>=0;i--)input=inputs[i],layer=this._getLayer(input.layerId).layer,input.checked&&this._map.fireEvent("legend_selected",{layer:layer,input:input},!0);this._handlingClick=!1,this._refocusOnMap()}}),L.control.layersLegend=function(baseLayers,overlays,options){return new L.Control.LayersLegend(baseLayers,overlays,options)},L.GeoJSON.include(L.Mixin.Selectable),L.GpxGroup=L.Class.extend({options:{highlight:{color:"#ff0",opacity:1},points:[],points_options:{icon:{iconUrl:"../images/elevation-poi.png",iconSize:[12,12]}},flyToBounds:!0,legend:!1,legend_options:{position:"topright",collapsed:!1},elevation:!0,elevation_options:{theme:"yellow-theme",detachedView:!0,elevationDiv:"#elevation-div"},distanceMarkers:!0,distanceMarkers_options:{lazy:!0}},initialize:function(tracks,options){L.Util.setOptions(this,options),this._count=0,this._loadedCount=0,this._tracks=tracks,this._routes={},this._layers=L.featureGroup(),this._markers=L.featureGroup(),this._elevation=L.control.elevation(this.options.elevation_options),this._legend=L.control.layersLegend(null,null,this.options.legend_options);var icon=L.icon(this.options.points_options.icon);this.options.points.forEach((function(poi){var marker=L.marker(poi.latlng,{icon:icon});marker.bindTooltip(poi.name,{direction:"auto"}),marker.addTo(this._markers)}),this),void 0===L.DistanceMarkers&&(this.options.distanceMarkers=!1)},getBounds:function(){return this._layers.getBounds()},addTo:function(map){this._layers.addTo(map),this._markers.addTo(map),this._map=map,this.on("selection_changed",this._onSelectionChanged,this),this._map.on("legend_selected",this._onLegendSelected,this),this._tracks.forEach(this.addTrack,this)},addTrack:function(track){fetch(track).then(response=>{response.ok&&response.text().then(doc=>{let geojson;doc=doc.trim();try{let xml=(new DOMParser).parseFromString(doc,"text/xml"),type=xml.documentElement.tagName.toLowerCase(),name=xml.getElementsByTagName("name");type in toGeoJSON||(type="TrainingCenterDatabase"==xml.documentElement.tagName?"tcx":"gpx"),geojson=toGeoJSON[type](xml),geojson.name=name.length>0?Array.from(name).find(tag=>"trk"==tag.parentElement.tagName).textContent:""}catch(e){try{geojson=JSON.parse(doc.toString())}catch(e){console.warn("Error parsing track: "+track)}}geojson.name||(geojson.name=track.split("/").pop().split("#")[0].split("?")[0]),this._loadRoute(geojson)})})},_loadRoute:function(data){if(data){var colors,color,line_style={color:this._uniqueColors(this._tracks.length)[this._count++],opacity:.75,weight:5,distanceMarkers:this.options.distanceMarkers_options},route=L.geoJson(data,{name:data.name||"",style:feature=>line_style,distanceMarkers:line_style.distanceMarkers,originalStyle:line_style,filter:feature=>"Point"!=feature.geometry.type});route.addTo(this._layers),this._routes[route._leaflet_id]=route,route.eachLayer(layer=>this._onRouteLayer(route,layer)),this._onRouteLoaded(route)}},_onRouteLayer:function(route,layer){var polyline=layer;route.on("selected",L.bind(this._onRouteSelected,this,route,polyline)),polyline.on("mouseover",L.bind(this._onRouteMouseOver,this,route,polyline)),polyline.on("mouseout",L.bind(this._onRouteMouseOut,this,route,polyline)),polyline.on("click",L.bind(this._onRouteClick,this,route,polyline)),polyline.bindTooltip(route.options.name,{direction:"auto",sticky:!0})},highlight:function(route,polyline){polyline.setStyle(this.options.highlight),this.options.distanceMarkers&&polyline.addDistanceMarkers()},unhighlight:function(route,polyline){polyline.setStyle(route.options.originalStyle),this.options.distanceMarkers&&polyline.removeDistanceMarkers()},_onRouteMouseOver:function(route,polyline){route.isSelected()||(this.highlight(route,polyline),this.options.legend&&(this.setSelection(route),L.DomUtil.get("legend_"+route._leaflet_id).parentNode.previousSibling.click())),this.fire("route_mouseover",{route:route,polyline:polyline})},_onRouteMouseOut:function(route,polyline){route.isSelected()||this.unhighlight(route,polyline),this.fire("route_mouseout",{route:route,polyline:polyline})},_onRouteClick:function(route,polyline){this.setSelection(route)},_onRouteSelected:function(route,polyline){route.isSelected()||this.unhighlight(route,polyline)},_onRouteLoaded:function(route){this.options.legend&&this._legend.addBaseLayer(route,'<svg id="legend_'+route._leaflet_id+'" width="25" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="50" y1="5" y2="5" stroke="'+route.options.originalStyle.color+'" fill="transparent" stroke-width="5" /></svg> '+route.options.name),this.fire("route_loaded",{route:route}),++this._loadedCount===this._tracks.length&&(this.fire("loaded"),this.options.flyToBounds&&this._map.flyToBounds(this.getBounds(),{duration:.25,easeLinearity:.25,noMoveStart:!0}),this.options.legend&&this._legend.addTo(this._map))},_onSelectionChanged:function(e){var elevation=this._elevation,eleDiv=elevation.getContainer(),route=this.getSelection();elevation.clear(),route&&route.isSelected()?(eleDiv||elevation.loadChart(this._map),route.getLayers().forEach((function(layer){layer instanceof L.Polyline&&(elevation.addData(layer,!1),layer.bringToFront())}))):eleDiv&&elevation.remove()},_onLegendSelected:function(e){var layers=this._layers._layers,route=e.layer;if(!route.isSelected()){for(var i in this.setSelection(route),route._layers)this.highlight(route,route._layers[i]);this._map.flyToBounds(e.layer.getBounds())}var parent=e.input.closest(".leaflet-control-layers-list"),offset=e.input.offsetTop-parent.offsetTop;for(var j in parent.scroll({top:offset||0,behavior:"smooth"}),layers){var selected=layers[j].isSelected(),legend=L.DomUtil.get("legend_"+layers[j]._leaflet_id);legend.querySelector("line").style.stroke=selected?this.options.highlight.color:"",legend.parentNode.style.fontWeight=selected?"700":""}},_uniqueColors:function(count){if(0===count)return[];if(1===count)return["#0000ff"];for(var increment=1/count,colors=[],i=0;i<count;++i){var hue=i*increment,rgb=this._hsvToRgb(hue,1,.7),hex="#"+this._rgbToHex(rgb[0],rgb[1],rgb[2]);colors.push(hex)}return colors},_hsvToRgb:function(h,s,v){var r,g,b,i=Math.floor(6*h),f=6*h-i,p=v*(1-s),q=v*(1-f*s),t=v*(1-(1-f)*s);switch(i%6){case 0:r=v,g=t,b=p;break;case 1:r=q,g=v,b=p;break;case 2:r=p,g=v,b=t;break;case 3:r=p,g=q,b=v;break;case 4:r=t,g=p,b=v;break;case 5:r=v,g=p,b=q}return[255*r,255*g,255*b]},_rgbToHex:function(r,g,b){return this._byteToHex(r)+this._byteToHex(g)+this._byteToHex(b)},_byteToHex:function(n){return(n>>4&15).toString(16)+(15&n).toString(16)},removeFrom:function(map){this._layers.removeFrom(map)}}),L.GpxGroup.include(L.Mixin.Events),L.GpxGroup.include(L.Mixin.Selection),L.gpxGroup=function(tracks,options){return new L.GpxGroup(tracks,options)};
+L.Mixin.Selectable={includes:L.Mixin.Events,setSelected:function(s){var selected=!!s;this._selected!==selected&&(this._selected=selected,this.fire("selected"))},isSelected:function(){return!!this._selected}},L.Mixin.Selection={includes:L.Mixin.Events,getSelection:function(){return this._selected},setSelection:function(item){this._selected===item?null!==item&&(item.setSelected(!item.isSelected()),item.isSelected()||(this._selected=null)):(this._selected&&this._selected.setSelected(!1),this._selected=item,this._selected&&this._selected.setSelected(!0)),this.fire("selection_changed")}},L.Control.LayersLegend=L.Control.Layers.extend({_onInputClick:function(){this._handlingClick=!0,this._layerControlInputs.reduceRight((_,input)=>{if(input.checked)return this._map.fireEvent("legend_selected",{layer:this._getLayer(input.layerId).layer,input:input},!0),input},0),this._handlingClick=!1,this._refocusOnMap()}}),L.control.layersLegend=(baseLayers,overlays,options)=>new L.Control.LayersLegend(baseLayers,overlays,options),L.GeoJSON.include(L.Mixin.Selectable),L.GpxGroup=L.Class.extend({options:{highlight:{color:"#ff0",opacity:1},points:[],points_options:{icon:{iconUrl:"../images/elevation-poi.png",iconSize:[12,12]}},flyToBounds:!0,legend:!1,legend_options:{position:"topright",collapsed:!1},elevation:!0,elevation_options:{theme:"yellow-theme",detached:!0,elevationDiv:"#elevation-div"},distanceMarkers:!0,distanceMarkers_options:{lazy:!0}},initialize:function(tracks,options){L.Util.setOptions(this,options),this._count=0,this._loadedCount=0,this._tracks=tracks,this._layers=L.featureGroup(),this._markers=L.featureGroup(),this._elevation=L.control.elevation(this.options.elevation_options),this._legend=L.control.layersLegend(null,null,this.options.legend_options),this.options.points.forEach(poi=>L.marker(poi.latlng,{icon:L.icon(this.options.points_options.icon)}).bindTooltip(poi.name,{direction:"auto"}).addTo(this._markers))},getBounds:function(){return this._layers.getBounds()},addTo:function(map){this._layers.addTo(map),this._markers.addTo(map),this._map=map,this.on("selection_changed",this._onSelectionChanged,this),this._map.on("legend_selected",this._onLegendSelected,this),this._tracks.forEach(this.addTrack,this)},addTrack:function(track){fetch(track).then(response=>response.ok&&response.text()).then(text=>this._elevation._parseFromString(text)).then(geojson=>{geojson&&(geojson.name=geojson.name||geojson[0]&&geojson[0].properties.name||track.split("/").pop().split("#")[0].split("?")[0],this._loadRoute(geojson))})},_loadRoute:function(data){if(data){var line_style={color:this._uniqueColors(this._tracks.length)[this._count++],opacity:.75,weight:5,distanceMarkers:this.options.distanceMarkers_options},route=L.geoJson(data,{name:data.name||"",style:feature=>line_style,distanceMarkers:line_style.distanceMarkers,originalStyle:line_style,filter:feature=>"Point"!=feature.geometry.type});this._elevation.import(this._elevation.__LGEOMUTIL).then(()=>{route.addTo(this._layers),route.eachLayer(layer=>this._onEachRouteLayer(route,layer)),this._onEachRouteLoaded(route)})}},_onEachRouteLayer:function(route,layer){var polyline=layer;route.on("selected",L.bind(this._onRouteSelected,this,route,polyline)),polyline.on("mouseover",L.bind(this._onRouteMouseOver,this,route,polyline)),polyline.on("mouseout",L.bind(this._onRouteMouseOut,this,route,polyline)),polyline.on("click",L.bind(this._onRouteClick,this,route,polyline)),polyline.bindTooltip(route.options.name,{direction:"auto",sticky:!0})},_onEachRouteLoaded:function(route){this.options.legend&&this._legend.addBaseLayer(route,'<svg id="legend_'+route._leaflet_id+'" width="25" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="50" y1="5" y2="5" stroke="'+route.options.originalStyle.color+'" fill="transparent" stroke-width="5" /></svg> '+route.options.name),this.fire("route_loaded",{route:route}),++this._loadedCount===this._tracks.length&&(this.fire("loaded"),this.options.flyToBounds&&this._map.flyToBounds(this.getBounds(),{duration:.25,easeLinearity:.25,noMoveStart:!0}),this.options.legend&&this._legend.addTo(this._map))},highlight:function(route,polyline){polyline.setStyle(this.options.highlight),this.options.distanceMarkers&&polyline.addDistanceMarkers()},unhighlight:function(route,polyline){polyline.setStyle(route.options.originalStyle),this.options.distanceMarkers&&polyline.removeDistanceMarkers()},_onRouteMouseOver:function(route,polyline){route.isSelected()||(this.highlight(route,polyline),this.options.legend&&(this.setSelection(route),L.DomUtil.get("legend_"+route._leaflet_id).parentNode.previousSibling.click())),this.fire("route_mouseover",{route:route,polyline:polyline})},_onRouteMouseOut:function(route,polyline){route.isSelected()||this.unhighlight(route,polyline),this.fire("route_mouseout",{route:route,polyline:polyline})},_onRouteClick:function(route,polyline){this.setSelection(route)},_onRouteSelected:function(route,polyline){route.isSelected()||this.unhighlight(route,polyline)},_onSelectionChanged:function(e){var elevation=this._elevation,eleDiv=elevation.getContainer(),route=this.getSelection();elevation.clear(),route&&route.isSelected()?(eleDiv||elevation.addTo(this._map),route.getLayers().forEach((function(layer){layer instanceof L.Polyline&&(elevation.addData(layer,!1),layer.bringToFront())}))):eleDiv&&elevation.remove()},_onLegendSelected:function(e){var parent=e.input.closest(".leaflet-control-layers-list"),route=e.layer;if(!route.isSelected()){for(var i in this.setSelection(route),route._layers)this.highlight(route,route._layers[i]);this._map.flyToBounds(e.layer.getBounds())}parent.scroll({top:e.input.offsetTop-parent.offsetTop||0,behavior:"smooth"}),this._layers.eachLayer(layer=>{var legend=L.DomUtil.get("legend_"+layer._leaflet_id);legend.querySelector("line").style.stroke=layer.isSelected()?this.options.highlight.color:"",legend.parentNode.style.fontWeight=layer.isSelected()?"700":""})},_uniqueColors:function(count){return 1===count?["#0000ff"]:new Array(count).fill(null).map((_,i)=>this._hsvToHex(i*(1/count),1,.7))},_hsvToHex:function(h,s,v){var i=Math.floor(6*h),f=6*h-i,p=v*(1-s),q=v*(1-f*s),t=v*(1-(1-f)*s),rgb;return{0:[v,t,p],1:[q,v,p],2:[p,v,t],3:[p,q,v],4:[t,p,v],5:[v,p,q]}[i%6].map(d=>255*d).reduce((hex,byte)=>hex+(byte>>4&15).toString(16)+(15&byte).toString(16),"#")},removeFrom:function(map){this._layers.removeFrom(map)}}),L.GpxGroup.include(L.Mixin.Events),L.GpxGroup.include(L.Mixin.Selection),L.gpxGroup=(tracks,options)=>new L.GpxGroup(tracks,options);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@raruto/leaflet-elevation",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "A Leaflet plugin that allows to add elevation profiles using d3js",
 	"main": "dist/leaflet-elevation.min.js",
 	"module": "src/index.js",

package/src/components/chart.js

@@ -351,7 +351,7 @@ export var Chart = L.Control.Elevation.Chart = L.Class.extend({
 		if (typeof props.preferCanvas === "undefined") props.preferCanvas = opts.preferCanvas;
 
 		// Save paths in memory for latter usage
-		this._paths[props.name]       = D3.Path(props);;
+		this._paths[props.name]       = D3.Path(props);
 		this._props.areas[props.name] = props;
 
 		if (opts.legend) {
@@ -555,6 +555,8 @@ export var Chart = L.Control.Elevation.Chart = L.Class.extend({
 
 		// Reset legend items
 		this._legend.selectAll('g').remove();
+
+		// Render legend items
 		_.each(this._props.legendItems, (legend) => {
 			this._legend.append("g").call(
 				D3.LegendItem(L.extend({
@@ -565,18 +567,20 @@ export var Chart = L.Control.Elevation.Chart = L.Class.extend({
 			);
 		});
 
-		// Reset legend items
-		this._legend.append("g").call(
-			D3.LegendSmall({
-				width  : this._width(),
-				height : this._height(),
-				items  : items,
-				onClick: (selected) => {
-					_.each(items, name => this._togglePath(name, selected == name, true));
-					this._updateArea();
-				}
-			})
-		);
+		// Render legend item switcher
+		if (n > 1) {
+			this._legend.append("g").call(
+				D3.LegendSmall({
+					width  : this._width(),
+					height : this._height(),
+					items  : items,
+					onClick: (selected) => {
+						_.each(items, name => this._togglePath(name, selected == name, true));
+						this._updateArea();
+					}
+				})
+			);
+		}
 		
 		_.each(items, (name, i) => {
 			// Adjust legend item positions

package/src/components/d3.js

@@ -205,7 +205,6 @@ export const LegendItem = ({
 			.text(L._(label || name))
 			.attr("x", (width / 2) + 5)
 			.attr("font-size", 10)
-			.style("text-decoration-thickness", "2px")
 			.style("font-weight", "700")
 			.attr('y', height + margins.bottom / 2)
 			.attr('dy', "0.75em");

package/src/control.js

@@ -7,8 +7,8 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	includes: L.Evented ? L.Evented.prototype : L.Mixin.Events,
 
 	options: Options,
-	__mileFactor: 0.621371, // 1 km = (0.621371 mi)
-	__footFactor: 3.28084,  // 1 m  = (3.28084 ft)
+	__mileFactor:     0.621371, // 1 km = (0.621371 mi)
+	__footFactor:     3.28084,  // 1 m  = (3.28084 ft)
 	__D3:            'https://unpkg.com/d3@6.5.0/dist/d3.min.js',
 	__TOGEOJSON:     'https://unpkg.com/@tmcw/togeojson@4.6.0/dist/togeojson.umd.js',
 	__LGEOMUTIL:     'https://unpkg.com/leaflet-geometryutil@0.9.3/src/leaflet.geometryutil.js',
@@ -37,9 +37,9 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 */
 	addTo: function(map) {
 		if (this.options.detached) {
-			let eleDiv = this._initElevationDiv();
-			if (!eleDiv.isConnected) _.insert(map.getContainer(), eleDiv, 'afterend');
-			_.append(eleDiv, this.onAdd(map));
+			let parent = _.select(this.options.elevationDiv);
+			let eleDiv = this.onAdd(map);
+			parent ? _.append(parent, eleDiv) : _.insert(map.getContainer(), eleDiv, 'afterend');
 		} else {
 			L.Control.prototype.addTo.call(this, map);
 		}
@@ -221,7 +221,9 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	onAdd: function(map) {
 		this._map = map;
 
-		let container = this._container = _.create("div", "elevation-control elevation " + this.options.theme + " " + (this.options.detached ? '' : 'leaflet-control'));
+		let container = this._container = _.create("div", "elevation-control " + this.options.theme + " " + (this.options.detached ? 'elevation-detached' : 'leaflet-control'), this.options.detached ? { id: 'elevation-' + _.randomId() } : {});
+
+		if (!this.eleDiv) this.eleDiv = container;
 
 		let modules = [
 			"Distance",
@@ -413,21 +415,6 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		}
 	},
 
-	/**
-	 * Adds the control to the given "detached" div.
-	 */
-	_initElevationDiv: function() {
-		let eleDiv = _.select(this.options.elevationDiv);
-		if (!eleDiv) {
-			this.options.elevationDiv = '#elevation-div_' + _.randomId();
-			eleDiv                    = _.create('div', 'leaflet-control elevation elevation-div', { id: this.options.elevationDiv.substr(1) });
-		}
-		if (this.options.detached) {
-			_.replaceClass(eleDiv, 'leaflet-control', 'elevation-detached');
-		}
-		return this.eleDiv = eleDiv;
-	},
-
 	/**
 	 * Initialize "L.AlmostOver" and "L.DistanceMarkers"
 	 */
@@ -446,6 +433,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			} else if (control.options.polyline) {
 				layer.addTo(map);
 			}
+			map.invalidateSize();
 		} else {
 			console.warn("Undefined elevation map object");;
 		}
@@ -472,7 +460,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		let oldProto = L.Canvas.prototype._fillStroke;
 		let control  = this;
 
-		let theme      = this.options.theme.replace('-theme', '');
+		let theme      = this.options.theme.split(' ')[0].replace('-theme', '');
 		let color      = _.Colors[theme] || {};
 
 		L.Canvas.include({
@@ -657,23 +645,19 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 				.disableScrollPropagation(container);
 		}
 
-		if (!this.options.detached) {
-			let link = this._button = _.create('a', "elevation-toggle elevation-toggle-icon" + (this.options.autohide ? "" : " close-button"), { href: '#', title: L._('Elevation') }, container);
+		this.options.collapsed ? this._collapse() : this._expand();
 
-			if (this.options.collapsed) {
-				this._collapse();
-				if (this.options.autohide) {
-					_.on(container, 'mouseover', this._expand,   this);
-					_.on(container, 'mouseout',  this._collapse, this);
-				} else {
-					_.on(link, 'click', L.DomEvent.stop);
-					_.on(link, 'click', this._toggle, this);
-				}
-
-				_.on(link, 'focus', this._toggle, this);
+		if (this.options.autohide) {
+			_.on(container, 'mouseover', this._expand,   this);
+			_.on(container, 'mouseout',  this._collapse, this);
+			this._map.on('click', this._collapse, this);
+		}
 
-				this._map.on('click', this._collapse, this);
-			}
+		if (this.options.closeBtn) {
+			let link = this._button = _.create('a', "elevation-toggle-icon", { href: '#', title: L._('Elevation'), }, container);
+			_.on(link, 'click', L.DomEvent.stop);
+			_.on(link, 'click', this._toggle, this);
+			_.on(link, 'focus', this._toggle, this);
 		}
 	},
 

package/src/handlers/altitude.js

@@ -5,7 +5,7 @@ export function Altitude() {
 	let opts       = this.options;
 	let altitude   = {};
 
-	let theme           = opts.theme.replace('-theme', '');
+	let theme           = opts.theme.split(' ')[0].replace('-theme', '');
 	let color           = _.Colors[theme] || {};
 
 	opts.altitudeFactor = opts.imperial ? this.__footFactor : (opts.altitudeFactor || 1); // 1 m = (1 m)