Monthly Archives: October 2008

Using the Disperse Markers tool to show community amenities

By Matthew Hampton, Senior Cartographer, OregonMetro

I was recently asked to lend a cartographic hand to a project my agency is working on. I work for OregonMetro (the Metropolitan Planning Agency in the Portland, Oregon area) and among other things, we are charged with planning the future of the region. One of the facets of the planning program involves helping the 25 cities in our jurisdiction collaboratively plan for future growth. Continue reading

Posted in Mapping | Tagged , | 1 Comment

Context menus made easy: in Java

As many of us might agree, context menus are a great way to place functions where users would intuitively expect them to be.  Right-click on a layer (provided your mouse has a right button) and capabilities specific to that layer should pop-up.  Right-click somewhere else, and the options hovering under the mouse change to something else.  This is a proven approach for helping your users do what they want to do more efficiently. Java developers who are using the ArcGIS Engine development kit are not provided the ability to create context menus right out of the box.  

Steven Rozic and Lalitha Darbhamulla from ESRI recently uploaded a Code Gallery sample that we all hope you will find helpful.  It’s called “Creating a Context Menu for Layers“, although the source code could be applied in other contexts as well. An extra bonus:  the download includes two options to choose from.  One uses the ArcGIS ToolbarMenu and the other uses the JpopupMenu from the Java Swing package. 

 

 

Posted in Developer | Tagged , , | Leave a comment

Ari Isaak on Explorer and PDF printing

Somehow we missed this when it appeared, but here’s another interesting post from Ari Isaak at the Port of San Diego from his %scratchworkspace% blog. We mentioned one of his earlier posts and, like the previous one, this one also features a video and some useful tips and ideas.

Posted in Uncategorized | Tagged | Leave a comment

Creating a DHTML scale bar with the .NET Web ADF

At the 9.3 release, the .Net Web ADF’s JavaScript library exposes a lot of logic to the client side, allowing you to create a more responsive UI without the need for making calls back to the server. You can get the Web ADF JavaScript library help on the ArcGIS Server Resource Center. This post will show you how to use the JavaScript library to create a pure client-side scale bar using the Microsoft AJAX Client Library patterns.

The Web ADF’s scale bar is generated by the primary map resource using a dynamically generated image. Since the scale potentially can change on every pan, the scale bar image has to be updated frequently, adding additional overhead to the server requests for rendering and fetching these images. Furthermore, if the primary map resource doesn’t support rendering a scale bar, no scale bar is available at all. ArcIMS ArcMap Services don’t support rendering a scale bar. The approach described in this post is the recommended pattern for displaying a scale bar for ArcIMS ArcMap Services.

We can scale a standard <div> box dynamically on the client using JavaScript, and completely eliminate the extra callback, because the map control allows you to listen for and get the current extent of the map. We simply add a handler to the Map’s ‘extentChanged’ event. To do this, we first get a reference to the map object using the $find method parsing in the ClientID of the map as a parameter:

var map = $find('Map1');

Next we add the handler which will be executed every time the extent of the map has changed:

map.add_extentChanged(myExtentChangedHandler);

However, we need to ensure that this handler is not created until the Map has been instantiated on the client. The Microsoft AJAX framework also exposes several life-cycle events, for listening when the page has been fully loaded. So we wrap the above code in an application init event handler and place it right before the </body> tag. Notice how the pattern for adding event handlers is similar to adding handlers to the map. The full example could look something like this:

<script type="text/javascript" language="javascript" >
	function myExtentChangedHandler(sender, args) {
		   alert(sender.get_id() + ' changed extent to: ' + args.current.toString());
	}
	Sys.Application.add_init(function() {
		   var map = $find('Map1');
		   map.add_extentChanged(myExtentChangedHandler);
	});
</script>

Every time you pan the map, you will see a popup window like this:

Message that appears on pan

This gives us the framework for creating a simple scale bar. The next step is to place a box on the page that we can use as a scale bar by changing the width as the pixel size changes.

<div><div id="scalebar" style="background-color: #000000; width: 200px; height: 10px;"></div><span id="scalebarText">100 units</span></div>

<script type="text/javascript" language="javascript" >

function resizeScalebar(sender, args) { //resize event handler
  var pixelSize = sender.get_pixelSize(); //Gets the size on one pixel in map units
  var scalebarWidthInMapUnits = 0.001; //The initial size of the scalebar in map units
  //width in pixels of a scalebar with the current
  //scalebarWidthInMapUnits value and map's pixelsize
  var width = scalebarWidthInMapUnits / pixelSize;
  while(width<20) {
    //keep increasing scalebar size until we have a reasonable and visible size
    scalebarWidthInMapUnits *= 10;
    width = scalebarWidthInMapUnits / pixelSize;
  }
  $get('scalebar').style.width = width + 'px';
  $get('scalebarText').innerHTML = scalebarWidthInMapUnits + ' units';
}
//Hook up the handlers during init
Sys.Application.add_init(function() {
  var map = $find('Map1');
  map.add_extentChanged(resizeScalebar); //fired when extent has changed
  map.add_extentChanging(resizeScalebar); //fired while map is zooming/panning
  resizeScalebar(map,null); //Force initial update of scalebar
});

</script>

This will generate a very simple scale bar that looks something like this:

Simple scale bar

It will automatically adjust its width between 20 and 200 px and show the corresponding width in map units next to it.

The next step is to componentize this into a real client side control that can easily be reused. The Microsoft AJAX Client Library already has a framework in place for creating controls that can inherit from each other and be extended.

A component requires a constructor, and a prototype. In the constructor you define the default properties of the control, and in the prototype you define the properties and methods, including initialize and dispose. Lastly you register the control and optionally the type you derive from, in this case Sys.UI.Control.

Type.registerNamespace('ADF.Samples');

ADF.Samples.DhtmlScaleBar = function(element) {
  ADF.Samples.DhtmlScaleBar.initializeBase(this, [element]);
  this._map = null; //Reference to the map
  this._minWidth = 20; //minimum width of the bar before changing units
}
ADF.Samples.DhtmlScaleBar.prototype = {
  initialize : function () {
    ADF.Samples.DhtmlScaleBar.callBaseMethod(this, 'initialize'); //Call base initialize
    if(this._map === null) { throw Error.argumentNull('map'); }
    this._extentChangedHandler = Function.createDelegate(this,this._updateScalebar);
    //Add listener for when the map is animating its extent
    this._map.add_extentChanging(this._extentChangedHandler);
    //Add listener for when the map has changed its extent
    this._map.add_extentChanged(this._extentChangedHandler);
    this._createBars(); // Creates the bar and text elements
    this._updateScalebar(this._map); //Update the scalebar now
  },
  dispose : function() {
    ADF.Samples.DhtmlScaleBar.callBaseMethod(this, 'dispose');
    if(this._extentChangedHandler && this._map) {
      this._map.remove_extentChanging(this._extentChangedHandler);
      this._map.remove_extentChanged(this._extentChangedHandler);
    }
    if(this._scaleBar) { this.get_element().removeNode(this._scaleBar);}
    if(this._scaleBarText) { this.get_element().removeNode(this._scaleBarText); }
    this._extentChangedHandler = null;
    this._map = null;
    this._scaleBar = null;
    this._scaleBarText = null;
  },
  _createBars : function() { //Create the bar and text
    this._scaleBar = document.createElement('div');
    this._scaleBar.style.backgroundColor = '#000000';
    this._scaleBar.style.float = 'left';
    this.get_element().appendChild(this._scaleBar);
    this._scaleBarText = document.createElement('span');
    this._scaleBarText.style.float = 'left';
    this.get_element().appendChild(this._scaleBarText);
  },
  _updateScalebar : function(sender,args) {
    var pixelSize = sender.get_pixelSize(); //Gets the size of one pixel in map units
    var scalebarWidthInMapUnits = 0.001; //The initial size of the scalebar in map units
    //width in pixels of a scalebar with the current
    //scalebarWidthInMapUnits value and map's pixelsize
    var width = scalebarWidthInMapUnits / pixelSize;
    while(width<this._minWidth) {
      //keep increasing scalebar size until we have a reasonable and visible size
      scalebarWidthInMapUnits *= 10;
      width = scalebarWidthInMapUnits / pixelSize;
    }
    this._scaleBar.style.width = width + 'px';
    this._scaleBarText.innerHTML = scalebarWidthInMapUnits + ' units';
  },
  //Properties:
  get_map : function() { return this._map; },
  set_map : function(value) { this._map = value; },
  get_minWidth : function() { return this._minWidth; },
  set_minWidth : function(value) { this._minWidth = value; }
}
//Register class:
ADF.Samples.DhtmlScaleBar.registerClass('ADF.Samples.DhtmlScaleBar', Sys.UI.Control);

If we add this script to the page, we can now simply create a scale bar using the $create method. The parameters are:

  • Type
  • Object list of properties
  • Object list of event handlers (we don’t have any events here so we use null)
  • Object list of component properties. In our case the map – this ensures that the scale bar is not initialized until the map has been initialized.

Example:

<div id="bar"></div>
<script type="text/javascript" language="javascript" >
Sys.Application.add_init(function() {
  $create(ADF.Samples.DhtmlScaleBar,{"minWidth":20},null,{"map":"Map1"},$get('bar'));
});
</script>

At our code gallery you can download the scale bar control. It has been expanded to look a little better than just a black bar, and it also has a server-side web control that renders the above script to the page. It will analyze the primary map resource and fetch the unit of the map, and allow you to convert it to any display unit you would like on the fly. Finally, there’s some extra logic which will get the scale bar to attempt to use some nice rounded intervals. The final result will look something like below, and will even resize while the zoom animation plays or while you pan toward the poles where the scale changes. You can style the control using the web control style properties like background color, border, font-size etc.

Final scale bar

Click here to get the source code from the Code Gallery

Click here to view a demo of the scale bar

Contributed by Morten Nielsen of the ArcGIS Server .NET software development team

Posted in Services | Tagged , , , | 1 Comment

Just and right U.S. maps that need to show Alaska, Hawaii, and more

By Charlie Frye, Esri Chief Cartographer

One of the first and best rules in cartographic design is to beg, borrow, or steal good design. Many good ideas have already been had, and there’s no point in ignoring them.

Today, I got a note from one of our senior folks in sales and marketing at Esri who had been rightfully accosted by one of our customers over some maps that appeared in an Esri brochure called Government Matters. Several pages in there are a series of U.S. county level demographic maps with Alaska and Hawaii un-artfully integrated into northern Mexico. Continue reading

Posted in Mapping | Tagged | 2 Comments

Tips and tricks – Unix, Python, and Geoprocessing

This posting was written by Mark Zollinger, a Product Engineer and long time
UNIX user with the Geoprocessing team.

Do you like Solaris or Linux? Do you “do GIS” on one of those platforms?  Maybe you’ve been asked to convert some ArcGIS Workstation AML applications over to ArcGIS Engine. Are you a command-line junkie? (There are more of us than you might think) Continue reading

Posted in Analysis & Geoprocessing | Tagged , , , , | 7 Comments

List of Useful Developer Samples

Last week I was in Palm Desert at the annual EGUG conference. While sitting in on a presentation I noticed that for a lot of the questions being asked, users were being directed to developer samples found online. I realized that while these samples are readily available, it was clear that not everyone knew about them or where to get them.

 So I talked to Larry Young, who had moderated the session, and he put together the following list of developer samples that could prove helpful:

  • One to many labels – label features based on attributes in a one to many relationship (i.e., multiple stacked labels per feature)
  • Valence display – customer renderer to display the number of edges connected to a junction
  • Batch snapping – snaps all selected features based on the current snapping environment
  • Jumper extension – automatically creates a half circle in a line feature when it crosses another line feature in the same class
  • Rotate symbol – rotates a point feature symbol based on the orientation of the line the symbol is snapped to
  • Delete junctions with edge – deletes orphan junctions that are not connected to anything when an edge feature is deleted
  • Merge network features – merges selected edge features
  • Domain sort – sorts the current domain
  • Manage versions – gives tree/hierarchal view of versions
  • Next upstream device trace task – custom trace task to find next upstream junction from a specified class
  • Find domain references – find places where a domain is currently being used
  • Trace results window – allows results from multiple traces to be stored, displayed, and converted to a selection set
  • Loop Construct – sketch tool used to construct a loop around a broken pipe segment
  • Flow by digitized direction – sets the flow direction of a geometric network based on digitized direction of edge features
  • Flow direction tool – sets the flow direction of individual network elements
  • Geodatabase designer – arccatalog toolset for export/import gdb schema.  Includes capabilities to copy domains, etc.

 

Posted in Geodata | Tagged , , , , , | 1 Comment

The ArcGIS API for Flex 1.0 has been released

The ArcGIS API for Flex is a powerful framework for building rich internet applications (RIAs) on top of ArcGIS Server that look good, run fast and are fun to use. The Flex Resource Center includes help and samples for the API and is part of the ArcGIS Server Resource Center web site. If you used our beta, take a look at What’s New.

What can you do with the ArcGIS API for Flex?

  • Display an interactive map of your own data.
  • Execute a geoprocessing model on the server and display the results.
  • Display your data on an ArcGIS Online basemap.
  • Search for features or attributes in your GIS data and display the results.
  • Locate addresses and display the results.
  • Visualize results in creative ways.
  • Create mashups.

Solar Boston application

Solar Boston map is built with the ArcGIS API for Flex. It’s an interactive mapping application that showcases active renewable energy installations in Boston.

What is included in the ArcGIS API for Flex?

  • Maps — Supports both dynamic and cached (tiled) map services from ArcGIS Server 9.3 and works with map projections. It also works with any version of ArcIMS.
  • Graphics — Gain the ability to draw graphics or provide popup windows when users click or hover the mouse.
  • Tasks — Support for common GIS tasks: querying, finding addresses, finding attributes, identifying features, and geoprocessing.
  • Access to Flex components — The API is built on the Adobe Flex framework which allows you to use rich Flex components such as data grid, trees, panels and charts.

How do I learn how to use the ArcGIS API for Flex?

The best way to learn the API is to visit the ArcGIS API for Flex Resource Center and download . If you’re new to Flex programming and ArcGIS Server, the concepts will help you understand what Flex is and how to start working with it in ArcGIS. When you want to see more code, take a look at the live samples. The samples cover a range of topics and provide a great starting point for your applications. A detailed API reference describes each class available in the API. The community page gives quick access to relevant forums, knowledge base articles, the ArcGIS Server blog, and a code gallery where user can share their applications. To use the Flex API you simply download the free ArcGIS API for Flex library and start creating your Flex applications using Flex Builder 3 (or your Flex tool of choice).

What support is available?

In addition to the Resource Center, the user-to-user forum is a great place for interacting with fellow Flex API developers, and also check out these additional ESRI resources.

Contribued by Bjorn Svensson of the ArcGIS API for Flex team.

Posted in Services | Tagged , | 1 Comment

World Street Map 2D service updated

10/24/08—The World Street Map 2D map service, ESRI_StreetMap_World_2D, was updated this week to include more recent street data, enhanced cartography, and additional coverage and levels of detail. Updates include:

  • Recent Tele Atlas data and AND mapping data for North America,
    Europe, and other areas.
  • Enhanced cartography (i.e., better hill shading, labeling, symbology,
    and colors).
  • Expanded coverage for international areas, including Eastern Europe, Southern Africa, and selected cities, such as, Ankara, Athens, Istanbul, Jakarta, Moscow, and St. Petersburg.
  • Additional level of detail for large parts of Europe and
    selected urban areas in North America, Europe, and elsewhere.

If you have previously used the ESRI_StreetMap_World_2D
service may need to clear your map cache in order to see the updates.

How to clear the cache in ArcGIS Desktop:

  1. Right-click the service in the table of contents.
  2. Click Properties.
  3. Click the Cache tab.
  4. Click the Clear Local Cache Now button, and click OK.

How to clear the cache in ArcGIS Explorer:

  1. Click Tools > Options.
  2. Expand Cache and click Disk Cache.
  3. Under Cache Clean Up, select All Caches.
  4. Click the Delete Cache button, and click Yes to confirm. ArcGIS
    Explorer will need to restart as part of this process.
Posted in ArcGIS Online, Services | Comments Off

Using Dojo dijits with the ArcGIS JavaScript API

A nice thing about the ArcGIS JavaScript API being built on top of the Dojo toolkit is that you can use Dojo widgets, or “dijits”, to add prepackaged user interface components to your applications. Dojo has a bunch of existing dijits you can choose from such as text boxes, buttons, menus, calendars, color pickers, and so on. The online Book of Dojo has a nice overview of the Dijit library that you can use to browse the dijits.

Dijits have been tested to behave consistently in different browsers and comply with accessibility and localization requirements. The dijit framework is extensible, so with a little ambition you can even create your own dijits.

How would you use dijits in an ArcGIS JavaScript API application?

Your Web GIS applications may require the user to interact with the page outside of the map. For example, you might need users to enter some text, click a button, choose a value from a slider, or select an item from a dropdown list. Dijits give you a robust way to provide this functionality without writing the code yourself.

Dijits for user input and results display 

You can also combine several dijits into one for easy re-use. Suppose your company has multiple Web designers that want to embed maps in their pages. You can wrap up a map and some other elements inside a dijit, which the Web designers can then add to their pages without having to learn how to use the ArcGIS JavaScript API.

In the image below, the map, slider, buttons, and city seal have been combined into a dijit that a Web designer could add to the page with a line of code. The slider and the buttons themselves are individual dijits included in the larger dijit.

Custom map dijit made up of other dijits 

Dijits can also help users accomplish focused workflows, such as finding nearby dentists, selecting a site for a business, or generating a route. In this way, dijits are similar to “tasks” in the Web ADF.

Custom restaurant locator dijit 

In the coming weeks we’ll be posting more about how to create dijits that use the ArcGIS JavaScript API.

Contributed by Sterling Quinn of the ArcGIS Server software development team

Posted in Services | Tagged , , , | 3 Comments