How to use the geojs.map function in geojs

To help you get started, we’ve selected a few geojs examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github OpenGeoscience / jupyterlab_geojs / test / jasmine / geojsbuilder.spec.js View on Github external
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);
github OpenGeoscience / jupyterlab_geojs / src / geojsbuilder.ts View on Github external
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:
github DigitalSlideArchive / HistomicsTK / web_client / views / visualization.js View on Github external
maxBounds: bounds,
            min: minZoom,
            max: maxZoom,
            // to set min and max appropriately, we need to know the tile size
            // (using a single image may require the ability to zoom out).
            clampBoundsX: false,
            clampBoundsY: false,
            center: {
                x: (bounds.left + bounds.right) / 2,
                y: (bounds.top + bounds.bottom) / 2},
            zoom: minZoom,
            discreteZoom: false,
            interactor: interactor,
            unitsPerPixel: Math.pow(2, maxZoom)
        };
        this._map = geo.map(mapParams);

        this._boundsFromQuery(router.getQuery('bounds'));
        this._syncViewport();
        this._map.geoOn(geo.event.pan, _.bind(this._onMouseNavigate, this));
        this.$('.h-visualization-body').empty().append(this._map.node());
    },
github Kitware / candela / packages / geojs / src / Geo / index.js View on Github external
constructor (el, {map = {}, layers = [], width, height}) {
    super(el);

    width = width || map.width || 600;
    height = height || map.height || 600;

    el.style.width = width + 'px';
    el.style.height = height + 'px';

    // Construct a GeoJS map object based on the requested options.
    this.plot = geojs.map(Object.assign({
      node: el
    }, map));

    // Process the requested layers.
    this.layers = [];
    layers.forEach(layer => {
      switch (layer.type) {
        case 'osm':
          this.layers.push(this.plot.createLayer('osm', layer));
          break;

        case 'feature':
          layer.features.forEach(spec => {
            let feature = this.plot.createLayer('feature', {
              renderer: 'd3'
            })
github OpenGeoscience / pointcloud_viewer / web_client / GeoJsView.js View on Github external
render: function () {
        this.$el.html(template());
        this.$('.g-geojs-map-overlay-topleft').text(this.model.name());

        this._map = geojs.map({
            node: this.$('.g-geojs-map-container'),
            center: {
                x: -98,
                y: 39
            },
            zoom: 3
        });
        this._map.createLayer('osm');

        var layer = this._map.createLayer('feature');
        var reader = geojs.createFileReader('jsonReader', {'layer': layer});

        reader.read(this.model.downloadUrl());
        this._map.draw();

        return this;
github OpenGeoscience / jupyterlab_geojs / packages / geojson-extension / src / index.tsx View on Github external
return new Promise((resolve, reject) => {
      this._map = geojs.map({
        node: this.node,
        center: {
          x: -98,
          y: 39
        },
        zoom: 3
      });
      this._map.createLayer('osm');
      var layer = this._map.createLayer('feature');
      var reader = geojs.createFileReader('jsonReader', {'layer': layer});
      reader.read(data);
      this._map.draw();
      resolve(undefined);
    });
  }
github Kitware / minerva / web_external / views / map / MapPanel.js View on Github external
renderMap: function () {
        if (!this.map) {
            var mapSettings = this.session.metadata().map;
            this.map = geo.map({
                node: '.m-map-panel-map',
                center: mapSettings.center,
                zoom: mapSettings.zoom,
                max: 21,
                interactor: geo.mapInteractor({
                    map: this.map,
                    click: {
                        enabled: true,
                        cancelOnMove: true
                    }
                })
            });
            var interactorOpts = this.map.interactor().options();
            interactorOpts.keyboard.focusHighlight = false;
            this.map.interactor().options(interactorOpts);
            this.map.createLayer(mapSettings.basemap,