main.js

main.js
§
```
/* global colorbrewer */

var layer = {
```

Default values

  palette: 'YlGn',
  selectedNum: '3',
  type: 'continuous',
  min: '0',
  max: '300',
  name: 'conus_cref_raw',
  sld: '',
  projection: 'EPSG:3857'
};

var baseUrl = 'https://opengeo.ncep.noaa.gov/geoserver/conus/conus_cref_raw/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();
    var numberArray = Object.keys(colorbrewer[layer.palette]);
    utility.populateDropdown('#color-count', numberArray);

Sets the count

    $('#color-count').val(layer.selectedNum);

§

Sets the type
```
    $('#palette-type').val(layer.type);
```

Sets the min and max values

    $('#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();

    var items = Object.keys(colorbrewer[layer.palette]);
    var maxNumber = parseInt(items[items.length - 1]);

    if (parseInt($('#color-count').val()) <= maxNumber) {
      layer.selectedNum = $('#color-count').val();
    } else {
      layer.selectedNum = String(maxNumber);
    }

    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

    var sequence = utility.generateSequence(layer.min, layer.max, layer.selectedNum);
    var palette_array = utility.getPalette(layer.palette, layer.selectedNum);
    var xml = utility.generateXml(
      layer.name, layer.selectedNum, sequence, palette_array, layer.type);
    return xml;
  }
};

§

Run after the DOM loads
```
$(function () {
  'use strict';
```

Create a map object

  var map = geo.map({
    node: '#map',
    zoom: 9,
    center: {
      x: -77.0,
      y: 39
    }
  });

§

Add an OSM layer
```
  map.createLayer('osm');
```
§

Populate the palette dropdown
```
  layerViewer.renderPalettes();
```
§

Render the widget
```
  layerViewer.renderWidget(layer);
```

Generate sld

  layer.sld = layerController.generateSld(layer);

Add the wms layer

  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, #baseurl, #projection, #name')
    .change(function () {
      layerController.syncLayer(layer);
      layerViewer.renderWidget(layer);

      map.deleteLayer(wms);

      wms = utility.createWMSLayer(map, layer.sld, layer.projection, layer.name);
    });

});

var utility = {

Some utility functions

  populateDropdown: function (dropdown, array) {

Populates the dropdown based on the array given

    $.each(array, function () {
      var option = document.createElement('option');
      $(dropdown)
        .append($(option)
          .attr('value', this)
          .html(this));
    });
  },
  generateSequence: function (start, stop, count) {

Generates a sequence of numbers with the given start, stop and count variables

    var sequence = [];
    var step = (stop - start) / (count - 1.0);
    for (var i = 0; i < count; i++) {
      sequence.push(parseFloat(start + i * step));
    }
    return sequence;
  },
  getPalette: function (name, count) {

Gets the palette array with the given name and count parameters

    return colorbrewer[name][count];
  },
  createMapEntry: function (xml, color, value, opacity) {

Adds a color-quantity-opacity entry to the sld

    $(xml)
      .find('ColorMap')
      .append($('<ColorMapEntry>', xml)
        .attr({
          color: color,
          quantity: value,
          opacity: opacity
        }));
  },
  generateXml: function (name, count, values, palette, type) {

Generates the xml (sld) file with the given parameters

    var xml = $($.parseXML(
      '<?xml version="1.0" encoding="utf-8" ?><StyledLayerDescriptor />'
    ));
    $('StyledLayerDescriptor', xml)
      .attr({
        version: '1.0.0',
        'xsi:schemaLocation': 'http://www.opengis.net/sld StyledLayerDescriptor.xsd',
        xmlns: 'http://www.opengis.net/sld',
        'xmlns:ogc': 'http://www.opengis.net/ogc',
        'xmlns:xlink': 'http://www.w3.org/1999/xlink',
        'xmlns:xsi': 'http://www.w3.org/2001/XMLSchema-instance'
      });
    $('StyledLayerDescriptor', xml)
      .append($('<NamedLayer>', xml));
    $(xml)
      .find('NamedLayer')
      .append($('<Name>', xml))
      .append($(
        '<UserStyle>', xml));
    $(xml)
      .find('Name')
      .text(name);
    $(xml)
      .find('UserStyle')
      .append($('<Title>', xml))
      .append($(
        '<IsDefault>', xml))
      .append($('<FeatureTypeStyle>', xml));
    $(xml)
      .find('Title')
      .text('Custom Visualization');
    $(xml)
      .find('IsDefault')
      .text(1);
    $(xml)
      .find('FeatureTypeStyle')
      .append($('<Rule>', xml));
    $(xml)
      .find('Rule')
      .append($('<RasterSymbolizer>', xml));
    $(xml)
      .find('RasterSymbolizer')
      .append($('<ColorMap>', xml));

    if (type === 'discrete') {
      $(xml)
        .find('ColorMap')
        .attr({
          type: 'intervals'
        });
    }

    for (var i = 0; i < count; i++) {
      this.createMapEntry(xml, palette[i], values[i], 1);
    }
    var xmlString = new XMLSerializer().serializeToString(xml[0]);

    return xmlString;
  },
  createWMSLayer: function (map, sld, projection, layer_name) {

Add an OSM layer with a WMS server as the source of its titles

    var wms = map.createLayer('osm', {
      keepLower: false,
      attribution: null
    });

    wms.url(function (x, y, zoom) {

Compute the bounding box

      var bb = wms.gcsTileBounds({
        x: x,
        y: y,
        level: zoom
      }, projection);
      var bbox_mercator = bb.left + ',' + bb.bottom + ',' +
        bb.right + ',' + bb.top;

Set the WMS server parameters

      var params = {
        SERVICE: 'WMS',
        VERSION: '1.3.0',
        REQUEST: 'GetMap',
        LAYERS: layer_name, // US Elevation
        STYLES: '',
        BBOX: bbox_mercator,
        WIDTH: 256, //Use 256x256 tiles
        HEIGHT: 256,
        FORMAT: 'image/png',
        TRANSPARENT: true,
        SRS: projection,
        TILED: true,
        SLD_BODY: sld
      };

OpenGeo Demo Web Map Service

      return baseUrl + (baseUrl.indexOf('?') >= 0 ? '&' : '?') + $.param(params);
    });

    return wms;
  }
};