diff --git a/dist/css/Leaflet.StyleEditor.min.css b/dist/css/Leaflet.StyleEditor.min.css index 1398748..ed30840 100644 --- a/dist/css/Leaflet.StyleEditor.min.css +++ b/dist/css/Leaflet.StyleEditor.min.css @@ -1 +1 @@ -.leaflet-control-styleeditor .leaflet-control-styleeditor-interior{background-image:url(../img/icon.png);background-position:6px 6px;background-size:134px 116px}.leaflet-control-styleeditor-interior:hover{background-color:#07c217}.enabled{background-color:#b0de5c}.enabled:hover{background-color:#07c217}.leaflet-styleeditor{box-shadow:0 1px 7px rgba(0,0,0,.65);height:100%;right:0;background-color:#fff;width:0;position:absolute;margin:0;overflow:hidden;-webkit-transition-property:-webkit-transform,width;transition-property:transform,width;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-ms-transform:translatex(0);-webkit-transform:translatex(0);transform:translatex(0);z-index:1000}.editor-enabled{width:210px}.leaflet-styleeditor-hidden{display:none}.leaflet-styleeditor-fill-horizontal{display:flex}.leaflet-styleeditor-fill-vertical{flex-direction:column;display:flex}.leaflet-styleeditor-fill{flex:1;min-width:1px;min-height:1px}.leaflet-styleeditor-header{position:relative;height:40px;background-color:#b0de5c;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.leaflet-styleeditor-interior{padding:20px;overflow:auto;position:relative;right:0;height:calc(100% - 40px);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.leaflet-styleeditor-label{width:100px;display:block;font-size:medium}.leaflet-styleeditor-input{height:30px;margin-bottom:5px;padding-left:10px;background:#fff;border:1px solid rgba(0,0,0,.1);outline:0;width:150px}.leaflet-styleeditor-select{height:32px;margin-bottom:5px;padding-left:10px;background:#fff;border:1px solid rgba(0,0,0,.1);outline:0;width:150px}.leaflet-styleeditor-select-option-wrapper{position:absolute;list-style:none;padding:0;overflow-y:scroll;border:1px solid rgba(0,0,0,.1);background:#fff;top:80px;bottom:20px}.leaflet-styleeditor-select-option{display:inline-block;height:30px;width:28px;padding:4px;cursor:pointer;position:relative}.leaflet-styleeditor-select-image{position:relative;width:20px;height:30px;left:calc(50% - 10px);overflow:hidden}.leaflet-styleeditor-button{border:0;display:inline-block;padding:10px 20px;background:#b0de5c;height:40px;margin-left:0;-moz-transition:background-color .25s ease-in-out;-webkit-transition:background-color .25s ease-in-out;-o-transition:background-color .25s ease-in-out;-ms-transition:background-color .25s ease-in-out;transition:background-color .25s ease-in-out;letter-spacing:2px;text-decoration:none;text-transform:uppercase;font-size:15px;font-weight:600;color:#fff;cursor:pointer}.styleeditor-nextBtn{float:right;margin-right:0;background-image:url(../img/icon.png);background-position:10px -31px}.leaflet-styleeditor-button:hover{background-color:#00ad87}.leaflet-styleeditor-button:active{background-color:#20e1b6}.leaflet-styleeditor-colorpicker{width:160px;display:inline-block}.leaflet-styleeditor-color{height:35px;width:30px;float:left;border:1px solid #fff;cursor:pointer}.leaflet-styleeditor-color:hover{border:1px solid #000}.leaflet-styleeditor-sizeicon{background-image:url(https://unpkg.com/leaflet@0.7.7/dist/images/marker-icon-2x.png);background-repeat:no-repeat;float:left;margin-right:15px;border:1px solid #fff;cursor:pointer}.leaflet-styleeditor-sizeicon:hover{border:1px solid #000}.sizeicon-small{background-size:20px 33px;width:22px;height:33px}.sizeicon-medium{background-size:25px 41px;width:28px;height:41px}.sizeicon-large{background-size:30px 49px;width:32px;height:49px}.leaflet-styleeditor-tooltip-wrapper{position:absolute;text-align:center;top:80%;width:100%}.leaflet-styleeditor-tooltip{background-color:rgba(68,68,68,.2);border:3px solid rgba(68,68,68,.7);border-radius:5px;display:inline-block;font:20px/1"Helvetica Neue",Arial,Helvetica,sans-serif;padding:10px;position:relative;whitespace:no-wrap}.leaflet-styleeditor-stroke{height:20px;width:150px;background-repeat:no-repeat;border:1px solid #fff;background-image:url(../img/icon.png);cursor:pointer}.leaflet-styleeditor-stroke:hover{border:1px solid #000}.leaflet-styleeditor-marker-s{padding-top:3px;font-size:8px;height:50px;width:20px}.leaflet-styleeditor-marker-m{padding-top:5px;font-size:12px;height:70px;width:30px}.leaflet-styleeditor-marker-l{padding-top:9px;font-size:16px;height:90px;width:35px}.leaflet-styleeditor-marker{text-align:center;color:#fff;display:flex;background-repeat:no-repeat}.leaflet-styleeditor-maki-marker-icon{width:100%;height:25%} \ No newline at end of file +.leaflet-control-styleeditor .leaflet-control-styleeditor-interior{background-image:url(../img/icon.png);background-position:6px 6px;background-size:134px 116px}.leaflet-control-styleeditor-interior:hover{background-color:#07c217}.enabled{background-color:#b0de5c}.enabled:hover{background-color:#07c217}.leaflet-styleeditor{box-shadow:0 1px 7px rgba(0,0,0,.65);height:100%;right:0;background-color:#fff;width:0;position:absolute;margin:0;overflow:hidden;-webkit-transition-property:-webkit-transform,width;transition-property:transform,width;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-ms-transform:translatex(0);-webkit-transform:translatex(0);transform:translatex(0);z-index:1000}.editor-enabled{width:210px}.leaflet-styleeditor-hidden{display:none}.leaflet-styleeditor-fill-horizontal{display:flex}.leaflet-styleeditor-fill-vertical{flex-direction:column;display:flex}.leaflet-styleeditor-fill{flex:1;min-width:1px;min-height:1px}.leaflet-styleeditor-header{position:relative;height:40px;background-color:#b0de5c;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.leaflet-styleeditor-interior{padding:20px;overflow:auto;position:relative;right:0;height:calc(100% - 40px);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.leaflet-styleeditor-label{width:100px;display:block;font-size:medium}.leaflet-styleeditor-input{height:30px;margin-bottom:5px;padding-left:10px;background:#fff;border:1px solid rgba(0,0,0,.1);outline:0;width:150px}.leaflet-styleeditor-select{position:relative;height:32px;margin-bottom:5px;padding-left:10px;background:#fff;border:1px solid rgba(0,0,0,.1);outline:0;width:150px;overflow:hidden;padding:0}.leaflet-styleeditor-select-option-wrapper{position:absolute;list-style:none;padding:0;overflow-y:scroll;overflow-x:hidden;border:1px solid rgba(0,0,0,.1);background:#fff;top:80px;bottom:20px}.leaflet-styleeditor-select-option{display:inline-block;height:30px;width:28px;padding:4px;cursor:pointer;position:relative}.leaflet-styleeditor-select-image-wrapper{position:absolute;top:50%;left:50%;overflow:visible;width:100%;height:100%}.leaflet-styleeditor-select-image-defaultmarker{top:11px}.leaflet-styleeditor-select-image{position:relative;padding:0;margin:0}.leaflet-styleeditor-button{border:0;display:inline-block;padding:10px 20px;background:#b0de5c;height:40px;margin-left:0;-moz-transition:background-color .25s ease-in-out;-webkit-transition:background-color .25s ease-in-out;-o-transition:background-color .25s ease-in-out;-ms-transition:background-color .25s ease-in-out;transition:background-color .25s ease-in-out;letter-spacing:2px;text-decoration:none;text-transform:uppercase;font-size:15px;font-weight:600;color:#fff;cursor:pointer}.styleeditor-nextBtn{float:right;margin-right:0;background-image:url(../img/icon.png);background-position:10px -31px}.leaflet-styleeditor-button:hover{background-color:#00ad87}.leaflet-styleeditor-button:active{background-color:#20e1b6}.leaflet-styleeditor-colorpicker{width:160px;display:inline-block}.leaflet-styleeditor-color{height:35px;width:30px;float:left;border:1px solid #fff;cursor:pointer}.leaflet-styleeditor-color:hover{border:1px solid #000}.leaflet-styleeditor-sizeicon{background-image:url(https://unpkg.com/leaflet@0.7.7/dist/images/marker-icon-2x.png);background-repeat:no-repeat;float:left;margin-right:15px;border:1px solid #fff;cursor:pointer}.leaflet-styleeditor-sizeicon:hover{border:1px solid #000}.sizeicon-small{background-size:20px 33px;width:22px;height:33px}.sizeicon-medium{background-size:25px 41px;width:28px;height:41px}.sizeicon-large{background-size:30px 49px;width:32px;height:49px}.leaflet-styleeditor-tooltip-wrapper{position:absolute;text-align:center;bottom:10%;width:100%;z-index:1000}.leaflet-styleeditor-tooltip{background-color:rgba(68,68,68,.2);border:3px solid rgba(68,68,68,.7);border-radius:5px;display:inline-block;font:20px/1"Helvetica Neue",Arial,Helvetica,sans-serif;padding:10px;position:relative;whitespace:no-wrap}.leaflet-styleeditor-stroke{height:20px;width:150px;background-repeat:no-repeat;border:1px solid #fff;background-image:url(../img/icon.png);cursor:pointer}.leaflet-styleeditor-stroke:hover{border:1px solid #000}.leaflet-styleeditor-marker-s{padding-top:3px;font-size:8px;height:50px;width:20px}.leaflet-styleeditor-marker-m{padding-top:5px;font-size:12px;height:70px;width:30px}.leaflet-styleeditor-marker-l{padding-top:9px;font-size:16px;height:90px;width:35px}.leaflet-styleeditor-marker{text-align:center;color:#fff;display:flex;background-repeat:no-repeat}.leaflet-styleeditor-maki-marker-icon{width:100%;height:25%} \ No newline at end of file diff --git a/dist/javascript/Leaflet.StyleEditor.min.js b/dist/javascript/Leaflet.StyleEditor.min.js index f191f65..67c6f8f 100644 --- a/dist/javascript/Leaflet.StyleEditor.min.js +++ b/dist/javascript/Leaflet.StyleEditor.min.js @@ -1 +1 @@ -!function(t,e){"function"==typeof define&&define.amd?define(["leaflet"],t):"object"==typeof exports&&(module.exports=t(require("leaflet"))),void 0!==e&&e.L&&(e.L.StyleEditor=t(L))}(function(t){return{marker:{},forms:{},formElements:{}}},window),L.StyleEditor.Util=L.Class.extend({initialize:function(t){t&&L.setOptions(this,t)},fireChangeEvent:function(t){this.options.styleEditorOptions.map.fireEvent("styleeditor:changed",t)},hideElement:function(t){t&&L.DomUtil.addClass(t,"leaflet-styleeditor-hidden")},rgbToHex:function(t,e){if(t||0!=(t=this.options.styleEditorOptions.defaultColor).indexOf("#")&&(t="#"+t),0==t.indexOf("#"))return e&&t.replace("#",""),t;if(t.indexOf("(")<0)return"#"+t;var o="";return t=t.substring(4).replace(")","").split(","),o=this._componentToHex(parseInt(t[0],10))+this._componentToHex(parseInt(t[1],10))+this._componentToHex(parseInt(t[2],10)),e?o:"#"+o},getCurrentElement:function(){return this.options.styleEditorOptions.currentElement?this.options.styleEditorOptions.currentElement.target:null},setCurrentElement:function(t){this.options.styleEditorOptions.currentElement.target=t},fillCurrentElement:function(){return this.getCurrentElement().options.fill},getStyle:function(t){var e=this.getCurrentElement().options[t];return e||null},setStyle:function(t,e){var o=this.getCurrentElement();if(o instanceof L.Marker)this.options.styleEditorOptions.markerType.setStyle(t,e);else{var i={};i[t]=e,o.setStyle(i)}this.fireChangeEvent(o)},showElement:function(t){t&&L.DomUtil.removeClass(t,"leaflet-styleeditor-hidden")},_componentToHex:function(t){var e=t.toString(16);return 1===e.length?"0"+e:e},getMarkersForColor:function(t){t=this.rgbToHex(t);var e=this.options.styleEditorOptions.markerType.options.markers,o=this.options.styleEditorOptions.markers;if(Array.isArray(e)||(e=Object.keys(e).includes(t)?e[t]:e.default),null!=o){if(!Array.isArray(o)){var i=Object.keys(o);o=i.includes(t)?o[t]:i.includes("default")?o.default:e}return e.filter(t=>o.includes(t))}return e},getDefaultMarkerForColor:function(t){t=this.rgbToHex(t);var e=this.getMarkersForColor(t),o=[],i=this.options.styleEditorOptions.defaultMarker;return null!=i&&("string"==typeof i&&o.push(i),Object.keys(i).includes(t)&&o.push(i[t])),void 0!=(i=this.options.styleEditorOptions.markerType.options.defaultMarker)&&("string"==typeof i&&o.push(i),Object.keys(i).includes(t)&&o.push(i[t])),o.filter(t=>e.includes(t)),o.length>0?o[0]:e[0]}}),L.StyleEditor.formElements.FormElement=L.Class.extend({initialize:function(t){t&&L.setOptions(this,t),this.options.styleOption&&(this.options.title=this.options.styleOption.charAt(0).toUpperCase()+this.options.styleOption.slice(1))},create:function(t){this.options.uiElement=L.DomUtil.create("div","leaflet-styleeditor-uiElement",t);this.createTitle(),this.createContent()},createTitle:function(){L.DomUtil.create("label","leaflet-styleeditor-label",this.options.uiElement).innerHTML=this.options.title+":"},createContent:function(){},show:function(){this.style(),this.showForm()},showForm:function(){this.options.styleEditorOptions.util.showElement(this.options.uiElement)},hide:function(){this.options.styleEditorOptions.util.hideElement(this.options.uiElement)},style:function(){},lostFocus:function(){},setStyle:function(t){var e=this.options.styleEditorOptions.util.getCurrentElement(),o=[e];e instanceof L.LayerGroup&&(o=Object.values(e._layers));for(var i=0;i=30?t[0]>=35?"l":"m":"s"},options:{markers:["circle-stroked","circle","square-stroked","square","triangle-stroked","triangle","star-stroked","star","cross","marker-stroked","marker","religious-jewish","religious-christian","religious-muslim","cemetery","rocket","airport","heliport","rail","rail-metro","rail-light","bus","fuel","parking","parking-garage","airfield","roadblock","ferry","harbor","bicycle","park","park2","museum","lodging","monument","zoo","garden","campsite","theatre","art-gallery","pitch","soccer","america-football","tennis","basketball","baseball","golf","swimming","cricket","skiing","school","college","library","post","fire-station","town-hall","police","prison","embassy","beer","restaurant","cafe","shop","fast-food","bar","bank","grocery","cinema","pharmacy","hospital","danger","industrial","warehouse","commercial","building","place-of-worship","alcohol-shop","logging","oil-well","slaughterhouse","dam","water","wetland","disability","telephone","emergency-telephone","toilets","waste-basket","music","land-use","city","town","village","farm","bakery","dog-park","lighthouse","clothing-store","polling-place","playground","entrance","heart","london-underground","minefield","rail-underground","rail-above","camera","laundry","car","suitcase","hairdresser","chemist","mobilephone","scooter"]}}),L.StyleEditor.marker.GlyphiconMarker=L.StyleEditor.marker.Marker.extend({getMarkerHtml:function(t,e,o){var i=this._getMarkerUrl(t,e);return'
'},createMarkerIcon:function(t){var e=t.iconSize;return new L.divIcon({className:"leaflet-styleeditor-glyphicon-marker-wrapper",html:this.getMarkerHtml(e,t.iconColor,t.icon),icon:t.icon,iconColor:t.iconColor,iconSize:e,iconAnchor:[e[0]/2,e[1]/2],popupAnchor:[0,-e[1]/2]})},setStyle:function(t,e){"icon"!=t&&(t="icon"+t.charAt(0).toUpperCase()+t.slice(1));var o=this.options.iconOptions;o[t]!=e&&(o[t]=e,this.setNewMarker())},createSelectHTML:function(t,e,o){t.innerHTML=this.getMarkerHtml("s",e.iconColor,o)},_size:function(t){return t[0]>=30?t[0]>=35?"l":"m":"s"},_getMarkerUrlForStyle:function(t){return this._getMarkerUrl(t.iconSize,t.iconColor,t.icon)},_getMarkerUrl:function(t,e,o){return"http://api.tiles.mapbox.com/v3/marker/pin-"+(t=this._size(t))+"+"+(e=0==e.indexOf("#")?e.replace("#",""):this.options.styleEditorOptions.util.rgbToHex(e,!0))+".png"},options:{markers:["glyphicon-plus","glyphicon-asterisk","glyphicon-plus","glyphicon-euro","glyphicon-minus","glyphicon-cloud","glyphicon-envelope","glyphicon-pencil","glyphicon-glass","glyphicon-music","glyphicon-search","glyphicon-heart","glyphicon-star","glyphicon-star-empty","glyphicon-user","glyphicon-film","glyphicon-th-large","glyphicon-th","glyphicon-th-list","glyphicon-ok","glyphicon-remove","glyphicon-zoom-in","glyphicon-zoom-out","glyphicon-off","glyphicon-signal","glyphicon-cog","glyphicon-trash","glyphicon-home","glyphicon-file","glyphicon-time","glyphicon-road","glyphicon-download-alt","glyphicon-download","glyphicon-upload","glyphicon-inbox","glyphicon-play-circle","glyphicon-repeat","glyphicon-refresh","glyphicon-list-alt","glyphicon-lock","glyphicon-flag","glyphicon-headphones","glyphicon-volume-off","glyphicon-volume-down","glyphicon-volume-up","glyphicon-qrcode","glyphicon-barcode","glyphicon-tag","glyphicon-tags","glyphicon-book","glyphicon-bookmark","glyphicon-print","glyphicon-camera","glyphicon-font","glyphicon-bold","glyphicon-italic","glyphicon-text-height","glyphicon-text-width","glyphicon-align-left","glyphicon-align-center","glyphicon-align-right","glyphicon-align-justify","glyphicon-list","glyphicon-indent-left","glyphicon-indent-right","glyphicon-facetime-video","glyphicon-picture","glyphicon-map-marker","glyphicon-adjust","glyphicon-tint","glyphicon-edit","glyphicon-share","glyphicon-check","glyphicon-move","glyphicon-chevron-right","glyphicon-plus-sign","glyphicon-minus-sign","glyphicon-remove-sign","glyphicon-ok-sign","glyphicon-question-sign","glyphicon-info-sign","glyphicon-screenshot","glyphicon-remove-circle","glyphicon-ok-circle","glyphicon-ban-circle","glyphicon-arrow-left","glyphicon-arrow-right","glyphicon-arrow-up","glyphicon-arrow-down","glyphicon-share-alt","glyphicon-resize-full","glyphicon-resize-small","glyphicon-exclamation-sign","glyphicon-gift","glyphicon-leaf","glyphicon-fire","glyphicon-eye-open","glyphicon-eye-close","glyphicon-warning-sign","glyphicon-plane","glyphicon-calendar","glyphicon-random","glyphicon-comment","glyphicon-magnet","glyphicon-chevron-up","glyphicon-chevron-down","glyphicon-retweet","glyphicon-shopping-cart","glyphicon-bullhorn","glyphicon-bell","glyphicon-certificate","glyphicon-thumbs-up","glyphicon-thumbs-down","glyphicon-hand-right","glyphicon-hand-left","glyphicon-hand-up","glyphicon-hand-down","glyphicon-circle-arrow-right","glyphicon-circle-arrow-left","glyphicon-circle-arrow-up","glyphicon-circle-arrow-down","glyphicon-globe","glyphicon-wrench","glyphicon-tasks","glyphicon-filter","glyphicon-briefcase","glyphicon-fullscreen","glyphicon-dashboard","glyphicon-paperclip","glyphicon-heart-empty","glyphicon-link","glyphicon-phone","glyphicon-pushpin","glyphicon-usd"]}}),L.StyleForm=L.Class.extend({initialize:function(t){L.setOptions(this,t),this.createMarkerForm(),this.createGeometryForm(),this.addDOMEvents()},addDOMEvents:function(){L.DomEvent.addListener(this.options.styleEditorOptions.map,"click",this.lostFocus,this),L.DomEvent.addListener(this.options.styleEditorDiv,"click",this.lostFocus,this)},clearForm:function(){this.options.styleEditorOptions.markerForm.hide(),this.options.styleEditorOptions.geometryForm.hide()},createMarkerForm:function(){var t=L.DomUtil.create("div","leaflet-styleeditor-interior-marker",this.options.styleEditorInterior);this.options.styleEditorOptions.markerForm.create(t)},createGeometryForm:function(){var t=L.DomUtil.create("div","leaflet-styleeditor-interior-geometry",this.options.styleEditorInterior);this.options.styleEditorOptions.geometryForm.create(t)},showMarkerForm:function(){this.clearForm(),this.options.styleEditorOptions.markerForm.show()},showGeometryForm:function(){this.clearForm(),this.options.styleEditorOptions.geometryForm.show()},fireChangeEvent:function(t){this.options.styleEditorOptions.map.fireEvent("styleeditor:changed",t)},lostFocus:function(t){for(var e=t.target,o=0;o<10&&e;o++){if(e.className&&L.DomUtil.hasClass(e,"leaflet-styleeditor-interior"))return;e=e.parentNode}this.options.styleEditorOptions.markerForm.lostFocus(),this.options.styleEditorOptions.geometryForm.lostFocus()}}),L.Control.StyleEditor=L.Control.extend({options:{position:"topleft",enabled:!1,colorRamp:["#1abc9c","#2ecc71","#3498db","#9b59b6","#34495e","#16a085","#27ae60","#2980b9","#8e44ad","#2c3e50","#f1c40f","#e67e22","#e74c3c","#ecf0f1","#95a5a6","#f39c12","#d35400","#c0392b","#bdc3c7","#7f8c8d"],defaultColor:null,currentElement:null,markerType:L.StyleEditor.marker.DefaultMarker,geometryForm:L.StyleEditor.forms.GeometryForm,editLayers:[],layerGroups:[],openOnLeafletDraw:!0,showTooltip:!0,strings:{tooltip:"Click on the element you want to style",tooltipNext:"Choose another element you want to style"},markers:null,defaultMarker:null,useGrouping:!0},initialize:function(t){t&&L.setOptions(this,t),this.options.util=new L.StyleEditor.Util({styleEditorOptions:this.options}),this.options.markerType=new this.options.markerType({styleEditorOptions:this.options}),this.options.markerForm=new this.options.markerType.markerForm({styleEditorOptions:this.options}),this.options.geometryForm=new this.options.geometryForm({styleEditorOptions:this.options})},onAdd:function(t){return this.options.map=t,this.createUi()},createUi:function(){var t=this.options.controlDiv=L.DomUtil.create("div","leaflet-control-styleeditor leaflet-bar");(this.options.controlUI=L.DomUtil.create("a","leaflet-control-styleeditor-interior",t)).title="Style Editor";var e=this.options.styleEditorDiv=L.DomUtil.create("div","leaflet-styleeditor",this.options.map._container);this.options.styleEditorHeader=L.DomUtil.create("div","leaflet-styleeditor-header",e);var o=L.DomUtil.create("div","leaflet-styleeditor-interior",e);return this.addDomEvents(),this.addLeafletDrawEvents(),this.addButtons(),this.options.styleForm=new L.StyleForm({styleEditorDiv:e,styleEditorInterior:o,styleEditorOptions:this.options}),t},addDomEvents:function(){L.DomEvent.addListener(this.options.controlDiv,"click",function(t){this.clickHandler(t),t.stopPropagation()},this),L.DomEvent.addListener(this.options.controlDiv,"dblclick",function(t){t.stopPropagation()},this),L.DomEvent.addListener(this.options.styleEditorDiv,"click",L.DomEvent.stopPropagation),L.DomEvent.addListener(this.options.styleEditorDiv,"mouseenter",this.disableLeafletActions,this),L.DomEvent.addListener(this.options.styleEditorDiv,"mouseleave",this.enableLeafletActions,this)},addLeafletDrawEvents:function(){this.options.openOnLeafletDraw&&L.Control.Draw&&this.options.map.on("draw:created",function(t){this.initChangeStyle({target:t.layer})},this)},addButtons:function(){var t=L.DomUtil.create("button","leaflet-styleeditor-button styleeditor-nextBtn",this.options.styleEditorHeader);t.title=this.options.strings.tooltipNext,L.DomEvent.addListener(t,"click",function(t){this.hideEditor(),L.DomUtil.hasClass(this.options.controlUI,"enabled")&&this.createTooltip(),t.stopPropagation()},this)},clickHandler:function(t){this.options.enabled=!this.options.enabled,this.options.enabled?this.enable():(L.DomUtil.removeClass(this.options.controlUI,"enabled"),this.disable())},disableLeafletActions:function(){var t=this.options.map;t.dragging.disable(),t.touchZoom.disable(),t.doubleClickZoom.disable(),t.scrollWheelZoom.disable(),t.boxZoom.disable(),t.keyboard.disable()},enableLeafletActions:function(){var t=this.options.map;t.dragging.enable(),t.touchZoom.enable(),t.doubleClickZoom.enable(),t.scrollWheelZoom.enable(),t.boxZoom.enable(),t.keyboard.enable()},enable:function(){L.DomUtil.addClass(this.options.controlUI,"enabled"),this.options.map.eachLayer(this.addEditClickEvents,this),this.createTooltip()},disable:function(){this.options.editLayers.forEach(this.removeEditClickEvents,this),this.options.editLayers=[],this.options.layerGroups=[],this.hideEditor(),this.removeTooltip()},addEditClickEvents:function(t){if(this.options.useGrouping&&t instanceof L.LayerGroup)this.options.layerGroups.push(t);else if(t instanceof L.Marker||t instanceof L.Path){var e=t.on("click",this.initChangeStyle,this);this.options.editLayers.push(e)}},removeEditClickEvents:function(t){t.off("click",this.initChangeStyle,this)},hideEditor:function(){L.DomUtil.removeClass(this.options.styleEditorDiv,"editor-enabled")},showEditor:function(){var t=this.options.styleEditorDiv;L.DomUtil.hasClass(t,"editor-enabled")||L.DomUtil.addClass(t,"editor-enabled")},initChangeStyle:function(t){this.options.currentElement=this.options.useGrouping?this.getMatchingElement(t):t,this.showEditor(),this.removeTooltip(),t.target instanceof L.Marker?this.showMarkerForm():this.showGeometryForm()},showGeometryForm:function(){this.options.styleForm.showGeometryForm()},showMarkerForm:function(){this.options.styleForm.showMarkerForm()},createTooltip:function(){this.options.showTooltip&&(this.options.tooltipWrapper||(this.options.tooltipWrapper=L.DomUtil.create("div","leaflet-styleeditor-tooltip-wrapper",this.options.map.getContainer())),this.options.tooltip||(this.options.tooltip=L.DomUtil.create("div","leaflet-styleeditor-tooltip",this.options.tooltipWrapper)),this.options.tooltip.innerHTML=this.options.strings.tooltip)},getMatchingElement:function(t){for(var e=null,o=t.target,i=0;io.includes(t))}return e},getDefaultMarkerForColor:function(t){t=this.rgbToHex(t);var e=this.getMarkersForColor(t),o=[],i=this.options.styleEditorOptions.defaultMarkerIcon;return null!==i&&("string"==typeof i&&o.push(i),Object.keys(i).includes(t)&&o.push(i[t])),void 0!==(i=this.options.styleEditorOptions.markerType.options.defaultMarkerIcon)&&("string"==typeof i&&o.push(i),Object.keys(i).includes(t)&&o.push(i[t])),o.filter(t=>e.includes(t)),o.length>0?o[0]:e[0]}}),L.StyleEditor.formElements.FormElement=L.Class.extend({initialize:function(t){t&&L.setOptions(this,t),this.options.styleOption&&(this.options.title=this.options.styleOption.charAt(0).toUpperCase()+this.options.styleOption.slice(1))},create:function(t){this.options.uiElement=L.DomUtil.create("div","leaflet-styleeditor-uiElement",t);this.createTitle(),this.createContent()},createTitle:function(){L.DomUtil.create("label","leaflet-styleeditor-label",this.options.uiElement).innerHTML=this.options.title+":"},createContent:function(){},show:function(){this.style(),this.showForm()},showForm:function(){this.options.styleEditorOptions.util.showElement(this.options.uiElement)},hide:function(){this.options.styleEditorOptions.util.hideElement(this.options.uiElement)},style:function(){},lostFocus:function(){},setStyle:function(t){var e=this.options.styleEditorOptions.util.getCurrentElement(),o=[e];e instanceof L.LayerGroup&&(o=Object.values(e._layers));for(var i=0;ie.includes(t))).length&&(o=t):o=e;var i=this.options.styleEditorOptions.defaultMarkerColor;return null===i||o.includes(i)||(i=null),null===i&&(null===(i=this.options.styleEditorOptions.defaultColor)||o.includes(i)||(i=null),null===i&&(i=o[0])),this.options.styleEditorOptions.util.rgbToHex(i)},sizeToName:function(t){var e=Object.keys(this.options.size);if("string"==typeof t)for("s"===t?t="small":"m"===t?t="medium":"l"===t&&(t="large"),i=0;i
'},createMarkerIcon:function(t){var e=t.iconSize;return new L.divIcon({className:"leaflet-styleeditor-glyphicon-marker-wrapper",html:this.getMarkerHtml(e,t.iconColor,t.icon),icon:t.icon,iconColor:t.iconColor,iconSize:e,iconAnchor:[e[0]/2,e[1]/2],popupAnchor:[0,-e[1]/2]})},setStyle:function(t,e){"icon"!==t&&(t="icon"+t.charAt(0).toUpperCase()+t.slice(1));var o=this.options.iconOptions;o[t]!==e&&(o[t]=e,this.setNewMarker())},createSelectHTML:function(t,e,o){t.innerHTML=this.getMarkerHtml("s",e.iconColor,o)},_getMarkerUrlForStyle:function(t){return this._getMarkerUrl(t.iconSize,t.iconColor,t.icon)},_getMarkerUrl:function(t,e,o){return"http://api.tiles.mapbox.com/v3/marker/pin-"+(t=this.sizeToName(t)[0])+"+"+(e=0===e.indexOf("#")?e.replace("#",""):this.options.styleEditorOptions.util.rgbToHex(e,!0))+".png"},options:{markers:["glyphicon-plus","glyphicon-asterisk","glyphicon-plus","glyphicon-euro","glyphicon-minus","glyphicon-cloud","glyphicon-envelope","glyphicon-pencil","glyphicon-glass","glyphicon-music","glyphicon-search","glyphicon-heart","glyphicon-star","glyphicon-star-empty","glyphicon-user","glyphicon-film","glyphicon-th-large","glyphicon-th","glyphicon-th-list","glyphicon-ok","glyphicon-remove","glyphicon-zoom-in","glyphicon-zoom-out","glyphicon-off","glyphicon-signal","glyphicon-cog","glyphicon-trash","glyphicon-home","glyphicon-file","glyphicon-time","glyphicon-road","glyphicon-download-alt","glyphicon-download","glyphicon-upload","glyphicon-inbox","glyphicon-play-circle","glyphicon-repeat","glyphicon-refresh","glyphicon-list-alt","glyphicon-lock","glyphicon-flag","glyphicon-headphones","glyphicon-volume-off","glyphicon-volume-down","glyphicon-volume-up","glyphicon-qrcode","glyphicon-barcode","glyphicon-tag","glyphicon-tags","glyphicon-book","glyphicon-bookmark","glyphicon-print","glyphicon-camera","glyphicon-font","glyphicon-bold","glyphicon-italic","glyphicon-text-height","glyphicon-text-width","glyphicon-align-left","glyphicon-align-center","glyphicon-align-right","glyphicon-align-justify","glyphicon-list","glyphicon-indent-left","glyphicon-indent-right","glyphicon-facetime-video","glyphicon-picture","glyphicon-map-marker","glyphicon-adjust","glyphicon-tint","glyphicon-edit","glyphicon-share","glyphicon-check","glyphicon-move","glyphicon-chevron-right","glyphicon-plus-sign","glyphicon-minus-sign","glyphicon-remove-sign","glyphicon-ok-sign","glyphicon-question-sign","glyphicon-info-sign","glyphicon-screenshot","glyphicon-remove-circle","glyphicon-ok-circle","glyphicon-ban-circle","glyphicon-arrow-left","glyphicon-arrow-right","glyphicon-arrow-up","glyphicon-arrow-down","glyphicon-share-alt","glyphicon-resize-full","glyphicon-resize-small","glyphicon-exclamation-sign","glyphicon-gift","glyphicon-leaf","glyphicon-fire","glyphicon-eye-open","glyphicon-eye-close","glyphicon-warning-sign","glyphicon-plane","glyphicon-calendar","glyphicon-random","glyphicon-comment","glyphicon-magnet","glyphicon-chevron-up","glyphicon-chevron-down","glyphicon-retweet","glyphicon-shopping-cart","glyphicon-bullhorn","glyphicon-bell","glyphicon-certificate","glyphicon-thumbs-up","glyphicon-thumbs-down","glyphicon-hand-right","glyphicon-hand-left","glyphicon-hand-up","glyphicon-hand-down","glyphicon-circle-arrow-right","glyphicon-circle-arrow-left","glyphicon-circle-arrow-up","glyphicon-circle-arrow-down","glyphicon-globe","glyphicon-wrench","glyphicon-tasks","glyphicon-filter","glyphicon-briefcase","glyphicon-fullscreen","glyphicon-dashboard","glyphicon-paperclip","glyphicon-heart-empty","glyphicon-link","glyphicon-phone","glyphicon-pushpin","glyphicon-usd"]}}),L.StyleForm=L.Class.extend({initialize:function(t){L.setOptions(this,t),this.createMarkerForm(),this.createGeometryForm(),this.addDOMEvents()},addDOMEvents:function(){L.DomEvent.addListener(this.options.styleEditorOptions.map,"click",this.lostFocus,this),L.DomEvent.addListener(this.options.styleEditorDiv,"click",this.lostFocus,this)},clearForm:function(){this.options.styleEditorOptions.markerForm.hide(),this.options.styleEditorOptions.geometryForm.hide()},createMarkerForm:function(){var t=L.DomUtil.create("div","leaflet-styleeditor-interior-marker",this.options.styleEditorInterior);this.options.styleEditorOptions.markerForm.create(t)},createGeometryForm:function(){var t=L.DomUtil.create("div","leaflet-styleeditor-interior-geometry",this.options.styleEditorInterior);this.options.styleEditorOptions.geometryForm.create(t)},showMarkerForm:function(){this.clearForm(),this.options.styleEditorOptions.markerForm.show()},showGeometryForm:function(){this.clearForm(),this.options.styleEditorOptions.geometryForm.show()},fireChangeEvent:function(t){this.options.styleEditorOptions.map.fireEvent("styleeditor:changed",t)},lostFocus:function(t){for(var e=t.target,o=0;o<10&&e;o++){if(e.className&&L.DomUtil.hasClass(e,"leaflet-styleeditor-interior"))return;e=e.parentNode}this.options.styleEditorOptions.markerForm.lostFocus(),this.options.styleEditorOptions.geometryForm.lostFocus()}}),L.Control.StyleEditor=L.Control.extend({options:{position:"topleft",enabled:!1,colorRamp:["#1abc9c","#2ecc71","#3498db","#9b59b6","#34495e","#16a085","#27ae60","#2980b9","#8e44ad","#2c3e50","#f1c40f","#e67e22","#e74c3c","#ecf0f1","#95a5a6","#f39c12","#d35400","#c0392b","#bdc3c7","#7f8c8d"],defaultColor:null,currentElement:null,markerType:L.StyleEditor.marker.DefaultMarker,markers:null,defaultMarkerIcon:null,defaultMarkerColor:null,geometryForm:L.StyleEditor.forms.GeometryForm,editLayers:[],layerGroups:[],openOnLeafletDraw:!0,showTooltip:!0,strings:{tooltip:"Click on the element you want to style",tooltipNext:"Choose another element you want to style"},useGrouping:!0},initialize:function(t){t&&L.setOptions(this,t),this.options.util=new L.StyleEditor.Util({styleEditorOptions:this.options}),this.options.markerType=new this.options.markerType({styleEditorOptions:this.options}),this.options.markerForm=new this.options.markerType.markerForm({styleEditorOptions:this.options}),this.options.geometryForm=new this.options.geometryForm({styleEditorOptions:this.options})},onAdd:function(t){return this.options.map=t,this.createUi()},createUi:function(){var t=this.options.controlDiv=L.DomUtil.create("div","leaflet-control-styleeditor leaflet-bar");(this.options.controlUI=L.DomUtil.create("a","leaflet-control-styleeditor-interior",t)).title="Style Editor";var e=this.options.styleEditorDiv=L.DomUtil.create("div","leaflet-styleeditor",this.options.map._container);this.options.styleEditorHeader=L.DomUtil.create("div","leaflet-styleeditor-header",e);var o=L.DomUtil.create("div","leaflet-styleeditor-interior",e);return this.addDomEvents(),this.addLeafletDrawEvents(),this.addButtons(),this.options.styleForm=new L.StyleForm({styleEditorDiv:e,styleEditorInterior:o,styleEditorOptions:this.options}),t},addDomEvents:function(){L.DomEvent.addListener(this.options.controlDiv,"click",function(t){this.clickHandler(t),t.stopPropagation()},this),L.DomEvent.addListener(this.options.controlDiv,"dblclick",function(t){t.stopPropagation()},this),L.DomEvent.addListener(this.options.styleEditorDiv,"click",L.DomEvent.stopPropagation),L.DomEvent.addListener(this.options.styleEditorDiv,"mouseenter",this.disableLeafletActions,this),L.DomEvent.addListener(this.options.styleEditorDiv,"mouseleave",this.enableLeafletActions,this)},addLeafletDrawEvents:function(){this.options.openOnLeafletDraw&&L.Control.Draw&&this.options.map.on("draw:created",function(t){this.initChangeStyle({target:t.layer})},this)},addButtons:function(){var t=L.DomUtil.create("button","leaflet-styleeditor-button styleeditor-nextBtn",this.options.styleEditorHeader);t.title=this.options.strings.tooltipNext,L.DomEvent.addListener(t,"click",function(t){this.hideEditor(),L.DomUtil.hasClass(this.options.controlUI,"enabled")&&this.createTooltip(),t.stopPropagation()},this)},clickHandler:function(t){this.options.enabled=!this.options.enabled,this.options.enabled?this.enable():(L.DomUtil.removeClass(this.options.controlUI,"enabled"),this.disable())},disableLeafletActions:function(){var t=this.options.map;t.dragging.disable(),t.touchZoom.disable(),t.doubleClickZoom.disable(),t.scrollWheelZoom.disable(),t.boxZoom.disable(),t.keyboard.disable()},enableLeafletActions:function(){var t=this.options.map;t.dragging.enable(),t.touchZoom.enable(),t.doubleClickZoom.enable(),t.scrollWheelZoom.enable(),t.boxZoom.enable(),t.keyboard.enable()},enable:function(){L.DomUtil.addClass(this.options.controlUI,"enabled"),this.options.map.eachLayer(this.addEditClickEvents,this),this.createTooltip()},disable:function(){this.options.editLayers.forEach(this.removeEditClickEvents,this),this.options.editLayers=[],this.options.layerGroups=[],this.hideEditor(),this.removeTooltip()},addEditClickEvents:function(t){if(this.options.useGrouping&&t instanceof L.LayerGroup)this.options.layerGroups.push(t);else if(t instanceof L.Marker||t instanceof L.Path){var e=t.on("click",this.initChangeStyle,this);this.options.editLayers.push(e)}},removeEditClickEvents:function(t){t.off("click",this.initChangeStyle,this)},hideEditor:function(){L.DomUtil.removeClass(this.options.styleEditorDiv,"editor-enabled")},showEditor:function(){var t=this.options.styleEditorDiv;L.DomUtil.hasClass(t,"editor-enabled")||L.DomUtil.addClass(t,"editor-enabled")},initChangeStyle:function(t){this.options.currentElement=this.options.useGrouping?this.getMatchingElement(t):t,this.showEditor(),this.removeTooltip(),t.target instanceof L.Marker?this.showMarkerForm():this.showGeometryForm()},showGeometryForm:function(){this.options.styleForm.showGeometryForm()},showMarkerForm:function(){this.options.styleForm.showMarkerForm()},createTooltip:function(){this.options.showTooltip&&(this.options.tooltipWrapper||(this.options.tooltipWrapper=L.DomUtil.create("div","leaflet-styleeditor-tooltip-wrapper",this.options.map.getContainer())),this.options.tooltip||(this.options.tooltip=L.DomUtil.create("div","leaflet-styleeditor-tooltip",this.options.tooltipWrapper)),this.options.tooltip.innerHTML=this.options.strings.tooltip)},getMatchingElement:function(t){for(var e=null,o=t.target,i=0;i diff --git a/src/javascript/Control.js b/src/javascript/Control.js index d5596e9..c1beeb0 100644 --- a/src/javascript/Control.js +++ b/src/javascript/Control.js @@ -2,23 +2,30 @@ L.Control.StyleEditor = L.Control.extend({ options: { position: 'topleft', enabled: false, + colorRamp: ['#1abc9c', '#2ecc71', '#3498db', '#9b59b6', '#34495e', '#16a085', '#27ae60', '#2980b9', '#8e44ad', '#2c3e50', '#f1c40f', '#e67e22', '#e74c3c', '#ecf0f1', '#95a5a6', '#f39c12', '#d35400', '#c0392b', '#bdc3c7', '#7f8c8d'], defaultColor: null, currentElement: null, + markerType: L.StyleEditor.marker.DefaultMarker, + markers: null, + defaultMarkerIcon: null, + defaultMarkerColor: null, + geometryForm: L.StyleEditor.forms.GeometryForm, + editLayers: [], layerGroups: [], + openOnLeafletDraw: true, showTooltip: true, + strings: { tooltip: 'Click on the element you want to style', tooltipNext: 'Choose another element you want to style' }, - markers: null, - defaultMarker: null, useGrouping: true }, @@ -220,7 +227,7 @@ L.Control.StyleEditor = L.Control.extend({ for (var i = 0; i < this.options.layerGroups.length; ++i) { group = this.options.layerGroups[i]; - if (group && layer != group && group.hasLayer(layer)) { + if (group && layer !== group && group.hasLayer(layer)) { // we use the opacity style to check for correct object if (!group.options || !group.options.opacity) { group.options = layer.options; diff --git a/src/javascript/Form/GeometryForm.js b/src/javascript/Form/GeometryForm.js index 099e955..9740c51 100644 --- a/src/javascript/Form/GeometryForm.js +++ b/src/javascript/Form/GeometryForm.js @@ -13,7 +13,7 @@ L.StyleEditor.forms.GeometryForm = L.StyleEditor.forms.Form.extend({ /** show the fillOptions (fillColor and fillOpacity) only if the Element can be filled */ showFormElements: function () { for (var i = 0; i < this.options.initializedElements.length; i++) { - if (this.options.initializedElements[i].options.styleOption.indexOf('fill') == 0) { + if (this.options.initializedElements[i].options.styleOption.indexOf('fill') === 0) { if (this.options.styleEditorOptions.util.fillCurrentElement()) { this.options.initializedElements[i].show(); } else { diff --git a/src/javascript/Form/MarkerForm.js b/src/javascript/Form/MarkerForm.js index a556ef4..3cd4b47 100644 --- a/src/javascript/Form/MarkerForm.js +++ b/src/javascript/Form/MarkerForm.js @@ -6,11 +6,6 @@ L.StyleEditor.forms.MarkerForm = L.StyleEditor.forms.Form.extend({ 'color': L.StyleEditor.formElements.ColorElement, 'size': L.StyleEditor.formElements.SizeElement } - }, - - /** before showing the MarkerForm update currently used MarkerIcon */ - preShow: function () { - Object.assign(this.options.styleEditorOptions.markerType.getIconOptions(), - this.options.styleEditorOptions.util.getCurrentElement().options.icon.options); } + }); diff --git a/src/javascript/FormElements/ColorElement.js b/src/javascript/FormElements/ColorElement.js index eb3d4ed..110f962 100644 --- a/src/javascript/FormElements/ColorElement.js +++ b/src/javascript/FormElements/ColorElement.js @@ -14,8 +14,8 @@ L.StyleEditor.formElements.ColorElement = L.StyleEditor.formElements.FormElement _getColorRamp: function() { if (!this.options.colorRamp) { // if markers have own colorRamp use it - if (this.options.parentForm instanceof L.StyleEditor.forms.MarkerForm && !! this.options.styleEditorOptions.markerType.colorRamp){ - this.options.colorRamp = this.options.styleEditorOptions.markerType.colorRamp; + if (this.options.parentForm instanceof L.StyleEditor.forms.MarkerForm && !! this.options.styleEditorOptions.markerType.options.colorRamp){ + this.options.colorRamp = this.options.styleEditorOptions.markerType.options.colorRamp; // else use the default } else { this.options.colorRamp = this.options.styleEditorOptions.colorRamp; diff --git a/src/javascript/FormElements/IconElement.js b/src/javascript/FormElements/IconElement.js index 07138d4..d653907 100644 --- a/src/javascript/FormElements/IconElement.js +++ b/src/javascript/FormElements/IconElement.js @@ -9,7 +9,7 @@ L.StyleEditor.formElements.IconElement = L.StyleEditor.formElements.FormElement. /** create the icon selectBoxes */ createContent: function() { var uiElement = this.options.uiElement; - var selectBox = L.DomUtil.create('button', 'leaflet-styleeditor-select', uiElement); + var selectBox = L.DomUtil.create('div', 'leaflet-styleeditor-select', uiElement); var selectBoxImage = this.options.selectBoxImage = this._createSelectInputImage(selectBox); L.DomEvent.addListener(selectBox, 'click', this._toggleSelectInput, this); @@ -18,7 +18,7 @@ L.StyleEditor.formElements.IconElement = L.StyleEditor.formElements.FormElement. /** show the correct icon in the correct color if the icon or color changed */ style: function () { this._styleSelectInputImage(this.options.selectBoxImage, - this.options.styleEditorOptions.markerType.options.iconOptions.icon); + this.options.styleEditorOptions.markerType.getIconOptions().icon); this._createColorSelect(this.options.styleEditorOptions.markerType.options.iconOptions.iconColor); this._hideSelectOptions(); }, @@ -30,7 +30,8 @@ L.StyleEditor.formElements.IconElement = L.StyleEditor.formElements.FormElement. /** create image container that hides/shows the iconSelectBox */ _createSelectInputImage: function(parentUiElement) { - return L.DomUtil.create('div', 'leaflet-styleeditor-select-image', parentUiElement); + var wrapper = L.DomUtil.create('div', 'leaflet-styleeditor-select-image-wrapper', parentUiElement); + return L.DomUtil.create('div', 'leaflet-styleeditor-select-image', wrapper); }, /** create appropriate image for color and icon */ @@ -42,7 +43,7 @@ L.StyleEditor.formElements.IconElement = L.StyleEditor.formElements.FormElement. } } - var iconOptions = this.options.styleEditorOptions.markerType.options.iconOptions; + var iconOptions = this.options.styleEditorOptions.markerType.getIconOptions(); if (!!color) { iconOptions.iconColor = color; } @@ -78,11 +79,12 @@ L.StyleEditor.formElements.IconElement = L.StyleEditor.formElements.FormElement. if (target.nodeName === 'UL') { return; } - while (target.nodeName !== 'LI') { + if(target.parentNode.className === 'leaflet-styleeditor-select-image') { target = target.parentNode; - } - if (target.nodeName === 'LI') { - target = target.childNodes[0]; + } else { + while (target && target.className !== 'leaflet-styleeditor-select-image') { + target = target.childNodes[0]; + } } this._selectMarker({ 'target': target diff --git a/src/javascript/FormElements/SizeElement.js b/src/javascript/FormElements/SizeElement.js index 2f08985..c682bdb 100644 --- a/src/javascript/FormElements/SizeElement.js +++ b/src/javascript/FormElements/SizeElement.js @@ -8,17 +8,17 @@ L.StyleEditor.formElements.SizeElement = L.StyleEditor.formElements.FormElement. var uiElement = this.options.uiElement; var select = L.DomUtil.create('div', 'leaflet-styleeditor-sizeicon sizeicon-small', uiElement); L.DomEvent.addListener(select, 'click', function () { - this.setStyle([20, 50]); + this.setStyle(this.options.styleEditorOptions.markerType.options.size.small); }, this); select = L.DomUtil.create('div', 'leaflet-styleeditor-sizeicon sizeicon-medium', uiElement); L.DomEvent.addListener(select, 'click', function () { - this.setStyle([30, 70]); + this.setStyle(this.options.styleEditorOptions.markerType.options.size.medium); }, this); select = L.DomUtil.create('div', 'leaflet-styleeditor-sizeicon sizeicon-large', uiElement); L.DomEvent.addListener(select, 'click', function () { - this.setStyle([35, 90]); + this.setStyle(this.options.styleEditorOptions.markerType.options.size.large); }, this); } }); \ No newline at end of file diff --git a/src/javascript/Marker/DefaultMarker.js b/src/javascript/Marker/DefaultMarker.js index 359d25e..864b8d4 100644 --- a/src/javascript/Marker/DefaultMarker.js +++ b/src/javascript/Marker/DefaultMarker.js @@ -4,31 +4,39 @@ */ L.StyleEditor.marker.DefaultMarker = L.StyleEditor.marker.Marker.extend({ - createMarkerIcon: function (iconOptions) { + createMarkerIcon: function (iconOptions, iconClass) { + if (!iconClass) { + iconClass = ''; + } + var iconSize = iconOptions.iconSize; return new L.Icon({ iconUrl: this._getMarkerUrlForStyle(iconOptions), iconSize: iconOptions.iconSize, iconColor: iconOptions.iconColor, icon: iconOptions.icon, + className: iconClass, iconAnchor: [iconSize[0] / 2, iconSize[1] / 2], popupAnchor: [0, -iconSize[1] / 2] }); }, createSelectHTML: function (parentUiElement, iconOptions, icon) { - var iconUrl = this._getMarkerUrl([20,30], iconOptions.iconColor, icon); - var image = L.DomUtil.create('IMG', '', parentUiElement); - image.src = iconUrl; + var tmpOptions = {}; + tmpOptions.iconSize = this.options.size.small; + tmpOptions.icon = icon; + tmpOptions.iconColor = iconOptions.iconColor; + + parentUiElement.innerHTML = this.createMarkerIcon(tmpOptions, this.options.selectIconClass).createIcon().outerHTML; }, setStyle: function(styleOption, value) { - if (styleOption != 'icon') { + if (styleOption !== 'icon') { styleOption = 'icon' + styleOption.charAt(0).toUpperCase() + styleOption.slice(1); } var iconOptions = this.options.iconOptions; - if(iconOptions[styleOption] != value) { + if(iconOptions[styleOption] !== value) { iconOptions[styleOption] = value; this.setNewMarker(); } @@ -39,8 +47,8 @@ L.StyleEditor.marker.DefaultMarker = L.StyleEditor.marker.Marker.extend({ }, _getMarkerUrl: function(size, color, icon) { - size = this._size(size); - if (color.indexOf('#') == 0) { + size = this.sizeToName(size)[0]; + if (color.indexOf('#') === 0) { color = color.replace('#', ''); } else { color = this.options.styleEditorOptions.util.rgbToHex(color, true); @@ -52,19 +60,8 @@ L.StyleEditor.marker.DefaultMarker = L.StyleEditor.marker.Marker.extend({ return url + '+' + color + '.png'; }, - _size: function (size) { - if (size[0] >= 30) { - if(size[0] >= 35) { - return 'l'; - } else { - return 'm'; - } - } else { - return 's'; - } - }, - options: { + selectIconClass: 'defaultmarker', markers: [ 'circle-stroked', 'circle', diff --git a/src/javascript/Marker/GlyphiconMarker.js b/src/javascript/Marker/GlyphiconMarker.js index 36a973e..9b0ebaf 100644 --- a/src/javascript/Marker/GlyphiconMarker.js +++ b/src/javascript/Marker/GlyphiconMarker.js @@ -6,7 +6,7 @@ L.StyleEditor.marker.GlyphiconMarker = L.StyleEditor.marker.Marker.extend({ getMarkerHtml: function(size, color, icon) { var iconUrl = this._getMarkerUrl(size, color); return '
' + '
' + '' + @@ -28,12 +28,12 @@ L.StyleEditor.marker.GlyphiconMarker = L.StyleEditor.marker.Marker.extend({ }, setStyle: function(styleOption, value) { - if (styleOption != 'icon') { + if (styleOption !== 'icon') { styleOption = 'icon' + styleOption.charAt(0).toUpperCase() + styleOption.slice(1); } var iconOptions = this.options.iconOptions; - if(iconOptions[styleOption] != value) { + if(iconOptions[styleOption] !== value) { iconOptions[styleOption] = value; this.setNewMarker(); } @@ -43,25 +43,13 @@ L.StyleEditor.marker.GlyphiconMarker = L.StyleEditor.marker.Marker.extend({ parentUiElement.innerHTML = this.getMarkerHtml('s', iconOptions.iconColor, icon); }, - _size: function (size) { - if (size[0] >= 30) { - if(size[0] >= 35) { - return 'l'; - } else { - return 'm'; - } - } else { - return 's'; - } - }, - _getMarkerUrlForStyle: function(iconOptions) { return this._getMarkerUrl(iconOptions.iconSize, iconOptions.iconColor, iconOptions.icon) }, _getMarkerUrl: function(size, color, icon) { - size = this._size(size); - if (color.indexOf('#') == 0) { + size = this.sizeToName(size)[0]; + if (color.indexOf('#') === 0) { color = color.replace('#', ''); } else { color = this.options.styleEditorOptions.util.rgbToHex(color, true); diff --git a/src/javascript/Marker/Marker.js b/src/javascript/Marker/Marker.js index e3760da..7825f39 100644 --- a/src/javascript/Marker/Marker.js +++ b/src/javascript/Marker/Marker.js @@ -1,13 +1,30 @@ /** * The Base class for different markers */ -L.StyleEditor.marker.Marker = L.Class.extend({ +L.StyleEditor.marker.Marker = L.Marker.extend({ /** define markerForm used to style the Marker */ markerForm: L.StyleEditor.forms.MarkerForm, + options: { + size: { + 'small': [20, 50], + 'medium': [30, 70], + 'large': [35, 90] + }, + + selectIconSize: [], + selectIconClass: '' + }, + /** set standard icon */ initialize: function(options) { L.setOptions(this, options); + L.setOptions(this, this.options); + + if (this.options.selectIconClass !== '' && !this.options.selectIconClass.startsWith('leaflet-styleeditor-select-image')) { + this.options.selectIconClass = 'leaflet-styleeditor-select-image-' + this.options.selectIconClass; + } + }, /** create new Marker and show it */ @@ -23,8 +40,12 @@ L.StyleEditor.marker.Marker = L.Class.extend({ /** set styling options */ setStyle: function (styleOption, value) { + if (styleOption !== 'icon') { + styleOption = 'icon' + styleOption.charAt(0).toUpperCase() + styleOption.slice(1); + } + var iconOptions = this.getIconOptions(); - if(iconOptions[styleOption] != value) { + if(iconOptions[styleOption] !== value) { iconOptions[styleOption] = value; this.setNewMarker(); } @@ -32,26 +53,16 @@ L.StyleEditor.marker.Marker = L.Class.extend({ /** create HTML used to */ createSelectHTML: function(parentUiElement, iconOptions, icon) { - this.createSelectHTML(parentUiElement, iconOptions, icon); }, + /** get the current iconOptions + * if not set set them + */ getIconOptions: function() { if (!this.options.iconOptions) { - var color = this.options.styleEditorOptions.defaultColor; - if (color == null) { - color = this.options.defaultColor; - } - if (color == null && this.options.colorRamp != null) { - color = this.options.colorRamp[0]; - } - if (color == null) { - color = this.options.styleEditorOptions.colorRamp[0]; - } - - color = this.options.styleEditorOptions.util.rgbToHex(color); - + var color = this._getDefaultMarkerColor(); this.options.iconOptions = { - iconSize: [20, 50], + iconSize: this.options.styleEditorOptions.markerType.options.size.small, iconColor: color, icon: this.options.styleEditorOptions.util.getDefaultMarkerForColor(color) }; @@ -60,11 +71,15 @@ L.StyleEditor.marker.Marker = L.Class.extend({ return this._ensureMarkerIcon(this.options.iconOptions); }, + /** call createMarkerIcon with the correct iconOptions */ _createMarkerIcon: function(iconOptions) { iconOptions = this.getIconOptions(iconOptions); return this.createMarkerIcon(iconOptions); }, + /** check that the icon set in the iconOptions exists + * else set default icon + */ _ensureMarkerIcon: function(iconOptions) { var markers = this.options.styleEditorOptions.util.getMarkersForColor(iconOptions.iconColor); @@ -76,7 +91,85 @@ L.StyleEditor.marker.Marker = L.Class.extend({ return iconOptions; - } + }, + + /** return default marker color + * + * will return the first of the following which is set and supported by the markers + * 1. styleEditorOptions.defaultMarkerColor + * 2. styleEditorOptions.defaultColor + * 3. first color of the marker's colorRamp which is in the styleeditor.colorRamp + * 4. first color of the marker's colorRamp + * */ + _getDefaultMarkerColor: function() { + var markerTypeColorRamp = this.options.colorRamp; + var generalColorRamp = this.options.styleEditorOptions.colorRamp; + var intersectedColorRamp = []; + + if (typeof markerTypeColorRamp !== 'undefined' && markerTypeColorRamp !== null) { + intersectedColorRamp = markerTypeColorRamp.filter((n) => generalColorRamp.includes(n)); + if (intersectedColorRamp.length ===0) { + intersectedColorRamp = markerTypeColorRamp; + } + } else { + intersectedColorRamp = generalColorRamp; + } + + var color = this.options.styleEditorOptions.defaultMarkerColor; + if (color !== null && !intersectedColorRamp.includes(color)) { + color = null; + } + + if (color === null) { + color = this.options.styleEditorOptions.defaultColor; + if (color !== null && !intersectedColorRamp.includes(color)){ + color = null; + } + + if (color === null) { + color = intersectedColorRamp[0]; + } + } + return this.options.styleEditorOptions.util.rgbToHex(color); + }, + + /** return size as keyword */ + sizeToName: function (size) { + var keys = Object.keys(this.options.size); + + if (typeof size === 'string') { + if (size === 's') { + size = 'small'; + } else if (size === 'm') { + size = 'medium'; + } else if (size === 'l') { + size = 'large'; + } + + for (i = 0; i < keys.length; i++) { + if (this.options.size[keys[i]] === size) { + return keys[i]; + } + } + } + + var values = Object.values(this.options.size); + for (var i=0; i controlMarkers.includes(n)) + return markers.filter((n) => controlMarkers.includes(n)); } return markers; }, @@ -152,8 +152,8 @@ L.StyleEditor.Util = L.Class.extend({ var defMarkers = []; - var defaultMarker = this.options.styleEditorOptions.defaultMarker; - if (defaultMarker != null) { + var defaultMarker = this.options.styleEditorOptions.defaultMarkerIcon; + if (defaultMarker !== null) { if (typeof defaultMarker === 'string') { defMarkers.push(defaultMarker); } @@ -163,8 +163,8 @@ L.StyleEditor.Util = L.Class.extend({ } - defaultMarker = this.options.styleEditorOptions.markerType.options.defaultMarker; - if (defaultMarker != undefined) { + defaultMarker = this.options.styleEditorOptions.markerType.options.defaultMarkerIcon; + if (defaultMarker !== undefined) { if (typeof defaultMarker === 'string') { defMarkers.push(defaultMarker); }