roadkill

Observations and Roadkill have moved to secure traffic

As mentioned in the prior entry, Securing IFWIS Content: A migration to HTTPS (SSL) traffic, we have fully migrated Observations and Roadkill forms to use full https traffic. 

This should fix an internal login and authentication bug (IDFG users were not displayed as being logged in on the form after entering their credentials).

Additionally, this gives us room to move forward with handling more sensitive data as it is submitted.

Please let us know if you are having any problems with these applications.

 

-Ben

Support Cardinal Directions in Lat/Lng Conversion Both Before and After Numbers

Currently "114 43w" works, but "w114 43" shows up in Mongolia.  Literally.

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 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!