Merge pull request #743 from OpenGeoscience/update-examples

Update examples.

examples/annotations/example.json

@@ -2,6 +2,7 @@
   "title": "Annotation Layer",
   "exampleCss": ["main.css"],
   "exampleJs": ["main.js"],
+  "thumbquery": "labels=false&geojson=%7B%22type%22%3A%22FeatureCollection%22%2C%22features%22%3A%5B%7B%22type%22%3A%22Feature%22%2C%22geometry%22%3A%7B%22type%22%3A%22Point%22%2C%22coordinates%22%3A%5B-118.8726%2C36.6962%5D%7D%2C%22properties%22%3A%7B%22annotationType%22%3A%22point%22%2C%22fillColor%22%3A%22%2300ff00%22%2C%22fillOpacity%22%3A0.25%2C%22radius%22%3A10%2C%22strokeWidth%22%3A3%7D%7D%2C%7B%22type%22%3A%22Feature%22%2C%22geometry%22%3A%7B%22type%22%3A%22Point%22%2C%22coordinates%22%3A%5B-119.7193%2C36.7762%5D%7D%2C%22properties%22%3A%7B%22annotationType%22%3A%22point%22%2C%22fillColor%22%3A%22%2300ff00%22%2C%22fillOpacity%22%3A0.25%2C%22radius%22%3A10%2C%22strokeWidth%22%3A3%7D%7D%2C%7B%22type%22%3A%22Feature%22%2C%22geometry%22%3A%7B%22type%22%3A%22Polygon%22%2C%22coordinates%22%3A%5B%5B%5B-118.9165%2C36.5975%5D%2C%5B-118.8952%2C36.5788%5D%2C%5B-118.9068%2C36.5624%5D%2C%5B-118.8786%2C36.5398%5D%2C%5B-118.8796%2C36.4883%5D%2C%5B-118.7641%2C36.4867%5D%2C%5B-118.7689%2C36.3508%5D%2C%5B-118.7340%2C36.3453%5D%2C%5B-118.7116%2C36.3414%5D%2C%5B-118.6912%2C36.3531%5D%2C%5B-118.6893%2C36.3938%5D%2C%5B-118.5873%2C36.3953%5D%2C%5B-118.5504%2C36.4078%5D%2C%5B-118.5397%2C36.3899%5D%2C%5B-118.4825%2C36.3578%5D%2C%5B-118.4922%2C36.3476%5D%2C%5B-118.4815%2C36.3265%5D%2C%5B-118.4504%2C36.3085%5D%2C%5B-118.4135%2C36.3343%5D%2C%5B-118.3844%2C36.3633%5D%2C%5B-118.3737%2C36.3860%5D%2C%5B-118.3601%2C36.4383%5D%2C%5B-118.3319%2C36.4493%5D%2C%5B-118.2475%2C36.4828%5D%2C%5B-118.2358%2C36.4969%5D%2C%5B-118.2426%2C36.5242%5D%2C%5B-118.2630%2C36.5507%5D%2C%5B-118.2892%2C36.5554%5D%2C%5B-118.2882%2C36.5850%5D%2C%5B-118.2766%2C36.5960%5D%2C%5B-118.2873%2C36.6053%5D%2C%5B-118.3193%2C36.6287%5D%2C%5B-118.3368%2C36.6591%5D%2C%5B-118.3300%2C36.6645%5D%2C%5B-118.3397%2C36.6739%5D%2C%5B-118.3465%2C36.6731%5D%2C%5B-118.3815%2C36.7019%5D%2C%5B-118.4310%2C36.6957%5D%2C%5B-118.4320%2C36.6801%5D%2C%5B-118.4465%2C36.6863%5D%2C%5B-118.4747%2C36.6684%5D%2C%5B-118.4747%2C36.6529%5D%2C%5B-118.4863%2C36.6490%5D%2C%5B-118.4834%2C36.6365%5D%2C%5B-118.5252%2C36.5983%5D%2C%5B-118.5310%2C36.5936%5D%2C%5B-118.5563%2C36.5983%5D%2C%5B-118.5687%2C36.5967%5D%2C%5B-118.5842%2C36.6045%5D%2C%5B-118.5813%2C36.6139%5D%2C%5B-118.6017%2C36.6108%5D%2C%5B-118.6163%2C36.6279%5D%2C%5B-118.6396%2C36.6388%5D%2C%5B-118.6473%2C36.6318%5D%2C%5B-118.6580%2C36.6326%5D%2C%5B-118.6609%2C36.6396%5D%2C%5B-118.6716%2C36.6373%5D%2C%5B-118.6794%2C36.6357%5D%2C%5B-118.6978%2C36.6404%5D%2C%5B-118.7066%2C36.6645%5D%2C%5B-118.7454%2C36.6786%5D%2C%5B-118.7755%2C36.6786%5D%2C%5B-118.7978%2C36.6770%5D%2C%5B-118.8202%2C36.6684%5D%2C%5B-118.8211%2C36.6599%5D%2C%5B-118.8367%2C36.6505%5D%2C%5B-118.8474%2C36.6513%5D%2C%5B-118.8542%2C36.6419%5D%2C%5B-118.8697%2C36.6334%5D%2C%5B-118.8804%2C36.6225%5D%2C%5B-118.9024%2C36.6209%5D%2C%5B-118.9121%2C36.6084%5D%2C%5B-118.9165%2C36.5975%5D%5D%5D%7D%2C%22properties%22%3A%7B%22annotationType%22%3A%22polygon%22%2C%22fillColor%22%3A%22%2300ff00%22%2C%22fillOpacity%22%3A0.25%2C%22strokeColor%22%3A%22%23000000%22%2C%22strokeWidth%22%3A3%7D%7D%5D%7D",
   "about": {
     "text": "This example shows how to add annotations, such as marked rectangles, to a map."
   }

examples/choropleth/main.js

@@ -20,8 +20,8 @@ $(function () {
   var map = geo.map({
     node: '#map',
     center: {
-      x: -75.965,
-      y: 39.482
+      x: -98.5795,
+      y: 39.8283
     },
     zoom: 4
   });

examples/deepzoom/main.js

@@ -46,7 +46,7 @@ $(function () {
     clampBoundsX: false,
     clampBoundsY: false,
     clampZoom: false,
-    zoom: 2
+    zoom: 4
   }));
 
   // Add the osm layer with a custom tile url.

examples/heatmap/main.js

@@ -8,7 +8,7 @@ $(function () {
       x: -98,
       y: 39
     },
-    zoom: 3
+    zoom: 4
   });
   var layer, heatmap, points, datapoints;
 
@@ -156,7 +156,8 @@ $(function () {
     });
   }
 
-  /* Given a set of datapoints, optionally truncate or expand it, then show it
+  /**
+   * Given a set of datapoints, optionally truncate or expand it, then show it
    * as a heatmap.
    *
    * @param {array} datapoints: an array of points to show.
@@ -171,9 +172,10 @@ $(function () {
       rows = rows.slice();
       while (rows.length < maxrows) {
         for (var i = rows.length - 1; i >= 0 && rows.length < maxrows; i -= 1) {
-          rows.push([rows[i][0] + Math.random() * 0.1 - 0.05,
-                     rows[i][1] + Math.random() * 0.1 - 0.05,
-                     rows[i][2] + Math.random() * 0.1 - 0.05]);
+          rows.push([
+            rows[i][0] + Math.random() * 0.1 - 0.05,
+            rows[i][1] + Math.random() * 0.1 - 0.05,
+            rows[i][2] + Math.random() * 0.1 - 0.05]);
         }
       }
     }

examples/hurricanes/main.js

@@ -355,10 +355,10 @@ $(function () {
   map = geo.map({
     node: '#map',
     center: {
-      x: 0,
-      y: 0
+      x: -50,
+      y: 30
     },
-    zoom: 3
+    zoom: 4
   });
 
   // Add the default osm layer

examples/lines/example.json

@@ -2,6 +2,7 @@
   "title": "Line Feature",
   "exampleCss": ["main.css"],
   "exampleJs": ["main.js"],
+  "thumbquery": "lines=250000",
   "about": {
     "text": "This example shows the variations that are available for line features."
   }

examples/reprojection/example.json

@@ -2,6 +2,7 @@
   "title": "Reproject tiles",
   "exampleCss": ["main.css"],
   "exampleJs": ["main.js"],
+  "thumbquery": "gcs=ESRI%3A54009",
   "about": {
     "text": "This example shows how you can reproject tiles from one projection to another.  The source tiles are in Web Mercator (EPSG:3857), but can be drawn in many different projections."
   }

examples/reprojection/main.js

@@ -113,7 +113,7 @@ $(function () {
     var mapParams = {
       node: '#map',
       center: {x: 0, y: 0},
-      zoom: 2,
+      zoom: 2.5,
       gcs: gcsTable[gcs],
       unitsPerPixel: (range[1].x - range[0].x) / 256,
       clampBoundsX: false,

examples/sld/index.pug

@@ -3,24 +3,36 @@ extends ../common/index.pug
 block append mainContent
   #controls
 
+    .form-group(title="Base URL")
+      label(for="baseurl") Base URL
+      input#baseurl(placeholder="https://demo.boundlessgeo.com/geoserver/ows")
+
+    .form-group(title="Layer Name")
+      label(for="name") Layer Name
+      input#name(placeholder="usgs:ned")
+
+    .form-group(title="Projection")
+      label(for="projection") Projection
+      input#projection(placeholder="EPSG:3785")
+
     .form-group(title="Select a color palette.")
       label(for="palette") Color Palette
-      select#palette.mapparam(param-name="palette", placeholder="YlGn")
+      select#palette(placeholder="YlGn")
 
     .form-group(title="Select number of colors.")
       label(for="color-count") Number of colors
-      select#color-count.mapparam(param-name="color-count")
+      select#color-count(param-name="color-count")
 
     .form-group(title="Discrete or continuous colors.")
       label(for="palette-type") Palette Type
-      select#palette-type.mapparam(param-name="palette-type", placeholder="continuous")
+      select#palette-type(placeholder="continuous")
         option(value="continuous") Continuous
         option(value="discrete") Discrete
 
     .form-group(title="Minimum value for your data")
       label(for="min") Minimum
-      input#min.mapparam(param-name="x", placeholder="0")
+      input#min(placeholder="0")
 
     .form-group(title="Maximum value for your data.")
       label(for="max") Maximum
-      input#max.mapparam(param-name="x", placeholder="300")
+      input#max(placeholder="300")

examples/sld/main.js

@@ -1,4 +1,4 @@
-var colorbrewer = colorbrewer;
+/* global colorbrewer */
 
 var layer = {
   // Default values
@@ -12,40 +12,36 @@ var layer = {
   projection: 'EPSG:3785'
 };
 
+var baseUrl = 'https://demo.boundlessgeo.com/geoserver/ows';
+
 var layerViewer = {
   renderPalettes: function () {
     var paletteArray = Object.keys(colorbrewer);
     utility.populateDropdown('#palette', paletteArray);
   },
   renderWidget: function (layer) {
-
     // Populates the number of colors dropdown
-    $('#color-count')
-      .empty();
+    $('#color-count').empty();
     var numberArray = Object.keys(colorbrewer[layer.palette]);
     utility.populateDropdown('#color-count', numberArray);
-
     // Sets the count
-    $('#color-count')
-      .val(layer.selectedNum);
-
+    $('#color-count').val(layer.selectedNum);
     // Sets the type
-    $('#palette-type')
-      .val(layer.type);
-
+    $('#palette-type').val(layer.type);
     // Sets the min and max values
-    $('#min')
-      .val(layer.min);
-    $('#max')
-      .val(layer.max);
+    $('#min').val(layer.min);
+    $('#max').val(layer.max);
+
+    $('#name').val(layer.name);
+    $('#projection').val(layer.projection);
+    $('#baseurl').val(baseUrl);
   }
 };
 
 var layerController = {
   syncLayer: function (layer) {
     // Sync the model with UI
-    layer.palette = $('#palette')
-      .val();
+    layer.palette = $('#palette').val();
 
     var items = Object.keys(colorbrewer[layer.palette]);
     var maxNumber = parseInt(items[items.length - 1]);
@@ -56,13 +52,14 @@ var layerController = {
       layer.selectedNum = String(maxNumber);
     }
 
-    layer.type = $('#palette-type')
-      .val();
-    layer.min = $('#min')
-      .val();
-    layer.max = $('#max')
-      .val();
+    layer.type = $('#palette-type').val();
+    layer.min = $('#min').val();
+    layer.max = $('#max').val();
     layer.sld = this.generateSld(layer);
+
+    layer.name = $('#name').val();
+    layer.projection = $('#projection').val();
+    baseUrl = $('#baseurl').val();
   },
   generateSld: function (layer) {
     // Orchestrates the sld generation
@@ -81,9 +78,9 @@ $(function () {
   // Create a map object
   var map = geo.map({
     node: '#map',
-    zoom: 8,
+    zoom: 9,
     center: {
-      x: -76.0,
+      x: -77.0,
       y: 39
     }
   });
@@ -103,7 +100,7 @@ $(function () {
   var wms = utility.createWMSLayer(map, layer.sld, layer.projection, layer.name);
 
   // If any of the input boxes changes regenerate sld again
-  $('#palette, #color-count, #min, #max, #palette-type')
+  $('#palette, #color-count, #min, #max, #palette-type, #baseurl, #projection, #name')
     .change(function () {
       layerController.syncLayer(layer);
       layerViewer.renderWidget(layer);
@@ -250,12 +247,9 @@ var utility = {
         'SLD_BODY': sld
       };
       // OpenGeo Demo Web Map Service
-      var baseUrl =
-        'http://demo.boundlessgeo.com/geoserver/ows';
-      return baseUrl + '?' + $.param(params);
+      return baseUrl + (baseUrl.indexOf('?') >= 0 ? '&' : '?') + $.param(params);
     });
 
     return wms;
-
   }
 };

examples/wms/main.js

@@ -37,7 +37,7 @@ $(function () {
       };
 
       // OpenGeo Demo Web Map Service
-      var baseUrl = 'http://demo.boundlessgeo.com/geoserver/ows';
+      var baseUrl = 'https://demo.boundlessgeo.com/geoserver/ows';
       return baseUrl + '?' + $.param(params);
     }
   );

src/canvas/heatmapFeature.js

@@ -403,6 +403,9 @@ var canvas_heatmapFeature = function (arg) {
    */
   this._animatePan = function (e) {
 
+    if (!m_heatMapPosition) {
+      return;
+    }
     var map = m_this.layer().map(),
         zoom = map.zoom(),
         scale = Math.pow(2, (zoom - m_heatMapPosition.zoom)),

src/tileLayer.js

@@ -1416,16 +1416,23 @@ module.exports = (function () {
       var map = this.map(),
           mapzoom = map.zoom(),
           roundzoom = this._options.tileRounding(mapzoom),
-          unit = map.unitsPerPixel(zoom === undefined ? roundzoom : zoom);
+          unit = map.unitsPerPixel(zoom === undefined ? roundzoom : zoom),
+          gcsPt;
       if (pt === undefined) {
         var size = map.size();
         pt = {x: size.width / 2, y: size.height / 2};
       }
+      /* displayToGcs can fail under certain projections.  If this happens,
+       * just return the origin. */
+      try {
+        gcsPt = map.displayToGcs(pt, this._options.gcs || null);
+      } catch (err) {
+        gcsPt = {x: 0, y: 0};
+      }
       /* Reverse the y coordinate, since we expect the gcs coordinate system
        * to be right-handed and the level coordinate system to be
        * left-handed. */
-      var gcsPt = map.displayToGcs(pt, this._options.gcs || null),
-          lvlPt = {x: gcsPt.x / unit, y: this._topDown() * gcsPt.y / unit};
+      var lvlPt = {x: gcsPt.x / unit, y: this._topDown() * gcsPt.y / unit};
       return lvlPt;
     };
 

tutorials/wms/index.pug

@@ -38,7 +38,7 @@ block mainTutorial
         size: '256,256',
         layers: 'show:3',
         f: 'image'
-      }
+      };
       // construct the url for a tile.  We can use jQuery's $.param function.
       var url =  baseUrl + '?' + $.param(params);
       return url;