How to use the leaflet.map function in leaflet

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() {

componentDidMount() {

      // Create the leaflet map
      this.leafletMap = L.map(this.leafletHolderEl, {
        center : [0, 0],
        zoom : 0,
        crs: L.CRS.Simple,
        zoomControl : true,
        maxBoundsViscosity : 0.5,
        drawControlTooltips : false
      });
      const leafletMap = this.leafletMap;

      // Determine the resolution that the image will be rendered at
      let pixel_bounds = leafletMap.getPixelBounds();
      let maxWidth = pixel_bounds.max.x - pixel_bounds.min.x;
      let maxHeight = pixel_bounds.max.y - pixel_bounds.min.y;

      let imageWidth = this.props.imageElement.width;
      let imageHeight = this.props.imageElement.height;

initMap: function (container) {
    const map = L.map(container)

    L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
      attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',
      maxZoom: 16
    }).addTo(map)

    map.on('moveend', () => {
      const centerGeojson = this.latlngToGeojson(map.getCenter())
      this.trigger('moved', centerGeojson)
    }, this)

    // If user starts panning the map before locating is done, don't setView after locate
    map.on('dragstart', () => this.setViewAfterLocate = false, this)

    map.setView(this.initialLocation, this.initialZoom)

componentDidMount: function() {
    this.map = L.map(ReactDOM.findDOMNode(this), {
      center: [55.7522200, 37.6155600],
      zoom: 12,
      minZoom: 2,
      maxZoom: 20,
      zoomControl: false,
      layers: [
        L.tileLayer.provider("MapBox.trashgenerator.ih4locjo")
      ],
      attributionControl: true
    });
    this.map.attributionControl.setPrefix("");

    // subscribing to events
    this.getFlux().store("ParkingStore")
      .on("loadParkingListSuccess", this._loadParkingListSuccess)
      .on("loadCurrentParking", this._loadCurrentParking)

createMap: function (element) {
    var map = L.map(element,{
      zoomControl:false
    });
    var layer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // loading scene yaml
    // var layer = Tangram.leafletLayer({
    //     scene: 'scene.yaml',//sceneYaml,
    //     attribution: '<a href="https://mapzen.com/tangram">Tangram</a> | © OSM contributors | <a href="https://mapzen.com/">Mapzen</a>'
    // });

    layer.addTo(map);
    //L.marker([40.729614,-73.993837]).addTo(map);
    return map;
    },

// This is probably an onshow event for a page that was rendered
        // and then went offscreen before coming back; refresh layout.
        m = map.maps[mapid];
        m.invalidateSize();
        if (defaults.autoZoom.sticky) {
            m.fitBounds(defaults.lastBounds || defaults.bounds);
        }
        return;
    }

    // Create map, set default zoom and basemap
    var opts = {};
    if (defaults.maxBounds) {
        opts.maxBounds = defaults.maxBounds;
    }
    m = map.maps[mapid] = L.map(divid, opts);
    m.fitBounds(defaults.lastBounds || defaults.bounds);
    basemaps = map.createBasemaps();
    basemap = Object.keys(basemaps)[0];
    basemaps[basemap].addTo(m);
    map.basemaps[mapid] = basemaps;

    // Load layerconfs and add empty layer groups to map
    layers = {};
    layerConfs = map.getLayerConfs(routeInfo, mapname);
    var overlays = layerConfs.map(map.createOverlay);
    var results = [];
    layerConfs.forEach(function(layerconf, i) {
        var layer = overlays[i];
        layers[layerconf.name] = layer;
        if (layer.ready) {
            results.push(layer.ready);

import * as L from 'leaflet';
import 'leaflet-editable';

class MarkerClass { }
class MarkerEditorClass { }
class MiddleMarkerClass { }
class PolygonClass { }
class PolygonEditorClass { }
class PolylineClass { }
class PolylineEditorClass { }
class VertexMarkerClass { }

const map: L.Map = L.map('div', {
    editable: true,
    editOptions: {
        drawingCSSClass: 'css-class',
        editLayer: L.layerGroup(),
        featuresLayer: L.layerGroup(),
        lineGuideOptions: {},
        markerClass: MarkerClass,
        markerEditorClass: MarkerEditorClass,
        middleMarkerClass: MiddleMarkerClass,
        polygonClass: PolygonClass,
        polygonEditorClass: PolygonEditorClass,
        polylineClass: PolylineClass,
        polylineEditorClass: PolylineEditorClass,
        skipMiddleMarkers: true,
        vertexMarkerClass: VertexMarkerClass
    }

ngOnInit() {
    this.map = L.map(this.mapContainer.nativeElement).setView(
      [this.mapLatitude, this.mapLongitude],
      this.defaultZoom,
    );

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution:
        '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(this.map);

    this.getMenu({
      sort: {
        name: undefined,
        direction: SortDirection.DESC,
      },
      categories: {
        mainDishes: false,

componentDidMount: function() {
    var node = findDOMNode(this.refs.map);

    var map = L.map(node, {
      center: this.getOptions('center'),
      zoom: this.getOptions('zoom'),
      maxZoom: this.getOptions('maxZoom'),
      scrollWheelZoom: 'center',
      doubleClickZoom: 'center'
    });

    var layer = L.tileLayer(this.getOptions('tileUrl'), {
      subdomains: this.getOptions('subdomains').toString(),
      attribution: this.getOptions('attribution')
    }).addTo(map);

    if (this.props.mapEvents) {
      Object.keys(this.props.mapEvents).forEach(event => map.on(event, this.props.mapEvents[event]));
    }

private initMap(coordinates: GeoDataInterface) {
    this.map = L.map('map', { minZoom: 2, maxZoom: 12, zoomControl: false }).setView(
      [coordinates.lat, coordinates.lon],
      5.5,
    );
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);
    L.marker(L.latLng(Number(coordinates.lat), Number(coordinates.lon))).addTo(this.map);
  }
}