new structure for examples

simonebt92 · Jul 26, 2017 · 904e3dc · 904e3dc
1 parent 42913c8
commit 904e3dc
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 8 deletions.
diff --git a/example/markers.js → examples/data/markers.js b/example/markers.js → examples/data/markers.js
diff --git a/example/places.json → examples/data/places.json b/example/places.json → examples/data/places.json
diff --git a/example/usCities.geojson → examples/data/usCities.geojson b/example/usCities.geojson → examples/data/usCities.geojson
diff --git a/example/usCities.json → examples/data/usCities.json b/example/usCities.json → examples/data/usCities.json
diff --git a/examples/geojson.html b/examples/geojson.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+    <script data-main="js/geojson" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>
+</head>
+<body>
+<div class="container">
+    <div class="jumbotron hidden-xs">
+        <h1 style="text-align:center">Marker Cluster - GeoJSON</h1>
+    </div>
+    <div class="row">
+        <div class="col-sm-3">
+            <h4>Projection</h4>
+            <div class="dropdown" id="projectionDropdown">
+            </div>
+            <br>
+            <h4>Layers</h4>
+            <div class="list-group" id="layerList">
+            </div>
+            <br>
+            <h4>Destination</h4>
+            <div class="input-group" id="searchBox">
+                <input type="text" class="form-control" placeholder="GoTo" id="searchText"/>
+                <span class="input-group-btn">
+                    <button id="searchButton" class="btn btn-primary" type="button">
+                        <span class="glyphicon glyphicon-search"></span>
+                    </button>
+                </span>
+            </div>
+        </div>
+        <div class="col-sm-9" id="globe">
+            <canvas id="canvasOne" width="1000" height="1000" style="width: 100%; height: auto">
+                Your browser does not support HTML5 Canvas.
+            </canvas>
+        </div>
+    </div>
+</div>
+</body>
+</html>
diff --git a/example/js/LayerManager.js → examples/js/LayerManager.js b/example/js/LayerManager.js → examples/js/LayerManager.js
diff --git a/example/main.js → examples/js/geojson.js b/example/main.js → examples/js/geojson.js
@@ -13,7 +13,7 @@ requirejs(['../libraries/WorldWind/WorldWind',
         var layers = [
             {layer: new WorldWind.BingAerialWithLabelsLayer(null), enabled: true},
             {layer: new WorldWind.CompassLayer(), enabled: true},
-            {layer: new WorldWind.CoordinatesDisplayLayer(wwd), enabled: true},
+            {layer: new WorldWind.CoordinatesDisplayLayer(wwd), enabled: true}
         ];
         var viewControlsLayer = new WorldWind.ViewControlsLayer(wwd);
 
@@ -51,7 +51,7 @@ requirejs(['../libraries/WorldWind/WorldWind',
             maxLevel: 7
         });
 
-        getJSON('example/usCities.geojson', function (results) {
+        getJSON('data/usCities.geojson', function (results) {
             markerClusterUSCities.generateJSONCluster(results);
         });
 

diff --git a/examples/js/json.js b/examples/js/json.js
@@ -0,0 +1,62 @@
+var markerClusterUSCities;
+requirejs(['../libraries/WorldWind/WorldWind',
+        '../example/js/LayerManager', '../src/MarkerCluster'],
+    function (ww,
+              LayerManager, MarkerCluster) {
+        "use strict";
+
+
+        WorldWind.Logger.setLoggingLevel(WorldWind.Logger.LEVEL_WARNING);
+        WorldWind.configuration.baseUrl = "libraries/WorldWind/";
+        var wwd = new WorldWind.WorldWindow("canvasOne");
+
+        var layers = [
+            {layer: new WorldWind.BingAerialWithLabelsLayer(null), enabled: true},
+            {layer: new WorldWind.CompassLayer(), enabled: true},
+            {layer: new WorldWind.CoordinatesDisplayLayer(wwd), enabled: true}
+        ];
+        var viewControlsLayer = new WorldWind.ViewControlsLayer(wwd);
+
+        for (var l = 0; l < layers.length; l++) {
+            layers[l].layer.enabled = layers[l].enabled;
+            layers[l].layer.detailControl = 1;
+            wwd.addLayer(layers[l].layer);
+        }
+        wwd.addLayer(viewControlsLayer);
+
+        markerClusterUSCities = new MarkerCluster(wwd, {
+            name: "US Cities",
+            controls: viewControlsLayer,
+            maxLevel: 7
+        });
+
+        getJSON('data/usCities.json', function (results) {
+            results.forEach(function (city) {
+                var p = markerClusterUSCities.newPlacemark(
+                    [city.latitude, city.longitude],
+                    null,
+                    {label: city.city}
+                );
+                markerClusterUSCities.add(p);
+            });
+            markerClusterUSCities.generateCluster();
+        });
+
+
+        var layerManager = new LayerManager(wwd);
+
+        function getJSON(url, callback) {
+            var xhr = new XMLHttpRequest();
+            xhr.open('GET', url, true);
+            xhr.responseType = 'json';
+            xhr.setRequestHeader('Accept', 'application/json');
+            xhr.onload = function () {
+                if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300 && xhr.response) {
+                    callback(xhr.response);
+                }
+            };
+            xhr.send();
+        }
+    })
+;
+
diff --git a/index.html → examples/json.html b/index.html → examples/json.html
@@ -1,20 +1,16 @@
-
 <!DOCTYPE html>
-<!--@version $Id: BasicExample.html 3314 2015-07-10 18:28:45Z dcollins $-->
 <html lang="en">
 <head>
-    <!--NOTE: Most Web World Wind examples use jquery, Bootstrap and requirejs but those technologies are NOT-->
-    <!--required by Web World Wind. See SimplestExample.html for an example of using Web World Wind without them.-->
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
-    <script data-main="example/main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>
+    <script data-main="js/json" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>
 </head>
 <body>
 <div class="container">
     <div class="jumbotron hidden-xs">
-        <h1 style="text-align:center">World Wind Cluster Example</h1>
+        <h1 style="text-align:center">Marker Cluster - JSON</h1>
     </div>
     <div class="row">
         <div class="col-sm-3">