MediaLayer hitTest not returning Source Pixel value (4.25 js-api-next)

[LukeCalladine]

Hey all,

I'm having a play with the new MediaLayer and ControlPointsGeoreference and I've run into the following issue - appreciate its on the next branch of the JSAPI.

Is there any way to identify the ImageElements source pixel value from a MediaLayer from a hitTest click on the MapView?

Cheers,

Luke

[Sage_Wall]

Hi @LukeCalladine ,

There is a method, ControlPointGeoreference.toSource, that converts the given mapPoint to a sourcePoint. The sourcePoint represents a point in terms of pixels relative to the top-left corner of the element.

// North_American_Datum_1927
const spatialReference = new SpatialReference({ wkid: 4267 });
const sourcePoint = controlPointGeoreference.toSource(new Point({ x: -107.875, y: 37.875, spatialReference }))

[Sage_Wall]

A better code snippet with hitTest for you @LukeCalladine 

          view.on("click", async (event) => {
            const hitTestResult = await view.hitTest(event);
            const mapPoint = hitTestResult.results[0].mapPoint;
            const sourcePoint = controlPointsGeoreference.toSource(mapPoint);
            console.log("mapPoint:", mapPoint, "sourcePoint", sourcePoint);
          });

[LukeCalladine]

Hey Sage Wall,

Thanks for the help here and the response on Github.

I'm glad there's a potential work around that seems simple, as I'd started to develop an incredibly convoluted triangulation process to achieve the same means! I'll give your code snippet a go tomorrow at work and let you know how I get on with it.

This might seem like a silly question - I guess there isn't similar documentation for the Next branch of the JSAPI since its all in flux like there is for 4.24?

I couldn't find any documentation on ControlPointsGeoreference since its only in the next branch at the moment - so I was limited purely on the examples in the ChangeLog - or maybe I'm missing something?

[Sage_Wall · Accepted solution]

Your right Luke, we don't have complete documentation up for the next branch, but what I can do is add better descriptions of a couple methods you'll likely have interest in here and in the changelog.  Once we release 4.25 we'll have everything documented and there will be a new sample as well.

// toMap() - Converts the given sourcePoint to a mapPoint
const mapPoint = controlPointGeoreference.toMap({x: 100, y: 250})

// toSource() - Converts the given mapPoint to a sourcePoint.
// The sourcePoint represents a point in terms of pixels relative
// to the top-left corner of the element.
view.on("click", async (event) => {
    const hitTestResult = await view.hitTest(event);
    const mapPoint = hitTestResult.results[0].mapPoint;
    const sourcePoint = controlPointsGeoreference.toSource(mapPoint);
    console.log("mapPoint:", mapPoint, "sourcePoint", sourcePoint);
});

[LukeCalladine]

Thanks for the snippets Sage Wall, it worked wonderfully and as expected :).

One further thing before I leave you alone!

Is there a technical limitation regarding the number of points accepted in ControlPointsGeoreference being limited to 4? I tried adding a fifth point and it seem to be ignored from what I can tell?

Thanks again,

Luke

[Sage_Wall]

Glad to help Luke,

There is a limitation on the number of control points.  The controlPoints property is defined as an array of two, three, or four ControlPoint. The element is positioned, scaled, and rotated with two control points. Additionally, it will be skewed with three control points. With four control points, a perspective transformation is applied to the image or video element.

You've got me interested in your use case.  You've jumped on this right after release on next 🙂

Is it anything you can share?  In any event let me know here on the community site if you have any issues or other questions about MediaLayer.

[LukeCalladine]

Hey Sage Wall,

Apologies for the late reply, I took some impromptu annual leave at the beginning of this week.

Like many people, I imagine, we're looking in to how we can expose more of our non-GIS/data colleagues into GIS controlled environments in a way that is more comfortable than say ArcMap or ArcGIS Pro for them (everyone can use a browser, usually).

Some of the users have mentioned the ability to overlay simple images (that are geo-referenced) on top of our web based GIS resources would be a great help so I've just been investigating that aspect with Media Layers on the Next release that will allow us to build a central data repository of web-georeferenced images that non-GIS users can interact with or even geo-reference with some extreme hand-holding built within the web application which saves me standing over their shoulder if they were to do it in ArcMap or ArcGIS Pro, or even me doing it for them when I have better things to do with my time!

Its all still in an investigatory phase but I'm definitely interested in the evolution of the MediaLayers and ControlPointGeoreference features so you may be getting more questions/feature requests in the near future!

One thing I elude to in my previous message, four control points does a really good job - but sometimes the ability to add a 5th or 6th point just to "pull in" areas of an image that just aren't quite right would be a real boon, but obviously if there is a technical limitation that's fair enough.

Appreciate your help,

Luke

[Sage_Wall]

Hi @LukeCalladine ,  I just wanted to let you know that we've added a new `sourcePoint` property to `MediaHit` at version 4.28. It's live on next. The `sourcePoint` is an object representing a point on the element. The origin (0, 0) corresponds to the top-left corner of the element.