Integrate Support for GeoJSON

Gruntfile.js

@@ -29,8 +29,7 @@ module.exports = function(grunt) {
           'dist/layer.js':        ['src/layer.js'],
           'dist/leaflet.js':      ['dist/leaflet-src.js',
                                    'dist/proj4-src.js',
-                                   'dist/proj4leaflet.js'],
-          'dist/lib/geojson.js':  ['src/geojson/geojson.js']
+                                   'dist/proj4leaflet.js']
         } 
       }
     },

src/layer.js

@@ -74,7 +74,7 @@ export class MapLayer extends HTMLElement {
     super();
   }
   disconnectedCallback() {
-//    console.log('Custom map element removed from page.');
+    //    console.log('Custom map element removed from page.');
     // if the map-layer node is removed from the dom, the layer should be
     // removed from the map and the layer control 
 
@@ -109,7 +109,7 @@ export class MapLayer extends HTMLElement {
     if(this.parentNode._map)this.parentNode.dispatchEvent(new CustomEvent('createmap'));
   }
   adoptedCallback() {
-//    console.log('Custom map element moved to new page.');
+  //    console.log('Custom map element moved to new page.');
   }
   attributeChangedCallback(name, oldValue, newValue) {
     switch(name) {
@@ -292,7 +292,7 @@ export class MapLayer extends HTMLElement {
     // for one thing, layers which are checked by the author before 
     // adding to the map are displayed despite that they are not visible
     // See issue #26
-//        this._layer._map.fire('moveend');
+    //        this._layer._map.fire('moveend');
   }
   _removeEvents() {
     if (this._layer) {
@@ -362,4 +362,7 @@ export class MapLayer extends HTMLElement {
     if(zOffset === 1 && newZoom - 1 >= 0) newZoom--;
     map.setView(center, newZoom, {animate: false});
   }
+  mapml2geojson(options = {}){
+    return M.mapml2geojson(this, options);
+  }
 }

src/mapml-viewer.js

@@ -315,10 +315,13 @@ export class MapViewer extends HTMLElement {
   }
   _dropHandler(event) {
     event.preventDefault();
-    // create a new <layer-> child of this <mapml-viewer> element
+    let text = event.dataTransfer.getData("text");
+    try {
+      new URL(text);
+      // create a new <layer-> child of this <mapml-viewer> element
       let l = new MapLayer();
       l.src = event.dataTransfer.getData("text");
-      l.label = 'Layer';
+      l.label = M.options.locale.dfLayer;
       l.checked = 'true';
       this.appendChild(l);
       l.addEventListener("error", function () {
@@ -329,20 +332,21 @@ export class MapViewer extends HTMLElement {
         // garbage collect it
         l = null;
       });
+    } catch (err) {
+      text = text.replace(/(<!--.*?-->)|(<!--[\S\s]+?-->)|(<!--[\S\s]*?$)/g, '').trim();
+      if ((text.slice(0,7) === "<layer-") && (text.slice(-9) === "</layer->")) {
+        this.insertAdjacentHTML("beforeend", text);
+      } else {
+        try {
+          this.geojson2mapml(JSON.parse(text));
+        } catch {
+          console.log("Invalid Input!");
+        }}
+    }
   }
   _dragoverHandler(event) {
-    function contains(list, value) {
-      for( var i = 0; i < list.length; ++i ) {
-        if(list[i] === value) return true;
-      }
-      return false;
-    }
-    // check if the thing being dragged is a URL
-    var isLink = contains( event.dataTransfer.types, "text/uri-list");
-    if (isLink) {
-      event.preventDefault();
-      event.dataTransfer.dropEffect = "copy";
-    }
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "copy";
   }
   _removeEvents() {
     if (this._map) {
@@ -368,6 +372,41 @@ export class MapViewer extends HTMLElement {
               {target: this}}));
       }
     });
+    // pasting layer- and geojson using Ctrl+V 
+    this.parentElement.addEventListener('keydown', function (e) {
+      if(e.keyCode === 86 && e.ctrlKey && document.activeElement.nodeName === "MAPML-VIEWER"){
+        navigator.clipboard
+          .readText()
+          .then(
+            (layer) => {
+              try {
+                new URL(layer);
+                // create a new <layer-> child of this <mapml-viewer> element
+                let l = new MapLayer();
+                l.src = layer;
+                l.label = M.options.locale.dfLayer;
+                l.checked = 'true';
+                document.activeElement.appendChild(l);
+                l.addEventListener("error", function () {
+                  if (l.parentElement) {
+                    // should invoke lifecyle callbacks automatically by removing it from DOM
+                    l.parentElement.removeChild(l);
+                  }
+                  // garbage collect it
+                  l = null;
+                });
+              } catch (err) {
+                layer = layer.replace(/(<!--.*?-->)|(<!--[\S\s]+?-->)|(<!--[\S\s]*?$)/g, '').trim();
+                if ((layer.slice(0,7) === "<layer-") && (layer.slice(-9) === "</layer->")) {
+                  document.activeElement.insertAdjacentHTML("beforeend", layer);
+                } else {
+                  try {
+                    document.activeElement.geojson2mapml(JSON.parse(layer));
+                  } catch {
+                    console.log("Invalid Paste!");
+                  }}
+              }});
+      }});
     this.parentElement.addEventListener('mousedown', function (e) {
       if(document.activeElement.nodeName === "MAPML-VIEWER"){
         document.activeElement.dispatchEvent(new CustomEvent('mapfocused', {detail:
@@ -746,6 +785,15 @@ export class MapViewer extends HTMLElement {
     M[t.projection.toUpperCase()] = M[t.projection]; //adds the projection uppercase to global M
     return t.projection;
   }
+
+  geojson2mapml(json, options = {}){
+    if (options.projection === undefined) {
+      options.projection = this.projection;
+    }
+    let geojsonLayer = M.geojson2mapml(json, options);
+    this.appendChild(geojsonLayer);
+    return geojsonLayer;
+  }
 }
 // need to provide options { extends: ... }  for custom built-in elements
 window.customElements.define('mapml-viewer', MapViewer);

src/mapml/handlers/ContextMenu.js

@@ -243,9 +243,21 @@ export var ContextMenu = L.Handler.extend({
       .readText()
       .then(
           (layer) => {
-            layer = layer.replace(/(<!--.*?-->)|(<!--[\S\s]+?-->)|(<!--[\S\s]*?$)/g, '').trim();
-            if ((layer.slice(0,7) === "<layer-") && (layer.slice(-9) === "</layer->")) {
-              mapEl.insertAdjacentHTML("beforeend", layer);
+            try {
+              new URL(layer);
+              // create a new <layer-> child of this <mapml-viewer> element
+              let l = '<layer- src="' + layer + '" label="' + M.options.locale.dfLayer + '" checked=""></layer->';
+              mapEl.insertAdjacentHTML("beforeend", l);
+            } catch (err) {
+              layer = layer.replace(/(<!--.*?-->)|(<!--[\S\s]+?-->)|(<!--[\S\s]*?$)/g, '').trim();
+              if ((layer.slice(0,7) === "<layer-") && (layer.slice(-9) === "</layer->")) {
+                mapEl.insertAdjacentHTML("beforeend", layer);
+              } else {
+                try {
+                  mapEl.geojson2mapml(JSON.parse(layer));
+                } catch {
+                  console.log("Invalid Input!");
+                }}
             }
         }
       );

src/mapml/index.js

@@ -606,6 +606,14 @@ M.parseStylesheetAsHTML = Util.parseStylesheetAsHTML;
 M.pointToPCRSPoint = Util.pointToPCRSPoint;
 M.pixelToPCRSPoint = Util.pixelToPCRSPoint;
 M.gcrsToTileMatrix = Util.gcrsToTileMatrix;
+M.properties2Table = Util.properties2Table;
+M.updateExtent = Util.updateExtent;
+M.geojson2mapml = Util.geojson2mapml;
+M.breakArray = Util.breakArray;
+M.table2properties = Util.table2properties;
+M.geometry2geojson = Util.geometry2geojson;
+M.pcrsToGcrs = Util.pcrsToGcrs;
+M.mapml2geojson = Util.mapml2geojson;
 
 M.QueryHandler = QueryHandler;
 M.ContextMenu = ContextMenu;

src/mapml/options.js

@@ -41,5 +41,6 @@ export var Options = {
     kbdZoom: "Zoom in/out 3 levels",
     kbdPrevFeature: "Previous feature",
     kbdNextFeature: "Next feature",
+    dfLayer: "Layer",
   }
 };