PostGIS RESTful Web Service Framework

Mountain Backdrop Preservation Areas

This simple demo shows mountain backdrop preservation areas. We're using the showAll parameter since there are only a hanful of features and there's no sense re-fetching features with each map pan or zoom.

Also, note the use of the clickable: false option in the vector symbology definitions. This ensures that the cursor doesn't change to something that would make the user think they could click these polygons since they're just here for display and don't contain any attribute to populate an InfoWindow.

prwsf_preservation = new gvector.PRWSF({
    url: "http://gis.drcog.org/REST",
    geotable: "mountain_backdrop_preservation_area",
    fields: "gid",
    uniqueField: "gid",
    srid: 2232,
    showAll: true,
    symbology: {
        type: "single",
        vectorOptions: {
            fillColor: "#2f4a00",
            fillOpacity: 0.4,
            strokeWeight: 1.8,
            strokeColor: "#2f4a00",
            strokeOpacity: 1,
            clickable: false
        }
    }
});

Layer On Layer Off

Fire Hydrants

This demo uses the unique symbology type so we can view the difference between public and private fire hydrants. There's also a simple infoWindowTemplate to help describe the features.

We're also using the scaleRange parameter so that when someone zooms out beyond zoom level 15, no more feature requests are made. This helps keep the map from being too cluttered.

prwsf_hydrants = new gvector.PRWSF({
    url: "http://maps.co.mecklenburg.nc.us/rest",
    geotable: "fire_hydrants",
    fields: "gid,tagnumber,barrelsize,owner",
    uniqueField: "gid",
    srid: 2264,
    scaleRange: [15, 20],
    infoWindowTemplate: '<div class="iw-content"><h3>Tag #{tagnumber}</h3><table class="condensed-table bordered-table zebra-striped"><tbody><tr><th>Owner</th><td>{owner}</td></tr><tr><th>Barrel Size</th><td>{barrelsize}</td></tr></tbody></table></div>',
    singleInfoWindow: true,
    symbology: {
        type: "unique",
        property: "owner",
        values: [
            {
                value: "Public",
                vectorOptions: {
                    icon: "../../docs-demo/img/markers/hydrant-blue.png"
                }
            },
            {
                value: "Private",
                vectorOptions: {
                    icon: "../../docs-demo/img/markers/hydrant-red.png"
                }
            }
        ]
    }
});

Layer On Layer Off

Libraries (and directions to them)

This demo has a simple, single symbology for all libraries and makes use of an infoWindowTempmlate to inject the libraries address into the InfoWindow, making driving directions to each location just a mouse click away.

prwsf_libraries = new gvector.PRWSF({
    url: "http://maps.co.mecklenburg.nc.us/rest",
    geotable: "libraries",
    fields: "gid,name,address,city",
    uniqueField: "gid",
    srid: 2264,
    scaleRange: [7, 20],
    showAll: true,
    infoWindowTemplate: '<div class="iw-content"><h3>{name}</h3><a href="http://maps.google.com/maps?saddr=&daddr={address}, {city}" target="_blank"><h4>{address} (click for directions)</h4></a></div>',
    singleInfoWindow: true,
    symbology: {
        type: "single",
        vectorOptions: {
            icon: "../../docs-demo/img/markers/library.png"
        }
    }
});

Layer On Layer Off

Bus Stops

This demo shows RTD (Denver, CO) Bus Stop locations and updates with each map pan and zoom.

The infoWindowTemplate in this demo is slightly more complex as we're using a function (which gets passed feature properties) that helps us create links to each route's schedule with a bit of JavaScript hackery.

prwsf_bus = new gvector.PRWSF({
    url: "http://gis.drcog.org/REST",
    geotable: "rtd_busstops",
    fields: "gid,bsid,routes,stopname,dir,location",
    uniqueField: "gid",
    srid: 2232,
    scaleRange: [14, 20],
    infoWindowTemplate: function(properties) {
        var html = '<div class="iw-content"><h3>' + properties.stopname + '</h4><h4>' + properties.dir + '-bound</h4><table class="condensed-table bordered-table zebra-striped"><tbody><tr><th>Bus Stop ID</th><td>' + properties.bsid + '</td></tr><tr><th>Routes</th><td>';
        var routes = properties.routes.split(",");
        var routesHtml = '';
        for (var i = 0, len = routes.length; i < len; i++) {
            routesHtml += (routesHtml.length ? ", " : "") + '<a href="http://www3.rtd-denver.com/schedules/getSchedule.action?&routeId=' + routes[i].trim() + '" target="_blank">' + routes[i].trim() + '</a>';
        }
        html += routesHtml + '</td></tr></tbody></table></div>';
        return html;
    },
    singleInfoWindow: true,
    symbology: {
        type: "single",
        vectorOptions: {
            icon: new google.maps.MarkerImage("../../docs-demo/img/markers/bus.png", new google.maps.Size(17, 19), null, new google.maps.Point(0, 19))
        }
    }
});

Layer On Layer Off