Esri Polymer
Esri Polymer
This is a quick post to talk a little bit about Esri Polymer! It's a project I've been working on for a little while (very intermittently) but never put on GeoNet, so thought I would make this post!
Before I begin to start talking about the project I would like to point out what Polymer is. Polymer is a library from Google for building web components. It allows developers to create custom compartmentalised HTML elements. In a way you can think of a web component similar to a 'widget'. Some contrived examples might be a an image carousel, a YouTube video, or a PayPal checkout, or rather a <image-carousel> , a <youtube-video> and a <paypal-checkout> 
Polymer provides a light wrapper around some native/polyfilled web standards that make up web components, namely:
- Custom Elements - for defining a unique custom element
- HTML Imports - for importing HTML
- Shadow Dom - for encapsulating sub trees of DOM
- HTML Template - for reusable inert pieces of DOM
The necessary polyfills come curtsy of webcomponents.js which allow web components to run on all modern evergreen browsers.
Great stuff James, but why would I ever want to use web components?
The major reason is that it allows us to write markup and code an abstracted level. You can import a web component into your page and mark it up in your HTML page just like you would a div or a span, or any other element without having to worry about the underlying implementation.
This works great with things like basemaps, web maps, feature layers, and markers. Each one of those becomes its own element, and we can have feature layers as child elements of a map add them to it.
For example:
<esri-map basemap="dark-gray" centerLng="-0.122" centerLat="51.514" zoom="7">
<esri-featurelayer
featurelayer="http://services.arcgis.com/Qo2anKIAMzIEkIJB/arcgis/rest/services/TubeMap/FeatureServer/2">
</esri-featurelayer>
<esri-marker lng="-0.5" lat="51.3">
<esri-marker-title>Hello World</esri-marker-title>
<esri-marker-content>Some Content</esri-marker-content>
</esri-marker>
</esri-map>
will produce the following once rendered:
Caveats
- Web components are only supported with polyfills on modern browsers
- Polymer is a relatively early stage project
- Some argue that you shouldn't use web components in production
If you can live with these things than they are great fun to experiment with!
GitHub
You can find the project here: JamesMilnerUK/esri-polymer · GitHub
The Latest Version
I've just updated the project, hopefully with some certain niceties:
- Polymer 1.1.5
- ArcGIS JS 3.14
- Cleaner code
- Less hacky hacks for element lifecycles and interacting with parent and child elements