#Esri Polymer

This project has turned Esri ArcGIS JavaScript web maps and asscociated elements into web components that can be used to create maps decleratively to HTML. It leverages Googles Polymer library which allows users to create custom web components.

The code also includes examples of how to make use of Polymer's variable observation and two way databinding. The example observes zoom level and extent and represents this as inputs on the map which can themselves be changed.

Feature Layers are supported, and come with a default popup which is just a list of key/value pairs formatted nicely.

It currently supports:

• esri-map - Attributes: basemap, zoom, centerLng, centerLat, webMapId (you can use a web map ID to pull through a map)

• esri-featurelayer - Attributes: featurelayer (the feature service url)

• esri-marker - Attributes: lat, lng

  • esri-marker-title - Attributes: none - text goes between tags

  • esri-marker-content - Attributes: none - text goes between tags

#Getting Started

Install bower if you haven't already using npm:

npm install -g bower

Install bower components

bower install

Live serve the demo if you so wish (optional):

npm install live-server
cd src
live-server

An example of using esri-polymer is shown in the esri-polymer.html page in the repository. Usage is as so:

 <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>

For generating a web map from an ID:

 <esri-map webMapId="8960fbd6893348709acac9e7a3b61f0c">
 </esri-map>

#Live Demo

You can see a live demo here

It displays one web map constructed using attributes (basemap, zoom, etc), with a feature layer web component nested inside it and a second map constructed with a web map ID.

#Resources

• Polymer Offical
• Polymer Developer Guide
• Polymer in 10 minutes
• ArcGIS JavaScript API
• ArcGIS for Developers
• A Guide to Web Components
• webcomponents.js
• Stackoverflow - Polymer

#Issues

Find a bug or want to request a new feature? Please let us know by submitting an issue. Thank you!

#Contributing

Anyone and everyone is welcome to contribute. Please see our guidelines for contributing.

#Licensing

Copyright 2015 Esri UK

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's LICENSE file.

[](Esri Tags: ArcGIS Web Components Mapping Polymer Google Framework) [](Esri Language: JavaScript)