designer

designer.html

<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
<link rel="import" href="../esri-html5/esri-map.html">
<link rel="import" href="../esri-html5/esri-scalebar.html">
<link rel="import" href="../esri-html5/esri-layer.html">
<link rel="import" href="../esri-html5/esri-infotemplate.html">
<link rel="import" href="../esri-html5/esri-geocoder.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        top: 0px;
        left: 0px;
      }
      #div {
        left: 1120px;
        top: 530px;
        position: absolute;
      }
      #core_header_panel {
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        position: absolute;
      }
      #core_toolbar {
        color: rgb(255, 255, 255);
        background-color: rgb(79, 125, 201);
      }
      #drawerSection {
        height: 100%;
        background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230));
      }
      #core_drawer_panel {
        right: 0px;
        bottom: 0px;
      }
      #drawPanel {
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        background-color: rgb(250, 250, 250);
      }
      #mapSection {
        height: 100%;
        box-sizing: border-box;
        background-color: rgb(221, 221, 221);
      }
      #map {
        height: 100%;
      }
      #paper_toast {
        display: none;
      }
    </style>
    <div id="div" layout horizontal>
		</div>
    <core-header-panel mode="standard" shadow id="core_header_panel">
      <core-toolbar id="core_toolbar">
        <core-icon-button icon="menu" id="core_icon_button"></core-icon-button>
        <div id="title">
          esri-html5 :: ArcGIS Polymer HTML5 Sampler
        </div>
      </core-toolbar>
      <section id="drawerSection">
        <core-drawer-panel id="core_drawer_panel" touch-action>
          <section id="drawPanel" drawer>
            <core-item icon="visibility" id="worldcities_item" horizontal center layout>
              <paper-checkbox checked="{{ $.worldCitiesLayer.visible }}" label="World Cities FeatureLayer" id="paper_checkbox"></paper-checkbox>
            </core-item>
            <core-item icon="visibility" id="earthquakes_item" horizontal center layout>
              <paper-checkbox checked="{{ $.csvLayer.visible }}" label="Earthquakes Last 2.5w CSV" id="paper_checkbox"></paper-checkbox>
            </core-item>
            <core-item icon="visibility" id="modis_item" horizontal center layout>
              <paper-checkbox checked="{{ $.modisLayer.visible }}" label="MODIS ImageService" id="paper_checkbox"></paper-checkbox>
            </core-item>
            <core-item icon="visibility" id="kml_item" horizontal center layout>
              <paper-checkbox checked="{{ $.kmlLayer.visible }}" label="Wyoming KML" id="paper_checkbox"></paper-checkbox>
            </core-item>
            <core-item icon="visibility" id="georss_item" horizontal center layout>
              <paper-checkbox checked="{{ $.geoRSSLayer.visible }}" label="7day Earthquakes geoRSS" id="paper_checkbox"></paper-checkbox>
            </core-item>
            <core-item icon="visibility" id="webtiled_item" horizontal center layout>
              <paper-checkbox checked="{{ $.webtiledLayer.visible }}" label="Midnight Commander TMS" id="paper_checkbox"></paper-checkbox>
            </core-item>
          </section>
          <section id="mapSection" main>
            <esri-map basemap="streets" autoresize latitude="-35.2819998" longitude="149.12868430000003" zoom="4" id="map">
              <esri-scalebar id="esri_scalebar"></esri-scalebar>
              <esri-featurelayer url="http://sampleserver5.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/0" id="worldCitiesLayer">
                <esri-infotemplate title="Properties" id="infoTemplate">${*}</esri-infotemplate>
              </esri-featurelayer>
              <esri-imageservicelayer id="modisLayer"></esri-imageservicelayer>
              <esri-csvlayer url="/2.5_week.csv" id="csvLayer">
                <esri-infotemplate title="Earthquakes last 2.5wk" id="quakeInfo">${*}</esri-infotemplate>
              </esri-csvlayer>
              <esri-kmllayer id="kmlLayer">
                <esri-infotemplate title="KML Properties" id="kmlInfo">${*}</esri-infotemplate>
              </esri-kmllayer>
              <esri-georsslayer id="geoRSSLayer">
                <esri-infotemplate title="Earthquakes - Last 7 days" id="wmsInfo">${*}</esri-infotemplate>
              </esri-georsslayer>
              <esri-webtiledlayer id="webtiledLayer"></esri-webtiledlayer>
              <esri-geocoder id="esri_geocoder"></esri-geocoder>
            </esri-map>
          </section>
        </core-drawer-panel>
      </section>
    </core-header-panel>
  </template>

  <script>

    Polymer('my-element', {
      
    });

  </script>

</polymer-element>