lib/Models/Leaflet.js
function(terria, map) {
  GlobeOrMap.call(this, terria);

  /**
   * Gets or sets the Leaflet {@link Map} instance.
   * @type {Map}
   */
  this.map = map;

  this.scene = new LeafletScene(map);

  /**
   * Gets or sets whether this viewer _can_ show a splitter.
   * @type {Boolean}
   */
  this.canShowSplitter = true;

  /**
   * Gets the {@link LeafletDataSourceDisplay} used to render a {@link DataSource}.
   * @type {LeafletDataSourceDisplay}
   */
  this.dataSourceDisplay = undefined;

  this._tweens = new TweenCollection();
  this._tweensAreRunning = false;
  this._selectionIndicatorTween = undefined;
  this._selectionIndicatorIsAppearing = undefined;

  this._pickedFeatures = undefined;
  this._selectionIndicator = L.marker([0, 0], {
    icon: L.divIcon({
      className: "",
      html:
        '<img src="' +
        selectionIndicatorUrl +
        '" width="50" height="50" alt="" />',
      iconSize: L.point(50, 50)
    }),
    zIndexOffset: 1, // We increment the z index so that the selection marker appears above the item.
    interactive: false,
    keyboard: false
  });
  this._selectionIndicator.addTo(this.map);
  this._selectionIndicatorDomElement = this._selectionIndicator._icon.children[0];

  this._dragboxcompleted = false;
  this._pauseMapInteractionCount = 0;

  this.scene.featureClicked.addEventListener(
    featurePicked.bind(undefined, this)
  );

  var that = this;

  // if we receive dragboxend (see LeafletDragBox) and we are currently
  // accepting a rectangle, then return the box as the picked feature
  map.on("dragboxend", function(e) {
    var mapInteractionModeStack = that.terria.mapInteractionModeStack;
    if (
      defined(mapInteractionModeStack) &&
      mapInteractionModeStack.length > 0
    ) {
      if (
        mapInteractionModeStack[mapInteractionModeStack.length - 1]
          .drawRectangle &&
        defined(e.dragBoxBounds)
      ) {
        var b = e.dragBoxBounds;
        mapInteractionModeStack[
          mapInteractionModeStack.length - 1
        ].pickedFeatures = Rectangle.fromDegrees(
          b.getWest(),
          b.getSouth(),
          b.getEast(),
          b.getNorth()
        );
      }
    }
    that._dragboxcompleted = true;
  });

  map.on("click", function(e) {
    if (!that._dragboxcompleted && that.map.dragging.enabled()) {
      pickFeatures(that, e.latlng);
    }
    that._dragboxcompleted = false;
  });

  this._selectedFeatureSubscription = knockout
    .getObservable(this.terria, "selectedFeature")
    .subscribe(function() {
      selectFeature(this);
    }, this);

  this._splitterPositionSubscription = knockout
    .getObservable(this.terria, "splitPosition")
    .subscribe(function() {
      this.updateAllItemsForSplitter();
    }, this);

  this._showSplitterSubscription = knockout
    .getObservable(terria, "showSplitter")
    .subscribe(function() {
      this.updateAllItemsForSplitter();
    }, this);

  map.on("layeradd", function(e) {
    that.updateAllItemsForSplitter();
  });

  map.on("move", function(e) {
    that.updateAllItemsForSplitter();
  });

  this._initProgressEvent();

  selectFeature(this);
}
function(terria, map) {
  GlobeOrMap.call(this, terria);

  /**
   * Gets or sets the Leaflet {@link Map} instance.
   * @type {Map}
   */
  this.map = map;

  this.scene = new LeafletScene(map);

  /**
   * Gets or sets whether this viewer _can_ show a splitter.
   * @type {Boolean}
   */
  this.canShowSplitter = true;

  /**
   * Gets the {@link LeafletDataSourceDisplay} used to render a {@link DataSource}.
   * @type {LeafletDataSourceDisplay}
   */
  this.dataSourceDisplay = undefined;

  this._tweens = new TweenCollection();
  this._tweensAreRunning = false;
  this._selectionIndicatorTween = undefined;
  this._selectionIndicatorIsAppearing = undefined;

  this._pickedFeatures = undefined;
  this._selectionIndicator = L.marker([0, 0], {
    icon: L.divIcon({
      className: "",
      html:
        '<img src="' +
        selectionIndicatorUrl +
        '" width="50" height="50" alt="" />',
      iconSize: L.point(50, 50)
    }),
    zIndexOffset: 1, // We increment the z index so that the selection marker appears above the item.
    interactive: false,
    keyboard: false
  });
  this._selectionIndicator.addTo(this.map);
  this._selectionIndicatorDomElement = this._selectionIndicator._icon.children[0];

  this._dragboxcompleted = false;
  this._pauseMapInteractionCount = 0;

  this.scene.featureClicked.addEventListener(
    featurePicked.bind(undefined, this)
  );

  var that = this;

  // if we receive dragboxend (see LeafletDragBox) and we are currently
  // accepting a rectangle, then return the box as the picked feature
  map.on("dragboxend", function(e) {
    var mapInteractionModeStack = that.terria.mapInteractionModeStack;
    if (
      defined(mapInteractionModeStack) &&
      mapInteractionModeStack.length > 0
    ) {
      if (
        mapInteractionModeStack[mapInteractionModeStack.length - 1]
          .drawRectangle &&
        defined(e.dragBoxBounds)
      ) {
        var b = e.dragBoxBounds;
        mapInteractionModeStack[
          mapInteractionModeStack.length - 1
        ].pickedFeatures = Rectangle.fromDegrees(
          b.getWest(),
          b.getSouth(),
          b.getEast(),
          b.getNorth()
        );
      }
    }
    that._dragboxcompleted = true;
  });

  map.on("click", function(e) {
    if (!that._dragboxcompleted && that.map.dragging.enabled()) {
      pickFeatures(that, e.latlng);
    }
    that._dragboxcompleted = false;
  });

  this._selectedFeatureSubscription = knockout
    .getObservable(this.terria, "selectedFeature")
    .subscribe(function() {
      selectFeature(this);
    }, this);

  this._splitterPositionSubscription = knockout
    .getObservable(this.terria, "splitPosition")
    .subscribe(function() {
      this.updateAllItemsForSplitter();
    }, this);

  this._showSplitterSubscription = knockout
    .getObservable(terria, "showSplitter")
    .subscribe(function() {
      this.updateAllItemsForSplitter();
    }, this);

  map.on("layeradd", function(e) {
    that.updateAllItemsForSplitter();
  });

  map.on("move", function(e) {
    that.updateAllItemsForSplitter();
  });

  this._initProgressEvent();

  selectFeature(this);
}
function ( terria , map ) { GlobeOrMap . call ( this , terria ) ; /**
   * Gets or sets the Leaflet {@link Map} instance.
   * @type {Map}
   */ this . map = map ; this . scene = new LeafletScene ( map ) ; /**
   * Gets or sets whether this viewer _can_ show a splitter.
   * @type {Boolean}
   */ this . canShowSplitter = true ; /**
   * Gets the {@link LeafletDataSourceDisplay} used to render a {@link DataSource}.
   * @type {LeafletDataSourceDisplay}
   */ this . dataSourceDisplay = undefined ; this . _tweens = new TweenCollection ( ) ; this . _tweensAreRunning = false ; this . _selectionIndicatorTween = undefined ; this . _selectionIndicatorIsAppearing = undefined ; this . _pickedFeatures = undefined ; this . _selectionIndicator = L . marker ( [ 0 , 0 ] , { icon : L . divIcon ( { className : "" , html : '<img src="' + selectionIndicatorUrl + '" width="50" height="50" alt="" />' , iconSize : L . point ( 50 , 50 ) } ) , zIndexOffset : 1 , // We increment the z index so that the selection marker appears above the item. interactive : false , keyboard : false } ) ; this . _selectionIndicator . addTo ( this . map ) ; this . _selectionIndicatorDomElement = this . _selectionIndicator . _icon . children [ 0 ] ; this . _dragboxcompleted = false ; this . _pauseMapInteractionCount = 0 ; this . scene . featureClicked . addEventListener ( featurePicked . bind ( undefined , this ) ) ; var that = this ; // if we receive dragboxend (see LeafletDragBox) and we are currently // accepting a rectangle, then return the box as the picked feature map . on ( "dragboxend" , function ( e ) { var mapInteractionModeStack = that . terria . mapInteractionModeStack ; if ( defined ( mapInteractionModeStack ) && mapInteractionModeStack . length > 0 ) { if ( mapInteractionModeStack [ mapInteractionModeStack . length - 1 ] . drawRectangle && defined ( e . dragBoxBounds ) ) { var b = e . dragBoxBounds ; mapInteractionModeStack [ mapInteractionModeStack . length - 1 ] . pickedFeatures = Rectangle . fromDegrees ( b . getWest ( ) , b . getSouth ( ) , b . getEast ( ) , b . getNorth ( ) ) ; } } that . _dragboxcompleted = true ; } ) ; map . on ( "click" , function ( e ) { if ( ! that . _dragboxcompleted && that . map . dragging . enabled ( ) ) { pickFeatures ( that , e . latlng ) ; } that . _dragboxcompleted = false ; } ) ; this . _selectedFeatureSubscription = knockout . getObservable ( this . terria , "selectedFeature" ) . subscribe ( function ( ) { selectFeature ( this ) ; } , this ) ; this . _splitterPositionSubscription = knockout . getObservable ( this . terria , "splitPosition" ) . subscribe ( function ( ) { this . updateAllItemsForSplitter ( ) ; } , this ) ; this . _showSplitterSubscription = knockout . getObservable ( terria , "showSplitter" ) . subscribe ( function ( ) { this . updateAllItemsForSplitter ( ) ; } , this ) ; map . on ( "layeradd" , function ( e ) { that . updateAllItemsForSplitter ( ) ; } ) ; map . on ( "move" , function ( e ) { that . updateAllItemsForSplitter ( ) ; } ) ; this . _initProgressEvent ( ) ; selectFeature ( this ) ; }
The Leaflet viewer component

@alias Leaflet
@constructor
@extends GlobeOrMap

@param {Terria} terria The Terria instance.
@param {Map} map The leaflet map instance.
The Leaflet viewer component