ALK Map Interface

devinst · Post by **devinst** » Mon Nov 02, 2015 5:45 pm

I am currently evaluating ALK Maps to be used to display such things as equipment locations in interactive maps. The way the interface works is that you create html that will make calls to ALK to return back a map object. My initial thought was to use a HTML Container to hold the html and that would display the map within the container on the Profound UI page. Unfortunately I am not getting anything displayed. Below is the html to display a simple map. I have removed the API key for obvious reasons. If I put the html code in a file and open it in IE, I do get the expected results, so I know the code is correct.
I am looking for any ideas of how to make this work or other options of methods that may be used within Profound UI.

Thanks.!!!

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="http://maps.alk.com/api/1.2/alkmaps.js" type="text/javascript"></script>
<script type="text/javascript">
var map;
var lon = -96, lat = 35, zoom = 3;

function init() {
ALKMaps.APIKey = "123abc";

map = new ALKMaps.Map('map');

var lonLat = new ALKMaps.LonLat(lon, lat).transform(new ALKMaps.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter(lonLat, zoom);
}
</script>
</head>
<body onLoad="init()">
<div id="map" style="width:100%; height:100%">
</div>
</body>
</html>

Scott Klement · Post by **Scott Klement** » Mon Nov 02, 2015 8:01 pm

Basically, the PUI screen just creates HTML tags. What you need to do, therefore, is just create a PUI screen that puts out the same html that your sample screen does.

1) For the <script> that that links to a file, use the "external JavaScript" property.
2) For the <script> stuff that has inline code, put it in your screen's "onload" event.
3) For the "div" tag with id="map", put an html container widget on the screen, and give it an "id" of "map"

I'm not familiar with the ALKMaps, specifically, but if they need the variables to be global (like the "lat" and "lon" variables) then you can prefix the variable name with "window" to make that happen.

So basically, you'd create a screen like this one with an HTML container widget. An html container just puts a <div> HTML tag on the page, so setting an HTML container with id=map, height=x, width=x would match what your HTML has. (I would recommend using the actual pixel sizes instead of percents, though.)

: devinmap3.png (14.24 KiB) Viewed 2091 times

To bring in the JS code for ALKMaps (in the <script> tag at the start) you would use "external javascript" property, which is one of the screen properties.

: devinmap2.png (7.6 KiB) Viewed 2091 times

The 'onload' event for the screen (in the screnshot above) would be where you'd put the code for the inline script tag as well as the code that runs in the body's onload event.

: devinmap.png (53.66 KiB) Viewed 2091 times

Notice that I changed the lat/lon values to use "get". I did this so that you can control these values from your RPG program. Just add some hidden output fields with id=lat and id=lon, and bind them to whatever RPG fields you want to use to control this.

: devinmap4.png (11.81 KiB) Viewed 2091 times

I have not used ALKMaps myself, so I don't know that this is 100% correct, but it should the same thing as the HTML you provided. Hopefully that gets you started!

devinst · Post by **devinst** » Tue Nov 03, 2015 10:01 am

Thank you for all the help Scott.!!!
I am getting an error when I attempt to run on my end. "Unable to set property 'RestServiceURL' of undefined or null reference.
One thing I did notice though is that I am running version 4.8.4, which is pretty old. I am going to make an attempt to upgrade today to the latest version and try again. One other thing, can you tell me what version of IE you were running on?

Once again, thanks for all the help on this issue.!!!

Scott Klement · Post by **Scott Klement** » Tue Nov 03, 2015 1:30 pm

"Unable to set property 'RestServiceURL' of undefined or null reference" sounds like a JavaScript error, presumably within the alkmaps.js file, as 'RestServiceURL' does not sound like a PUI variable.

When i use IE, I use IE11. However, when we were on the call last night, I was using Firefox (not IE at all.)

devinst · Post by **devinst** » Tue Nov 03, 2015 7:26 pm

Just wanted to let you know that I upgrade to 5.1.1 and all is working great..!!

Thanks Scott.!!

Profound Logic Forums

ALK Map Interface

ALK Map Interface

Re: ALK Map Interface

Re: ALK Map Interface

Re: ALK Map Interface

Re: ALK Map Interface

Who is online