ALK Map Interface
Posted: 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>
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>