Super simple map

<div ol-map>
	<az-layer name="Street" lyr-type="tiles"></az-layer>
</div>

Lots of layers & options

<div ol-map controls="zoom,navigation,layerSwitcher,attribution,mousePosition" control-opts="{navigation:{handleRightClicks:true}}">
	<az-layer name="Street" lyr-type="tiles"></az-layer>
	<az-layer name="Aerial" lyr-type="tiles" lyr-url="http://otile${s}.mqcdn.com/tiles/1.0.0/sat/${z}/${x}/${y}.png"></az-layer>
	<az-layer name="Radar"  lyr-type="wms" lyr-url="http://gis.srh.noaa.gov/ArcGIS/services/Radar_warnings/MapServer/WMSServer"
		layers="0,1" version="1.3.0" crs="EPSG:102100" transparent="true" opacity="0.75"></az-layer>
	<az-layer name="Airports" lyr-type="geojson" lyr-url="examples/data/airports.json" projection="EPSG:4326"></az-layer>
</div>

Two way map event binding

The key is assigning the ol-map property a name. This becomes the scope name and can be 2-way bound to templates and other components

<div ol-map="map">
  <az-layer name="Street" lyr-type="tiles"></az-layer>
</div>
<div class="info">
    <ul>
        <li>Center: {{map.center.toShortString()}}</li>
        <li>Zoom: {{map.zoom}}</li>
        <li>Extent: {{map.getExtent().toString()}}</li>
    </ul>
</div>

Super simple map

<div leaflet-map>
	<az-layer name="Street" lyr-type="tiles"></az-layer>
</div>

Lots of layers & options

<div leaflet-map controls="layers">
	<az-layer name="Street" lyr-type="tiles" lyr-options="{isBaseLayer:true}"></az-layer>
	<az-layer name="Aerial" lyr-type="tiles" lyr-url="http://otile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png"
		is-base-layer="true"></az-layer>
	<az-layer name="Radar"  lyr-type="wms" lyr-url="http://gis.srh.noaa.gov/ArcGIS/services/Radar_warnings/MapServer/WMSServer"
		layers="0,1" version="1.3.0" crs="EPSG:102100" transparent="true" opacity="0.75"></az-layer>
	<az-layer name="Airports" lyr-type="geojson" lyr-url="examples/data/airports.json"></az-layer>
</div>