How to use leaflet - 10 common examples

wheelDebounceTime: 30,
	wheelPxPerZoomLevel: 25,
	tap: false,
	tapTolerance: 10,
	bounceAtZoomLimits: false
};

mapOptions.doubleClickZoom = true;
mapOptions.doubleClickZoom = 'center';

mapOptions.center = latLng;
mapOptions.center = latLngLiteral;
mapOptions.center = latLngTuple;

mapOptions.layers = [];
mapOptions.layers = [L.tileLayer('')]; // add layers of other types

mapOptions.maxBounds = latLngBounds;
mapOptions.maxBounds = [];
mapOptions.maxBounds = latLngBoundsLiteral;

// mapOptions.renderer = ?

mapOptions.scrollWheelZoom = true;
mapOptions.scrollWheelZoom = 'center';

mapOptions.touchZoom = false;
mapOptions.touchZoom = 'center';

let layer: L.Layer;

const htmlElement = document.getElementById('foo');

example = () => {
	const myIcon = L.icon({
		iconUrl: 'my-icon.png',
		iconSize: L.point(20, 20),
		iconAnchor: L.point(10, 10),
		labelAnchor: L.point(6, 0) // as I want the label to appear 2px past the icon (10 + 2 - 6)
	});
	L.marker(L.latLng(-37.7772, 175.2606), {
		icon: myIcon
	}).bindLabel('Look revealing label!').addTo(map);
};

L.marker([1, 2], {
	icon: L.icon({
		iconUrl: 'my-icon.png'
	}),
	autoPan: true,
	autoPanPadding: [10, 20],
	autoPanSpeed: 5,
}).bindPopup('<p>Hi</p>');

L.marker([1, 2], {
	icon: L.divIcon({
		className: 'my-icon-class'
	})
}).setIcon(L.icon({
	iconUrl: 'my-icon.png'
})).setIcon(L.divIcon({
	className: 'my-div-icon'
}));

let polygon: L.Polygon;

// simple polygon
const simplePolygonLatLngs: L.LatLngExpression[] = [[37, -109.05], [41, -109.03], [41, -102.05], [37, -102.04]];
polygon = L.polygon(simplePolygonLatLngs);
polygon = new L.Polygon(simplePolygonLatLngs);
polygon.setLatLngs(simplePolygonLatLngs);
const simplePolygonLatLngs2: L.LatLng[] = polygon.getLatLngs() as L.LatLng[];

// complex polygon (polygon with holes)
const complexPolygonLatLngs: L.LatLngExpression[][] = [
	[[37, -109.05], [41, -109.03], [41, -102.05], [37, -102.04]], // outer ring
	[[37.29, -108.58], [40.71, -108.58], [40.71, -102.50], [37.29, -102.50]] // hole

var L = require('leaflet');
var SvgOverlay = global.SvgOverlay = require('../../src/svgoverlay');
var xhr = global.xhr = require('xhr');

global.SvgLayer = require('../../src/svglayer');

// create the slippy map
var map = window.map = L.map('image-map', {
  minZoom: 0,
  maxZoom: 20,
  center: [0, 0],
  zoom: 1,
  crs: L.CRS.Simple,
  inertia: !L.Browser.ie
});

var svg = global.svg = null;

map.on('click', function(e) {
  console.log('map', e.originalEvent.target);
});

var select = document.querySelector('#select-schematic');
function onSelect() {

export const toLatLngBounds = function(arrayBounds) {
  if (_isEmpty(arrayBounds)) {
    return null
  }
  else if (_isArray(arrayBounds) && arrayBounds.length === 4) {
    const southWest = new LatLng(arrayBounds[1], arrayBounds[0])
    const northEast = new LatLng(arrayBounds[3], arrayBounds[2])
    return new LatLngBounds(southWest, northEast)
  }
  else if (_isFunction(arrayBounds.toBBoxString)) {
    // they gave us a LatLngBounds. Just return it.
    return arrayBounds
  }
  else if (_isString(arrayBounds)) {
    const bounds = _split(arrayBounds, ',')
    if (bounds && bounds.length === 4) {
      return toLatLngBounds(bounds)
    }
    else {
      throw new Error("Invalid bounds given: " + arrayBounds)
    }
  }

L.Map.prototype.initialize.call(this, element, opts);

    this._checkDeprecatedKey();

    if (this.options._useTangram) {
      var tangramOptions = opts.tangramOptions || {};

      // debugTangram is deprecated; remove in v1.0
      if (this.options.debugTangram) {
        // tangramOptions = L.extend({}, tangramOptions, {debug: true});
        console.warn('Mapzen.js warning: `options.debugTangram` is deprecated.');
      }

      // As of v1.0, scene will need to be part of tangramOptions
      if (this.options.scene) {
        tangramOptions = L.extend({}, tangramOptions, {scene: this.options.scene});
        console.warn('Mapzen.js warning: `options.scene` is deprecated and will be removed in v1.0. Please use `options.tangramOptions.scene`.');
      }

      this._tangram = L.Nextzen._tangram(tangramOptions);
      this._tangramLayer = this._tangram.addTo(this);

      // tangramloaded event is deprecated; remove in v1.0
      var self = this;
      self._tangram.on('loaded', function (e) {
        self.fire('tangramloaded', {
          tangramLayer: e.layer,
          tangramVersion: e.version
        });
      });
    }

mapUtils.registerHook(mapUtils.COMPUTE_BBOX_HOOK, (center, zoom) => {
            let latLngCenter = L.latLng([center.y, center.x]);
            // this call will use map internal size
            let topLeftPoint = this.map._getNewPixelOrigin(latLngCenter, zoom);
            let pixelBounds = new L.Bounds(topLeftPoint, topLeftPoint.add(this.map.getSize()));
            let southWest = this.map.unproject(pixelBounds.getBottomLeft(), zoom);
            let northEast = this.map.unproject(pixelBounds.getTopRight(), zoom);
            let bbox = new L.LatLngBounds(southWest, northEast).toBBoxString().split(',');
            return {
                bounds: {
                    minx: parseFloat(bbox[0]),
                    miny: parseFloat(bbox[1]),
                    maxx: parseFloat(bbox[2]),
                    maxy: parseFloat(bbox[3])
                },
                crs: 'EPSG:4326',
                rotation: 0
            };
        });
        mapUtils.registerHook(mapUtils.GET_PIXEL_FROM_COORDINATES_HOOK, (pos) => {

this.addChange(rel, 'toggle members', change);

      console.log(
        'LOG (editing s.) Array highlight',
        Array.from(this.storageSrv.elementsToHighlight.values()),
      );
      const clickedNode: IPtStop = this.storageSrv.elementsMap.get(
        featureId,
      );

      // create array of circles to highlight and add to map
      let membersHighlight = [];
      for (let id of Array.from(this.storageSrv.elementsToHighlight.values())) {
        const node = this.storageSrv.elementsMap.get(id);
        console.log('LOG (editing s.) Creating circle for node:', node);
        let circle = L.circleMarker([node.lat, node.lon], {
          radius : 15,
          color  : '#00ffff',
          opacity: 0.75,
        });
        console.log('LOG (editing s.) Created circle:', circle);
        membersHighlight.push(circle);
      }
      console.log(
        'LOG (editing s.) Show all circles array membersHighlight:',
        membersHighlight,
      );
      this.mapSrv.membersHighlightLayer = L.layerGroup(membersHighlight);
      this.mapSrv.membersHighlightLayer.addTo(this.mapSrv.map);
    }
  }

_redraw: function (id) {
    var layer = this._layers[id];
    var geojson = layer.feature;

    // if this looks like a marker
    if (layer && layer.setIcon && this.options.pointToLayer) {
      // update custom symbology, if necessary
      if (this.options.pointToLayer) {
        var getIcon = this.options.pointToLayer(geojson, latLng(geojson.geometry.coordinates[1], geojson.geometry.coordinates[0]));
        var updatedIcon = getIcon.options.icon;
        layer.setIcon(updatedIcon);
      }
    }

    // looks like a vector marker (circleMarker)
    if (layer && layer.setStyle && this.options.pointToLayer) {
      var getStyle = this.options.pointToLayer(geojson, latLng(geojson.geometry.coordinates[1], geojson.geometry.coordinates[0]));
      var updatedStyle = getStyle.options;
      this.setFeatureStyle(geojson.id, updatedStyle);
    }

    // looks like a path (polygon/polyline)
    if (layer && layer.setStyle && this.options.style) {
      this.resetStyle(geojson.id);
    }