diff --git a/loleaflet/css/mobilewizard.css b/loleaflet/css/mobilewizard.css
index 8b52fb3bd..aa462ddb7 100644
--- a/loleaflet/css/mobilewizard.css
+++ b/loleaflet/css/mobilewizard.css
@@ -856,3 +856,8 @@ input[type=checkbox][disabled] {
 #criteria.ui-tab, #inputhelp.ui-tab {
 	width: 30% !important;
 }
+
+.mobile-wizard.ui-drawing-area {
+	margin: 10px 5% 10px 5% !important;
+	width: 90%;
+}
diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js
index 4263e6ce1..5084bf66a 100644
--- a/loleaflet/src/control/Control.JSDialogBuilder.js
+++ b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -152,6 +152,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		this._controlHandlers['colorlistbox'] = this._colorControl;
 		this._controlHandlers['borderstyle'] = this._borderControl;
 		this._controlHandlers['treelistbox'] = this._listboxControl;
+		this._controlHandlers['drawingarea'] = this._drawingAreaControl;
 
 		this._controlHandlers['mainmenu'] = this._containerHandler;
 		this._controlHandlers['submenu'] = this._subMenuHandler;
@@ -1478,6 +1479,15 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		return false;
 	},
 
+	_drawingAreaControl: function(parentContainer, data, builder) {
+		if (data.image) {
+			var image = L.DomUtil.create('img', builder.options.cssClass + ' ui-drawing-area', parentContainer);
+			image.src = data.image.replace('\\', '');
+			image.id = data.id;
+		}
+		return false;
+	},
+
 	_htmlControl: function(parentContainer, data, builder) {
 		var container = L.DomUtil.create('div', builder.options.cssClass, parentContainer);
 		container.appendChild(data.content);