Coordinate Tracker - error with projections.map() in file coordinate-tracker.js (module mapguide-react-layout)

[pcardinal]

1. MapGuide Installation

• Version: 4.0 P3 (9862)
• OS: Win 10
• WebTier configuration (IIS/Apache): IIS

2. mapguide-react-layout version: 0.14.7

To Reproduce

1. Add the "widget" Coordinate Tracker to a menu container (ex. Toolbar, FileMenu, etc...) in Flexible Layout Settings (Maestro)
2. Change the configuration of the widget and add a projection like EPSG:3857 <Projection>EPSG:3857</Projection>
3. Start the viewer and click on the menu Coordinate Tracker
4. It will produce a blank screen if the EPSG: 3857 is part of proj4 (if not the viewer will use https://epsg.io/ to get the parameters of the chosen coordinate system).

Expected behavior
Displaying in the TaskPane the name of the coordinate system and the value of X and Y for the position of the mouse

Screenshots/Browser DevTools output
Error : projections.map not a function (from coordinate-tracker.js)

Bug: projections is not an array and the map() function could not be use on it.
The solution is to put projections in an array.

Extract of file coordinate-tracker.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CoordinateTrackerContainer = void 0;
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(require("react"));
var i18n_1 = require("../api/i18n");
var olProj = (0, tslib_1.__importStar)(require("ol/proj"));
var core_1 = require("@blueprintjs/core");
var hooks_1 = require("./hooks");
var hooks_mapguide_1 = require("./hooks-mapguide");
var CoordinateTrackerContainer = function (props) {
    var projections = props.projections;
    var locale = (0, hooks_1.useViewerLocale)();
    var mouse = (0, hooks_1.useCurrentMouseCoordinates)();
    var proj = (0, hooks_mapguide_1.useActiveMapProjection)();
    if (projections && projections.length) {
        return React.createElement("div", { style: { margin: 8 } },
            React.createElement("h4", { className: "bp3-heading" }, (0, i18n_1.tr)("COORDTRACKER", locale)),
            projections.map(function (p) {           
                var _a;
                var x = NaN;

Modifications to the file

add two lines

• var proj_array = [];
• proj_array[0] = projections;

modify one line

• proj_array.map(function (p) {

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CoordinateTrackerContainer = void 0;
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(require("react"));
var i18n_1 = require("../api/i18n");
var olProj = (0, tslib_1.__importStar)(require("ol/proj"));
var core_1 = require("@blueprintjs/core");
var hooks_1 = require("./hooks");
var hooks_mapguide_1 = require("./hooks-mapguide");
var CoordinateTrackerContainer = function (props) {
     var projections = props.projections;
     var proj_array = [];                             // line add
     proj_array[0] = projections;               // line add
     var locale = (0, hooks_1.useViewerLocale)();
     var mouse = (0, hooks_1.useCurrentMouseCoordinates)();
     var proj = (0, hooks_mapguide_1.useActiveMapProjection)();
     if (projections && projections.length) {
        return React.createElement("div", { style: { margin: 8 } },
            React.createElement("h4", { className: "bp3-heading" }, (0, i18n_1.tr)("COORDTRACKER", locale)),
                proj_array.map(function (p) {                  //  modification done
                var _a;
                var x = NaN;
                var y = NaN;
                if (mouse && proj) {
                    try {
                        _a = olProj.transform(mouse, proj, p), x = _a[0], y = _a[1];
                    }
                    catch (e) {
                    }
                }
                return React.createElement(core_1.Card, { key: p, style: { marginBottom: 10 } },
                    React.createElement("h5", { className: "bp3-heading" },
                        React.createElement("a", { href: "#" }, p)),
                    React.createElement("p", null,
                        React.createElement("strong", null, "X:"),
                        " ",
                        x),
                    React.createElement("p", null,
                        React.createElement("strong", null, "Y:"),
                        " ",
                        y));
            }));
    }
    else {
        return React.createElement(core_1.Callout, { intent: core_1.Intent.DANGER, title: (0, i18n_1.tr)("ERROR", locale), icon: "error" }, (0, i18n_1.tr)("COORDTRACKER_NO_PROJECTIONS", locale));
    }
};
exports.CoordinateTrackerContainer = CoordinateTrackerContainer;
//# sourceMappingURL=coordinate-tracker.js.map

[jumpinjackie]

Please note (for future bugs found in code).

This project is all TypeScript-based. The .js files you're looking at is the result "compiled" from original TypeScript. So while it is helpful that you included the affected JavaScript code, it would be even better if you could use the provided source maps and your browser dev tools to follow the problem back to the original TypeScript source file, which would be this.

https://github.com/jumpinjackie/mapguide-react-layout/blob/master/src/containers/coordinate-tracker.tsx

[pcardinal]

Modified ..\node_modules\mapguide-react-layout\src\containers\coordinate-tracker.tsx

import * as React from "react";
import { tr } from "../api/i18n";
import * as olProj from "ol/proj";
import { Callout, Intent, Card } from '@blueprintjs/core';
import { useViewerLocale, useCurrentMouseCoordinates } from './hooks';
import { useActiveMapProjection } from './hooks-mapguide';

export interface ICoordinateTrackerContainerProps {
    projections: string[];
}


export const CoordinateTrackerContainer = (props: ICoordinateTrackerContainerProps) => {
    const { projections } = props;
    const proj_array = [projections];                                             // line add
    const locale = useViewerLocale();
    const mouse = useCurrentMouseCoordinates();
    const proj = useActiveMapProjection();
    if (projections && projections.length) {
        return <div style={{ margin: 8 }}>
            <h4 className="bp3-heading">{tr("COORDTRACKER", locale)}</h4>
            {proj_array.map(p => {                                                  //modified line
                let x = NaN;
                let y = NaN;
                if (mouse && proj) {
                    try {
                        [x, y] = olProj.transform(mouse, proj, p);
                    } catch (e) {

                    }
                }
                return <Card key={p} style={{ marginBottom: 10 }}>
                    <h5 className="bp3-heading"><a href="#">{p}</a></h5>
                    <p><strong>X:</strong> {x}</p>
                    <p><strong>Y:</strong> {y}</p>
                </Card>;
            })}
        </div>;
    } else {
        return <Callout intent={Intent.DANGER} title={tr("ERROR", locale)} icon="error">
            {tr("COORDTRACKER_NO_PROJECTIONS", locale)}
        </Callout>;
    }
}