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-renderers.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-clusterlayer.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="hybrid" autoresize latitude="-35.29306353356183" longitude="149.0887731608978" zoom="7" id="map">
          <esri-clusterlayer useDefaultSymbol="false" 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="15" line_style="STYLE_SOLID" id="esriSLS" color="[255,0,0,0.25]">
          </esri-simple-line-symbol>
          <esri-simple-marker-symbol size="50" marker_style="STYLE_CIRCLE" id="esriSMS" fill_color="[255,0,0,0.5]">
          </esri-simple-marker-symbol>
          <class-break-renderer id="classBreaks" layer="{{ $.playgroundLocations.clusterLayer }}" default_symbol="{{ $.esriPMS.symbol }}" break_field="days_until_inspection">
            <esri-class-break label="Class Break 1" id="esri_class_break" minValue="-7" maxValue="0" symbol="{{ $.esriSMS.symbol }}"></esri-class-break>
            <esri-class-break label="Class Break 2" id="esri_class_break2" minValue="1" maxValue="7" symbol="{{ $.esriPMS.symbol }}"></esri-class-break>
  				</class-break-renderer>
          
          
          
        </esri-map>
      </section>
    </core-header-panel>
  </template>

  <script>

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

  </script>

</polymer-element>