Changes layer- elements to reflect change in controls

Author: ahmadayubi

src/layer.js

@@ -71,6 +71,7 @@ export class MapLayer extends HTMLElement {
     // this is moved up here so that the layer control doesn't respond
     // to the layer being removed with the _onLayerChange execution
     // that is set up in _attached:
+    if(this.hasAttribute("moving")) return;
     this._removeEvents();
     if (this._layer._map) {
       this._layer._map.removeLayer(this._layer);
@@ -83,6 +84,7 @@ export class MapLayer extends HTMLElement {
   connectedCallback() {
     //creates listener that waits for createmap event, this allows for delayed builds of maps
     //this allows a safeguard for the case where loading a custom TCRS takes longer than loading mapml-viewer.js/web-map.js
+    if(this.hasAttribute("moving")) return;
     this.parentNode.addEventListener('createmap', ()=>{
       this._ready();
       // if the map has been attached, set this layer up wrt Leaflet map

src/mapml.css

@@ -138,6 +138,7 @@
   border: none;
   margin: 0;
   padding: 0;
+  cursor: grab;
 }
 
 .leaflet-control-layers-overlays > fieldset > .mapml-control-layers > summary,
@@ -278,12 +279,6 @@
  * User interaction.
  */
 
-/* Disable dragging of controls. */
-.leaflet-control :not([draggable="true"]),
-.mapml-contextmenu :not([draggable="true"]) {
-  -webkit-user-drag: none;
-}
-
 /* Disable text selection in controls. */
 .leaflet-control,
 .mapml-contextmenu,

src/mapml/layers/MapLayer.js

@@ -488,7 +488,7 @@ export var MapMLLayer = L.Layer.extend({
         opacityControl = document.createElement('details'),
         opacityControlSummary = document.createElement('summary'),
         opacityControlSummaryLabel = document.createElement('label'),
-        root = this._layerEl.parentElement.shadowRoot, map = this._map;
+        root = this._layerEl.parentElement.shadowRoot, map = this._map, viewer = this._layerEl.parentNode;
 
         input.defaultChecked = this._map ? true: false;
         input.type = 'checkbox';
@@ -554,6 +554,11 @@ export var MapMLLayer = L.Layer.extend({
               layers = map.getPane("overlayPane").children,
               zIndex = 1;
           for(let control of controls){
+            let layerEl = control.querySelector("span").layer._layerEl;
+            layerEl.setAttribute("moving","");
+            viewer.insertAdjacentElement("beforeend", layerEl);
+            layerEl.removeAttribute("moving");
+
             for (let layer of layers){
               if(control.querySelector("span").layer._container == layer){
                 layer.style["z-index"] = zIndex;
@@ -564,19 +569,6 @@ export var MapMLLayer = L.Layer.extend({
         };
 
         L.DomEvent.on(opacity,'change', this._changeOpacity, this);
-/*         L.DomEvent.on(details,'ondrag', function(event) {
-          console.log("HERE2");
-            // will have to figure out how to drag and drop a whole element
-            // with its contents in the case where the <layer->content</layer-> 
-            // has no src but does have inline content.  
-            // Should be do-able, I think.
-            if (this._href) {
-              event.dataTransfer.setData("text/uri-list",this._href);
-              // Why use a second .setData("text/plain"...) ? This is very important:
-              // See https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#link
-              event.dataTransfer.setData("text/plain", this._href); 
-            }
-          }, this); */
 
         fieldset.appendChild(details);
         details.appendChild(summary);