Mapp library and stylesheets

docs/design/index.html

@@ -409,8 +409,8 @@
 
     <div id="content">
       <h1 id="design">Design <a class="header-anchor" href="#design">¶</a></h1>
-<p>XYZ application views, such as MAPP, maybe be composed with predefined control elements. These elements are defined as classes in the control.css which is hosted as a static file in the /public/css XYZ directory.</p>
-<p>The control.css file itself is compiled from individual SCSS files in the same directory.</p>
+<p>XYZ application views, such as MAPP, maybe be composed with predefined control elements. These elements are defined as classes in the mapp.css which is hosted as a static file in the /public/css XYZ directory.</p>
+<p>The mapp.css file itself is compiled from individual SCSS files in the same directory.</p>
 <p>This section of the documentation will highlight the individual control element classes and explain how elements can be modified by overwriting component styles.</p>
 <p>The mobile and desktop MAPP views have their own style sheets which define the layout configuration as well as overrides for components nested within the individual application view panels.</p>
 <p>Responsive application views used for embeds and reports will be added to this section once they become publicly available.</p>

docs/develop/lib/webpack/index.html

@@ -410,7 +410,7 @@
     <div id="content">
       <h1 id="bundling-the-control-library">Bundling the control library <a class="header-anchor" href="#bundling-the-control-library">¶</a></h1>
 <p>The library code split into multiple ES6 modules is stored in the <a href="https://github.com/GEOLYTIX/xyz/tree/master/lib">/lib</a> directory of the XYZ repo. The application is bundled with <a href="https://webpack.js.org">Webpack 4</a>.</p>
-<p>The <a href="https://github.com/GEOLYTIX/xyz/blob/master/package.json">package.json</a> stores mutliple scripts to build the control library as <a href="https://github.com/GEOLYTIX/xyz/blob/master/public/js/xyz_openlayers.js">xyz_openlayers.js</a> in the /public/js directory.</p>
+<p>The <a href="https://github.com/GEOLYTIX/xyz/blob/master/package.json">package.json</a> stores mutliple scripts to build the control library as <a href="https://github.com/GEOLYTIX/xyz/blob/master/public/js/mapp.js">mapp.js</a> in the /public/js directory.</p>
 <p><code>npm run dev</code> will be build a development library which is not size optimised. The compilation to dev is fastest.</p>
 <p><code>npm run build</code> will bundle a production library which is commited to the XYZ repository.</p>
 <p>The <a href="https://github.com/GEOLYTIX/xyz/blob/master/webpack.config.js">webpack.config</a> provides following configuration for the compilation process. The entry point for the bundle is the index.mjs module script in the /lib directory.</p>

docs/develop/views/index.html

@@ -411,7 +411,7 @@
       <h1 id="application-views">Application Views <a class="header-anchor" href="#application-views">¶</a></h1>
 <p>Application views are browser interfaces which consist of HTML(CSS) and Javascript. The default Mapp interface is provided as _default.html, _default.js, and _default.css in the <a href="https://github.com/GEOLYTIX/xyz/tree/master/public/views">public/views</a> directory.</p>
 <p>A series of stylesheet and script must be referenced in the document head of the application view.</p>
-<pre class="language-html"><code class="language-html"><span class="token comment">&lt;!-- Load openlayers library and stylesheet. --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>${dir}/css/openlayers.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>${dir}/js/ol.js<span class="token punctuation">"</span></span> <span class="token attr-name">defer</span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span><br><br><span class="token comment">&lt;!-- Load mapbox-gl library required for mbtiles layer. --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js<span class="token punctuation">"</span></span> <span class="token attr-name">defer</span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span><br><br><span class="token comment">&lt;!-- Load XYZ / MAPP stylesheet and library. --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>${dir}/css/control.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>${dir}/js/xyz_openlayers.js<span class="token punctuation">"</span></span> <span class="token attr-name">defer</span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
+<pre class="language-html"><code class="language-html"><span class="token comment">&lt;!-- Load openlayers library and stylesheet. --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>${dir}/css/openlayers.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>${dir}/js/ol.js<span class="token punctuation">"</span></span> <span class="token attr-name">defer</span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span><br><br><span class="token comment">&lt;!-- Load mapbox-gl library required for mbtiles layer. --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js<span class="token punctuation">"</span></span> <span class="token attr-name">defer</span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span><br><br><span class="token comment">&lt;!-- Load XYZ / MAPP stylesheet and library. --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>${dir}/css/mapp.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>${dir}/js/mapp.js<span class="token punctuation">"</span></span> <span class="token attr-name">defer</span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
 <p>Aditional script sources (and stylesheets) may be required for plugins and 3rd party utility libraries such as tabulator (eg. <code>&lt;script src=&quot;/js/tabulator.min.js&quot; defer&gt;&lt;/script&gt;</code>).</p>
 <p>Application views may either be hosted as static files (eg. on Github pages) or XYZ templates. If hosted as template the view can be accessed through the <a href="/xyz/docs/develop/api/view/">api/view</a> method which allows template parameter substitution.</p>
 

eleventy/design/design.md

@@ -7,9 +7,9 @@ layout: root.html
 
 # Design
 
-XYZ application views, such as MAPP, maybe be composed with predefined control elements. These elements are defined as classes in the control.css which is hosted as a static file in the /public/css XYZ directory.
+XYZ application views, such as MAPP, maybe be composed with predefined control elements. These elements are defined as classes in the mapp.css which is hosted as a static file in the /public/css XYZ directory.
 
-The control.css file itself is compiled from individual SCSS files in the same directory.
+The mapp.css file itself is compiled from individual SCSS files in the same directory.
 
 This section of the documentation will highlight the individual control element classes and explain how elements can be modified by overwriting component styles.
 

eleventy/develop/lib/webpack.md

@@ -8,7 +8,7 @@ layout: root.html
 
 The library code split into multiple ES6 modules is stored in the [/lib](https://github.com/GEOLYTIX/xyz/tree/master/lib) directory of the XYZ repo. The application is bundled with [Webpack 4](https://webpack.js.org).
 
-The [package.json](https://github.com/GEOLYTIX/xyz/blob/master/package.json) stores mutliple scripts to build the control library as [xyz_openlayers.js](https://github.com/GEOLYTIX/xyz/blob/master/public/js/xyz_openlayers.js) in the /public/js directory.
+The [package.json](https://github.com/GEOLYTIX/xyz/blob/master/package.json) stores mutliple scripts to build the control library as [mapp.js](https://github.com/GEOLYTIX/xyz/blob/master/public/js/mapp.js) in the /public/js directory.
 
 `npm run dev` will be build a development library which is not size optimised. The compilation to dev is fastest.
 

eleventy/develop/views.md

@@ -19,8 +19,8 @@ A series of stylesheet and script must be referenced in the document head of the
 <script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js" defer></script>
 
 <!-- Load XYZ / MAPP stylesheet and library. -->
-<link rel="stylesheet" href="${dir}/css/control.css" />
-<script src="${dir}/js/xyz_openlayers.js" defer></script>
+<link rel="stylesheet" href="${dir}/css/mapp.css" />
+<script src="${dir}/js/mapp.js" defer></script>
 ```
 
 Aditional script sources (and stylesheets) may be required for plugins and 3rd party utility libraries such as tabulator (eg. `<script src="/js/tabulator.min.js" defer></script>`).

notes.md

@@ -34,4 +34,6 @@ Metric geometry need to be measured through sphere. [#376](https://github.com/GE
 
 Fix for in type filter.
 
-Remove mapbox, tomtom, here provider. [#282](https://github.com/GEOLYTIX/xyz/issues/282)
+Remove mapbox, tomtom, here provider. [#282](https://github.com/GEOLYTIX/xyz/issues/282)
+
+Mapp library and stylesheets. [#377](https://github.com/GEOLYTIX/xyz/issues/377)