How to use the leaflet.divIcon function in leaflet

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

props.network === 'CIIM' ||
      props.station_type === 'macroseismic'
    ) {
      // create a marker for a DYFI station
      marker = L.marker(latlng, {
        icon: L.divIcon({
          className: `station-overlay-dyfi-layer-icon mmi${intensity}`,
          iconAnchor: [7, 7],
          iconSize: [14, 14],
          popupAnchor: [0, 0]
        })
      });
    } else {
      // create a marker for a seismic station
      marker = L.marker(latlng, {
        icon: L.divIcon({
          className:
            'station-overlay-station-layer-icon station-mmi' + `${intensity}`,
          iconAnchor: [7, 8],
          iconSize: [14, 10],
          popupAnchor: [0, -4]
        })
      });
    }

    // Add event listener to generate a popup when the station is clicked
    marker.on('click', this.generatePopup, this);
    return marker;
  },

_renderStationAsMarker = (station, symbolDef) => {
    const {baseIconClass} = this.props
    let classes = `fa fa-map-marker ${baseIconClass}`
    // If this station is exclusive to a single network, apply the the class for that network
    if (station.networks.length === 1) {
      classes += ` ${baseIconClass}-${station.networks[0].toLowerCase()}`
    }
    const color = symbolDef && symbolDef.fillColor
      ? symbolDef.fillColor
      : 'gray'
    const markerIcon = divIcon({
      className: '',
      iconSize: [11, 16],
      popupAnchor: [0, -6],
      html: `<i style="color: ${color}" class="${classes}">`
    })

    return (
      
    )
  }</i>

recreateLabel(props) {
    const html = '<span class="leaflabel-text">' + props.text + '</span>'
    // TODO set props.brightMap depending on basemap bg color
    const colorClass = props.brightMap ? 'leaflabel-black' : 'leaflabel-white'
    this.label = L.divIcon({
      className: 'leaflabel ' + colorClass,
      html,
      iconSize: [100, 100], // TODO arbitrary
    })
  }

class MyIcon extends L.Icon {
	constructor() {
		super({ iconUrl: 'icon.png' });
	}
}

class MyDivIcon extends L.DivIcon {
	constructor() {
		super();
	}
}

const divIconHtmlAsString = L.divIcon({ html: '' });
const divIconHtmlAsElement = L.divIcon({ html: htmlElement });
const divIconHtmlAsFalse = L.divIcon({ html: false });
let defaultIcon = new L.Icon.Default();
defaultIcon = new L.Icon.Default({ imagePath: 'apath' });

const myControlClass = L.Control.extend({});
const myControl = new myControlClass();
const myOtherControlClass = myControlClass.extend({});
const myOtherControl = new myOtherControlClass();

L.Control.include({});
L.Control.mergeOptions({});
L.Control.addInitHook(() => {});
L.Control.addInitHook('method1', 'hello', 1);

export class MyNewControl extends L.Control {
	constructor() {
		super({

const addMarker = function(index, sec) {
            let m = markersArray[index],
                iconclass = "green",
                icontext = "",
                icon = L.divIcon({
                    className: 'map-marker ' + iconclass,
                    iconSize: null,
                    html: '<div class="icon">' + icontext + '</div><div class="arrow">'
                }),
                popup = "Location: " + m.country,
                animDur = 2000,
                tempLat = that.worldcenter[0],
                tempLng = that.worldcenter[1];

            if (index &gt; 0) {
                tempLat = marker1._latlng.lat;
                tempLng = marker1._latlng.lng;
                marker1.remove();
            }

            let dist = that.latlngdistance(tempLat, tempLng, m.lat, m.long, 'M');</div>

{steps.map((step, index) => {
          if (step.relativeDirection === 'DEPART') {
            return null
          }
          const active = step.legIndex === activeLeg && step.stepIndex === activeStep
          const icon = divIcon({
            html: `<i style="${active ? 'color: #ffffff' : ''}" class="fa fa-circle-o"></i>`,
            className: ''
          })
          return (

if (this.isDark) className += " dark";

            let iconSizeValue: L.PointExpression = [iconSize, 60];

            if (isMoreInfo) {
                let htmlBody = `<div>${aircraftStatus.callsign}<br>ALT ${Math.round(aircraftStatus.altitude)} ft<br>HDG ${Math.round(aircraftStatus.heading)}\u00B0<br>IAS ${Math.round(aircraftStatus.indicatedAirSpeed)} kts<br>GS ${Math.round(aircraftStatus.groundSpeed)} kts</div>`

                if (aircraftStatus.trueHeading &gt;= 180) {
                    markers.info.setIcon(L.divIcon({
                        className: className,
                        html: htmlBody,
                        iconSize: iconSizeValue,
                        iconAnchor: [-iconSize, 10],
                    }))
                } else {
                    markers.info.setIcon(L.divIcon({
                        className: className,
                        html: htmlBody,
                        iconSize: iconSizeValue,
                        iconAnchor: [infoBoxWidth + iconSize, 10],
                    }))
                }
            } else {
                if (aircraftStatus.trueHeading &gt;= 180) {
                    markers.info.setIcon(L.divIcon({
                        className: className,
                        html: `<div>${aircraftStatus.callsign}</div>`,
                        iconSize: iconSizeValue,
                        iconAnchor: [-iconSize, 10],
                    }))
                } else {
                    markers.info.setIcon(L.divIcon({

export function drawMap(lat, lng, zoom) {
  let position = [lat, lng];
  const icon = divIcon({
    className: 'map-marker-icon',
    iconSize: [35, 35],
  });
  const map = (
    <map>
      
      
    </map>
  );
  return map;

if (isGridTemplate(renderer.template)) {
			let iconElement = renderer.template.elements.filter(e => isUiGlyphIconElement(e) || isUiImageElement(e) || isUiIconElement(e))[0];
			if (!iconElement || !markerConfig.values[iconElement.dataKey]) {
				iconWidth = 0;
			} else if (iconElement) {
				if (isUiGlyphIconElement(iconElement)) {
					iconWidth = iconElement.size;
				} else if (isUiImageElement(iconElement)) {
					iconWidth = iconElement.width;
				} else if (isUiIconElement(iconElement)) {
					iconWidth = iconElement.size;
				}
			}
		}

		let divIcon = L.divIcon({
			html: renderer.render(markerConfig.values),
			className: "custom-div-icon",
			iconAnchor: [markerConfig.offsetPixelsX, markerConfig.offsetPixelsY],
			popupAnchor: [(iconWidth / 2) - 6, -5]
		} as L.DivIconOptions);
		let marker = L.marker(new L.LatLng(markerConfig.location.latitude, markerConfig.location.longitude), {
			title: markerConfig.asString,
			icon: divIcon
		});
		marker.bindPopup(markerConfig.asString);
		marker.on("click", event1 => this.onMarkerClicked.fire({
			markerId: markerConfig.id
		}));
		this.markersByClientId[markerConfig.id] = marker;
		return marker;
	};