Developer Discussions

Discuss topics with other Hexagon Geospatial Power Portfolio developers and experts to get the most out of our products.
Showing results for 
Search instead for 
Do you mean 
Reply
Highlighted
Regular Contributor
Posts: 244
Registered: ‎05-01-2016
Accepted Solution

zoom to bounding box url for SDK FAILS at startup - works after - Why????

[ Edited ]

This example for processing a URL to zoom to a bounding box was very helpful:

 

http://community.hexagongeospatial.com/t5/Shared-Samples/Examples-Zoom-To-BBox-Url/ta-p/431

 

but it doesn't appear to work for me on startup.  I think api.js zooms to a different bounding box on startup.

It works if you make a toolbar command for it and click after your portal has started up and displayed map but i want to have the initial map be the one defined by the bbox=x1,y1,x2,y2 i am supplying in my URL.

I added the code to HelloWorld.js and it is definately being processed when the portal starts but the resulting map is not in the right place.  It's not a projection issue - the x1,y1,x2,y2 are being properly converted to screen coordinates that work once the initial map has been displayed. 

Highlighted
Regular Contributor
Posts: 244
Registered: ‎05-01-2016

Re: zoom to bounding box url for SDK

Including the exact subroutine i'm using - on startup it fails, after that it works - i've added it to HelloWorld.js

 

function zoomToBBox() {
var match = location.href.match(/bbox=((?:\d+(?:\.\d+)?)(?:,(?:\d+(?:\.\d+)?)){3})/i),
bboxString = match[1],
bbox = !!bboxString ? bboxString.split(",") : undefined;
if (!bbox || bbox.length != 4) return;
bbox = bbox.map(function (item) {
return +item;
}); // convert to numbers

$GP.crs.transform({
sourceCrsId: "EPSG:26915",
targetCrsId: "EPSG:3857",
points: [{ x: bbox[0], y: bbox[1] },
{ x: bbox[2], y: bbox[3] }
]
}, function (result) {
x1 = result.points[0].x;
y1 = result.points[0].y;
x2 = result.points[1].x;
y2 = result.points[1].y;
$GP.ui.info("<1> x1=" + x1 + " x2=" + x2 + " y1=" + y1 + " y2=" + y2);
},
function (result) {
$GP.ui.info(result.msg, { type: "error" });
});
var config = {
minX: x1,
minY: y1,
maxX: x2,
maxY: y2,
options: {
exact: true
}
};
$GP.ui.info("<2> x1="+x1+" x2="+x2+" y1=" + y1 + " y2=" + y2);
$GP.map.zoom(config);

}

Highlighted
Technical Evangelist
Posts: 1,382
Registered: ‎09-11-2015

Re: zoom to bounding box url for SDK

It looks like something is adjusting the CRS transformation or some component is not yet loaded at that moment. I'm trying this code on EP05 and if it's run inside $GP.ready it really does not move the map correctly. Also the coordinates are incorrectly translated. See screenshot:

Untitled.png

 

The first call at 15:44:41 is inside the HelloWorld method - interesting here is that the transformation function looks like it's called (interpreted) earlier. The later call at 15:47:05 is done manually from Firebug console and this one is translated correctly.

 

The simple code:

function zoomToBBox() {
    //sample points in EPSG:4326
    var bottomLeftCorner = { x: -11, y: 36 },
        topRightCorner = { x: 4, y: 44 };

    $GP.crs.transform({
        points: [bottomLeftCorner, topRightCorner],
        sourceCrsId: "EPSG:4326",
        targetCrsId: "EPSG:3857"
    }, function (transformationResult) {
        // get BBOX in form minx, miny, maxx, maxy
        var points = transformationResult.points,
            bbox = [points[0].x, points[0].y, points[1].x, points[1].y];
        $GP.map.zoom({
            bbox: bbox
        }, function () {
            // display information
            $GP.ui.info($GP.utils.serialize($GP.map.info()));
        });
    });
}

Now it should be investigated how to delay the JS call after page load. Perhaps hooking to some other event than $GP.ready()....

Jan Neumann
Post Sales Engineer Web Applications
Hexagon Geospatial

Highlighted
Technical Evangelist
Posts: 1,382
Registered: ‎09-11-2015

Re: zoom to bounding box url for SDK

I've now tested with a different event - window.onload and it works fine with it:

window.onload = function () {
    // Display "Hello World!"
    $GP.ui.info("Hello World!");

    // Add button to the toolbar (first tab)
    // that displays "Hello from toolbar!"
    $GP.ui.toolbar.add({
        xtype: "tbbutton",
        text: "?",
        handler: function (b) {
            $GP.ui.info("Hello from toolbar!");
        }
    });

    zoomToBBox();
};
Jan Neumann
Post Sales Engineer Web Applications
Hexagon Geospatial

Highlighted
Regular Contributor
Posts: 244
Registered: ‎05-01-2016

Re: zoom to bounding box url for SDK

[ Edited ]

 

Thank you for responding!  This is driving me batty.  This api.js code is run even on startup and the x,y coordinates are correct

 

if (isSet(bbox))
$GP.ui.info("APIbbox 1=" + config.minX + "," + config.minY + "," + config.maxX + "," + config.maxY)
mapState.set_mapRange(bbox, options);
$GP.ui.info("APIbbox 2=" + config.minX + "," + config.minY + "," + config.maxX + "," + config.maxY)
if (isSet(point))
mapState.centerToPoint(point.x, point.y);
$GP.ui.info("ToPoint"+ point.x + "," + point.y)
if (isSet(vec)) {
if (config.duration) {
var count = config.duration/100, stepX = vec.width/count, stepY = vec.height/count,

 

(I added the to $GP.ui.info lines to check that the (x,y) bouding box values are correct and they are displayed properly)

 

I looked at $GP.open help info and it seems like it would be the same thing as window.open - it is a wrapper for it. 

 

The box that is zoomed to on startup is centered on the default box that would display but its dimensions are related to the bounding box passed in the URL - so some part of the zoom is getting overwritten....

Highlighted
Regular Contributor
Posts: 244
Registered: ‎05-01-2016

Re: zoom to bounding box url for SDK

Also the simple example you are using is not actually getting the bounding box from the URL.  In my example,the string

bbox =335115,3302511,338334,3305729 is part of the URL

and the x1,y1,x2,y2 values get parsed from the URL.  I think that info may not be available on startup

Highlighted
Super Contributor
Posts: 295
Registered: ‎02-09-2016

Re: zoom to bounding box url for SDK

Hi all,

 

It is possible that zooming into the defined bounding box of the starting map interferes with your code. We implemented a similar function and I normally listen to a couples of events such as mapServiceInitialized or mapLayerRendering before executing the zooming bbox code. We also experienced some other problems if we zoom into the area quickly, such as the legend control failed to be initialized and could not be expanded. 

 

Kind regards

Highlighted
Regular Contributor
Posts: 244
Registered: ‎05-01-2016

Re: zoom to bounding box url for SDK

Thanks!   This sounds very promising - I will give it a try.  It is hard to track exactly what goes wrong as I get a variety of results depending on slight changes.

Highlighted
Technical Evangelist
Posts: 1,382
Registered: ‎09-11-2015

Re: zoom to bounding box url for SDK

[ Edited ]

Just to complement the other question - I used hard-coded variables just for purpose of the example. But it should be easy to adapt this to the existing sample.

 

The window.onload event is fired after all DOM objects are loaded by browser so it should be possible to get URL parameters without problems.

 

https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.

Jan Neumann
Post Sales Engineer Web Applications
Hexagon Geospatial

Highlighted
Regular Contributor
Posts: 244
Registered: ‎05-01-2016

Re: zoom to bounding box url for SDK

[ Edited ]

I like this solution - it is much simpler than the other one but i can't get it to work.  Do I put the window.onload code in HelloWorld.js just like the $GP.ready code?  I guess I wouldn't put the button definition code there since the screen would already be fully loaded.   I was confused about the URL bbox parameters not being available on startup - i see that I can access them fine.  Could you send me the code you used to test it  - i understand that you are using preset values from the simple example and how i need to change it.  Thanks!!!!