leaflet#LatLngExpression TypeScript Examples

makeMarkers = (map: L.Map, data: Array<any>, labels: Array<any>, linkedDashboardProps: LinkedDashboardProps): void => {

        const maxValue = Math.max(...data.map(x => x[3]), 0);
        for (const d of data) {
            const radius = typeof d[3] === 'number' ? MapUtilsService.scaledRadius(d[3], maxValue) : 20;
            const color = this.getColor(radius);
            const lat = parseFloat(d[0]);// / 1000000 / 2;
            const lon = parseFloat(d[1]); // / 10000;
            const properties = {
                weight: 1,
                radius: radius,
                color: 'white',
                fillColor: color,
                fillOpacity: 0.8
            }
            if (lat && lon) {
                const circle = L.circleMarker([lon, lat] as LatLngExpression, properties);
                circle.bindPopup(this.makePopup(d, labels), { 'className': 'custom', autoPan: false });
                circle.on('mouseover', function (e) {
                    this.openPopup();
                });
                circle.on('mouseout', function (e) {
                    this.closePopup();
                });
                circle.on('click', () => { this.linkDashboard(d[2], linkedDashboardProps) })
                circle.addTo(map);
            }

        }

    }

constructor(latLng: LatLngExpression, options: LiveAtlasPointMarker) {
		super(latLng, {});

		this.options.icon = new GenericIcon({
			iconUrl: options.iconUrl,
			label: options.tooltipHTML || options.tooltip,
			iconSize: options.iconSize,
			iconAnchor: options.iconAnchor,
			isHtml: !!options.tooltipHTML,
		});

		this.options.maxZoom = options.maxZoom;
		this.options.minZoom = options.maxZoom;
	}

createAreaLayer = (options: LiveAtlasAreaMarker, converter: Function): LiveAtlasPolyline | LiveAtlasPolygon => {
	const outline = !options.style.fillOpacity || (options.style.fillOpacity <= 0),
		points = options.points.map(projectPointsMapCallback, converter) as LatLngExpression[] | LatLngExpression[][],
		area = outline ? new LiveAtlasPolyline(points, options) : new LiveAtlasPolygon(points, options);

	if (options.popup) {
		area.bindPopup(() => createPopup(options, 'AreaPopup'));
	}

	if (options.tooltip) {
		area.bindTooltip(() => options.tooltipHTML || options.tooltip, tooltipOptions);
	}

	return area;
}

getCirclePoints = (options: LiveAtlasCircleMarker, converter: Function, outline: boolean): LatLngExpression[] => {
	const points = [];

	for(let i = 0; i < 360; i++) {
		const rad = i * Math.PI / 180.0,
			x = options.radius[0] * Math.sin(rad) + options.location.x,
			z = options.radius[1] * Math.cos(rad) + options.location.z;

		points.push(converter({x, y:options.location.y, z}));
	}

	if(outline && points.length) {
		points.push(points[0]);
	}

	return points;
}

getCenter = ({ children }: { children: TreeNode[] }) => {
  const centerNode = children.find(
    (c) => c.text.trim().toUpperCase() === "CENTER"
  );
  const newCenter =
    centerNode &&
    centerNode.children[0] &&
    centerNode.children[0].text.split(",").map((s) => parseFloat(s.trim()));
  return !newCenter || newCenter.length !== 2 || newCenter.some((c) => isNaN(c))
    ? DEFAULT_CENTER
    : (newCenter as LatLngExpression);
}

/**
   * Get coordinates to center map
   * @param data 
   */
  private getCenter(data: Array<any>) {
    let coordinates = this.inject.coordinates ? this.inject.coordinates : [this.serverMap.center[1], this.serverMap.center[0]]
    if(coordinates[0]===null || coordinates[1]===null){
      let x: number, y: number;
      x=41.972330;
      y=2.8116391;
      coordinates[0]=x;
      coordinates[1]=y;
    }
    return coordinates as LatLngExpression;

  }

private getCenter(data: Array<any>) {
    let x: number, y: number;
    if (!this.inject.coordinates) {
      let minX = data.reduce((min, v) => min >= parseFloat(v[0]) ? parseFloat(v[0]) : min, Infinity);
      let minY = data.reduce((min, v) => min >= parseFloat(v[1]) ? parseFloat(v[1]) : min, Infinity);
      let maxX = data.reduce((max, v) => max >= parseFloat(v[0]) ? max : parseFloat(v[0]), -Infinity);
      let maxY = data.reduce((max, v) => max >= parseFloat(v[1]) ? max : parseFloat(v[1]), -Infinity);
      x = minX + ((maxX - minX) / 2);
      y = minY + ((maxY - minY) / 2);
    }
    let coordinates = this.inject.coordinates ? this.inject.coordinates : [y, x];
    return coordinates as LatLngExpression
  }

constructor(latlngs: LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][], options: LiveAtlasPathMarker) {
		super(latlngs, options.style);
	}

constructor(latlngs: LatLngExpression[] | LatLngExpression[][], option: LiveAtlasPathMarker) {
		super(latlngs, option.style);
		this.options.minZoom = option.minZoom;
		this.options.maxZoom = option.maxZoom;
	}

updateAreaLayer = (area: LiveAtlasPolyline | LiveAtlasPolygon | undefined, options: LiveAtlasAreaMarker, converter: Function): LiveAtlasPolyline | LiveAtlasPolygon => {
	if (!area) {
		return createAreaLayer(options, converter);
	}

	const points = options.points.map(projectPointsMapCallback, converter) as LatLngExpression[] | LatLngExpression[][],
		oldPoints = area.getLatLngs();

	let dirty = false;

	//Avoid pointless setStyle() redrawing by checking if styles have actually changed
	if(!isStyleEqual(area.options, options.style)) {
		area.setStyle(options.style); //FIXME: Maybe override setStyle to add an option for not redrawing
		dirty = true;
	}

	if(!arePointsEqual(oldPoints.length === 1 ? oldPoints[0] : oldPoints, points)) {
		area.setLatLngs(points);
		dirty = true;
	}

	area.closePopup();
	area.unbindPopup();
	area.closeTooltip();
	area.unbindTooltip();

	if (options.popup) {
		area.bindPopup(() => createPopup(options, 'AreaPopup'));
	}

	if (options.tooltip) {
		area.bindTooltip(() => options.tooltipHTML || options.tooltip, tooltipOptions);
	}

	if(dirty) {
		area.redraw();
	}

	return area;
}

projectPointsMapCallback = function(this: Function, point: Coordinate | Coordinate[] | Coordinate[][]): LatLngExpression | LatLngExpression[] {
	if(Array.isArray(point)) {
		return point.map(projectPointsMapCallback, this) as LatLngExpression[];
	} else {
		// @ts-ignore
		return this(point);
	}
}

projectPointsMapCallback = function(point: Coordinate): LatLngExpression {
	if(Array.isArray(point)) {
		return projectPointsMapCallback(point);
	} else {
		// @ts-ignore
		return this(point);
	}
}

arePointsEqual = (oldPoints: LatLngExpression | LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][],
						newPoints: LatLngExpression | LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][]) => {
	return JSON.stringify(oldPoints) === JSON.stringify(newPoints);
}

DEFAULT_CENTER = [51.505, -0.09] as LatLngExpression