Api improve (#1529)

* Improve and simplify API example and module * Improvements to the jsapi and the related demo
geosolutions-it · Mar 8, 2017 · 32ffc72 · 32ffc72
1 parent 931e393
commit 32ffc72
Show file tree

Hide file tree

Showing 14 changed files with 194 additions and 590 deletions.
diff --git a/web/client/examples/api/index.html b/web/client/examples/api/index.html
@@ -12,6 +12,11 @@
         <link rel="stylesheet" href="https://rawgit.com/geosolutions-it/MapStore2-theme/master/theme/default/css/css.css">
         <link rel="stylesheet" href="https://rawgit.com/geosolutions-it/MapStore2-theme/master/theme/default/css/ms2-theme.css">
         <link rel="stylesheet" href="https://rawgit.com/geosolutions-it/MapStore2-theme/master/theme/default/css/font.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js"></script>
         <script src="https://maps.google.com/maps/api/js?v=3"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
@@ -25,7 +30,23 @@
                 top: 100px;
                 bottom: 100px;
                 left: 100px;
-                right: 100px;
+                right: 600px;
+            }
+            #help {
+                position: absolute;
+                top: 100px;
+                bottom: 100px;
+                width: 500px;
+                right: 50px;
+                padding: 10px;
+                border: solid 1px black;
+            }
+            #map {
+                position:absolute;
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
             }
             h1 {
                 text-align: center;
@@ -36,6 +57,35 @@
     <body onload="init()">
         <h1>MapStore2 Embedded</h1>
         <div id="container"></div>
+        <div id="help">
+            <h1>Embed MapStore2 in your website</h1>
+            <p>
+                You can easily embed MapStore2 in your website, and load your UI and configuration dinamically!
+            </p>
+            <p>
+                Use the MapStore2 JavaScript API to add a MapStore2 map and tools to your page.
+            </p>
+            <pre class="brush: xml">
+                <div id="container"></div>
+            </pre>
+            <pre class="brush: js">
+                MapStore2.create('container', {
+                    plugins: ["Map"]
+                });
+            </pre>
+            <p>
+                Use the <a href="../plugins/" target="_blank">plugins example</a> to save your configuration with
+                a meaningful name and use it in the embedded example with the map=&lt;name&gt; parameter.
+            </p>
+            <p>
+                Look at the
+                <a href="https://github.com/geosolutions-it/MapStore2/tree/master/web/client/examples/api" target="_blank">full code</a>
+                of this example.
+            </p>
+        </div>
         <script src="../../dist/api.js"></script>
+        <script type="text/javascript">
+             SyntaxHighlighter.all()
+        </script>
     </body>
 </html>