How to use geojs - 10 common examples

it('should load raster features without GeoJSBuilder', () => {
    let node = document.querySelector('#map');
    geoMap = geo.map({node: node});

    let featureLayer = geoMap.createLayer('feature', {features: ['quad.image']});
    let featureData = {
      image: '../data/rasterwithpalette.png',
      ll: { x: -73.758345, y: 41.849604 },
      lr: { x: -72.758345, y: 41.849604 },
      ul: { x: -73.758345, y: 42.849604 },
      ur: { x: -72.758345, y: 42.849604 }
    };
    let feature = featureLayer.createFeature('quad').data([featureData]);

    const bounds = {"bottom": 41.849604, "left": -73.758345, "right": -72.758345, "top": 42.849604}
    let spec = geoMap.zoomAndCenterFromBounds(bounds);
    // console.log('Computed viewpoint spec:');
    // console.dir(spec);
    geoMap.center(spec.center);

const wfs = require('../');
const expect = require('expect.js');
const geofilter = require('geofilter');
const geojs = require('geojs');
const comparer = require('./helpers/comparer');
const _ = require('underscore');
const baseRequest = {
  url: 'https://maps-public.geo.nyu.edu/geoserver/sdr/wfs',
  typeName: 'sdr:nyu_2451_34564'
};
const lowerCorner = new geojs.Pos('40.60 -74.00');
const upperCorner = new geojs.Pos('40.70 -73.90');
const rules = {
  inBronx: {
    type: 'like',
    args: {
      property: 'borough',
      value: 'Bronx',
      matchCase: false
    }
  },

  // -74.00013,40.600659,-73.900909,40.700422
  inBrooklyn: {
    type: 'bbox',
    args: {
      property: 'geom',

const wfs = require('../');
const expect = require('expect.js');
const geofilter = require('geofilter');
const geojs = require('geojs');
const comparer = require('./helpers/comparer');
const _ = require('underscore');
const baseRequest = {
  url: 'https://maps-public.geo.nyu.edu/geoserver/sdr/wfs',
  typeName: 'sdr:nyu_2451_34564'
};
const lowerCorner = new geojs.Pos('40.60 -74.00');
const upperCorner = new geojs.Pos('40.70 -73.90');
const rules = {
  inBronx: {
    type: 'like',
    args: {
      property: 'borough',
      value: 'Bronx',
      matchCase: false
    }
  },

  // -74.00013,40.600659,-73.900909,40.700422
  inBrooklyn: {
    type: 'bbox',
    args: {
      property: 'geom',
      min: lowerCorner.toString(),

}

          // Other options that are simple properties
          const properties = ['bin', 'gcs', 'style', 'selectionAPI', 'visible']
          for (let property of properties) {
            if (options[property]) {
              feature[property](options[property]);
            }
          }

          // Events - note that we must explicitly bind to "this"
          if (options.enableTooltip) {
            // Add hover/tooltip - only click seems to work
            this._enableTooltipDisplay();
            feature.selectionAPI(true);
              feature.geoOn(geo.event.feature.mouseon, function(evt: any) {
                // console.debug('feature.mouseon');
                // console.dir(evt);
                this._tooltip.position(evt.mouse.geo);

                // Work from a copy of the event data
                let userData: any = Object.assign({}, evt.data);
                delete userData.__i;
                let jsData:string = JSON.stringify(
                  userData, Object.keys(userData).sort(), 2);
                // Strip off first and last lines (curly braces)
                let lines: string[] = jsData.split('\n');
                let innerLines: string[] = lines.slice(1, lines.length-1);
                this._preElem.innerHTML = innerLines.join('\n');
                this._tooltipElem.classList.remove('hidden');
              }.bind(this));
              feature.geoOn(geo.event.feature.mouseoff, function(evt: any) {

// console.debug('feature.mouseon');
                // console.dir(evt);
                this._tooltip.position(evt.mouse.geo);

                // Work from a copy of the event data
                let userData: any = Object.assign({}, evt.data);
                delete userData.__i;
                let jsData:string = JSON.stringify(
                  userData, Object.keys(userData).sort(), 2);
                // Strip off first and last lines (curly braces)
                let lines: string[] = jsData.split('\n');
                let innerLines: string[] = lines.slice(1, lines.length-1);
                this._preElem.innerHTML = innerLines.join('\n');
                this._tooltipElem.classList.remove('hidden');
              }.bind(this));
              feature.geoOn(geo.event.feature.mouseoff, function(evt: any) {
                //console.debug('featuremouseoff');
                this._preElem.textContent = '';
                this._tooltipElem.classList.add('hidden');
              }.bind(this));

              // feature.geoOn(geo.event.mouseclick, function(evt: any) {
              //   console.log('plain mouseclick, evt:');
              //   console.dir(evt);
              //   // this._tooltip.position(evt.geo);
              //   // this._tooltipElem.textContent = 'hello';
              //   // this._tooltipElem.classList.remove('hidden');
              // }.bind(this));

              //.geoOn(geo.event.zoom, resimplifyOnZoom);
          }  // if (options.data)

_loadGeoJSONObject(layer:any, data: any): Promise {
    // console.dir(layer);
    // console.dir(data);

    let reader: any = geo.createFileReader('jsonReader', {layer: layer});
    return new Promise((resolve, reject) => {
      try {
        reader.read(data, resolve);
      }
      catch (error) {
        console.error(error);
        reject(error);
      }
    })  // new Promise()
  }  // loadGeoJSONData()

init(container, dataset, visProperties, data) {
        this.geoJsLayer = container.createLayer('feature');
        dataset.geoJsLayer = this.geoJsLayer;

        // force selection api on all features for this layer
        var _createFeature = this.geoJsLayer.createFeature;
        this.geoJsLayer.createFeature = function (name, arg) {
            if (!arg) {
                arg = {};
            }
            arg.selectionAPI = true;
            return _createFeature.call(this, name, arg);
        };

        try {
            var reader = geo.createFileReader(this.readerType, { layer: this.geoJsLayer });
            this._prepareColorLegendMeta(dataset, container, data, visProperties, data.summary);
            if (!data.series) { // not a timeseries
                this._injectStyle(data, visProperties, data.summary || {});
                reader.read(data, _.bind(function (features) {
                    this._processFeatures(visProperties, features);
                }, this));
            } else { // a timeseries
                var lastFeature = 0;
                var curframe = 0;
                _.each(data.series, function (entry, index) {
                    this._injectStyle(entry.geojson, visProperties, data.summary || {});
                    reader.read(entry.geojson, _.bind(function (features) {
                        this._processFeatures(visProperties, features);
                    }, this));
                    entry.features = this.geoJsLayer.features().slice(lastFeature);
                    lastFeature = this.geoJsLayer.features().length;

generate(node: HTMLElement, model: IMapModel={}): Promise {
    console.log('GeoJSBuilder.generate() input model:')
    console.dir(model);
    if (!!this._geoMap) {
      console.warn('Deleting existing GeoJS instance');
      this.clear()
    }

    let options: JSONObject = model.options || {};
    // Add dom node to the map options
    const mapOptions = Object.assign(options, {node: node});
    this._geoMap = geo.map(mapOptions);

    this.update(model);
    const viewpoint: JSONObject = model.viewpoint;
    if (viewpoint) {
      switch (viewpoint.mode) {
        case 'bounds':
          console.log('Input viewpoint bounds:');
          console.dir(viewpoint.bounds);
          let spec = this._geoMap.zoomAndCenterFromBounds(viewpoint.bounds, 0, null);
          console.log('Computed viewpoint spec:')
          console.dir(spec);
          this._geoMap.center(spec.center);
          this._geoMap.zoom(spec.zoom/2);  // apparently a factor of 2 difference (?)
        break;

        default:

/* The geometry can be specified using 0-point coordinates and deltas
                         * since it is a regular grid. */
                        x0: data.x0, y0: data.y0, dx: data.dx, dy: data.dy
                    });
            }

            if (done) {
                done(contour);
            }
        }

        that._readObject(file, _done, progress);
    };
};

geo.inherit(geo.contourJsonReader, geo.fileReader);

geo.registerFileReader('contourJsonReader', geo.contourJsonReader);

_createMap: function (bounds, tileWidth, tileHeight, sizeX, sizeY) {
        if (this._map) {
            // reset bounds query parameter on map exit
            router.setQuery('bounds', null, {replace: true, trigger: false});
            this._map.exit();
        }
        bounds.left = bounds.left || 0;
        bounds.top = bounds.top || 0;
        tileWidth = tileWidth || (bounds.right - bounds.left);
        tileHeight = tileHeight || (bounds.bottom - bounds.top);
        sizeX = sizeX || (bounds.right - bounds.left);
        sizeY = sizeY || (bounds.bottom - bounds.top);
        var interactor = geo.mapInteractor({
            zoomAnimation: false
        });
        var mapW = this.$el.width() || 100, mapH = this.$el.height() || 100;
        var minZoom = Math.min(0, Math.floor(Math.log(Math.min(
                (mapW || tileWidth) / tileWidth,
                (mapH || tileHeight) / tileHeight)) / Math.log(2))),
            maxZoom = Math.ceil(Math.log(Math.max(
                sizeX / tileWidth,
                sizeY / tileHeight)) / Math.log(2));

        var mapParams = {
            node: '<div style="width: 100%; height: 100%">',
            width: mapW,
            height: mapH,
            ingcs: '+proj=longlat +axis=esu',
            gcs: '+proj=longlat +axis=enu',</div>