main.js

main.js
§
```
/* globals utils */

var debug = {};
```
§

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

Get the query parameters and set controls appropriately. The query takes: map: the png file used for the pixel map. json: the json file for the starting state.

  var query = utils.getQuery();
  var pixelmapUrl = query.map || 'pixelmap.png';
  var pixelmapJSON = query.json === undefined ? 'pixelmap.json' : query.json;
  var map, mapParams, osm, osmParams, layer, pixelmap, pixelmapParams;

Center the map on the United States

  mapParams = {
    node: '#map',
    center: {x: -98.58333, y: 39.83333},
    zoom: 4,
    discreteZoom: false
  };
  map = geo.map(mapParams);

Add a tile layer to the map

  osm = map.createLayer('osm', osmParams);

Create a feature layer that supports the pixelmap feature. This can be overridden to use a specific renderer

  layer = map.createLayer('feature', {
    renderer: query.renderer ? (query.renderer === 'html' ? null : query.renderer) : undefined,
    features: query.renderer ? undefined : ['pixelmap'],
    opacity: 0.65
  });

Our default pixelmap covers a known geographic region

  pixelmapParams = {
    selectionAPI: true,
    url: pixelmapUrl,
    position: {ul: {x: -180, y: 71.471178}, lr: {x: -60, y: 13.759032}},
    color: function (d, idx) {

Always set index 0 to transparent. Other indices are set based on the data value

      var color = {r: 0, g: 0, b: 0, a: 0};
      if (idx && d && d.value) {
        color = d.value === 'R' ? 'red' : 'blue';
      }
      return color;
    }
  };
  pixelmap = layer.createFeature('pixelmap', pixelmapParams);
  layer.draw();

When the user left clicks, cycle through three states. A right click clears the state.

  pixelmap.geoOn(geo.event.feature.mouseclick, function (evt) {
    var data = pixelmap.data();
    if (!data) {
      return;
    }
    if (data[evt.index] === undefined) {
      data[evt.index] = {};
    }
    var val = data[evt.index].value;
    if (evt.mouse.buttonsDown.left) {
      var cycle = {D: 'R', R: '', '': 'D'};
      val = cycle[cycle[val] !== undefined ? val : ''];
    } else if (evt.mouse.buttonsDown.right) {
      val = '';
    }
    if (val !== data[evt.index].value) {
      data[evt.index].value = val;
      pixelmap.data(data).draw();
    }
  });

Load the JSON file

  if (pixelmapJSON) {
    $.ajax({url: pixelmapJSON}).done(function (resp) {
      pixelmap.data(resp);
      pixelmap.draw();
    });
  }

Expose some internal to make it easier to play with the example from the browser console.

  debug.map = map;
  debug.mapParams = mapParams;
  debug.osm = osm;
  debug.osmParams = osmParams;
  debug.layer = layer;
  debug.pixelmap = pixelmap;
  debug.pixelmapParams = pixelmapParams;
});