Geolocation's KML file

For a project I am working on we want to extend the Geolocation's browse.kml.php file to include custom Icons and Groups. I have reprogrammed the file to do the icons and when it is fed into Google Maps, the display come out exactly like we want it. However in Omeka it still stays on the default pin icons.

After going through the map.js file tonight I totally get that the reason the plugin is not consuming the KML directly is that on the admin side Google API can not read the KML file as it is behind the Admin login. Instead you are consuming the KML file in Javascript and rendering it out with the map. A great approach except that it only will read 5 nodes in the KML file.

My very limited programming skills in Javascript is limiting my ability to see how to do one of the following to fix this issue:

Solution 1) Change the map.js file to always use the KML file on the public side. (i.e. I realize this will break the display on the Admin side but for our current issue that is more acceptable than not being able to custom icon the map and the following issue of filtering the map based on icon.


Solution 2) Have someone provide me with an example on how to extend the map.js programming so it can consume the additional nodes in the KML programming and display properly. If I can see how adding even one node works I can pretty much figure out how to do the others.

As always, your help is greatly appreciated!


I have extended the map.js file to read custom icon styles from the KML file, and then build custom gIcon's for them. (Solution 2) For others looking to do this, here is the code I used:

First, you need to read the full URL of the icon out of the KML file. Go to the "//Get the info for each location on the map" section, and add the following:

var iconstyle = placeMark.getElementsByTagName('IconStyle')[0];
        var icon = iconstyle.getElementsByTagName('Icon')[0];
        var iconhref = Xml.getValue(icon, 'href');

Now, you need to use this code to generate the custom icon:

var StoryIcon = new GIcon();
      StoryIcon.image = iconhref;
      StoryIcon.iconSize = new GSize(30, 30);
      StoryIcon.iconAnchor = new GPoint(1, 30);
      StoryIcon.infoWindowAnchor = new GPoint(15, 15);

You can add additional properties here - see and for info on this. The image value is coming from the iconhref variable, that gets populated by the first block of code we added.

Finally, you need to modify the "var gMarker = this.addMarker" call to include the custom icon along with the custom title. The line should look like this:

var gMarker = this.addMarker(latitude, longitude, {icon:StoryIcon, title: title}, gBalloon);

When we complete this project, we'll be making all of the code available for others to use and learn from, and have an example site where you can see what we did with it!



Could not get your code to work for me. Changing the code just makes the markers disappear. Does anyone else have a solution for adding custom markers for geolocation items?