« Steadicam Smoothee with a GoPro H3 Black | Main | Data redaction »

Mapping APIs and web services

A month or so ago, a friend of mine approached me about building a web site for him that would show routes and other information on a map and allow edits and so on and so forth.  I've played with the Google Maps API before but I wanted to have a look at using Open Street Maps instead because I really like using open source software when I can.

A little digging and I actually came across the MapQuest Open Data Map APIs and Web Services.  I signed up for an API key and played around with all the web services like geocoding and static map services before moving on to the JavaScripts Maps.  There is a bunch of sample code, and it's super easy to get up and running so I pretty quickly had a full featured map with controls and geolocation running.  That's when I remembered that I had created an XML file with all (actually as many as I could find), the ski resorts in North America.  This would be a perfect exercise to work with.  After browsing the developer guide, I found some sample code that loads a remote kml file using the MQA.RemoteCollection function.

I got this code up and running pretty quickly, but I wanted to round it out by using my own custom POI marker.  I found two Creative Commons (and GPL) licensed icons and mashed them togther to create the following:

I'm no graphic artist, but it'll do... :)

Here is where I got the two icons from: 

GPS marker

Inkscape icon

This is when I ran into problems.  It seems there is a bug when loading KML that prevents custom icons from loading correctly.  Instead I was only getting the icon shadows rendered:

I debugged the issue for quite some time, but I started seeing that a bunch of functions were not returning data or hadn't been implemented.  As a side note, the built in debugger in Chrome is pretty awesome.  I wouldn't go so far as to say it makes writing javascript painless, but it goes a long way to right direction.

After taking to the forums, I started to find that the Open Data API is pretty rough around the edges.  It works wonderfully for what it is, but there seems to be a lot of bugs still.  Either way, I'm going to keep using it, as this is really the only bug I've personally run into so far.

To get around this issue, I guess you'd need to parse out the KML yourself and manually add the POIs with a custom icon.  I did this for a few of the placemarks in the KML file and it worked great.

Anyway, have a look at the map with the default markers in place.  You can click on the markers to get info that was provided in the KML file.  I have a huge amount of data in the file, but I'm still missing a lot of info about resorts outside of the Western US as that's where I started gathering info:

 Full Screen 

Also, because I wanted to see the map with my custom icon and I already have a gmaps api key, I went and ahead and put this together.  You can click on the markers for info:

Full Screen

Lastly, I went ahead and added the ski resorts kml file I created from my xml data to the github repo where I keep this stuff.  Feel free to use the KML file or the above maps for your site or whatever you want really.  Some day I'd like to get around to adding all the stats for the rest of the ski resorts.

-- Rob

Reader Comments (1)

Thanks for sharing this tips. Where, I have learned about Google maps. You may also learn about some interesting things in Google Maps. How to Styled Maps or Customize colors in Maps? For More info: http://www.labstech.org/styled-maps-google-maps-2014-06-26/

June 27, 2014 | Unregistered CommenterVijay Rajbhar

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>