Add support for loading a WebMap JSON

[ajturner]

The WebMap JSON specification provides a simple way to encapsulate a list of layers, map styling, basemap, and bookmarks.

It would be useful to provide support for loading any WebMap JSON into leaflet, and also encourage other tools to consume and publish WebMaps.

[patrickarlt]

From @swingley

Agreed that this should know how to handle maps from arcgis.com– after all, if the purpose of this lib is to make it easier for devs to access our services, you could argue that maps from arcgis.com are another (albeit more complex) service that apps need to communicate with. It would also encourage people to use arcgis.com to author their maps, or at least start there to select a basemap and add some data (csv, kml, georss…maybe geocode a file and store that).

I started a repo a few weeks back to show how you can serialize an instance of esri/Map to a json object you can push to arcgis.com: https://github.com/swingley/cereal It uses the JS API but one thing of note might be this feature collection shell: https://github.com/swingley/cereal/blob/master/extras/feature-collection-shell.js

[patrickarlt]

Ok Im on board for the interoperability part of this. But im worried that this could really bloat the size and complexity of the library.

This will be a massive amount of work. For example this would require...

• Popups
• Renderers
• GeoRSS (Wasn't planned since there are other Leaflet GeoRSS layers)
• FeatureCollections (Probably would have been on the roadmap)
• CSV (Wasn't even aware this was a thing)
• WMS Layers (Not Planned since there are other WMS Leaflet plugins)
• A charting library to handle charts in popups (or do we not handle charts?)
• A bookmark widget (or do we not handle bookmarks?)

This would also inherit all the limitations of current layers, FeatureLayers only in Mercator or Geographic, Maps only in Mercator.

[swingley]

Agreed on bloat. I think the first pass at this should be to support popups, renderers and feature collections. Maybe CSV's depending on the amount of work required. GeoRSS, WMS, charting and bookmarks can wait, IMO.

[ajturner]

How about making this a stand-alone module. That way developers can pull it in if they need to.

It may also be interesting to use this type of module as a precompile step for mostly static sites that have a single map. The module would load the JSON and generate the Esri-Leaflet code that then is used in production.

[patrickarlt]

I like the idea of this being a separate module.

@swingley @ajturner feature collections are just feature layers that are defined entirely in JSON (or in memory) so something like.

L.esri.FeatureCollection(json, options).addTo(map);

Next question. Is it possible to save feature collections as portal items? should we also accecpt an item id in FeatureCollection and make a request for the data?

[patrickarlt]

Probably need to break this out into several other issues before this can happen...

• [ ] L.esri.FeatureCollection
• [ ] support renderer objects on FeatureLayer and FeatureCollection
• [ ] support popups on FeatureLayer, FeatureCollection and DynamicMapLayer
• [ ] all classes should have a toWebMapJSON that will return the proper WebMap JSON structure
• [ ] extend existing Leaflet classes with a toWebMapJSON so theoretically any leaflet map could be saved as JSON.

[swingley]

@patrickarlt yes, feature colletions are a JSON representation of a feature layer. In the JS API, esri/layers/FeatureLayer can take a JSON object or a URL. To go the other way, esri/layers/FeatureLayer has a toJson() method which outputs a feature collection.

You can store a feature collections as an item but I don't think this is documented yet. We should stick with map from arcgis.com for the time being.

I'm on board with modular code. How does leaflet manage modules?

[patrickarlt]

Leaflet doesn't adhere to any module system. They just logically organize files and have a buildscript that concatenates everything in the right order.

By a "separate module" we would just add another section to https://github.com/Esri/esri-leaflet/blob/master/Gruntfile.js#L55-L70 to build out another file that developers could use when they wanted web map support.

[davewalk]

@patrickarlt @swingley @ajturner Hey guys, just wanted to +1 this. I would probably use it in Phila.gov/map, Philly's mapping portal. I'm looking for the most lightweight way to load AGO maps. I'd just need the pop-ups and layer info. Thanks!

[ecaldwell]

Adding another +1 to this request. We've got some more use cases that we'd like to do this with in the near future. I'll dig through the action items @patrickarlt outlined and see if there's anything I can do to assist/contribute.

[jvrunion]

I am very interested in this for a project that I am on for National Geographic, if I can get close to the support that dojo gives for arcGIS in leaflet and ESRI, this will be a a nationally viewed app. Currently the director has supplied me with a serialized JSON object that I want use to load all of National Geographic's layers and use them globally. @swingley your mention above seems to be the solution...here is a snippet of the JSON OBJECT:

"layers": [
    {
      "label": "Ocean Surface Currents",
      "baseUrl": "http://images.nationalgeographic.com/edu-tiles/oceanCur",
      "imageType": "png",
      "iconUrl": "http://education.nationalgeographic.com/media/richmedia/0/175/project/img/ngep/OceanCurrentsIcon.png",
      "source": "National Geographic Society",
      "description": "The ocean is a dynamic system that moves energy around the globe. Ocean surface currents bring warm water from the equatorial regions to polar regions and cold water from the polar regions back towards the equator.",
      "legend": [
        {
          "color": "0070FF",
          "shape": "rectangle",
          "label": "Cold"
        },
        {
          "color": "FF0000",
          "shape": "rectangle",
          "label": "Warm"
        }
      ],
      "categories": [
        "Physical Systems - Water"
      ]
    },
    {
      "label": "Ocean Chlorophyll",
      "baseUrl": "http://images.nationalgeographic.com/edu-tiles/oceanChlor",
      "imageType": "jpg",
      "iconUrl": "http://education.nationalgeographic.com/media/richmedia/0/175/project/img/ngep/OceanChlorophyllIcon.png",
      "source": "NASA OceanColor (oceancolor.gsfc.nasa.gov)",
      "description": "This map layer shows the yearly average chlorophyll present near the ocean surface, as measured by satellite sensors in 2009. Chlorophyll is used by microscopic marine organisms called phytoplankton during photosynthesis. Phytoplankton are at the bottom of the marine food chain and by studying chlorophyll concentration, scientists can determine whether a body of water is healthy or not.",
      "legend": [
        {
          "color": "FFBE5A",
          "shape": "rectangle",
          "label": "High"
        },
        {
          "color": "FFFF5A",
          "shape": "rectangle",
          "label": " "
        },
        {
          "color": "6BFF5A",
          "shape": "rectangle",
          "label": " "
        },
        {
          "color": "5ACFFF",
          "shape": "rectangle",
          "label": " "
        },
        {
          "color": "5A59FF",
          "shape": "rectangle",
          "label": "Low"
        }
      ],
      "categories": [
        "Physical Systems - Water"
      ]
    }

I'm new with mapping but this plugin is saving me from dojo!

(on a side using ember.js for templating models and map data on demand.);

Cheers!

[ajturner]

@dbouwman has some nice extensions to @swingley project that I think could be brought back in for an independent module.

[patrickarlt]

I'm going to close this in favor of making this an external plugin that extends Esri Leaflet with this capability https://github.com/Esri/esri-leaflet/issues/182.

Given the scope of what would be required to make this happen I am not going to be able to devote any time to it so it will be up to the community to make this happen if the interest is strong enough.