Tag: ArcGIS Server

How to Build a 5 Ft Tall Web Map, and Why You’d Want to

Recently, the major electric utility that I work for installed a wall full of 50”displays in their power outage response control center, and they asked me to start generating content for it. The content would be real-time summary data of the power outages across the utility’s electric distribution network, and the centerpiece was to be a map showing the location of all the current power outages affecting their customers.  This was an exciting challenge for me, since I’ve never created applications to be run on large screens with no human interface devices – keyboards, mice, etc. I was particularly excited about figuring out how to implement the map, since I typically develop mapping applications that are meant to be experienced inside of a web browser.

IMG_20111017_112021

Continue reading “How to Build a 5 Ft Tall Web Map, and Why You’d Want to”

Running The ArcGIS JavaScript API in a SquareSpace Site

Just in case you are curious, SquareSpace does allow you to run ArcGIS Server JavaScript API code on their pages.  Here’s a screen shot of a I map made by copying and pasting code from the simple map sample into a SquareSpace page.

image

The only trick was to move the script tags out of the <head> section and into the <body>, since I don’t think that you are able to modify the <head>.  Here’s the complete code listing:

   1:  <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">
   2:        <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;">
   3:       </div>
   4:      </div>
   5:      <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
   6:      <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>
   7:      <script type="text/javascript">
   8:        dojo.require("dijit.layout.BorderContainer");
   9:        dojo.require("dijit.layout.ContentPane");
  10:        dojo.require("esri.map");
  11:   
  12:        
  13:        var map;
  14:        
  15:        function init() {
  16:          var initExtent = new esri.geometry.Extent({"xmin":-13632648,"ymin":4542594,"xmax":-13621699,"ymax":4546875,"spatialReference":{"wkid":102100}});
  17:          map = new esri.Map("map",{extent:initExtent});
  18:          //Add the topographic layer to the map.
  19:          var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
  20:          map.addLayer(basemap);
  21:          
  22:          //resize the map when the browser resizes 
  23:          dojo.connect(map, 'onLoad', function(theMap) { 
  24:            dojo.connect(dijit.byId('map'), 'resize', function() {  //resize the map if the div is resized
  25:              clearTimeout(resizeTimer);
  26:              console.log('resize');
  27:              resizeTimer = setTimeout( function() {
  28:                map.resize();
  29:                map.reposition();
  30:              }, 500);
  31:            });
  32:          });
  33:        }
  34:   
  35:        dojo.addOnLoad(init);
  36:      </script>