How to use esri-leaflet - 10 common examples

getParcelsByLatLng(latlng, parcelLayer, fetch) {
    // console.log('171111 getParcelsByLatLng', parcelLayer, 'fetch', fetch);

    const url = this.config.map.featureLayers[parcelLayer+'Parcels'].url;
    const parcelQuery = Query({ url });
    parcelQuery.contains(latlng);
    const test = 5;
    parcelQuery.run((function(error, featureCollection, response) {
        // console.log('171111 getParcelsByLatLng parcelQuery ran', test, 'fetch', fetch, 'response', response);
        this.didGetParcels(error, featureCollection, response, parcelLayer, fetch);
      }).bind(this)
    )
  }

getParcelsById(id, parcelLayer) {
    // console.log('getParcelsById', parcelLayer);

    const url = this.config.map.featureLayers[parcelLayer+'Parcels'].url;
    const configForParcelLayer = this.config.parcels[parcelLayer];
    const geocodeField = configForParcelLayer.geocodeField;
    const parcelQuery = Query({ url });
    parcelQuery.where(geocodeField + " = '" + id + "'");
    // console.log('parcelQuery:', parcelQuery);
    parcelQuery.run((function(error, featureCollection, response) {
      // console.log('171111 getParcelsById parcelQuery ran, response:', response);
      this.didGetParcels(error, featureCollection, response, parcelLayer);
    }).bind(this)
  )
  }

fetchBySpatialQuery(dataSourceKey, url, relationship, targetGeom, parameters = {}, options = {}, calculateDistancePt) {
    console.log('fetch esri spatial query, dataSourceKey:', dataSourceKey, 'url:', url, 'relationship:', relationship, 'targetGeom:', targetGeom, 'parameters:', parameters, 'options:', options);

    let query;
    if (relationship === 'where') {
      query = Query({ url })[relationship](parameters.targetField + "='" + parameters.sourceValue + "'");
    } else {
      query = Query({ url })[relationship](targetGeom);
    }

    // apply options by chaining esri leaflet option methods
    const optionsKeys = Object.keys(options) || [];
    query = optionsKeys.reduce((acc, optionsKey) => {
      const optionsVal = options[optionsKey];
      let optionsMethod;

      try {
        acc = acc[optionsKey](optionsVal);
      } catch (e) {
        throw new Error(`esri-leaflet query task does not support option:
                         ${optionsKey}`);
      }

      return acc;

initMap () {
      // Create map, with default centered and zoomed to show entire BC.
      this.map = L.map('map', {
        preferCanvas: true
      }).setView([this.latitude ? this.latitude : 54.5, this.getLongitude() ? this.getLongitude() : -126.5], 5)
      L.control.scale().addTo(this.map)
      // Add map layers.
      tiledMapLayer({url: 'https://maps.gov.bc.ca/arcserver/rest/services/Province/roads_wm/MapServer'}).addTo(this.map)
      L.tileLayer.wms('https://openmaps.gov.bc.ca/geo/pub/WHSE_CADASTRE.PMBC_PARCEL_FABRIC_POLY_SVW/ows?', {
        format: 'image/png',
        layers: 'pub:WHSE_CADASTRE.PMBC_PARCEL_FABRIC_POLY_SVW',
        styles: 'PMBC_Parcel_Fabric_Cadastre_Outlined',
        transparent: true
      }).addTo(this.map)
      // Add locate control
      const locateButton = L.control.locate({ position: 'topleft' })
      locateButton.onClick = (ev) => {
        this.map.locate()
      }
      locateButton.addTo(this.map)
      this.map.on('locationfound', (ev) => {
        this.$emit('coordinate', ev.latlng)
      })

var L = require('leaflet')
var Esri = require('esri-leaflet')
var Geocoding = require('esri-leaflet-geocoder')

// https://github.com/Leaflet/Leaflet/issues/766
L.Icon.Default.imagePath = 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/images'

var map = L.map('map').setView([37.75, -122.23], 10)
Esri.basemapLayer('Topographic').addTo(map)

var searchControl = Geocoding.Controls.geosearch().addTo(map)
  
var results = L.layerGroup().addTo(map)

searchControl.on('results', function(data){
  results.clearLayers()
  for (var i = data.results.length - 1; i >= 0; i--) {
    results.addLayer(L.marker(data.results[i].latlng))
  }
})

renderMap() {
    if (this.map) {
      this.map.remove()
    }

    let geoJsonLayer
    let layers = [ E.basemapLayer('Imagery'), E.basemapLayer('ImageryLabels') ]
    if (this.props.geometry) {
      let geometry
      if (this.props.geometry.type.toLowerCase() === 'point') {
        geometry = renderPointAsPolygon(this.props.geometry) // allows use of setStyle, which does not exist for GeoJSON points
      }
      else {
        geometry = ensureDatelineFriendlyGeometry(this.props.geometry)
      }
      geoJsonLayer = L.GeoJSON.geometryToLayer({
        type: 'Feature',
        geometry: geometry,
      })
      geoJsonLayer.setStyle({
        color: 'red',
        weight: 5,
        opacity: 1,

let geoJsonSelection = displayBboxAsLeafletGeoJSON(bbox)
    if (geoJsonSelection) {
      geoJsonSelection.geometry = recenterGeometry(geoJsonSelection.geometry)
      let geoJSONLayer = L.geoJson(geoJsonSelection, {style: geoJsonStyle})
      editableLayers.addLayer(geoJSONLayer)
    }

    if (features) {
      updateResultsLayers(props)
    }

    let initialMapProperties = {
      preferCanvas: true,
      maxBounds: BOUNDS,
      maxBoundsViscosity: 1.0,
      layers: [ E.basemapLayer('Imagery'), E.basemapLayer('ImageryLabels') ],
      attributionControl: false,
    }

    // define map with defaults
    setMap(L.map(mapRef.current, initialMapProperties))

    setInitialized(true)

    return () => {
      // unmount
      if (map) {
        map.off('click', onMapClick)
        setMap(null)
      }
    }
  }, [])

if (geoJsonSelection) {
      let geoJSONLayer = L.geoJson(geoJsonSelection, {style: geoJsonStyle})
      editableLayers.addLayer(geoJSONLayer)
    }

    if (features) {
      this.updateResultsLayers(this.props)
    }

    let initialMapProperties = {
      maxBounds: BOUNDS,
      maxBoundsViscosity: 1.0,
      minZoom: 2,
      maxZoom: 5,
      layers: [ E.basemapLayer('Imagery'), E.basemapLayer('ImageryLabels') ],
      attributionControl: false,
    }

    let state = {
      initialized: true,
      resultsLayers,
      editableLayers,
      // Define map with defaults
      map: L.map(ReactDOM.findDOMNode(this.mapNode), initialMapProperties),
      previousLayer: {},
    }
    return state
  }

initMap () {
      // Create map, with default centered and zoomed to show entire BC.
      this.map = L.map('map').setView([this.latitude ? this.latitude : 54.5, this.getLongitude() ? this.getLongitude() : -126.5], 5)
      L.control.scale().addTo(this.map)

      // Add map layers.
      tiledMapLayer({url: 'https://maps.gov.bc.ca/arcserver/rest/services/Province/roads_wm/MapServer'}).addTo(this.map)
      L.tileLayer.wms('https://openmaps.gov.bc.ca/geo/pub/WHSE_CADASTRE.PMBC_PARCEL_FABRIC_POLY_SVW/ows?', {
        format: 'image/png',
        layers: 'pub:WHSE_CADASTRE.PMBC_PARCEL_FABRIC_POLY_SVW',
        styles: 'PMBC_Parcel_Fabric_Cadastre_Outlined',
        transparent: true
      }).addTo(this.map)
      this.createMarker()
    },
    createMarker () {

initMap () {
      // Create map, with default centered and zoomed to show entire BC.
      this.map = L.map(this.$el).setView([54.5, -126.5], 5)
      L.control.scale().addTo(this.map)
      // Add map layers.
      tiledMapLayer({url: 'https://maps.gov.bc.ca/arcserver/rest/services/Province/roads_wm/MapServer'}).addTo(this.map)
      L.tileLayer.wms('https://openmaps.gov.bc.ca/geo/pub/WHSE_CADASTRE.PMBC_PARCEL_FABRIC_POLY_SVW/ows?', {
        format: 'image/png',
        layers: 'pub:WHSE_CADASTRE.PMBC_PARCEL_FABRIC_POLY_SVW',
        styles: 'PMBC_Parcel_Fabric_Cadastre_Outlined',
        transparent: true
      }).addTo(this.map)

      L.tileLayer.wms('https://openmaps.gov.bc.ca/geo/pub/WHSE_WATER_MANAGEMENT.GW_AQUIFERS_CLASSIFICATION_SVW/ows?', {
        format: 'image/png',
        layers: 'pub:WHSE_WATER_MANAGEMENT.GW_AQUIFERS_CLASSIFICATION_SVW',
        styles: 'Aquifers_BC_Outlined',
        transparent: true
      }).addTo(this.map)

      L.tileLayer.wms('https://openmaps.gov.bc.ca/geo/pub/WHSE_BASEMAPPING.FWA_STREAM_NETWORKS_SP/ows?', {
        format: 'image/png',