Integrate Support for GeoJSON (#707)

* Add mapml2geojson and geojson2mapml functions to M.Util

* geojson versions for mapml-viewer and layer

* Add support for pasting GeoJSON

* Paste Layers using Ctrl+v

* Add default extent when json.bbox not present

* Add the ability to drag and drop layer-'s links and GeoJSON to the viewer

* Add localized default layer name

* Add ability to paste links using context menu and ctrl+v + Add more tests

* Create function for paste (pasteLayer), instead of repeating code

* make helper functions 'private'

* add bbox extent when given a feature

* Add test case for geojson feature (bbox/extent test)

Author: AliyanH

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/geojson/geojson.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/layer.js

@@ -315,34 +315,12 @@ export class MapViewer extends HTMLElement {
   }
   _dropHandler(event) {
     event.preventDefault();
-    // create a new <layer-> child of this <mapml-viewer> element
-      let l = new MapLayer();
-      l.src = event.dataTransfer.getData("text");
-      l.label = 'Layer';
-      l.checked = 'true';
-      this.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;
-      });
+    let text = event.dataTransfer.getData("text");
+    M._pasteLayer(this, text);
   }
   _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 +346,16 @@ export class MapViewer extends HTMLElement {
               {target: this}}));
       }
     });
+    // pasting layer-, links 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) => {
+              M._pasteLayer(document.activeElement, layer);
+            });
+      }});
     this.parentElement.addEventListener('mousedown', function (e) {
       if(document.activeElement.nodeName === "MAPML-VIEWER"){
         document.activeElement.dispatchEvent(new CustomEvent('mapfocused', {detail:
@@ -746,6 +734,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-viewer.js

@@ -88,7 +88,7 @@ export var ContextMenu = L.Handler.extend({
       },
       {
         text: M.options.locale.cmPasteLayer + " (<kbd>P</kbd>)",
-        callback:this._pasteLayer,
+        callback:this._paste,
       },
       {
         text: M.options.locale.cmViewSource + " (<kbd>V</kbd>)",
@@ -236,17 +236,14 @@ export var ContextMenu = L.Handler.extend({
   },
 
   // Add support for pasting GeoJSON in the future
-  _pasteLayer: function(e){
+  _paste: function(e){
     let context = e instanceof KeyboardEvent ? this._map.contextMenu : this.contextMenu,
       mapEl = e instanceof KeyboardEvent?this._map.options.mapEl:this.options.mapEl;
     navigator.clipboard
       .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);
-            }
+            M._pasteLayer(mapEl, layer);
         }
       );
   },
@@ -622,7 +619,7 @@ export var ContextMenu = L.Handler.extend({
           this._copyLayer(e);
         break;
       case 80: //P KEY
-        this._pasteLayer(e);
+        this._paste(e);
         break;
       case 82: //R KEY
         this._reload(e);

src/mapml/handlers/ContextMenu.js

@@ -606,6 +606,15 @@ M.parseStylesheetAsHTML = Util.parseStylesheetAsHTML;
 M.pointToPCRSPoint = Util.pointToPCRSPoint;
 M.pixelToPCRSPoint = Util.pixelToPCRSPoint;
 M.gcrsToTileMatrix = Util.gcrsToTileMatrix;
+M._pasteLayer = Util._pasteLayer;
+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/index.js

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