designer

designer.html

<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../esri-html5/esri-legend.html">
<link rel="import" href="../esri-html5/esri-map.html">
<link rel="import" href="../esri-html5/esri-geocoder.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">

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

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        top: 0px;
        left: 0px;
      }
      #core_drawer_panel {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
      }
      #section {
        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);
      }
      #section1 {
        height: 100%;
        box-sizing: border-box;
        background-color: rgb(221, 221, 221);
      }
      #map {
        height: 100%;
      }
      #core_selector {
        width: 100%;
        height: 50px;
      }
      #core_menu {
        font-size: 16px;
      }
      #core_toolbar {
        right: 0px;
        color: rgb(255, 255, 255);
        fill: rgb(255, 255, 255);
        background-color: rgb(79, 125, 201);
      }
    </style>
    <core-drawer-panel id="core_drawer_panel" touch-action>
      <section id="section" drawer>
        <esri-legend map="{{ $.map.map }}" id="esri_legend">
    </esri-legend>
      </section>
      <section id="section1" main>
        <esri-map basemap="satellite" autoresize latitude="-35.2819998" longitude="149.12868430000003" zoom="8" id="map">
          <esri-geocoder id="esri_geocoder"></esri-geocoder>
          <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="World Cities" id="infoTemplate">${*}</esri-infotemplate>
          </esri-featurelayer>
          <esri-webtiledlayer id="webtiledLayer"></esri-webtiledlayer>
          <esri-dynamicmapservicelayer id="worldTerrainLayer"></esri-dynamicmapservicelayer>
          <esri-georsslayer id="geoRSSLayer">
            <esri-infotemplate title="Earthquakes - Last 7 days" id="wmsInfo">${*}</esri-infotemplate>
          </esri-georsslayer>
          <esri-csvlayer url="/2.5_week.csv" id="csvLayer">
            <esri-infotemplate title="Earthquake (last 2.5wk)" id="csvInfo">${*}</esri-infotemplate>
          </esri-csvlayer>
        </esri-map>
      </section>
    </core-drawer-panel>
  </template>

  <script>

    Polymer('my-element', {
      ready: function (){
      	this.map=this.$.map;
      }
    });

  </script>

</polymer-element>