Community

Displaying .KML/.kmz file in MicroStrategy using arcGIS java script api

1290
0
06-06-2014 02:23 AM
SrimathiSekar
by
New Contributor
‎06-06-2014 02:23 AM
MicroStrategy is a reporting tool which has inbuilt esri related js files.We need to modify these esri related js files to display the paths/polygons from KML files.In one word draw the KML layer on the base map taking the data from kml/kmz files.The esri js files have been built  using dojo.
The below code for creating the KML layer works for us in a html file.We want to integrate the same in the above mentioned js files for the KML to be drawn in MicroStrategy

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/esri/dijit/css/Popup.css"/>

<style>
  html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
  #map { margin: 0; padding: 0; }
  #meta {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 300px;
    height: 100px;
    z-index: 40;
    background: #fff;
    color: #777;
    padding: 5px;
    border: 5px solid #777;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-family: arial;
    font-size: 0.9em;
  }
  #meta h3 {
    color: #000;
    font-size: 1.1em;
    padding: 0px;
    margin: 0px;
    display: inline-block;
  }
  #loading {
    float: right;
  }
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
<script>
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("esri.map");
  dojo.require("esri.layers.KMLLayer");
 
  var map;
  function init() {
    map = new esri.Map("map");
    var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
    map.addLayer(basemap);

    var kmlUrl = 'https://sites.google.com/site/lntbidwgeobi/kmlfiles/HurricaneKATRINA2005_New.kmz';
    var kml = new esri.layers.KMLLayer(kmlUrl);
    map.addLayer(kml);
    dojo.connect(kml, 'onLoad', function() {
      dojo.style(dojo.byId('loading'), 'display', 'none');
    });
   
    dojo.connect(map, 'onLoad', function() {
        //resize the map when the browser resizes
        dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
    });


try{
//SNIPPET FOR AUTO EXTENT
    var kmlExtent, layers = kml.getLayers();
    dojo.forEach(layers, function(lyr) {
   if ( lyr.graphics && lyr.graphics.length > 0 ) {
     var lyrExtent = esri.geometry.geographicToWebMercator(esri.graphicsExtent(lyr.graphics) );
     if ( globals.kmlExtent ) {
    kmlExtent = kmlExtent.union(lyrExtent);
     } else {
    kmlExtent = lyrExtent;
     }
   }
    });
    map.setExtent(kmlExtent);
   }catch(err)
   {
  alert(err);
   }
  }
  dojo.ready(init);
</script>
</head>

<body class="tundra">
<div data-dojo-type="dijit.layout.BorderContainer"
     data-dojo-props="design:'headline',gutters:false"
     style="width: 100%; height: 100%; margin: 0;">
  <div id="map"
       data-dojo-type="dijit.layout.ContentPane"
       data-dojo-props="region:'center'">
    <div id="meta">
      <span id="loading"><img src="images/loading_black.gif" /></span>
    <div>
  </div>
</div>
</body>
</html>
0 Kudos
0 Replies