Blogs

Font problems with your ArcMap exports?

When you need to export a PDF, EMF, EPS, AI or other vectorized graphic for a report or other format, you will inevitably run into the fonts problem. Especially when collaborating.

Here's a fix for you to consider.  

When exporting your map, you click "File --> Export Map"  The following dialog appears (this one for PDF export). The options available change depending on the export type, but the options to look for typically are always available:

This screen shot is from ArcMap 10, but the properties are similar in previous versions. Look for the following checkboxes, and mark them: 

  • Embed all document fonts
    • this will keep the funny fonts you might have loaded on your machine within the document
  • Convert Marker Symbols to Polygons 
    • this makes your graphic more portable between machines with different configurations

Dialog

That's it. Your exports shouldn't give you and your collaborators a font headache if you use these steps.

 

 

Using the Google Maps API v.3 and the Roadkill API to add a Real-Time Map to your webpage or blog

NOTE: This is an update to an earlier demonstration post using the Google Maps API v.2 to add recent roadkill information to your webpage or blog.

STEP 1. Configure the URL to request

Visit http://fishandgame.idaho.gov/ifwis/core/view/roadkills and design your query using the editor.  For example, you may just be interested in one Highway section such as the first 22 miles of Highway 21.

Stripped of the empty parameters your url should now resemble: http://fishandgame.idaho.gov/ifwis/core/view/roadkills?highway=94817&mpTo=22

Now, we can add some special parameters to grab the most recent observations.  Add to your url the following &start=-365&end=now to limit your results to the last year of observations.  The -365 is the number of days before the current date and time to include.  You may tailor this to your needs.  You can of course also use full dates, but this allows your query to be dynamic and useful in the future.

Possible parameters for date fields Observed Date (start, end) and Reported or iNsert Date (nstart, nend) include:

  • Valid dates in the format 1/10/2008
  • Now - current system datetime in Mountain Standard Time
  • Today - current day in Mountain Standard Time
  • Yesterday - previous day in Mountain Standard Time
  • Integer - positive or negative offset in days

Finally, add the kml extension, by copying the path from the kml icon or copying the following:

http://fishandgame.idaho.gov/ifwis/core/view/roadkills/list.kml?highway=94817&mpTo=22&start=-365&end=now

 

STEP 2: Add the Code

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>IFWIS Roadkill API Google Maps JavaScript API v3 Example</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initializeMap() {
  var mapCenter = new google.maps.LatLng(43.58, -116.06);
  var myOptions = {
    zoom: 12,
    center: mapCenter,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var ctaLayer = new google.maps.KmlLayer('https://fishandgame.idaho.gov/ifwis/core/view/roadkills/list.kml?highway=94817&mpTo=22&start=-365&end=now', {preserveViewport: true});
  ctaLayer.setMap(map);
}
</script>
</head>
<body onload="initializeMap()">
  <div id="map_canvas">Map Loading...</div>
</body>
</html>

 

STEP 3: Enjoy

Here's a Live Example

Loading...

What you see here is a live example of the same code from Step 2 above except instead of using the onload event of the html body, the scripts are placed immediately following the div element inside the html body.  Using this method you may place live maps on blogs, forums and other websites.

Explore the Google Maps Javascript v3 API and IFWIS Core API for more mashup ideas!

Using the Google Visualization API, Basic Pie Image Charts

As we move away from server-side generation of graphics, many people have been inquiring as to how to use Google Charts, Graphs and Maps in their applications.  In this series I'll start with the simplest integration and slowly add complexity to see what is possible.

There is lots of great documentation on Google's site and in various blogs, so please don't use this as your sole reference, only as a starting point to get an idea of what is possible.

Starting Basic

Let's say you have a simple dataset like the following and you just want to add a pie chart your users can download and use in their presentations.

Species Count
Bridgelip Sucker 1
Brook Trout X Bull Trout 23
Bull Trout 2
Chinook Salmon 365
Mountain Whitefish 15
Sculpin (Var. Species) 0
Steelhead (Snake River Basin) 118
Westslope Cutthroat Trout 3

While there are lots of fancy tools available in the Google Charts API, but making a pie chart with a small dataset like this can be as simple a calling their API and getting an image returned inside an <img> tag.

Let's look at the basic image URI structure from the Chart API Documentation:

http://chart.apis.google.com/chart?chs={width}x{height}&cht={charttype}&chd=t:{comma-delimited values}&chdl={pipe-delimited legend}

Adding our data we get:

http://chart.apis.google.com/chart?chs=500x250&cht=p&chd=t:1,23,2,
365,15,0,118,3&chdl=Bridgelip+Sucker|Brook+Trout+X+Bull+Trout|
Bull+Trout|Chinook+Salmon|Mountain+Whitefish|Sculpin+%28Var.+
Species%29|Steelhead+%28Snake+River+Basin%29|Westslope+
Cutthroat+Trout

If you're a Windows Developer, at this point you may be wondering how you get your data to display with all these funky pluses and %29 characters.  The answer for .Net is server.urlencode(string).

To build the string above I'd loop through the data once and create two strings, one pipe-delimited, one comma-delimited.  Outside the loop I'd concatenate them all into one string and finally urlencode:

string labels = "";
string vals = "";
foreach (specieslistitem a in specieslist)
{
    labels += a.Species +  "|";
    vals += a.Count + ",";
}
string uri = "http://chart.apis.google.com/chart?chs=500x250&cht=p&chd=t:" + server.urlencode(vals.substring(0,vals.length-1)) + "&chdl=" + server.urlencode(labels.substring(0,labels.length-1));

We can then create an image tag that looks like this to display the chart:

<img src="http://chart.apis.google.com/chart?chs=500x250&amp;cht=p&
amp;chd=t:1,23,2,365,15,0,118,3&amp;chdl=Bridgelip+Sucker|
Brook+Trout+X+Bull+Trout|Bull+Trout|Chinook+Salmon|Mountain+Whitefish|
Sculpin+%28Var.+Species%29|Steelhead+%28Snake+
River+Basin%29|Westslope+Cutthroat+Trout"  alt="Pie Chart"/>

Pie Chart

 

That was pretty painless.  Let's see what we can do to make that better.

 

Add Data Labels

We can change that by changing the legend to labels by modifying the "chdl" parameter to "chl":

<img src="http://chart.apis.google.com/chart?chs=500x250&amp;cht=p&
amp;chd=t:1,23,2,365,15,0,118,3&amp;chl=Bridgelip+Sucker|
Brook+Trout+X+Bull+Trout|Bull+Trout|Chinook+Salmon|Mountain+Whitefish|
Sculpin+%28Var.+Species%29|Steelhead+%28Snake+
River+Basin%29|Westslope+Cutthroat+Trout"  alt="Pie Chart"/>

Pie Chart

 

Some Final Tweaks

Now let's add a few fixes to improve legibility.

  • Add a color gradient using the Chart Color parameter (chco): chco=006633,FFFF33.
  • Insert a Chart Title Top parameter (chtt): chtt=Observed+Species+on+Secesh+River
  • Change the Chart Type (cht) to a 3D Pie: cht=p3
  • Modify the Chart Size (chs) to better accomodate the long labels: chs=500x150

Pie Chart

That's better, and a way more Fish and Gamey color scheme.  It could certainly use work, but it's good enough to get the general idea. 

 

In the Next Episode

In the next posts I'll explore a few more chart types and then move beyond building your charts in the URL to creating and using JSON data sources to build charts, add some interactive features to allow users to modify features of the chart and finally illustrate how to expose your JSON data sources as APIs for our collaborators and the public to use and explore.

What would make the Huntplanner better?

The Huntplanner is now eight years old and overdue for an overhaul. Over the next month the IFWIS Team will be rebuilding the site from the ground up and we'd like your input.

How could it be better? What doesn't work? What features would you like to see in the next release? Let us know!

Resource to check your maps and webpages for the color-blind

Are you a red means "Stop" and green mean "Go" kind of person?  You might want to rethink this approach for cartography.

Here's an example of just how poorly your maps may translate for the color-blind.

So before pressing print, save an image and run it through some software to see how it translates to those with Deuteronopia, Protanopia and Tritanopia:

  • Vischeck lets you upload images to their server to view with various kinds of colorblindness.
  • Color Oracle installs on Windows, Mac and Linux for local processing on large files.

Don't forget the real world too... ask around and find coworkers who can evaluate your maps before publishing.

 

We feed so you can follow

Let us make this easy.

We're trying to make it easier for you to keep on top of what we are working on here at IFWIS.  Our work is not just to compile Natural Resources data, but to make it more open, accessible, and well, yours. 

We've just started this process with our new Roadkill App. Stripped of any personal details, save your username, all uploaded data are instantaneously available at http://fishandgame.idaho.gov/ifwis/core/view/roadkills where you are free to query, reuse and remix:

We are just getting started. Over the next year we'll be opening up

more data streams via the IFWIS Core API to allow you to remix, reuse and download IFWIS data and we needed a way to tell you about it.  Which brings us to this post.

RSS broadcasting RSS

We feed. You follow.

We've just started this little IFWIS Blog, but we realize that our projects, tastes and interest are pretty diverse. Though you are welcome to follow all our posts via RSS or email subscriptions, we expect the chatter - ranging from web server configs to PIT tagging - will get a little overwhelming.  To that end, we just added RSS Feeds for any tag (the keyword kind) and posted them in sidebar of the IFWIS Blog.  So if your passion *is* roadkill, you can follow those posts via RSS or HTML without all the extra noise.

And if you are passionate about RSS. You can follow the posts on RSS via RSS.

Enable Cross-Origin Resource Sharing to Allow Cross-Site JSON

We just discovered our open data wasn't nearly as open as we believed.  Turns out for true cross-site requests of JSON data you need to add a HTTP Reponse Header:

 Access-Control-Allow-Origin: "*"

The method one uses to do so vary widely by webserver and host.  In our case, for IIS7 the simplest method was to configure it in the web.config:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

For more information on the why and how as well as directions for other webservers visit enable-cors.org. The folks behind hacks.mozilla.org also offer a solid overview of Cross-site XmlHttpRequest with CORS.  Use the form at http://enable-cors.org/#check to see if your site is CORS enabled.

At this time only IFWIS Core is CORS-Enabled on IDFG's website.

About geographic transformations and how to choose the right one

I just stumbled on this most helpful post About geographic transformations and how to choose the right one by Aileen Buckley of ESRI's Mapping Center.  I even learned a few things from the comments...

I'd highly recommend the read, but if you only have a moment, read this:

So how do you choose the geographic transformation that should be used? Here are two Esri Knowledge Base articles that can help you:

HowTo: Select the correct geographic (datum) transformation when projecting between datums. This article contains links to downloadable zip files (for different versions of the software) that contain a list of all available datum transformations and their appropriate geographic areas of use.

HowTo: Determine which NAD_1983_To_WGS_1984 transformation to use.  The gist of this article is summarized below:

  1. NAD_1983_To_WGS_1984_1 - for the entire North American continent.
  2. NAD_1983_To_WGS_1984_2 - for the Aleutian islands.
  3. NAD_1983_To_WGS_1984_3 - for Hawai'i.
  4. NAD_1983_To_WGS_1984_4 - superseded by _5; this transformation method should no longer be used!
  5. NAD_1983_To_WGS_1984_5 - for the 48 contiguous United States.
  6. NAD_1983_To_WGS_1984_6 - for the Canadian province of Quebec.
  7. NAD_1983_To_WGS_1984_7 - for the Canadian province of Saskatchewan.
  8. NAD_1983_To_WGS_1984_8 - for the Canadian province of Alberta.

Note that geographic transformations work in either direction. For example, the transformation listed as NAD_1983_To_WGS_1984_5 transforms from NAD 1983 to WGS 1984, as well as from WGS 1984 to NAD 1983. When using the Project Tool, the geographic transformation is recorded in the metadata.

Using the Roadkill API to add a Google Map to your webpage

UPDATE: This demonstration is for Google Maps Javascript API Version 2. Directions are now available for using Google Maps Javascript API Version 3 with the Roadkills Controller in the IFWIS Core API.

Are you concerned about roadkill?  Would you like to display current roadkill information on your website or blog?  Now you can using the Roadkills Controller in the Core API.  Here's how in three easy steps.

 

STEP 1. Configure the URL to request

Visit http://fishandgame.idaho.gov/ifwis/core/view/roadkills and design your query using the editor.  For example, you may just be interested in one Highway section such as the first 22 miles of Highway 21.

Stripped of the empty parameters your url should now resemble: http://fishandgame.idaho.gov/ifwis/core/view/roadkills?highway=94817&mpTo=22

Now, we can add some special parameters to grab the most recent observations.  Add to your url the following &start=-730&end=now to limit your results to the last two years of observations.  The -730 is the number of days before the current date and time to include.  You may tailor this to your needs.  You can of course also use full dates, but this allows your query to be dynamic and useful in the future.

Possible parameters for date fields Observed Date (start, end) and Reported or iNsert Date (nstart, nend) include:

  • Valid dates in the format 1/10/2008
  • Now - current system datetime in Mountain Standard Time
  • Today - current day in Mountain Standard Time
  • Yesterday - previous day in Mountain Standard Time
  • Integer - positive or negative offset in days

Finally, add the kml extension, by copying the path from the kml icon or copying the following:

http://fishandgame.idaho.gov/ifwis/core/view/roadkills/list.kml?highway=94817&mpTo=22&start=-730&end=now

 

STEP 2: Add the Code

<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key={YOUR GOOGLE MAPS API KEY}">
   <script src="https://www.google.com/jsapi" type="text/javascript"></script>
   <script type="text/javascript">

       google.load("jquery", "1.4.2");
       google.load("maps", "2", {
           other_params: "sensor=false"
       });

       google.setOnLoadCallback(function () {
           initializemaps();
       });

       var map;
       var geoXml;

       function initializemaps() {
           if (GBrowserIsCompatible()) {
               geoXml = new GGeoXml("http://fishandgame.idaho.gov/ifwis/core/view/roadkills/list.kml?&start=-720&end=now&highway=94817&mpFrom=0&mpTo=22&cachebuster=" + parseInt(Math.random() * 99999999, 10));
               map = new GMap2(document.getElementById("map_canvas"));
               map.setMapType(G_PHYSICAL_MAP);
               map.addMapType(G_PHYSICAL_MAP);
               map.setCenter(new GLatLng(43.58, -116.06), 12);
               map.setUIToDefault();
               map.addOverlay(geoXml);
           }
       }

   </script>
</head>
<body>
    <div id="map_canvas" style="width: 550px; height: 600px; float:left; border: 1px solid black;">Loading...</div>
</body>
</html>

Couple small configuration notes:

  • If you are putting this online you'll need to replace {YOUR GOOGLE MAPS API KEY} with your own where indicated above.  If you don't already have one, visit http://code.google.com/apis/loader/signup.html (don't worry they're free!).
  • The URL you built in Step 1 may be different, edit the following with your url.  Keep the final cachebuster part as it'll keep your data current.
    geoXml = new GGeoXml("http://fishandgame.idaho.gov/ifwis/core/view/roadkills/list.kml?&start=-720&end=now&highway=94817&mpFrom=0&mpTo=22&cachebuster=" + parseInt(Math.random() * 99999999, 10));
  • Change the zoom center and zoom level by modifying this line appropriately:
    map.setCenter(new GLatLng(43.58, -116.06), 12);
  • You may not have full access to HTML behind your pages (for example in a blog).  Simply add the <div> section and then past the <script> sections afterwards.  If you already have jquery or google maps loaded you may skip these sections.

 

Result:  View a Live Demo
Below is a static image because GMaps Ver. 2 does not support HTTPS. Click here to see and download a live demo. An HTTPS GMaps Ver. 3 demo is also available.

Example Output


STEP 3: Enjoy

That's it!  This page you have created will update itself as new observations are added to the Roadkill page.

Displaying Recent Roadkill on your Webpage

You can use the Roadkills API to display the most recently reported roadkill on your webpage.

Passionate about Mule Deer perchance?  In a couple quick steps you can add a real-time list of the Recent Mule Deer Roadkills using the magic of JQuery and the Roadkills API.  First, a demo, then the code.

Demonstration

Recent Mule Deer Roadkill

    Loading Roadkill...

The Code

<ul id="roadkillfeed">Loading Roadkill...</ul><script type="text/javascript" src="http://www.google.com/jsapi?key={YOUR GOOGLE API KEY}">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript">
        google.load("feeds", "1");

        google.setOnLoadCallback(function () {
            initializefeeds()
        });

        function initializefeeds() {
            var feed = new google.feeds.Feed("http://fishandgame.idaho.gov/ifwis/core/view/roadkills/list.rss?species=16300&start=-365&end=now&pageSize=25&cachebuster=" + parseInt(Math.random() * 99999999, 10));
            feed.setNumEntries(25);
            feed.load(function (result) {
                if (!result.error) {

                    var content = document.getElementById('roadkillfeed');
                    var html = '';

                    for (var i = 0; i < result.feed.entries.length; i++) {
                        var entry = result.feed.entries[i];

                        html += '<li><a href="' + entry.link + '">' + entry.title + '</a></li>';

                    }
                    content.innerHTML = html;
                }
            });
        }
    </script>

Substitute your Google API Key and your customized URL and you're live!  Well, not the roadkill, but the page is displaying live data as it arrives!