<!doctype html>
<html ng-app="mainNgApp">

<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/bootstrap.css" />
	<link rel="stylesheet" href="css/bootstrap-slider.css" />
	<link id="hostStyle" rel="stylesheet" href="css/styles.css" />
	<link rel="stylesheet" href="css/help.css" />
	<link rel="stylesheet" href="iconfonts/font-awesome/css/all.min.css">
	<link rel="stylesheet" href="iconfonts/custom/customIcons.css">
	<link id="hostStyle" rel="stylesheet" href="css/mapboxGl.css" />
	<title>GEOlayers 3 Help</title>
</head>

<body oncontextmenu="return false;" class="hostElt displaynone flexcontainer" style="line-height:1.8">
	<div ng-controller="baseController" id="baseController" class="flexplus1 flexcontainer" style="height:100%">
		<div class="flexfixed hideforprint" id="contentsbar" style="margin-right:10px;min-width: 170px;height:100%; overflow:auto; position: relative;">
			<div class="input-group input-group-sm flexcontainer">
				<input type="text" class="form-control flexplus1" id="searchInput" placeholder="Search...">
				<div class="btn-group btn-group-sm flexcontainer flexfixed">
					<button type="button" class="btn btn-sm btn-secondary flexfixed displaynone" id="previousSearchResult">
						<span class="{{iconClasses.previous}}"></span>
					</button>
					<button type="button" class="btn btn-sm btn-secondary flexfixed displaynone" id="nextSearchResult">
						<span class="{{iconClasses.next}}"></span>
					</button>
				</div>
			</div>

			<nav id="myScrollspy" class="navbar">

			  <nav class="nav flex-column">
			    <a class="nav-link" href="#basics">Basics</a>
				<nav class="nav flex-column">
  			    	<a class="nav-link ml-3 my-1" href="#basicsMapcomps">Create Mapcomps</a>
					<a class="nav-link ml-3 my-1" href="#basicsNavigate">Navigate Mapcomps</a>
					<a class="nav-link ml-3 my-1" href="#basicsAnimateMapcomps">Animate Mapcomps</a>
					<a class="nav-link ml-3 my-1" href="#basicsFinalizeMapcomps">Finalize Mapcomps</a>
  			  	</nav>
				<a class="nav-link" href="#mapcompSettings">Mapcomp Settings</a>
				<nav class="nav flex-column">
					<a class="nav-link ml-3 my-1" href="#mapcompSettingsGeneral">General</a>
  			    	<a class="nav-link ml-3 my-1" href="#mapcompSettingsImagery">Imagery</a>
					<a class="nav-link ml-3 my-1" href="#mapcompSettingsLabels">Labels</a>
  			  	</nav>
				<a class="nav-link" href="#toolbar">Toolbar</a>
				<nav class="nav flex-column">
					<a class="nav-link ml-3 my-1" href="#toolbarPinnedLayers">Pinned Layers</a>
					<a class="nav-link ml-3 my-1" href="#toolbarLabelSelector">Label Template</a>
					<a class="nav-link ml-3 my-1" href="#toolbarShapeLayerStyleSelector">Shape Layer Style</a>
  			  	</nav>
				<a class="nav-link" href="#searchbar">Searchbar</a>
				<a class="nav-link" href="#featurebrowser">Feature Browser</a>
				<nav class="nav flex-column">
					<a class="nav-link ml-3 my-1" href="#featurebrowserAdd">Add Features</a>
					<a class="nav-link ml-3 my-1" href="#featurebrowserFilter">Filter Features</a>
					<a class="nav-link ml-3 my-1" href="#featurebrowserActions">Feature Actions</a>
  			  	</nav>
				<a class="nav-link" href="#labelfeatures">Label Templates</a>
				<nav class="nav flex-column">
					<a class="nav-link ml-3 my-1" href="#labelfeaturesDefaultTemplates">Default Templates</a>
					<a class="nav-link ml-3 my-1" href="#labelfeaturesCreate">Custom Templates</a>
  			  	</nav>
				<a class="nav-link" href="#shapelayerstyles">Shape Layer Styles</a>
				<nav class="nav flex-column">
					<a class="nav-link ml-3 my-1" href="#shapelayerstylesEdit">Edit Styles</a>
					<a class="nav-link ml-3 my-1" href="#shapelayerstylesDataDriven">Data-driven Styles</a>
  			  	</nav>
				<a class="nav-link" href="#projectspanel">Projects</a>
				<a class="nav-link" href="#preferences">Preferences</a>
				<nav class="nav flex-column">
					<a class="nav-link ml-3 my-1" href="#preferencesGeneral">General</a>
					<a class="nav-link ml-3 my-1" href="#preferencesOnlineSearch">Feature Search</a>
					<a class="nav-link ml-3 my-1" href="#preferencesImagery">Mapcomp Imagery</a>
					<a class="nav-link ml-3 my-1" href="#preferencesLabels">Labels</a>
					<a class="nav-link ml-3 my-1" href="#preferencesShapeLayers">Shape layers</a>
					<a ng-if="showHiddenPrefs" class="nav-link ml-3 my-1" href="#preferencesFinalization">Finalization</a>
					<a ng-if="showHiddenPrefs" class="nav-link ml-3 my-1" href="#preferencesPinnedLayers">Pinned Layers</a>
					<a class="nav-link ml-3 my-1" href="#preferencesScripts">Scripts</a>
					<a class="nav-link ml-3 my-1" href="#preferencesRenderQueue">Render Queue</a>
				</nav>
				<a class="nav-link" href="#scriptingapi">Scripting Api</a>
				<a class="nav-link" href="#datasubscription">MapTiler Data</a>
				<a class="nav-link" href="#disclaimer">Disclaimer</a>
			  </nav>

			</nav>

		</div>
		<div id="maincontent" data-spy="scroll" data-target="#myScrollspy" data-offset="50" style="height:100%; overflow:auto; position: relative; padding-right:10px;">
				<div class="chapter" id="basics">
					<h3>Basics</h3>
					<p>GEOlayers is your new best friend when you want to design and animate maps. It hooks you up with up-to-date geospatial data and satellite imagery. It lets you design complex map styles with a few clicks and animate them in 3D space.</p>
					<p>Watch this tutorial to get started. Learn how to create Mapcomps, change styles, animate, and finalize them.<p>
					<vimeo vimeoid="352731294" alt></vimeo>
					<div class="subchapter1" id="basicsMapcomps">
						<h5>Mapcomps</h5>
						<img src="help/mapcomp.png" width="100%">
						<blockquote class="blockquote">
							<p>Mapcomps are Compositions filled with map imagery and/or geographical labels.</p>
							<p>They are the basic building block of each GEOlayers project.</p>
						</blockquote>
						<p>To start a project you need to create a Mapcomp. Do this by creating a new project from the projects window or click the little arrow top left in the main window and hit <kbd>+ Add Mapcomp</kbd>.</p>
						<p>There are two steps to add a new Mapcomp:
						<dl class="ml-3 my-1">
							<dt>1. Composition options and location</dt>
							<dd>Choose a name, pixel size, duration, and framerate. These values are set from the currently selected composition. Don't forget to navigate the preview map to the location you're interested in. You can also use the search bar to jump to a place. Once you did this hit <kbd>Next</kbd></dd>
						</dl>
						<dl class="ml-3 my-1">
							<dt>2. Map Style</dt>
							<dd>Now select a basic style for your map. You can select imagery presets from the section below the preview map, choose color presets, or change individual colors. The Mapcomp can be styled more detailed once it is created, so hit <kbd>Create</kbd> for now!</dd>
						</dl>
						</p>
						<p>Now you can see the actual Mapcomp has beed created in the currently selected composition. Above it you can see the Mapcomps anchor layer. This is a helper layer that matches the Mapcomp's view animation and can be used to parent layers.</p>
						<p>If you don't want to start from scratch you can also choose a sample project to start from. Find the projects panel in the context- or flyout menu of the GEOlayers panel.</p>
						<p>Whenever you open a project that already contains Mapcomps you can see and select them clicking <a class="flexfixed silentbutton"><span class="{{iconClasses.mapcompList}}"></span></a> top left in the main window. This will open the Mapcomp list.
						<p>As you hover over a Mapcomp the following buttons appear:</p>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.mapcompSettings}}"></span></a>
							<dl class="flexplus1 ml-3 my-1">
								<dt>Mapcomp Settings</dt>
								<dd>Click to open the <a href="#mapcompSettings">Mapcomp settings panel</a>. There you can style the map's imagery and labels, change its name, link its view to other mapcomps, and more.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.duplicate}}"></span></a>
							<dl class="flexplus1 ml-3 my-1">
								<dt>Duplicate</dt>
								<dd>Clicking will lead you to the following options:
									<ul>
										<li>Duplicate the containing Comp with all Mapcomps inside</li>
										<li>Duplicate only the selected Mapcomp inside the containing Comp</li>
										<li>Split the Mapcomp's Imagery and Labels to separate Mapcomps</li>
									</ul>
								</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.remove}}"></span></a>
							<dl class="flexplus1 ml-3 my-1">
								<dt>Remove</dt>
								<dd>Click here to get rid of your Mapcomp and all related project items like imagery tiles and labels.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.finalize}}"></span></a>
							<dl class="flexplus1 ml-3 my-1">
								<dt>Finalize</dt>
								<dd>Click to finalize only a single Mapcomp. The finalize Button in the main panel will finalize all related Mapcomps.
									<ul>
										<li>Hold <kbd>ALT/OPT</kbd> to finalize in preview quality.</li>
										<li>Hold <kbd>CTRL/CMD</kbd> to finalize in only the current frame.</li>
										<li>Hold <kbd>SHIFT</kbd> to finalize all Mapcomps in the project.</li>
									</ul>
								</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span style="margin-bottom:5px;" class="{{iconClasses.heart()}} fa-xs"></span><span style="margin-left:-2px;margin-bottom:-5px;" class="{{iconClasses.label}} fa-xs fa-rotate-90"></span></a>
							<dl class="flexplus1 ml-3 my-1">
								<dt>Preferred Mapcomp for Template Labels</dt>
								<dd>If you have a group of linked Mapcomps you can define a preferred one to put template labels on. This one will then be used to label features instead of the currently selected Mapcomp. This is useful for more complex projects like 3D landscapes.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span style="margin-bottom:5px;" class="{{iconClasses.heart()}} fa-xs"></span><span style="margin-left:-2px;margin-bottom:-5px;" class="{{iconClasses.draw}} fa-xs"></span></a>
							<dl class="flexplus1 ml-3 my-1">
								<dt>Preferred Mapcomp for Drawing Features</dt>
								<dd>If you have a group of linked Mapcomps you can set a preferred one to draw on. This one will then be used to draw features on instead of the currently selected Mapcomp. This is useful for more complex projects like 3D landscapes.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.lock(true)}}"></span></a>
							<dl class="flexplus1 ml-3 my-1">
								<dt>Lock Mapcomp Settings</dt>
								<dd>You can lock Mapcomps so you don't accidently hit any of the additional buttons selecting your Mapcomps. This will not prevent the map to be animated or finalized.</dd>
							</dl>
						</div>
						<p>Below the list on the left side you can toggle display modes.</p>
						<ul>
							<li><kbd>Sort by linked Views</kbd> to see exactly which mapcomps are linked</li>
							<li><kbd>Sort by Mapcomp name</kbd> to order all Mapcomps by their Names</li>
							<li><kbd>Sort by Layer Order in containing Comp</kbd> to show Mapcomps grouped by their containing comp in the layer order</li>
						</ul>
					</div>
					<div class="subchapter1" id="basicsNavigate">
						<h5>Navigate your Mapcomp</h5>
						<img src="help/mapcompView.png" width="100%">
						<blockquote class="blockquote">
							<p>A Mapcomps view consists of latitude, longitude, zoom, bearing, and pitch.</p>
						</blockquote>
						<p>
							To navigate the Mapcomp you can use the preview map in the GEOlayers panel. <kbd>Drag</kbd> around to change the active position in your composition. Use
							<a class="silentbutton"><span class="{{iconClasses.zoomOut}}"></span></a> and <a class="silentbutton"><span class="{{iconClasses.zoomIn}}"></span></a>
							to zoom in and out. You can also use the slider in between for finer control. Additionally, you can <kbd>right-click and drag</kbd> to change the map's bearing and pitch.
							You can reset the bearing by clicking <a class="silentbutton"><span class="{{iconClasses.resetBearing}}"></span></a>
						</p>
						<p>
							If your Mapcomp is linked to the preview map
							<label class="silentbutton tooglebutton" ng-model="mapcompSyncGlobally" uib-btn-checkbox><span class="{{mapcompSyncGlobally?iconClasses.syncMapcompView:iconClasses.syncMapcompViewDisabled}}"></span></label>
							the view will be synced each time you change it. If you unlink it you can apply the view by hitting
							<a class="silentbutton"><span class="{{iconClasses.currentView}}"></span></a>
							.
						</p>
						<p>
							With the <a class="silentbutton"><span class="{{iconClasses.toggleMapcompView}}"></span></a> button in the top right you can display your selected Mapcomps view in the preview map.
						</p>
						<p>
							It is not recommended to set the composition viewers resolution to <kbd>Auto</kbd> because GEOlayers can't lower the resolution as it is working. This results in slow performance.
						</p>
					</div>
					<div class="subchapter1" id="basicsAnimateMapcomps">
						<h5>Animate your Mapcomp</h5>
						<p>
							You can animate your Mapcomps with the effect controls of your Mapcomp Layer in the timeline. The easiest way is to click
							<a class="silentbutton"><span class="{{iconClasses.keyframe}}"></span></a>
							bottom left of the preview map in the main panel. This will create keyframes on all properties at the current time. If you move the current time indicator to a different position and change a Mapcomp's view GEOlayers will automatically add keyframes to the properties that have changed. For example, only the zoom or bearing.
						</p>
					</div>
					<div class="subchapter1" id="basicsFinalizeMapcomps">
						<h5>Finalize your Mapcomp</h5>
						<p>
							Once your animation is done you need to finalize your Mapcomp.
						</p>
						<img src="help/finalize.png" width="100%">
						<blockquote class="blockquote">
							<p>Finalizing a Mapcomp means:</p>
							<dl class="ml-3 my-1">
								<dt>1. Analyzing</dt>
								<dd>The animation is analyzed and GEOlayers pulls the necessary tiles (imagery and data) from the basemap.</dd>
							</dl>
							<dl class="ml-3 my-1">
								<dt>2. Rendering Imagery</dt>
								<dd>The required geospatial data or imagery is downloaded, rendered, imported to your project, and blended according to your animation's zoom level transitions. If needed, a provider attribution is created.</dd>
							</dl>
							<dl class="ml-3 my-1">
								<dt>3. Adding Labels</dt>
								<dd>Labels are added and blended according to their importance.</dd>
							</dl>
						</blockquote>
						<p>
							Click the
							<button type="button" class="btn btn-sm btn-outline-primary flexfixed"><span class="{{iconClasses.finalize}}"></span> Finalize</button>
							button in the top right of the main panel to finalize the selected Mapcomp and related ones. Mapcomps are related if their views are linked. Hold <kbd>SHIFT</kbd> to finalize all.
						</p>
						<p>Additionally you can hold <kbd>ALT/OPT</kbd> to finalize in preview quality or <kbd>CTRL/CMD</kbd> to finalize only the current frame.</p>
					</div>
				</div>
				<div class="chapter" id="mapcompSettings">
					<h3>Mapcomp Settings</h3>
					<p>
						All settings of your Mapcomp are here. You can open the Mapcomp Settings by clicking <a class="silentbutton"><span class="{{iconClasses.mapcompSettings}}"></span></a> in the Mapcomp list.
					</p>
					<vimeo vimeoid="357897696" alt></vimeo>
					<div class="subchapter1" id="mapcompSettingsGeneral">
						<h5>General</h5>
						<dl>
							<dt>Name</dt>
							<dd>You should change your Mapcomps name only here since related expressions will automatically be updated.</dd>
						</dl>
						<dl>
							<dt>Linked Mapcomp</dt>
							<dd>Select another Mapcomp here to link their views. Note that this option is only visible if you have more than one Mapcomp in your project.</dd>
						</dl>
						<dl class="ml-3 my-1">
							<dt>Language</dt>
							<dd>You can select a language for your Mapcomp here. This affects naming of features in the browser and search as well as the mapcomp labels. Note that not every location is named in every language. In this case, the international names are being used.</dd>
						</dl>
						<dl>
							<dt>Max Zoom</dt>
							<dd>This value describes how far the Mapcomp can be zoomed in. Note that this depends on the imagery you use. Imagery can be overzoomed but the quality will suffer in this case.</dd>
						</dl>
						<dl>
							<dt>Attribution</dt>
							<dd>Select a place that suits best for your data attribution. Note that all map providers require this unless otherwise agreed with them. You can find some info on how certain data should be attributed clicking <a class="silentbutton"><span class="{{iconClasses.info}}"></span></a>.</dd>
						</dl>
					</div>
					<div class="subchapter1" id="mapcompSettingsImagery">
						<h5>Imagery</h5>
						<p>
							You can generally enable and disable imagery rendering for Mapcomps. This can also be done in the Mapcomp list. If it is enabled you have the following options:
						</p>
						<dl class="ml-3 my-1">
							<dt>Imagery Presets</dt>
							<dd>Click one of the thumbnails to apply an imagery preset to your Mapcomp. Each preset has different options. You can set them up by clicking <a class="silentbutton"><span class="{{iconClasses.styleImagery}}"></span></a> in the top right.</dd>
						</dl>
						<dl class="ml-3 my-1">
							<dt>Quality</dt>
							<dd>The quality describes the resolution related to the zoom in which the imagery is being rendered. Normally 80% is a good setting for most cases.</dd>
						</dl>
						<dl class="ml-3 my-1">
							<dt>Blend Duration</dt>
							<dd>Depending on the zoom level, imagery from map providers will have different detail levels being rendered. After finalization, those zoom level transitions are blended with the duration that is set up here. Note that the duration can be shortened if there is not enough time.</dd>
						</dl>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.motionblur}}"></span></a>
							<dl class="flexplus1 ml-3 my-1">
								<dt>Imagery Motion Blur</dt>
								<dd>Enable Motion Blur for the Mapcomp Imagery.</dd>
							</dl>
						</div>
					</div>
					<div class="subchapter1" id="mapcompSettingsLabels">
						<h5>Mapcomp Labels</h5>
						<p>
							The labels are After Effects text layers which you can style however you want. Those layers are called <kbd>Mapcomp Label Templates</kbd> and can be found inside the Mapcomp.
						</p>
						<p>
							You can enable and disable automatic labels for Mapcomps. This can also be done in the Mapcomp list. If it is enabled you have the following options:
						</p>
						<dl class="ml-3 my-1">
							<dt>Label Presets</dt>
							<dd>Depending on the colors of your imagery, GEOlayers suggests label styles. You can click one of the presets to apply the labels to your Mapcomp. Note that the existing Mapcomp label template layers are being removed. Click <a class="silentbutton"><span class="{{iconClasses.styleLabels}}"></span></a> in the top right to reveal the layers in your Mapcomp. This also helps you to apply colors to all layers with one click, select the contents and block certain labels.</dd>
						</dl>
						<dl class="ml-3 my-1">
							<dt>Density</dt>
							<dd>The label density describes the amount of labels per view. Note that a higher density results in a slower finalization and longer render times.</dd>
						</dl>
						<dl class="ml-3 my-1">
							<dt>Size</dt>
							<dd>Set up a global label size here. Relative sizes can be set on the individual label template layers. Reveal them by clicking <a class="silentbutton"><span class="{{iconClasses.styleLabels}}"></span></a> in the top right.</dd>
						</dl>
						<dl class="ml-3 my-1">
							<dt>Blend Duration</dt>
							<dd>After finalization, Mapcomp labels are blended in and out depending on zoom levels and other more important labels that intersect. The blend duration can be set up here.</dd>
						</dl>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.motionblur}}"></span></a>
							<dl class="flexplus1 ml-3 my-1">
								<dt>Label Motion Blur</dt>
								<dd>Enable Motion Blur for the Mapcomp Labels.</dd>
							</dl>
						</div>
					</div>
					<p>
						On the bottom of the Mapcomp settings panel you can find two more buttons:
					</p>
					<dl class="ml-3 my-1">
						<dd style="margin-bottom:-3px;"><button type="button" class="btn btn-sm btn-secondary">Repair Expressions</button></dd>
						<dd>If expressions break due to changing names of related layers or comps you can repair them from here.</dd>
					</dl>
					<dl class="ml-3 my-1">
						<dd style="margin-bottom:-3px;"><button type="button" class="btn btn-sm btn-secondary">Purge Imagery Cache</button></dd>
						<dd>If there are image render errors in your project, hit this button to force GEOlayers to re-render.</dd>
					</dl>
				</div>
				<div class="chapter" id="toolbar">
					<h3>Toolbar</h3>
					<p>The toolbar is below the Mapcomp bar.</p>
					<div class="flexcontainer">
						<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.snapLayer}}"></span></a>
						<dl class="flexplus1 ml-3 my-1">
							<dt>Pin Layer to Map</dt>
							<dd>Select one or more layers in your selected Mapcomp's containing composition and click this button to snap them to your map. After doing so, the layer will stay at the exact same geographical position as you animate your map. If the selected layer is allready pinned to a map it will be unpinned.</dd>
						</dl>
					</div>
					<div class="subchapter1" id="toolbarPinnedLayers">
						<h5>Pinned Layers</h5>
						<img src="help/pinnedLayer.png" width="100%">
						<blockquote class="blockquote">
							A pinned layer is a layer in your Mapcomp's containing composition that is fixed to a certain geographical position.
						</blockquote>
						<p>Have a look at the pinned layers effect controls and find the following options:<p>
						<dl class="ml-3 my-1">
							<dt>Latitude, Longitude and Height</dt>
							<dd>These three controls represent the geographical position of the layer. The Height is the z-offset in pixels at the zoom the layer has been pinned.</dd>
						</dl>
						<dl class="ml-3 my-1">
							<dt>Pixel Offset</dt>
							<dd>3D point control is very handy to adjust the layer's geographical position with normalized values. Even if you're zoomed in very close and incremental latitude changes would lead to a different position of the label. This property allows for quick adjustments. Note that the z-offset here is independent from the zoom.</dd>
						</dl>
							<dl class="ml-3 my-1">
							<dt>Scale with Map</dt>
							<dd>Check this option to scale the pinned layer according to your Mapcomp's zoom.</dd>
						</dl>
						<dl class="ml-3 my-1">
							<dt>Rotate with Map</dt>
							<dd>Check this option to rotate the pinned layer according to your Mapcomp's bearing and pitch. Note that you must enable the label layer as 3D in After Effects for this to work.</dd>
						</dl>
						<dl class="ml-3 my-1">
							<dt>Rotate along path</dt>
							<dd>If the geoposition of the layer is animated it can be rotated along its movement path with this option.</dd>
						</dl>
						<dl class="ml-3 my-1">
							<dt>Bearing offset</dt>
							<dd>If the layer is rotated with the map you can set an offset for the bearing.</dd>
						</dl>
						<dl class="ml-3 my-1">
							<dt>Position Progress</dt>
							<dd>If the Latitude, Longitude or Height properties are keyframed you can animate the layer's position with this progress slider between a value of 0 and 100. Note that you need to enable the effect therefore. It makes things easier if you want to ease complex route animations.</dd>
						</dl>
						<p>If you want to overlay a layer to your map, you can also parent it to the Mapcomp anchor layer.</p>
					</div>
					<div class="flexcontainer">
						<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.controllerMapcomp}}"></span></a>
						<dl class="flexplus1 ml-3 my-1">
							<dt>Create Controller Mapcomp</dt>
							<dd>Click this button to create a Mapcomp that displays neither imagery or labels. It can be used to link other Mapcomps to it or to draw geo-referenced shape layers on it.</dd>
						
						</dl>
					</div>
					<vimeo vimeoid="434592647" alt></vimeo>
					<p></p>
					<div class="flexcontainer">
						<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.waterMask}}"></span></a>
						<dl class="flexplus1 ml-3 my-1">
							<dt>Create Water Mask Mapcomp</dt>
							<dd>Click this button to create a linked luma water mask mapcomp next to the selected Mapcomp.</dd>
						</dl>
					</div>
					<div class="flexcontainer">
						<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.threeDBuilding}}"></span></a>
						<dl class="flexplus1 ml-3 my-1">
							<dt>Draw 3D Buildings</dt>
							<dd>Click this button to draw 3D buildings as shape layers in the Mapcomp's containing composition. Note that this requires the Ray Traced or CINEMA 4D renderer. Note that this will considerably slow down After Effects.</dd>
						</dl>
					</div>
					<div class="flexcontainer">
						<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.ThreeDLandscape}}"></span></a>
						<dl class="flexplus1 ml-3 my-1">
							<dt>Create 3D Landscape</dt>
							<dd>You can create a 3D Landscape using other extensions such as Mettle FreeFormPro, Rowbyte Plexus 3, or Trapcode Mir 3.</dd>
						</dl>

					</div>
					<vimeo vimeoid="361319119" alt></vimeo>
					<p></p>
					<div class="flexcontainer">
						<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.charts}}"></span></a>
						<dl class="flexplus1 ml-3 my-1">
							<dt>Draw Diagram</dt>
							<dd>Click this button to create a line or area chart from a .csv or .tsv file. Each column of the spread sheet represents a property that you can draw. Each line of one column represents a value in the sequence. Note that value sequences for the X-Axis need to be strictly ascending or descending.</dd>
						</dl>
					</div>
					<div class="flexcontainer">
						<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.script}}"></span></a>
						<dl class="flexplus1 ml-3 my-1">
							<dt>Run Script file</dt>
							<dd>Click this button to directly run script files. Note that button is not shown unless you have set up script file folders in the preferences.</dd>
						</dl>
					</div>
					<vimeo vimeoid="468890858" alt></vimeo>
					<vimeo vimeoid="468873758" alt></vimeo>
					<p></p>
					<div class="flexcontainer">
						<a style="float:left" class="flexfixed silentbutton">
							<span style="font-size:0.6em" class="fa-stack fa-fw">
								<i class="{{iconClasses.currentView}} fa-stack-2x"></i>
								<i class="{{iconClasses.labelSolid}} fa-stack-1x"></i>
							</span>
						</a>
						<dl class="flexplus1 ml-3 my-1">
							<dt>Add Template label</dt>
							<dd>This button will add a label based on the selected label template to your Mapcomp. GEOlayers will ask for the data fields specified in the label template. In your Mapcomp's containing comp you'll find a 'Location Picker' layer temporarily to adjust the position of the Label.</dd>
						</dl>
					</div>
					<div class="subchapter1" id="toolbarLabelSelector">
						<h5>Label Template Selector</h5>
						<img src="help/labelTemplate.png" width="100%">
						<blockquote class="blockquote">
							<p>A label template is a composition with graphical elements and text or footage templates that will be set from feature properties when a feature is labeled.</p>
							<p>In comparison to the mapcomp labels which are created automatically, these labels are more powerful and can be used to highlight certain places, add symbols, or even show whole datasets like weather information.</p>
						</blockquote>
						<p>In the dropdown you can select the label template if you label a feature from the toolbar, the search, or the browser. You can hold <kbd>ALT/OPT</kbd> and click to reveal the label template Composition in your After Effects project. It is also possible to hold <kbd>SHIFT</kbd> to reveal the ColorComp of the label template if it has one. This is a composition where you can globally define colors for your label set.</p>
						<p>You can easily filter the labels by name typing anything into the filterbar. If you're building template projects it might come also handy that you can right click the filterbar to set up filtering by Mapcomp. You can define label templates that are only visible if you have a certain Mapcomp selected.</p>
						<vimeo vimeoid="466519449" alt></vimeo>
						<p>Underneath the label template List you can find more options:</p>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.swapLabel}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Swap Label Template</dt>
								<dd>Once you have created a label you can swap its template by selecting a different label template, selecting the label layer in your timeline, and clicking this button.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.plus}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Add Template</dt>
								<dd>Click this button to create a new label template composition in your project.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.importFile}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Import Templates</dt>
								<dd>Click this button to import label templates from an After Effects project. You can find several label template projects in the GEOlayers projects panel.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.importFile}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Download Templates</dt>
								<dd>Click this button to open the projects panel showing all label template projects for you to download.</dd>
							</dl>
						</div>
						<dl class="ml-3 my-1">
							<dt>Label on preferred Mapcomp</dt>
							<dd>If you have a group of linked Mapcomps you can set a preferred one to put template labels on in the Mapcomp list. This one will be used to label features instead of the currently selected Mapcomp. This is useful for more complex projects like 3D landscapes.</dd>
						</dl>
					</div>
					<div class="flexcontainer">
						<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.arrow}}"></span></a>
						<dl class="flexplus1 ml-3 my-1">
							<dt>Draw Arrow</dt>
							<dd>Click this button to set up an arrow shape layer. Once that is done you can draw the arrow with the pen tool. Check out the arrow layers Effect Controls to style and animate it. Note that the initial style and color depends on the selected Shape Layer Style. You can use the styles to create arrow presets.</dd>
							<vimeo vimeoid="475011262" alt></vimeo>
						</dl>
					</div><div class="flexcontainer">
						<a style="float:left" class="flexfixed silentbutton">
							<span style="font-size:0.6em" class="fa-stack fa-fw">
								<i class="{{iconClasses.currentView}} fa-stack-2x"></i>
								<i class="{{iconClasses.draw}} fa-stack-1x"></i>
							</span>
						</a>
						<dl class="flexplus1 ml-3 my-1">
							<dt>Add Shape Layer</dt>
							<dd>This button will create and pin a shape layer to your Mapcomp on which you can draw manually.</dd>
						</dl>
					</div>
					<div class="subchapter1" id="toolbarShapeLayerStyleSelector">
						<h5>Shape Layer Style Selector</h5>
						<img src="help/shapeLayerStyles.png" width="100%">
						<blockquote class="blockquote">
							<p>A shape layer style is a preset in which shape layers can be drawn. They are saved with the After Effects project.</p>
							<p>They can be very powerful as their options can be data-driven by properties of the feature that is drawn.</p>
						</blockquote>
						<p>In the dropdown, you can select a shape layer style that is used if you draw a feature even from the search or the browser.</p>
						<p>You can easily filter the shape layer styles by name typing anything into the filterbar. If you're building template projects it might come also handy that you can right click the filterbar to set up filtering by Mapcomp. You can define shape layer styles that are only visible if you have a certain Mapcomp selected.</p>
						<p>Underneath the shape layer styles you can find more options:</p>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.swapLabel}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Swap Layers Style</dt>
								<dd>You can apply a shape layer style to already drawn layers with this button. Select a layer and click it.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.styleDrawingOptions}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Edit Styles</dt>
								<dd>Click this button to edit the shape layer styles of the project.</dd>
							</dl>
						</div>
						<p>Additionally, there are some global settings for drawing shape layers:</p>
						<dl class="ml-3 my-1">
							<dt>Simplify Geometry</dt>
							<dd>If enabled, GEOlayers will reduce geometry details that are visually unimportant. For maximum performance, keep this setting enabled. There is two modes, simply click the checkbox to toggle through the options:
								<ul>
									<li><strong>by Current Zoom:</strong> The geometry of the feature will be simplified according to the current view of your Mapcomp.</li>
									<li><strong>by Max Zoom:</strong> The geometry will be simplified according to the largest zoom in your animation.</li>
								</ul>
							</dd>
							<vimeo vimeoid="507479009" alt></vimeo>
							<br>
						</dl>
						<dl class="ml-3 my-1">
							<dt>Auto Stroke Width</dt>
							<dd>If checked, stroke widths will be animated according to the Mapcomp's zoom level so they appear to have the same width at each zoom.</dd>
						</dl>
						<dl class="ml-3 my-1">
							<dt>Individual Layers</dt>
							<dd>If you draw more than one Feature, you can select whether they should be drawn on a single or individual layers. Note that if feature styles have different extrusions, features will split to layers with the same extrusions.</dd>
						</dl>
						<dl class="ml-3 my-1">
							<dt>Inside Mapcomp</dt>
							<dd>For quick animations, you might want to draw features inside the Mapcomp so they appear below the Mapcomp Labels and don't add complexity to your containing composition.</dd>
						</dl>
						<dl class="ml-3 my-1">
							<dt>Draw on preferred Mapcomp</dt>
							<dd>If you have a group of linked Mapcomps, you can define a preferred one to draw on in the Mapcomp list. This one will then be used to draw Features on instead of the currently selected Mapcomp. This is useful for more complex projects like 3D landscapes.</dd>
						</dl>
					</div>
				</div>
				<div class="chapter" id="searchbar">
					<h3>Searchbar</h3>
					<p>With the search bar, you can query geographical features from the OpenStreetMap and Natural Earth databases. Type in a term and matching features will appear in a list below. The symbol next to the name lets you know if its point data (<span class="{{iconClasses.point}}"></span>) or an OSM way or relation (<span class="{{iconClasses.osmrelation}}"></span>) - in the latter instance, the geometry can be either a line or a polygon. You can also find features by simply clicking a place in the preview map. Note that this feature is only available if you have a Matiler account connected.</p>
					<p>As you hover over the search results, they are previewed in the map and additional options appear:</p>
					<div class="flexcontainer">
						<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.currentView}}"></span></a>
						<dl class="ml-3 my-1">
							<dt>Fit View</dt>
							<dd>Click this button to fit the map's view to the feature.</dd>
						</dl>
					</div>
					<div class="flexcontainer">
						<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.label}}"></span></a>
						<dl class="ml-3 my-1">
							<dt>Add Label</dt>
							<dd>Click to add a label based on the selected label template to your Mapcomp.</dd>
						</dl>
					</div>
					<div class="flexcontainer">
						<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.label}}"></span></a>
						<dl class="ml-3 my-1">
							<dt>Draw</dt>
							<dd>Click to draw the feature based on the selected shape layer style.</dd>
						</dl>
					</div>
					<div class="flexcontainer">
						<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.download}}"></span></a>
						<dl class="ml-3 my-1">
							<dt>Add to Browser</dt>
							<dd>Click to add and download the feature to the project's local browser.</dd>
						</dl>
					</div>
				</div>
				<div class="chapter" id="featurebrowser">
					<h3>Feature Browser</h3>
					<p>Browse and manage your geographical features here. Drag them around or <kbd>ALT/OPT + DRAG</kbd> to copy features. You can jump to them on your Mapcomp, label and draw them, or have a look at their properties. The ones you add to your favorites will be saved for use in other GEOlayers projects.</p>
					<img src="help/features.png" width="100%">
					<blockquote class="blockquote">
						<p>Features are geospatial geometries. They can be one of three types: points, lines, or polygons. In some instances, features can be a combination (known as a collection). They can have additional data stored as properties (For example: population sizes, total area, or names of locations).</p>
					</blockquote>
					<div class="subchapter1" id="featurebrowserAdd">
						<h5>Add Features</h5>
                        <p>Click the <a class="silentbutton"><span class="{{iconClasses.plus}}"></span></a> button on the left side above the browser to add features to the browser. A few options will appear.</p>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.download}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Download Features</dt>
								<dd>Click here to download features in global datasets or for the Current View. World view datasets are provided by Natural Earth. Local datasets for the current view are downloaded from OpenStreetMap.</dd>
								<div class="card border-primary linemargins">
									<div class="card-header">
										<a data-toggle="collapse" data-target="#licenseInfosGlobalDownload" class="clickable">
										  <span class="{{iconClasses.info}}" aria-hidden="true"></span>
										  License Info - Natural Earth
										</a>
									</div>
									<div class="collapse card-body" id="licenseInfosGlobalDownload">
										<p>This service is provided by Natural Earth.</p>
										<p>No attribution is needed, but if you want to give credit to Natural Earth, use this text: <kbd>Made with Natural Earth</kbd>.</p>
										<button type="button" class="btn btn-sm btn-primary hideforprint" onclick="window.cep.util.openURLInDefaultBrowser('http://www.naturalearthdata.com/about/terms-of-use/')">More Information – Natural Earth</button>
									</div>
								</div>
								<div class="card border-primary">
									<div class="card-header">
										<a data-toggle="collapse" data-target="#licenseInfosFeatureDownload" class="clickable">
										  <span class="{{iconClasses.info}}" aria-hidden="true"></span>
										  License Info - OpenStreetMap
										</a>
									</div>
									<div class="collapse card-body" id="licenseInfosFeatureDownload">
										<p>Thisservice is provided by OpenStreetMap.</p>
										<p>If you show data aquired with this service it <strong>must be attributed</strong> as follows: <kbd>©OpenStreetMap contributors</kbd>.</p>
										<button type="button" class="btn btn-sm btn-primary hideforprint" onclick="window.cep.util.openURLInDefaultBrowser('https://wiki.osmfoundation.org/wiki/Licence/Licence_and_Legal_FAQ#What_do_you_mean_by_.22Attribution.22.3F')">More Information – OpenStreetMap</button>
									</div>
								</div>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.importFile}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Import File</dt>
								<dd>If you want to import custom geospatial data from other databases or from your own research, GEOlayers can import and ingest these file types:
									<ul>
										<li>.geojson</li>
										<li>.shp</li>
										<li>.gpx</li>
										<li>.kml</li>
										<li>.kmz</li>
										<li>.csv/tsv (needs latitude and longitude fields)</li>
										<li>.zip (with .shp and .dbf inside)</li>
									</ul>
								</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.currentView}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Current Mapcomp View</dt>
								<dd>Save the current latitude, longitude, zoom, bearing, and pitch of the selected Mapcomp in a point feature. You can apply the exact same view to Mapcomps clicking <a href="#featurebrowserActions">Fit view to Feature</a> with view feature selected.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.featureFromLayer}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Feature from Layer</dt>
								<dd>You can create and import features from almost every layer in a composition that has a Mapcomp inside. Select a Template Label layer, Nulls to get point features or draw lines and polygons on a shape layer to import complex geometries. Open paths will result in line features, whereas closed paths will be interpreted as polygons. Note that self intersecting rings in a polygon are not allowed and can lead to errors. Bezier curves will get rendered in the quality necessary for your current view.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.featureCollection}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Feature Collection</dt>
								<dd>Creates an empty Feature Collection in which you can drag Features in to keep things sorted.</dd>
							</dl>
						</div>
					</div>
					<div class="subchapter1" id="featurebrowserFilter">
						<h5>Filter Features</h5>
                        <p>You can filter your list of saved features in the browser. Just type in a search term.</p>
                        <dl class="ml-3 my-1">
                             <dt>Anything</dt>
                            <dd>Any word will check all feature properties for a match.</dd>
                        </dl>
                        <dl class="ml-3 my-1">
                             <dt>Certain Properties</dt>
                            <dd>You can also filter by certian properties. Do this by typing in the property name, an operator, and a value. For example, <kbd>kind=country</kbd> or <kbd>population&lt;100000</kbd>.</dd>
                        </dl>
						<p>Additionally you can filter by geometry type (points, lines, polygons).
						<div class="card border-primary">
							<div class="card-header">
								<a data-toggle="collapse" data-target="#geometryTypes1" class="clickable">
								  <span class="{{iconClasses.info}}" aria-hidden="true"></span>
								  Geometry Types
								</a>
							</div>
							<div class="collapse card-body" id="geometryTypes1">
								<div class="flexcontainer ml-3 my-1">
									<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.point}}"></span></a>
									<dl class="ml-3 my-1">
										<dt>Point geometry</dt>
										<dd>A geometry consisting of one or more points.</dd>
									</dl>
								</div>
								<div class="flexcontainer ml-3 my-1">
									<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.line}}"></span></a>
									<dl class="ml-3 my-1">
										<dt>Line geometry</dt>
									   	<dd>A geometry consisting of one or more lines.</dd>
									</dl>
								</div>
								<div class="flexcontainer ml-3 my-1">
									<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.polygon}}"></span></a>
									<dl class="ml-3 my-1">
										<dt>Polygon geometry</dt>
									   	<dd>A geometry consisting of one or more polygons.</dd>
									</dl>
								</div>
								<div class="flexcontainer ml-3 my-1">
									<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.geometryCollection}}"></span></a>
									<dl class="ml-3 my-1">
										<dt>Geometry collection</dt>
									   	<dd>A geometry consisting of multiple point, line, and/or polygon geometries.</dd>
									</dl>
								</div>
							</div>
						</div>
						</p>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.currentView}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Current View Filter</dt>
								<dd>If the current view filter is enabled, only features that intersect the preview map view are displayed.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.showSelectionInMainUIMap}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Show selection in preview map</dt>
								<dd>Enable this button to check out the features in your preview map. If you're working with large features, it's a good idea to turn this off.</dd>
							</dl>
						</div>
					</div>
					<div class="subchapter1" id="featurebrowserActions">
						<h5>Feature Actions</h5>
						<vimeo vimeoid="359745657" alt></vimeo>
                        <p>Storing features in the browser is a powerful tool in GEOlayers. Select one or more features and the following buttons appear below the browser:</p>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.currentView}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Fit View</dt>
								<dd>You have four options to fit your Mapcomp's view to the selected feature.</dd>
								<dl class="ml-3 my-1">
									<dt>Fit View to Feature</dt>
									<dd>This will fit your Mapcomp's view to the bounds of the selected feature. It changes latitude, longitude, and zoom, but will not affect bearing or pitch.</dd>
								</dl>
								<dl class="ml-3 my-1">
									<dt>Animate View to Feature</dt>
									<dd>You can animate the selected Mapcomp's view from anywhere to the selected feature. The duration of this animation can be set in the <a href="#preferences">preferences</a>.</dd>
								</dl>
								<dl class="ml-3 my-1">
									<dt>Animate View along Feature</dt>
									<dd>This will animate your Mapcomp's view along the geometry of the selected feature. You can follow a route or .gpx track on a map. It animates latitude and longitude, but will not affect bearing, pitch, and zoom. The motion path of your view gets smoothened according to the zoom level. If you zoom in further, the view will be more detailed along the feature's path. The duration of this animation can be set in the <a href="#preferences">preferences</a>.</dd>
								</dl>
								<dl class="ml-3 my-1">
									<dt>Animate View between Features</dt>
									<dd>If you have two or more features selected you can animate the selected Mapcomp's view from one to another. The duration of this animation can be set in the <a href="#preferences">preferences</a>.</dd>
								</dl>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.snapLayer}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Pin Layers</dt>
								<dd>You have two options to pin layers to your Mapcomp.</dd>
								<dl class="ml-3 my-1">
									<dt>Pin Layers to Feature</dt>
									<dd>This will snap selected layers in your Mapcomp's containing composition to the geographical position of the selected feature.</dd>
								</dl>
								<dl class="ml-3 my-1">
									<dt>Animate Layers along Feature</dt>
									<dd>Click to animate selected layers in your Mapcomp's containing composition along the geometry of the selected feature. The duration of this animation can be set in the <a href="#preferences">preferences</a>.</dd>
								</dl>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.label}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Add Label</dt>
								<dd>You have two options to add feature labels to your Mapcomp.</dd>
								<dl class="ml-3 my-1">
									<dt>Add Label</dt>
									<dd>This will add a feature label created with the <a href="#toolbarLabelSelector">selected label template</a> to your Mapcomp's containing composition.</dd>
								</dl>
								<dl class="ml-3 my-1">
									<dt>Animate Label along Feature</dt>
									<dd>This will add a feature label created with the <a href="#toolbarLabelSelector">selected label template</a> to your Mapcomp's containing composition and animate it along the geometry of the selected feature. The duration of this animation can be set in the <a href="#preferences">preferences</a>.</dd>
								</dl>
								<dl class="ml-3 my-1">
									<dt>Add Labels with Time Offset</dt>
									<dd>This adds labels for each selected feature with an offset in time. The overall offset depends on the default animation duration which can be set in the <a href="#preferences">preferences</a>. The offset can also be data-driven. Set up a timing property for a whole Feature Collection by opening its Feature Properties.</dd>
								</dl>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.draw}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Draw Features</dt>
								<dd>You have two options to draw features to your Mapcomp.</dd>
								<dl class="ml-3 my-1">
									<dt>Draw Features</dt>
									<dd>This draws the selected features with the <a href="#toolbarShapeLayerStyleSelector">selected shape layer style</a> to your Mapcomp. If a feature has a shape layer style applied this one will be used instead.</dd>
								</dl>
								<dl class="ml-3 my-1">
									<dt>Animate Feature Path</dt>
									<dd>This draws the selected features with the <a href="#toolbarShapeLayerStyleSelector">selected shape layer style</a> to your Mapcomp and animate its trim path property. If a feature has a shape layer style applied this one will be used instead. The duration of this animation can be set in the <a href="#preferences">preferences</a>.</dd>
								</dl>
								<dl class="ml-3 my-1">
									<dt>Draw with Time Offset</dt>
									<dd>This draws each feature with an offset in time. The overall offset depends on the default animation duration which can be set in the <a href="#preferences">preferences</a>. The offset can also be data-driven. Set up a timing property for a whole Feature Collection by opening its Feature Properties.</dd>
								</dl>
								<vimeo vimeoid="373569335" alt></vimeo>
								<vimeo vimeoid="376376225" alt></vimeo>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.featureCollection}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Add Feature Collection</dt>
								<dd>This adds a feature collection around the selected features. You can think of it like a directory for files. Use it to structure your features in the browser.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.featureProperties}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Feature Properties</dt>
								<dd>Click to open the feature properties panel. You can see a list of all properties the feature has. You can rename it, apply a shape layer style to it, adjust the position of Labels and even create data-driven shape layer styles matching feature properties with just a few clicks.</dd>
								<dd>Also if you want to edit feature properties or import data from a spreadsheet to an actual polygon feature collection you can use the import/export properties to .csv buttons. Note that you'll need to select a Feature Collection therefore. You'll find the buttons under all the Collective Feature Properties.</dd>
								<vimeo vimeoid="433581148" alt></vimeo>
								<dd>GEOlayers supports data that changes over time. In this case the property needs to be an array of values. If you have a file sequence that holds the same geometries but with different property values like increasing or decreasing population you can also import this sequence and its properties will be merged to arrays.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.connectFeatures}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Connect Features</dt>
								<dd>If you have at least two features selected you can create line features connecting them. You have the following options:</dd>
								<dl class="ml-3 my-1">
									<dt>Straight Line</dt>
									<dd>This will create a feature collection with lines connecting each feature with each other. Lines appear to be straight in projection your Mapcomp has.</dd>
								</dl>
								<dl class="ml-3 my-1">
									<dt>Plane Route</dt>
									<dd>This will create a feature collection with lines connecting each feature with each other. Lines appear to be curved in projection your Mapcomp has since the show the shortest connection on the globe.</dd>
								</dl>
								<dl class="ml-3 my-1">
									<dt>Pedestrian</dt>
									<dd>With this option you can connect five features max. It will calculate a route based on OpenStreetMap.</dd>
								</dl>
								<dl class="ml-3 my-1">
									<dt>Bicycle</dt>
									<dd>With this option you can connect five features max. It will calculate a route based on OpenStreetMap.</dd>
								</dl>
								<dl class="ml-3 my-1">
									<dt>Car</dt>
									<dd>With this option you can connect five features max. It will calculate a route based on OpenStreetMap.</dd>
								</dl>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.polygonMesh}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Lines from Polygons</dt>
								<dd>This function will create a line feature from selected polygons. Use it for example to create clean boundaries from selected country polygons.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.mergeFeatures}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Merge Features</dt>
								<dd>This merges the geometry of two or more Features. Note that complex geometries can result in very long calculation times.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.subtractFeature}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Subtract lower Feature</dt>
								<dd>This will subtract the geometry of the selected Feature that is lower in the browser from the one above. Note that complex geometries can result in very long calculation times.</dd>
								<vimeo vimeoid="373569122" alt></vimeo>
							</dl>

						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.explodeFeature}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Split Feature</dt>
								<dd>This splits a feature into individual geometries. For example, a country feature that contains islands will be split into multiple layers.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.injectPointProperties}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Points inside Polygons</dt>
								<dd>You a few options what to do with Points and Polygons.</dd>
								<dl class="ml-3 my-1">
									<dt>Points inside Polygons</dt>
									<dd>Select Points as well as at least one Polygon Feature and get back Collections of Points that are within the certain Polygons.</dd>
								</dl>
								<dl class="ml-3 my-1">
									<dt>Inject Point Properties to Polygons</dt>
									<dd>Imagine you have spreadsheet data for a bunge of countries. This data will be imported as Point Features. If you load Country Polygons into your Browser select both the Points and Polygons and click this option, the data from your spreadsheet will be injected into the Country Polygon Features.</dd>
								</dl>
								<dl class="ml-3 my-1">
									<dt>Convert Polygons to Points</dt>
									<dd>Convert Polygon or Line Geometries to simple Points.</dd>
								</dl>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.charts}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Draw Property Charts</dt>
								<dd>This tool helps you creating line or area charts from Feature data. For example an elevation chart of a gpx track. Note that your selected Feature(s) need to have Array properties to be able to visualize it in a chart.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.exportFile}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Export Features</dt>
								<dd>Click and choose a directory to export the selected features to a .geojson file. You can hold <kbd>SHIFT</kbd> to export all Features in the browser to features.geojson beneath your current project file.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.exportFile}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Remove Features</dt>
								<dd>Click to remove the selected features from your Browser. You can hold <kbd>SHIFT</kbd> to clear the browser exept your favorite features.</dd>
							</dl>
						</div>
					</div>
				</div>
				<div class="chapter" id="labelfeatures">
					<h3>Label Templates</h3>
                    <p>GEOlayers allows you to use custom compositions to label features. You can label features from the <a href="#featurebrowser">feature browser</a> or directly from the <a href="#searchbar">search bar</a>. In the <a href="#toolbar">toolbar</a> you select the label template to use.</p>
					<p>Label templates are stored in your After Effects project under <kbd>GEOlayers 3 Items/Label Templates</kbd>. You can add and remove compositons to this folder and use them as your custom labels. On an empty project a default set of label templates will be loaded.</p>
					<div class="subchapter1" id="labelfeaturesDefaultTemplates">
						<h5>Default Labels</h5>
                        <p>The default label templates are set up for two color schemes and can be customized. To do that open the following composition: <kbd>GEOlayers 3 Items/Items/LabelColors</kbd>. There you can adjust the fill colors of the containing shape layers or simply hide them if you don't want straps for example.</p>
						<p>Once a feature is labeled you can change the label layer's anchor point property to offset the text strap while the pointer still sits at the correct geoposition.</p>
					</div>
					<div class="subchapter1" id="labelfeaturesCreate">
						<h5>Create Custom Labels</h5>
                        <p>Each composition that is inside <kbd>GEOlayers 3 Items/Label Templates</kbd> in your After Effects project is noticed by GEOlayers as a label template. Note that the labels anchor point is at the center of the template composition by default. If you want it to be somewhere else add a layer called <kbd>Label Anchor Point</kbd> to your template composition. This layer should have a z-positon of 0 and be not parented to another one. The anchor point of each label created with this template will then be adjusted to this layer's position in the template comp. An expression will link its position to the label's anchor point. This allows dynamic labels.</p>
						<p>If you want a Label Template to be a 3D layer as you add it to a map switch on the 3D layer flag of the <kbd>Label Anchor Point</kbd> layer. Same goes for collape transformation.</p>
						<p>Additionally you can control a labels default behaviour by adding the following effect controls to the <kbd>Label Anchor Point</kbd> layer:</p>
						<ul>
                            <li>Checkbox control: <kbd>Scale with Map</kbd></li>
							<li>Checkbox control: <kbd>Rotate with Map</kbd></li>
							<li>Checkbox control: <kbd>Rotate along path</kbd></li>
							<li>Angle control: <kbd>Bearing Offset</kbd></li>
                        </ul>
						<img src="help/texttemplate.png" width="100%">
						<p>Text layers that are not locked are used as template fields. The text layer's name or content defines the text that is inserted to it as you create a label.</p>
                        <ul>
                            <li>Any name will tell GEOlayers to insert just the feature name.</li>
                            <li>A feature property in curly brackets in the name or text layers' content will lead to replacing the source text with a certain property's value. Multiple properties are supported. So a text layer's name or content could be <kbd>{population}</kbd> or <kbd>Latitude: {lat}, Longitude: {lon}</kbd> for example. If the Features' property is an Array the text will be animated. Change the duration of this animation with the <kbd>Default Animation Duration</kbd> in the preferences.</li>
                        </ul>
                        <img src="help/footagetemplate.png" width="100%">
                        <p>Footage layers that are not locked and are named like a property in curly brackets are used as footage template fields. The layers' source will be replaced when the Feature provides a suitable property for this. Properties can hold the following data:</p>
                        <ul>
                            <li>An absolute local path to a file with or without the file extension <kbd>D:\my_folder\my_file(.jpg)</kbd></li>
                            <li>A local path or file name with or without file extension that is relative to the template footage <kbd>my_file(.jpg)</kbd></li>
                            <li>A http or https URI <kbd>http://www.myserv.er/my_image.jpg</kbd></li>
                        </ul>
                        <p>Inspect a feature's properties by clicking the feature properties button in the <a href="#featurebrowser">feature browser</a>.</p>
					</div>
				</div>
				<div class="chapter" id="shapelayerstyles">
					<h3>Shape Layer Styles</h3>
                    <p>Edit your shape layer styles by clicking <kbd>Edit Styles</kbd> on the <a href="#toolbarShapeLayerStyleSelector">Shape Layer Style Selector</a>.</p>
					<img src="help/shapeLayerStyles.png" width="100%">
					<blockquote class="blockquote">
						<p>A shape layer style is a definition of how features will be drawn to shape layers. It defines colors, opacities, strokes, extrusion etc.</p>
					</blockquote>
					<p>At the top of the dialog you can reset, import, and export shape layer styles. Styles are saved inside your After Effects project.</p>
					<div class="flexcontainer">
						<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.remove}}"></span></a>
						<dl class="ml-3 my-1">
							<dt>Remove Styles</dt>
						   	<dd>Click this button to remove all styles but one.</dd>
						</dl>
					</div>
					<div class="flexcontainer">
						<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.reset}}"></span></a>
						<dl class="ml-3 my-1">
							<dt>Reset Styles</dt>
						   	<dd>Click this button to reset the shape layer styles to the defaults.</dd>
						</dl>
					</div>
					<div class="flexcontainer">
						<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.magic}}"></span></a>
						<dl class="ml-3 my-1">
							<dt>Create Styles based on Mapcomp</dt>
						   	<dd>Click this button get a set of shape layer styles based on the selected Mapcomp's imagery.</dd>
						</dl>
					</div>
					<div class="flexcontainer">
						<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.importFile}}"></span></a>
						<dl class="ml-3 my-1">
							<dt>Import Styles</dt>
							<dd>Click this button to import shape layer styles from a file.</dd>
						</dl>
					</div>
					<div class="flexcontainer">
						<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.exportFile}}"></span></a>
						<dl class="ml-3 my-1">
							<dt>Export Styles</dt>
							<dd>Click this button to export the shape layer styles to a file.</dd>
						</dl>
					</div>

					<div class="subchapter1" id="shapelayerstylesEdit">
						<h5>Edit Styles</h5>
						<p>Select a style from the grid to edit its properties. You can also drag them around, create new ones, duplicate, or remove them.</p>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.plus}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Add Style</dt>
								<dd>Click the plus on the last position in the grid to add a shape layer style.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.swapFeatureStyle}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Swap Layer Style</dt>
								<dd>Click to apply the style to an existing shape layer.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.duplicate}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Duplicate Style</dt>
								<dd>Click to duplicate the selected shape layer style.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.eyeDropper}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Pick Style from Layer</dt>
								<dd>You can pick Styles from Shape Layers or certain Content Groups on Shape Layers directly. Simply select one or multiple Layers or Groups and click this button to add Styles to your palette. Note that not all Shape Layer Properties are supported. For example Gradient Fill or Strokes are not possible.</dd>
							</dl>
						</div>
						<div class="flexcontainer">
							<a style="float:left" class="flexfixed silentbutton"><span class="{{iconClasses.remove}}"></span></a>
							<dl class="ml-3 my-1">
								<dt>Remove Style</dt>
								<dd>Remove unneeded Styles with this button.</dd>
							</dl>
						</div>
                        <p>The selected style can be edited below. You can select whether a fill and a stroke property should be drawn. Unlike polygons, line and point geometries will be drawn with a stroke also if it is not checked. For each of the both you can define a color and a opacity. The stroke has some additional options. The Width, which is relative to your selected Mapcomps current view, and a dash slider. Use it to draw your Stroke dashed or dotted. Note that this increases the time for the drawing process.</p>
                        <p>A style can also contain an extrusion. As a result, the containing composition's renderer will be set to CINEMA 4D. Features with different extrusions will be drawn on separate layers due to limitations with After Effects. Same goes for different Layer Blending Modes and the Preserve Transparency toggle.</p>
                    </div>
                    <div class="subchapter1" id="shapelayerstylesDataDriven">
						<h5>Data-driven Styling</h5>
						<vimeo vimeoid="358244424" alt></vimeo>
						<p>Each setting of a shape layer style can be data-driven. Click the <a class="silentbutton"><span class="{{iconClasses.dataTransformer}}"></span></a> button to automatically adapt the setting to a certain feature property.</p>
                        <img src="help/dataDrivenStyling.png" width="100%">
                        <p>Type in the property's name and a value range. You can then, for example, colorize a stroke according to the drawn feature's population property. If you define numbers in the value range, colors in between will be styled across a range. String data (words) will change the setting on an exact match. Numbers can be treated as a string if you use quotation marks.</p>
                        <p>For Stroke Width and Outline Width you can choose <kbd>Circle Area</kbd> as an interpolation setting next to the Property name. Use it if you want to draw Point Features whose surface area should represent the property value. This makes visually more sense than the diameter which represents the stroke width. Note that in this case you should have only 2 items in the value range.</p>
                        <p>If the data-driving property of the Feature is an Array GEOlayers will animate the corresponding shape layer settings. In the browser you will see a little <span style="color:white;" class="{{iconClasses.keyframe}}"></span> icon if the Features' property is suitable for an animation. The duration of this animation can be adjusted changing the <kbd>Default Animation Duration</kbd> in the preferences</p>
                        <p>By checking the <kbd>rnd</kbd> setting, it will be randomized in the given value range.</p>
                        <p>The little <span style="color:white;" class="{{iconClasses.dataTransformerSmall}}"></span> icon in the style thumbnail indicates that the style has at least one data-driven setting. Thumbnails in the feature browser also preview data-driven settings. If the <span style="color:white;" class="{{iconClasses.dataTransformerSmallNoProperty}}"></span> icon is not spinning the Feature has no property to data-drive the Shape Layer Style.</p>
						<img src="help/dataDrivenStyling3.png" width="100%">
						<vimeo vimeoid="404914688" alt></vimeo>
                    </div>
				</div>
				<div class="chapter" id="projectspanel">
					<h3>Projects</h3>
                    <p>Find the projects panel in the flyout menu of the extension.</p>
                    <img src="help/projectsPanel.png" width="100%">
					<div class="subchapter1" id="projectspanelNew">
                        <h5>Create a new Project</h5>
                        <p>Click this button to create a new GEOlayers project and Mapcomp.</p>
                    </div>
					<div class="subchapter1" id="projectspanelNew">
                        <h5>Import a Project</h5>
                        <p>If you want to integrate a GEOlayers 3 project in the one that is already open. GEOlayers will take care of unique comp names, update expressions, merge shape layer styles of both projects, and sort your items into the required folder structure.</p>
                    </div>
					<div class="subchapter1" id="projectspanelNew">
                        <h5>Open a Project</h5>
                        <p>Click this button to open any After Effects project.</p>
                    </div>
                    <div class="subchapter1" id="projectspanelRecent">
                        <h5>Recent Projects</h5>
                        <p>In this section you can find and open your recent GEOlayers projects.</p>
                    </div>
                    <div class="subchapter1" id="projectspanelSample">
                        <h5>Sample Projects</h5>
						<p>You can directly download sample projects to get you started. The projects can contain shape layers styles and label templates. Features can be delivered with the project. In this case, they will be added to your browser when the project is loaded.</p>
						<p>The <a class="silentbutton"><span class="{{iconClasses.download}}"></span></a> icon top right lets you download the project with your browser.</p>
						<p>If there is a <a class="silentbutton"><span class="{{iconClasses.movie}}"></span></a> top right you can also watch a related video to learn more.</p>
						<p>Label template projects can be directly imported to your GEOlayers project if one is currently open.</p>
						<vimeo vimeoid="425849140" alt></vimeo>
                    </div>
				</div>
				<div class="chapter" id="preferences">
					<h3 ng-click="hiddenPrefs($event)">Preferences</h3>
					<p>Find the preferences in the context or flyout menu of your GEOlayers panel.</p>
					<div class="subchapter1" id="preferencesGeneral">
						<h5>General</h5>
						<dl>
							<dt>Default Composition Settings</dt>
							<dd>Choose some defaults for creating Mapcomps. Note that you can also select a Composition before you create a Mapcomp to apply its composition settings and place the Mapcomp inside.</dd>
						</dl>
						<dl>
							<dt>Default language</dt>
							<dd>Choose a language which Mapcomps will use by default.</dd>
						</dl>
						<dl>
							<dt>Smoothen view animations</dt>
							<dd>If this setting is checked all view animations will be eased automatically. Smoothing will also be applied if you animate a Mapcomp's view along a feature.</dd>
						</dl>
						<dl>
							<dt>Easing</dt>
							<dd>If you have smoothen view animations enabled you can choose the velocity influence for the keyframes.</dd>
						</dl>
						<dl>
							<dt>Default animation duration</dt>
							<dd>This duration is used for animating views, markers, labels, or draw shape layers along a feature. If the feature has timed information like GPX tracks and the Mapcomp's duration is long enough the original time will be used to animate. If the composition is not long enough the speed is scaled up relatively to match the default animation duration.</dd>
							<dd>To adapt the animation length once it is drawn, select all the keyframes and drag the last keyframe around holding <kbd>ALT/OPT</kbd>.</dd>
						</dl>
						<dl>
							<dt>Show Tooltips</dt>
							<dd>You can disable tooltips here.</dd>
						</dl>
						<dl>
							<dt>Show Hints</dt>
							<dd>You can disable the Hints that pop up after certain actions.</dd>
						</dl>
						<dl>
							<dt>Use System Color Picker</dt>
							<dd>Select whether you want to use the GEOlayers color picker or the system default.</dd>
						</dl>
						<dl>
							<dt>Finalize only containing comps work area</dt>
							<dd>Instead of the whole duration only the work area of the composition your Mapcomp is placed inside is finalized. This can be handy for long, complex animations.</dd>
						</dl>
						<dl>
							<dt>Show Bounding Box of previewed Features</dt>
							<dd>Show a Bounding Box around Features in the preview map.</dd>
						</dl>
					</div>
					<div class="subchapter1" id="preferencesOnlineSearch">
						<h5>Feature Search</h5>
						<dl>
							<dt>Services</dt>
							<dd>You can set up multiple services for your searchbar and the search by coordinate function. Note that <kbd>MapTiler</kbd> is only available if you have have connected your MapTiler Cloud account.</dd>
						</dl>
						<vimeo vimeoid="517178231" alt></vimeo>
					</div>
					<div class="subchapter1" id="preferencesImagery">
						<h5>Mapcomp Imagery</h5>
						<dl>
							<dt>Render Directory</dt>
							<dd>Into this directory all the Imagery will be rendered.</dd>
						</dl>
						<dl>
							<dt>Render to project directory</dt>
							<dd>Enable this setting and GEOlayers will try to render the imagery to the directory your After Effects project file is stored. It is more efficient to use a global render directory and collect files as the project is finished since GEOlayers will be faster using already rendered imagery on different projects.</dd>
						</dl>
					</div>
					<div class="subchapter1" id="preferencesLabels">
						<h5>Labels</h5>
						<dl>
							<dt>Custom Label Template Project</dt>
							<dd>Apart from the Default Label Templates you can define a custom .aep that will be loaded when you create a new GEOlayers 3 project.</dd>
						</dl>
						<dl>
							<dt>Ask for missing data before adding Template Label</dt>
							<dd>If you want to add a label for a feature and the Label Template requires data that can't be provided by the feature GEOlayers will show a dialog that lets you enter the missing data.</dd>
						</dl>
						<dl>
							<dt>Renaming</dt>
							<dd>You can set up a renaming table for the automatic Mapcomp labels. Type in the location name you don't want to see and a name with which it should be replaced.</dd>
						</dl>
					</div>
					<div class="subchapter1" id="preferencesShapeLayers">
						<h5>Shape Layer drawing</h5>
						<dl>
							<dt>Change renderer for extruded layers</dt>
							<dd>The After Effects Classic 3D renderer can't display extrusions. GEOlayers can change the renderer to Ray-Traced or the CINEMA 4D renderer once a shape layer is drawn with extrusion. The Mapcomp itself can't be rendered with a different renderer such as Classic 3D due to the layer blending during zoom level transitions. This is why extruded shapes can't be drawn inside Mapcomps. They will be offset in z-space.</dd>
						</dl>
						<dl>
							<dt>Cast shadows</dt>
							<dd>You can set up newly drawn shape layers to cast shadows by default.</dd>
						</dl>
						<dl>
							<dt>Accept shadows</dt>
							<dd>You can set up freshly drawn shape layers to not accept shadows by default.</dd>
						</dl>
						<dl>
							<dt>Duplicate Features across Date Line</dt>
							<dd>Draw features multiple times if they cross the date line or your view is zoomed out that far that it shows the whole world multiple times. </dd>
						</dl>
						<dl>
							<dt>Dash Zoom Threshold</dt>
							<dd>As you zoom a map that has a shapelayer with a dashed stroke attached and it was drawn with the <kbd>Auto Stroke Width</kbd> setting GEOlayers needs to adjust the dash length according to the stroke width to keep it visually balanced. This slider lets you adjust how much streching of the dash length is allowed. 0 means no stretching at all. A value of 1 ends up in one step each zoomlevel.</dd>
							<vimeo vimeoid="441281318" loop alt></vimeo>
						</dl>
						<dl>
							<dt>Accurate Topology Simplification</dt>
							<dd>Polygons with shared borders are simplified more accurate to avoid glitches. This method is slower.</dd>
						</dl>
						<dl>
							<dt>Simplification Detail (Zoom Offset)</dt>
							<dd>Features are simplified according to a certain zoom of your map. Increasing this value will lead to more detail in the geometry allowing you to add a little zoom to your animation afterwards without the need to draw the feature again.</dd>
						</dl>
						<vimeo vimeoid="507479009" alt></vimeo>
						<br>
					</div>
					<div ng-if="showHiddenPrefs" class="subchapter1" id="preferencesFinalization">
						<h5>Finalization</h5>
						<dl>
							<dt>Max tiles for finalized Mapcomp</dt>
							<dd>The maximum number of imagery layers GEOlayers will allow during finalization. Keep in mind that your machine might get pretty busy if you allow a really high amount of layers.</dd>
						</dl>
						<dl>
							<dt>Base Sample Rate</dt>
							<dd>Define the frames to be left out during analyzation before finalizing. GEOlayers will automatically sample more details depending on the map movement it detects. Nevertheless, if you have problems with missing tiles on the mapcomp edges, you can lower this value and finalize again.</dd>
						</dl>
						<h5>Mapcomp Label Engine</h5>
						<p>There is a complex algorithm setting up the Mapcomp labels. Changing these values might end up in unwanted results.</p>
						<dl class="ml-3 my-1">
							<dt>Title Safe Area</dt>
							<dd>The minimum distance from the border of the frame, relative to the Mapcomp size, in which Mapcomp labels can be drawn</dd>
						</dl>
						<dl class="ml-3 my-1">
							<dt>Label Buffer</dt>
							<dd>The buffer around each label, relative to the Mapcomp size, which prevent labels from displaying if they collide.</dd>
						</dl>
						<dl class="ml-3 my-1">
							<dt>Min Appearance Time</dt>
							<dd>If a label doesn't reach this time to be displayed it won't be added to the Mapcomp since you wouldn't be able to read it.</dd>
						</dl>
						<dl class="ml-3 my-1">
							<dt>Collision Sample Rate</dt>
							<dd>The rate in which GEOlayers looks for label collisions and sets up blending during finalization.</dd>
						</dl>
						<dl class="ml-3 my-1">
							<dt>Max labels to sample per view</dt>
							<dd>The maximum amount of labels that can influence each other.</dd>
						</dl>
						<dl class="ml-3 my-1">
							<dt>Lock Mapcomp Labels</dt>
							<dd>Lock created Mapocmp labels after finalization.</dd>
						</dl>
					</div>
					<div ng-if="showHiddenPrefs" class="subchapter1" id="preferencesPinnedLayers">
						<h5>Pinned Layers</h5>
						<dl>
							<dt>Rotate along path smoothing</dt>
							<dd>This setting describes the smoothing applied to the rotation, if you animate a pinned layer or label along a feature and enable its rotate along path effect.</dd>
						</dl>
					</div>
					<div class="subchapter1" id="preferencesScripts">
						<h5>Scripts</h5>
						<dl>
							<dt>Script folders</dt>
							<dd>Add directorys that store .jsx or .jsxbin files to run them from the GEOlayers toolbar.</dd>
						</dl>
						<dl>
							<dt>Detect script files in project directory</dt>
							<dd>Show .jsx or .jsxbin files in the toolbar script runner that are in the same directory as your current After Effects project file.</dd>
						</dl>
					</div>
					<div class="subchapter1" id="preferencesRenderQueue">
						<h5>Render Queue</h5>
						<p>Once your Finalization is done GEOlayers displays the option to add a compostion to the After Effects or Media Encoder Render Queue.</p>
						<dl>
							<dt>Render Directory</dt>
							<dd>You can either keep the default behaviour of After Effects setting your output folder or specify an absolute or relative path.</dd>
						</dl>
						<dl>
							<dt>Create Directory if not existing</dt>
							<dd>You can allow GEOlayers to create the render directory if it doesn't exist.</dd>
						</dl>
					</div>
				</div>
				<div class="chapter" id="scriptingapi">
					<h3>Scripting API</h3>
					<p>There is an extend script API that you can use to automate tasks with GEOlayers. Feel free to get in touch and tell us what you need to create automated workflows. In general, the GEOlayers panel needs to be open when you want to call any function of the API.</p>
					<p><button type="button" class="btn btn-sm btn-outline-primary flexfixed" onclick="window.cep.util.openURLInDefaultBrowser('https://geolayers3-live.firebaseapp.com/scriptingApiExamples.zip')">
						Download Examples
					</button></p>
					<p>Find an overview of the functions the API exposes:</p>
					<br>
					<dl>
						<dt>geolayers3.importProject(file[, isLabelTemplateProject])</dt>
						<dd>
							Import a project to your current one. GEOlayers will sort everything into its project structure, take care of unique comp names and update expressions accordingly.
							<br>Arguments:
							<ul>
								<li><strong>file:</strong> A File object referencing an .aep or .aet file.</li>
								<li><strong>isLabelTemplateProject:</strong> Boolean, set to true if the project to import only contains Label Templates.</li>
							</ul>
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.finalize(comps, callback[, options])</dt>
						<dd>
							Use it to finalize Mapcomps.
							<br>Arguments:
							<ul>
								<li><strong>comps:</strong> Either one or an array of Mapcomp names, Mapcomps or comps that contain Mapcomps, or undefined to finalize all Mapcomps in the project.</li>
								<li><strong>callback:</strong> A function (error, mapcomps) that is called async when all finalizations are done.</li>
								<li><strong>options:</strong> An options object with the following possible boolean properties: "onlyCurrentFrame", "previewQuality", "onlyWorkArea" and "purgeImageryCache". </li>
							</ul>
							Note that this is an async function. This means any scripting that has to be done after the finalization needs to be placed inside the callback function.
                			It takes an error as the first and the finalized compositions as the second argument and is called after all finalizations are done.
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.duplicate(comp[, options])</dt>
						<dd>
							Use it to duplicate Mapcomps or comps that contain Mapcomps. This method also updates all related expressions.
							<br>Arguments:
							<ul>
								<li><strong>comp:</strong> A Mapcomp name, Mapcomp or comp that contains a Mapcomp</li>
								<li><strong>options:</strong> An options object. Use it for naming the duplicates. If you're duplicating a Mapcomp use the property "newName". If you duplicate a containing comp use "newContainingCompName"</li>
							</ul>
							This function returns the duplicate comp or undefined if anything goes wrong.
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.setViewAtTime(comp, view[, forceKeyframe[, time]])</dt>
						<dd>
							Use it to set or animate views of Mapcomps.
							<br>Arguments:
							<ul>
								<li><strong>comp:</strong> A Mapcomp name, Mapcomp or comp that contains a Mapcomp</li>
								<li><strong>view:</strong> An object with the following float properties: "latitude", "longitude", "zoom", "bearing" and "pitch".</li>
								<li><strong>forceKeyframe:</strong> Set this to true to set a keyframe even if the property is not keyframed yet.</li>
								<li><strong>time:</strong> The time in the containing comp to set the value. If it is undefined it takes the current time.</li>
							</ul>
							This function returns the applied view object or undefined if anything goes wrong.
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.fitViewAtTime(comp, bbox[, forceKeyframe[, time]])</dt>
						<dd>
							Use it to set or animate views of Mapcomps by a bounding box.
							<br>Arguments:
							<ul>
								<li><strong>comp:</strong> A Mapcomp name, Mapcomp or comp that contains a Mapcomp</li>
								<li><strong>bbox:</strong> A geojson bounding box Array [LongitudeMin, LatitudeMin, LongitudeMax, LatitudeMax] (WGS 84)</li>
								<li><strong>forceKeyframe:</strong> Set this to true to set a keyframe even if the property is not keyframed yet.</li>
								<li><strong>time:</strong> The time in the containing comp to set the value. If it is undefined it takes the current time.</li>
							</ul>
							This function returns the applied view object or undefined if anything goes wrong.
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.removeMapcompControlKeys(comp)</dt>
						<dd>
							Removes all keyframes from the Latitude, Longitude, Zoom, Bearing and Pitch controls of the specified Mapcomp.
							<br>Arguments:
							<ul>
								<li><strong>comp:</strong> A Mapcomp name, Mapcomp or comp that contains a Mapcomp</li>
							</ul>
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.getMapcomps()</dt>
						<dd>
							Returns all mapcomps of the project.
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.getMapcompAnchor(mapcomp)</dt>
						<dd>
							Returns the mapcomp's anchor layer in their containing comp.
							<br>Arguments:
							<ul>
								<li><strong>mapcomp:</strong> A Mapcomp name, Mapcomp or comp that contains a Mapcomp</li>
							</ul>
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.getLabelTemplateComps()</dt>
						<dd>
							Returns the projects Label Template Compostioions or an empty Array.
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.addLabel(comp, labelTemplateComp, labelData)</dt>
						<dd>
							Use it to add Labels to Mapcomps.
							<br>Arguments:
							<ul>
								<li><strong>comp:</strong> A Mapcomp name, Mapcomp or comp that contains a Mapcomp</li>
								<li><strong>labelTemplateComp:</strong> A composition, label template name or an integer representing the number of the label template in the project.</li>
								<li><strong>labelData:</strong> An object with the following required float properties: "latitude" or "lat" and "longitude" or "lon" plus the string properties the label template requires like "name" ect.</li>
							</ul>
							This function returns the label layer or undefined if anything goes wrong.
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.updateLabelData(labelLayer, newLabelData)</dt>
						<dd>
							Use it to update data in already created Template Labels.
							<br>Arguments:
							<ul>
								<li><strong>labelLayer:</strong> A Label Layer</li>
								<li><strong>newLabelData:</strong> An object with the string properties the label template requires like "name" ect.</li>
							</ul>
							This function returns the label layer or undefined if anything goes wrong.
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.getLayersGeoPosition(layer)</dt>
						<dd>
							Use it to get longitude and latitude of a layer in relation to a Mapcomp.
							<br>Arguments:
							<ul>
								<li><strong>layer:</strong> A layer in a mapcomps containing comp</li>
							</ul>
							This function returns an array [longitude, latitude] or undefined if anything goes wrong.
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.fetchText(url, callback[, initObject])</dt>
						<dd>
							Hit an url and get back the response as text.
							<br>Arguments:
							<ul>
								<li><strong>url:</strong> The url you want to fetch.</li>
								<li><strong>callback:</strong> A function(error, data) that is called async when the response has been processed.</li>
								<li><strong>initObject:</strong> Please search the fetch API docs for the init object.</li>
							</ul>
							Note that this is an async function. Means that any scripting that has to be done after the request needs to be placed inside the callback function.
                			It takes an error as the first and the responded data as the second argument and is called after the response has been processed.
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.fetchJson(url, callback[, initObject])</dt>
						<dd>
							A quick way to hit json apis.
							<br>Arguments:
							<ul>
								<li><strong>url:</strong> The url you want to fetch.</li>
								<li><strong>callback:</strong> A function(error, data) that is called async when the response has been processed.</li>
								<li><strong>initObject:</strong> Please search the fetch API docs for the init object.</li>
							</ul>
							Note that this is an async function. Means that any scripting that has to be done after the request needs to be placed inside the callback function.
                			It takes an error as the first and the responded data as the second argument and is called after the response has been processed.
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.geocode(searchString, callback[, options])</dt>
						<dd>
							A quick way to geocode a string. Pretty much the same as if you would type it into the searchbar.
							<br>Arguments:
							<ul>
								<li><strong>searchString:</strong> The search term or address you want to geocode.</li>
								<li><strong>callback:</strong> A function(error, features) that is called async when the response has been processed.</li>
								<li><strong>options:</strong> An options object with the following possible ISO639 string property: "language". By default the selected Mapcomp's setting will be used.</li>
							</ul>
							Note that this is an async function. Means that any scripting that has to be done after the request needs to be placed inside the callback function.
                			It takes an error as the first and an array of geojson features as the second argument and is called after the response has been processed.
							This function uses OpenStreetMap Nominatim search engine. You shouldn't bulk geocode placenames. The geolayers scripting api will queue multiple requests at the same time according to the Nominatim usage policy.
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.watch(fileOrFolder, callback[, options])</dt>
						<dd>
							Watches a file or folder for changes. If a file or folder is allready being watched it will be canceled.
							<br>Arguments:
							<ul>
								<li><strong>fileOrFolder:</strong> A File or Folder object to watch.</li>
								<li><strong>callback:</strong> A function(file) or function(changedFilesInFolder, allFilesInFolder) that is called each time the file or a file in the folder changes. If the scripting api is busy finalizing(or any other async method) the function will be called after the next interval.</li>
								<li><strong>options:</strong> An options object with the following possible integer property: "interval" which is the intervall between the checks in ms defaults to 10000.</li>
							</ul>
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.watchCsv(csvFile, callback[, options])</dt>
						<dd>
							Watches a file or folder for changes. If a file or folder is allready being watched it will be canceled.
							<br>Arguments:
							<ul>
								<li><strong>csvFile:</strong> A File object referencing a .csv, .tsv or .txt file to watch.</li>
								<li><strong>callback:</strong> A function(changedRows, allRows) that is called each time the csv file changes. If the scripting api is busy finalizing(or any other async method) the function will be called after the next interval.</li>
								<li><strong>options:</strong> An options object with the following possible properties: "interval" integer which is the intervall between the checks in ms, defaults to 10000. "delimiter" string used to split values of the file, defaults to ",".</li>
							</ul>
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.unwatch()</dt>
						<dd>
							Stops the current watch task.
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.addToBrowser(addObj, [callback[, options]])</dt>
						<dd>
							Adds fretures to the browser even from a file, a geocoding request, an overpass api query or a geojson object.
							<br>Arguments:
							<ul>
								<li><strong>addObj:</strong> Can be one of the following objects:
									<ul>
										<li>ExtendScript File object referencing a geospatial file</li>
										<li>Url to a geospatial file. The url should contain the file extension.</li>
										<li>geojson object</li>
										<li>{<br>
											type: "geocode",<br>
											query: "Term to geocode"<br>
										}</li>
										<li>{<br>
											type: "overpass",<br>
											query: "Overpass query"<br>
										}</li>
										<li>{<br>
											type: "osm",<br>
											id: "OpenStreetMap Id (something like node1234 or way4321 or rel1243)"<br>
										}</li>
										<li>{<br>
											type: "geojsonurl",<br>
											url: "Url to geojson"<br>
										}</li>
									</ul>
								</li>
								<li><strong>callback:</strong> A function(error, data) that is called after the data has been imported to the browser.</li>
								<li><strong>options:</strong> An options object with the following possible properties:
									<ul>
										<li><strong>returnData</strong> boolean: Set to true to return the data in the callback, defaults to false since this can be very slow for larger features.
										<li><strong>pointGeometries</strong> boolean: Return the Feature as a Point representation, which is way faster for complex Geometries.
										<li><strong>normalizeToFeatureArray</strong> boolean: Return an Array of Features instead of possible nested Feature Collections.
										<li><strong>name</strong> string: A name for the root feature or feature collection that is imported.
										<li><strong>namingProp</strong> string: The property that should be used to name all imported features.
									</ul>
								</li>
							</ul>
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.clearBrowser([callback])</dt>
						<dd>
							Removes all features but the favorites from the browser.
							<br>Arguments:
							<ul>
								<li><strong>callback:</strong> A function(error, data) that is called after the browser has been cleared.</li>
							</ul>
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.removeBrowserSelection([callback])</dt>
						<dd>
							Removes selected features from the browser.
							<br>Arguments:
							<ul>
								<li><strong>callback:</strong> A function(error, data) that is called after features have been removed.</li>
							</ul>
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.getBrowserSelection([callback[, options]])</dt>
						<dd>
							Get features that are selected in the browser.
							<br>Arguments:
							<ul>
								<li><strong>callback:</strong> A function(error, data) with an Array of selected features as data.</li>
								<li><strong>options:</strong> An options object with the following possible properties:
									<ul>
										<li><strong>fullGeometry</strong> boolean: Set to true to return the features full geometry instead of just a point. This can be very slow for large geometries.
									</ul>
								</li>
							</ul>
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.drawBrowserSelection(comp, [callback[, options]])</dt>
						<dd>
							Draws features which are selected in the browser of the GEOlayers 3 panel to a Mapcomp.
							<br>Arguments:
							<ul>
								<li><strong>comp:</strong> A Mapcomp name, Mapcomp or comp that contains a Mapcomp</li>
								<li><strong>callback:</strong> A function(error, data) that is called after the data has been imported to the browser.</li>
								<li><strong>options:</strong> An options object with the following possible properties:</li>
									<ul>
										<li><strong>shapeLayerStyle:</strong> an index number, name or shape layer style object</li>
										<li><strong>drawInsideMapcomp:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>autoStrokeWidth:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>simplify:</strong> defaults to <kbd>true</kbd></li>
										<li><strong>simplyfyByZoomRange:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>simplificationZoomOffset:</strong> defaults to <kbd>0</kbd></li>
										<li><strong>useTopoSimplificationIfPossible:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>individualLayers:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>autoChangeRenderer:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>addTrimPaths:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>duration:</strong> defaults to <kbd>10</kbd></li>
										<li><strong>dateBorderCopy:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>dashThreshold:</strong> defaults to <kbd>1</kbd></li>
										<li><strong>absoluteZScale:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>castsShadows:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>acceptsShadows:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>lockLayerTransforms:</strong> defaults to <kbd>false</kbd></li>
									</ul>
								</li>
							</ul>
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.draw(comp, addObj, [callback[, options]])</dt>
						<dd>
							Draws features to a Mapcomp. Features are specified with an addObj like in the .addToBrowser() method.
							<br>Arguments:
							<ul>
								<li><strong>comp:</strong> A Mapcomp name, Mapcomp or comp that contains a Mapcomp</li>
								<li><strong>addObj:</strong> Can be one of the following objects:
									<ul>
										<li>ExtendScript File object referencing a geospatial file</li>
										<li>Url to a geospatial file. The url should contain the file extension.</li>
										<li>geojson object</li>
										<li>{<br>
											type: "geocode",<br>
											query: "Term to geocode"<br>
										}</li>
										<li>{<br>
											type: "overpass",<br>
											query: "Overpass query"<br>
										}</li>
										<li>{<br>
											type: "osm",<br>
											id: "OpenStreetMap Id (something like node1234 or way4321 or rel1243)"<br>
										}</li>
										<li>{<br>
											type: "geojsonurl",<br>
											url: "Url to geojson"<br>
										}</li>
									</ul>
								</li>
								<li><strong>callback:</strong> A function(error, data) that is called after the data has been imported to the browser.</li>
								<li><strong>options:</strong> An options object with the following possible properties:</li>
									<ul>
										<li><strong>shapeLayerStyle:</strong> an index number, name or shape layer style object</li>
										<li><strong>drawInsideMapcomp:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>autoStrokeWidth:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>simplify:</strong> defaults to <kbd>true</kbd></li>
										<li><strong>simplyfyByZoomRange:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>simplificationZoomOffset:</strong> defaults to <kbd>0</kbd></li>
										<li><strong>useTopoSimplificationIfPossible:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>individualLayers:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>autoChangeRenderer:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>addTrimPaths:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>duration:</strong> defaults to <kbd>10</kbd></li>
										<li><strong>dateBorderCopy:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>dashThreshold:</strong> defaults to <kbd>1</kbd></li>
										<li><strong>absoluteZScale:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>castsShadows:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>acceptsShadows:</strong> defaults to <kbd>false</kbd></li>
										<li><strong>lockLayerTransforms:</strong> defaults to <kbd>false</kbd></li>
									</ul>
								</li>
							</ul>
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.filesInDir(folder[, filterRegEx[, includeSubDirectories]])</dt>
						<dd>
							Returns File objects of all Files in the given folder matching the filter regular expression. It can also include sub directories.
							<br>Arguments:
							<ul>
								<li><strong>folder:</strong> Extend Script Folder Object.</li>
								<li><strong>filterRegEx:</strong> Regular expression to test on the file name.</li>
								<li><strong>includeSubDirectories:</strong> Boolean, set to true to include files from sub directories.</li>
							</ul>
							Returns a string.
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.readFile(file[, encoding])</dt>
						<dd>
							Reads the contents of a file.
							<br>Arguments:
							<ul>
								<li><strong>file:</strong> Extend Script File Object or filename string.</li>
								<li><strong>encoding:</strong> String, defaults to UTF8. For details check out the Extend Script Tools Guide</li>
							</ul>
							Returns a string.
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.readFileCsv(file[, encoding])</dt>
						<dd>
							Reads the contents of a .csv or .tsv file.
							<br>Arguments:
							<ul>
								<li><strong>file:</strong> Extend Script File Object or filename string.</li>
								<li><strong>encoding:</strong> String, defaults to UTF8. For details check out the Extend Script Tools Guide</li>
							</ul>
							Returns an Array of rows where each row is an Array of columns.
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.readFileJson(file[, encoding])</dt>
						<dd>
							Reads the contents .json file.
							<br>Arguments:
							<ul>
								<li><strong>file:</strong> Extend Script File Object or filename string.</li>
								<li><strong>encoding:</strong> String, defaults to UTF8. For details check out the Extend Script Tools Guide</li>
							</ul>
							Returns a JavaScript Object.
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.writeFile(file, content[, encoding])</dt>
						<dd>
							Writes a file to disk.
							<br>Arguments:
							<ul>
								<li><strong>file:</strong> Extend Script File Object or filename string.</li>
								<li><strong>content:</strong> String to write to the file.</li>
								<li><strong>encoding:</strong> String, defaults to UTF8. For details check out the Extend Script Tools Guide</li>
							</ul>
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.userFolder()</dt>
						<dd>
							Returns a Folder Object referencing the GEOlayers User Folder.
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.userFile(fileName)</dt>
						<dd>
							Returns a File Object referencing a File with the fileName inside the GEOlyers User Folder.
							<br>Arguments:
							<ul>
								<li><strong>fileName:</strong> File 'basename.extension' string.</li>
							</ul>
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.modalEditObject(obj, callback[, options])</dt>
						<dd>
							Use the GEOlayers 3 UI to edit properties of a simple flat javascript object. It can handle strings, numbers and booleans.
							<br>Arguments:
							<ul>
								<li><strong>obj:</strong> A simple flat object to edit like: {name: "New York", id: 12, selected: true}</li>
								<li><strong>callback:</strong> A function(error, editedObj) that is called after the user applied his edits or canceled.</li>
								<li><strong>options:</strong> An options object with the following possible string properties: "title", "message" Both to be displayed in the UI.</li>
							</ul>
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.modalActions(actions, callback[, options])</dt>
						<dd>
							Use the GEOlayers 3 UI to edit properties of a simple flat javascript object. It can handle strings, numbers and booleans.
							<br>Arguments:
							<ul>
								<li><strong>actions:</strong> An array of strings to be displayed as buttons</li>
								<li><strong>callback:</strong> A function(error, actionsIndex) that is called after the user clicked one of your action buttons or canceled. The index of the action in the actions array or undefined in case he canceled will be returned as actionsIndex.</li>
								<li><strong>options:</strong> An options object with the following possible string properties: "title", "message" Both to be displayed in the UI.</li>
							</ul>
						</dd>
					</dl>
					<br>
					<dl>
						<dt>geolayers3.githubBrowser([options])</dt>
						<dd>
							Show a panel in which you can browse GitHub Repos and perform actions like importing files from it.
							<br>Arguments:
							<ul>
								<li><strong>options:</strong> An object that can have the following properties and methods:</li>
								<ul>
									<li><strong>title</strong> (String) panel title</li>
									<li><strong>defaultUser</strong> (String) initial GitHub username</li>
									<li><strong>defaultRepo</strong> (String) initial GitHub repository name</li>
									<li><strong>fixedRepo</strong> (Boolean) allow the user to change github user and repo or not</li>
									<li><strong>flatten</strong> (Boolean) initial Flatten folders value</li>
									<li><strong>filterText</strong> (String) initial text for the browsers filter bar</li>
									<li><strong>actionBtnText</strong> (String) text to display the button that triggers the action callback, defaults to "Import to GEOlayers"</li>
									<li><strong>actionFilter</strong> (Function) filter function(item) that should return true if the item is suitable for the action callback, defaults to accepting geojson files</li>
									<li><strong>action</strong> (Function) function(item, url) to be performed as the user clicks the action button, defaults to importing it the Feature Browser</li>
								</ul>
							</ul>
						</dd>
					</dl>
					<br>
					<p><button type="button" class="btn btn-sm btn-outline-primary flexfixed" onclick="window.cep.util.openURLInDefaultBrowser('https://geolayers3-live.firebaseapp.com/scriptingApiExamples.zip')">
						Download Examples
					</button></p>
				</div>
				<div class="chapter" id="datasubscription">
					<h3>MapTiler Data</h3>
					<p>Some functions of GEOlayers are only possible because we partnered with <a class="clickable" onclick="window.cep.util.openURLInDefaultBrowser('https://www.maptiler.com')">MapTiler</a> as a data provider.</p>
					<p>This partnership allows us to provide these features:</p>
					<ul>
						<li>Stylized Mapcomp Imagery (The imagery styles with the MapTiler icon)</li>
						<li>Find Features by clicking the preview map</li>
						<li>Mapcomp labels in different languages</li>
						<li>Watermask Mapcomps from the toolbar</li>
						<li>Feature import for the current view to the browser</li>
						<li>Drawing 3D buildings from the toolbar</li>
					</ul>
					<p>After the free trial to check it out you'll need a <a class="clickable" onclick="window.cep.util.openURLInDefaultBrowser('https://www.maptiler.com/cloud/geolayers')">Flex plan on MapTiler Cloud</a> to enable these features.</p>
					<p>You can of course use GEOlayers without it.</p>
					<vimeo vimeoid="479822829" alt></vimeo>
				</div>
				<div class="chapter" id="disclaimer">
					<h3>Disclaimer</h3>
					<p>The terms of use of the map service providers apply. Content must be attributed unless otherwise agreed with the map service provider.</p>
					<p>GEOlayers cannot ensure that every tileserver, geocoding-service, or other external geodata source work properly all the time. Certain functions will not work if remote servers are down, which are out of our control.</p>
					<p>The creators of GEOlayers are not responsible for the topicality, correctness, completeness, or quality of the information provided or acquired with this software from the aforementioned exernal map service providers. GEOlayers cannot be held liable for damages caused by the use of any information provided, including any kind of information which is incomplete or incorrect. All offers are unbinding and without obligation.</p>
					<p>The creators of GEOlayers do not claim any ownership or license for the images and data you acquire with this software from any map service provider.</p>
				</div>
		</div>
	</div>

	<script>
		if (typeof module === 'object') {
			window.module = module;
			module = undefined;
		}
	</script>
	<script>
		if (typeof exports === 'object') {
			window.exports = exports;
			exports = undefined;
		}
	</script>
	<script src="js/libs/CSInterface.js"></script>
	<script src="js/libs/jquery-2.0.2.min.js"></script>
	<script src="js/libs/bootstrap.min.js"></script>
	<script src="js/libs/bootstrap-slider.js"></script>
	<script src="js/libs/themeManager.js"></script>
	<script src="js/libs/angular.min.js"></script>
	<script src="js/libs/bootstrap-slider.js"></script>
    <script src="js/libs/slider.js"></script>
    <script src="js/libs/angular-vs-repeat.js"></script>
    <script src="js/libs/uiBootstrap.js"></script>
    <script src="js/libs/angular-dndLists.js"></script>
    <script src="js/libs/angular-LongPress.js"></script>
    <script src="js/libs/angular-rightClick.js"></script>
	<script src="js/libs/jquery.mark.js"></script>
	<script>
		if (window.module) module = window.module;
	</script>
	<script>
		if (window.exports) exports = window.exports;
	</script>
	<script src="js/libs/iconClasses.js"></script>
	<script src="js/mainHelp.js"></script>
	<script src="js/libs/additionalDirectives.js"></script>

</body>

</html>
