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 handful 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 Popup.

prwsf_preservation = new lvector.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,
            weight: 1.8,
            color: "#2f4a00",
            opacity: 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 popupTemplate to help describe the features and a title tooltip when hovering over the marker.

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.

var customMarker = L.Icon.extend({
    options: {
        iconUrl: "../../docs-demo/img/markers/hydrant-blue.png",
        shadowUrl: null,
        iconSize: new L.Point(32, 37),
        iconAnchor: new L.Point(16, 37),
        popupAnchor: new L.Point(0, -35)
    }
});

prwsf_hydrants = new lvector.PRWSF({
    url: "http://maps.co.mecklenburg.nc.us/rest",
    geotable: "fire_hydrants",
    fields: "gid,tagnumber,barrelsize,owner",
    uniqueField: "gid",
    srid: 2264,
    scaleRange: [15, 20],
    popupTemplate: '<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>',
    singlePopup: true,
    symbology: {
        type: "unique",
        property: "owner",
        values: [
            {
                value: "Public",
                vectorOptions: {
                    icon: new customMarker(),
                    title: "{tagnumber} ({owner})"
                }
            },
            {
                value: "Private",
                vectorOptions: {
                    icon: new customMarker({
                        iconUrl: "../../docs-demo/img/markers/hydrant-red.png"
                    }),
                    title: "{tagnumber} ({owner})"
                }
            }
        ]
    }
});

Layer On Layer Off

Libraries (and directions to them)

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

var customMarker = L.Icon.extend({
    options: {
        iconUrl: "../../docs-demo/img/markers/library.png",
        shadowUrl: null,
        iconSize: new L.Point(32, 37),
        iconAnchor: new L.Point(16, 37),
        popupAnchor: new L.Point(0, -35)
    }
});

prwsf_libraries = new lvector.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,
    popupTemplate: '<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>',
    singlePopup: true,
    symbology: {
        type: "single",
        vectorOptions: {
            icon: new customMarker()
        }
    }
});

Layer On Layer Off

Bus Stops

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

The popupTemplate 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.

var busMarker = L.Icon.extend({
    options: {
        iconUrl: "../../docs-demo/img/markers/bus.png",
        shadowUrl: null,
        iconSize: new L.Point(17, 19),
        iconAnchor: new L.Point(0, 19),
        popupAnchor: new L.Point(9, -19)
    }
});

prwsf_bus = new lvector.PRWSF({
    url: "http://gis.drcog.org/REST",
    geotable: "rtd_busstops",
    fields: "gid,bsid,routes,stopname,dir,location",
    uniqueField: "gid",
    srid: 2232,
    scaleRange: [14, 20],
    popupTemplate: 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;
    },
    popupWindow: true,
    symbology: {
        type: "single",
        vectorOptions: {
            icon: new busMarker({
                iconUrl: "../../docs-demo/img/markers/bus.png"
            })
        }
    }
});

Layer On Layer Off