@teipublisher/pb-components/src/pb-map-layer.js

Collection of webcomponents underlying TEI Publisher

import { LitElement } from 'lit-element';

const ignore = ['type', 'url', 'label', 'base', 'show'];

/**
 * Configure a map layer. Should be nested inside `pb-leaflet-map`.
 *
 */
export class PbMapLayer extends LitElement {
  static get properties() {
    return {
      /**
       * Type of the layer: either 'tile' or 'geojson'
       */
      type: {
        type: String,
      },
      /**
       * The URL (or URL template) to load layer data from
       */
      url: {
        type: String,
      },
      /**
       * Set to indicate that this is a base layer
       */
      base: {
        type: Boolean,
      },
      /**
       * Display the layer on the map upon initialization
       */
      show: {
        type: Boolean,
      },
      /**
       * A label for the layer to be shown in the layer control
       */
      label: {
        type: String,
      },
      attribution: {
        type: String,
      },
      minZoom: {
        type: Number,
        attribute: 'min-zoom',
      },
      maxZoom: {
        type: Number,
        attribute: 'max-zoom',
      },
      zoomOffset: {
        type: Number,
        attribute: 'zoom-offset',
      },
      opacity: {
        type: Number,
      },
      tileSize: {
        type: Number,
      },
      id: {
        type: String,
      },
      accessToken: {
        type: String,
        attribute: 'access-token',
      },
    };
  }

  constructor() {
    super();
    this.type = 'tile';
    this.url = null;
  }

  get options() {
    const options = {};
    Object.keys(PbMapLayer.properties).forEach(key => {
      if (ignore.indexOf(key) < 0 && this[key]) {
        options[key] = this[key];
      }
    });
    console.log('<pb-leaflet-map-layer> Options: %o', options);
    return options;
  }

  async data() {
    return new Promise(resolve => {
      fetch(this.url)
        .then(response => response.json())
        .then(json => resolve(json));
    });
  }
}
customElements.define('pb-map-layer', PbMapLayer);