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:
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
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:
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.