Tuesday, July 30, 2013

View Wildfire (or any kml) data on topographic maps in Hillmap

The West Mullan Fire from I-90 west of Missoula.


Wildfire season is in full swing across the American West. You can view updates on various fires on inciniweb, but the maps showing perimeters are a bit small and don't have any map layers beyond the basic google terrain and satellite maps.

Fortunately, they post daily kml files and there is an easy trick that will let you view these files (or any public kml/kmz file on the web) in hillmap. Once you are in hillmap, you can view the fire perimeter on any topo map layer available on the site.  The result looks something like this:



Step 1: Go to Inciniweb and Copy the Kml/Google Earth Address



Find the fire you want to map on inciweb. There is a list of all wildfires on the home page, or you can search by state or incident.

On the inciniweb incident information page for that fire, there is a list of Incident Permiters on the right. They suggest viewing these in Google Earth but we'll copy the Address (or url) to load into hillmap instead.  Newer fires may not yet have an incident perimeter online until they have been mapped with a fly over.

Right click on the permitter you want and click "Copy Link Address".

Step 2: Go to Hillmap And Open your Browser's JavaScript Console

With a browser window open to hillmap.com you will need to open your browser's javascript console. This can often be found under the "tools" or "developer tools" menu or you can use the keyboard shortcuts listed for various browsers here.

Step 3: Enter this bit of JavaScript



You'll need to enter just a bit of javascript to load the kml layer:

new google.maps.KmlLayer("URL").setMap(l_map)

Where URL is the url you copied in step 1. For example I entered:

new google.maps.KmlLayer("http://rmgsc.cr.usgs.gov/outgoing/GeoMAC/current_year_fire_data/KMLS/MT-BRF-HR1U%20Gold%20Pan%207-26-2013%200216.kml").setMap(l_map)

The only tricky thing is that the url needs to be contained in single (' ') or double (" ") quotes.

Note: to make a printable map you can do steps 2 and 3 on the print page window before you print.

Other Sources of Data

Lots of other agencies post data in kml or kms format. Not all of these will work well in hillmap, but a couple places to start looking are:
For any developers out there the left and right map objects in hillmap are global objects called (creatively) l_map and r_map.

These are standard Google Maps Javascript Api Map objects so you can add Kml Layers to them like we've done here or do anything else allowed for in the Google Maps Javascript Api.

Feel encouraged to play with them and let me know if you come up with something cool!

4 comments:

Richard Davies said...

Cool trick, but why not just add an option in the menu interface to simplify this. Then they'd only need to specify the URL to the KML data instead of having to enter a JavaScript command in the browser console.

Jen Gregory said...

Glad you think it's a cool trick. There are quite a few other things on the list of "wouldn't it be great if we added this..."

When people let us know about features they'd like to see we consider what it will take to implement, especially if a few people ask for it. Thanks for your feedback!

"Little" Jamie said...

Does this still work in hillmap? I've tried links in the JS console in chrome and i get a return of 'undefined', but the kml isn't being drawn. the kml does work in google maps so I think it's valid.

Thanks!

George said...

Hello,

Is there a way to view a .kml of point locations in hillmap that is on my hard drive, rather than one that originates form a URL? I tried to put my .kml in a Google Drive folder and use its link in the javascript command above, got the same "undefined" error as the commentor above. I then tried it with the fire perimeter link from your example above, and got the same error.

Then I converted it to a GPX and imported it, and my points showed up, but when I hit "print" the points disappeared.

Thank you.