Oakland Bicycle Facilities Map Application

Overview

The Oakland Bicycle Facilities Map Application was put out by Oakland's Bicycle and Pedestrian Facilities Program. It uses the Google Maps API V3 as a base. On top of the basic Google Map, we also included various KML layers exported from Oakland's GIS system.

Decision Not to Use The Google InfoWindow

You may notice that when clicking on bike racks, we do not use a standard Google Maps InfoWindow. We made this decision for a number of reasons. First, we had some compatability issues when using InfoWindows with a KML layer. First, the tail of the InfoWindow did not center on the bike parking icon. Second, is that by default, the title of the marker is displayed in the InfoWindow. Below is some code that we wrote to circumvent these two issues.

var infowindow = new google.maps.InfoWindow(); // an info window to use
function showInfoWindow(description, position) { // open the info window
    infowindow.close();
    infowindow.setOptions({
        content: '<div class="infowindow">' + description + '</div>',
        position: position,
        pixelOffset: new google.maps.Size(-1, -12)
    });
    infowindow.open(map);
};

This code worked for a while, but it broke recently because of a problem with the kmlEvent.position variable. Google says in its ChangeLog: Deprecated properties KMLMouseEvent.position and FusionTablesMouseEvent.position have been removed. Use .latLng instead (so this looks like it could be fixed pretty easily). Also, in general, when you have an InfoWindow open, it blocks the screen and prevents other parking markers from being clicked.

Thus, we decided to use a manually created window, which shows the data we want to show and does not clutter the screen as much. One issue with this approach however is that when a user clicks on a rack, there is no way to visually show the user which rack he or she clicked on (maybe this will be fixed in a future release). But in the worst case, the user can just click on the rack again.

Updating the Application Data

Open the ArcView Document

The ArcView Document that contains all of the data for this application is located in the Bike-Ped_Program > Outreach > GoogleWebMap.

Exporting the KMZ File from ArcView

Click on the ArcToolbox icon on the screen (or if you cannot see it...here is how to open the toolbox from the menus). Expand Conversion Tools. Expand the Export to KML icon and double click on 'Layer to KML'. Select the layer you want to export. For the second box, choose a place to save the exported file. The desktop should be fine. Next, set the scale as 1. Hit export. A dialog box should come up indicating that ArcView is exporting the layer to KML. When the export is done, you can close ArcView.

Placement on the Web

Once you have the exported KMZ file from ArcMap, locate the appropriate KMZ file in the layers folder on the web for the layer you want to update. Replace it with the KMZ file. The bike facility application should be up to date. Note: sometimes changes do not appear right away; it may take a few hours to fully update itself. Also, if you have changed the symbology (meaning changed the colors of the lines or the icons), you will have to update the icons in the images folder by unzipping the KMZ file or by updating the rgb values in the legend section in default.php.

Known Issues

Ideas for Future Development

Resources