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="../esri-html5/esri-map.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-clusterlayer.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-symbols.html">
<link rel="import" href="../esri-html5/esri-renderers.html">
<link rel="import" href="../esri-html5/esri-locate.html">

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

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #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);
      }
      #section {
        height: 100%;
        background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230));
      }
      #map {
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
      }
    </style>
    <core-header-panel mode="standard" id="core_header_panel">
      <core-toolbar id="core_toolbar">
        <div id="div">Suprim's Awesome Map</div>
      </core-toolbar>
      <section id="section">
        <esri-map basemap="none" autoresize zoom="2" id="map">
          <esri-imageservicelayer url="http://actmapi.act.gov.au/actmapi/rest/services/mga/dopm2014mga/ImageServer" id="modisLayer"></esri-imageservicelayer>
          <esri-dynamicmapservicelayer url="http://actmapi.act.gov.au/actmapi/rest/services/mga/road_labels/MapServer" id="labels"></esri-dynamicmapservicelayer>
          <esri-featurelayer url="http://services.arcgis.com/uH2bZ8EU7r86PYdN/arcgis/rest/services/Playground_L1_ACTPG/FeatureServer/3" id="playgrounds">
            <esri-infotemplate title="Properties" id="infoTemplate">${*}</esri-infotemplate>
          </esri-featurelayer>
          <esri-clusterlayer url="http://services.arcgis.com/uH2bZ8EU7r86PYdN/arcgis/rest/services/Playground_L1_ACTPG/FeatureServer/3" singlesymbol="{{ $.esriPMS.symbol }}" id="playgroundLocations">
          </esri-clusterlayer>
          <esri-geocoder id="esri_geocoder"></esri-geocoder>
          <esri-scalebar id="esri_scalebar"></esri-scalebar>
          <esri-picture-marker-symbol url="http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png" offset_y="15" width="32" height="32" id="esriPMS">
          </esri-picture-marker-symbol>
          <esri-simple-line-symbol line_width="5" line_style="STYLE_SOLID" id="esriSLS" color="[255,0,0,0.25]">
          </esri-simple-line-symbol>
          <esri-simple-marker-symbol marker_style="STYLE_CIRCLE" id="esriSMS" fill_color="[255,0,0,0.5]">
          </esri-simple-marker-symbol>
          <esri-simple-line-symbol line_width="5" line_style="STYLE_SOLID" id="esriSLS_g" color="[0,148,0,0.25]">
          </esri-simple-line-symbol>
          <esri-simple-marker-symbol marker_style="STYLE_CIRCLE" id="esriSMS_g" fill_color="[0,148,0,0.5]">
          </esri-simple-marker-symbol>
          <esri-simple-line-symbol line_width="5" line_style="STYLE_SOLID" id="esriSLS_y" color="[255,191,0,0.25]">
          </esri-simple-line-symbol>
          <esri-simple-marker-symbol marker_style="STYLE_CIRCLE" id="esriSMS_y" fill_color="[255,191,0,0.5]">
          </esri-simple-marker-symbol>
          <esri-class-break-renderer default_symbol="{{ $.esriPMS.symbol }}" break_field="days_until_inspection" layer="{{ $.playgrounds.layer }}" id="classBreaks">
            <esri-class-break minvalue="-7" maxvalue="-2" label="Class Break 1" symbol="{{ $.esriSMS.symbol }}" id="esri_class_break"></esri-class-break>
            <esri-class-break minvalue="-1" maxvalue="1" label="Class Break 2" symbol="{{ $.esriSMS_y.symbol }}" id="esri_class_break2"></esri-class-break>
            <esri-class-break minvalue="2" maxvalue="7" label="Class Break 2" symbol="{{ $.esriSMS_g.symbol }}" id="esri_class_break3"></esri-class-break>
          </esri-class-break-renderer>
          <esri-locate map="{{ $.map.map }}" id="esri_locate"></esri-locate>
        </esri-map>
      </section>
    </core-header-panel>
  </template>

  <script>

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

  </script>

</polymer-element>