Fork me on GitHub

GIS Cloud

Sewer Network

giscloud_sewer_line = new lvector.GISCloud({
    mapID: 27322,
    layerID: 117755,
    scaleRange: [15, 20],
    symbology: {
        type: "range",
        property: "pipe_dia",
        ranges: [
            {
                range: [0, 8],
                vectorOptions: {
                    weight: 4,
                    color: "#46461f",
                    opacity: 0.8
                }
            },
            {
                range: [8.00001, 47.9999],
                vectorOptions: {
                    weight: 7,
                    color: "#ff7800",
                    opacity: 0.8
                }
            },
            {
                range: [48, 100],
                vectorOptions: {
                    weight: 10,
                    color: "#000000",
                    opacity: 1
                }
            }
        ]
    },
    popupTemplate: '<div class="iw-content"><h3>Sewer Line</h3><table class="condensed-table zebra-striped bordered-table"><tr><th>Diameter</th><td>{pipe_dia} in.</td></tr><tr><th>Material</th><td>{pipe_mat}</td></tr><tr><th>Flows To</th><td>{wwtp} WWTP</td></tr></table></div>',
    singlePopup: true
});

var manHoleMarker = new L.Icon({
    iconUrl: "../../docs-demo/img/markers/manhole.png",
    iconSize: new L.Point(16, 16),
    iconAnchor: new L.Point(8, 8),
    popupAnchor: new L.Point(1, -8)
});

giscloud_man_hole = new lvector.GISCloud({
    mapID: 27322,
    layerID: 117756,
    scaleRange: [16, 20],
    symbology: {
        type: "single",
        vectorOptions: {
            icon: manHoleMarker
        }
    },
    popupTemplate: '<div class="iw-content"><h3>Man Hole</h3><table class="condensed-table zebra-striped bordered-table"><tr><th>Diameter</th><td>{mh_dia} ft.</td></tr><tr><th>Depth</th><td>{mh_depth} ft.</td></tr><tr><th>Address</th><td>{street_add}</td></tr><tr><th>Flows To</th><td>{wwtp} WWTP</td></tr></table></div>',
    singlePopup: true
});

Flood Zones

giscloud_flood_zones = new lvector.GISCloud({
    mapID: 28792,
    layerID: 121087,
    scaleRange: [14, 20],
    symbology: {
        type: "unique",
        property: "label",
        values: [
            {
                value: "AE",
                vectorOptions: {
                    fillColor: "#2f952f",
                    fillOpacity: 0.6,
                    weight: 1,
                    color: "#fff",
                    opacity: 0
                }
            },
            {
                value: "AE-FW",
                vectorOptions: {
                    fillColor: "#004a00",
                    fillOpacity: 0.6,
                    weight: 1,
                    color: "#fff",
                    opacity: 0
                }
            },
            {
                value: "0.2% Annual Chance",
                vectorOptions: {
                    fillColor: "#aaff7a",
                    fillOpacity: 0.6,
                    weight: 1,
                    color: "#fff",
                    opacity: 0
                }
            }
        ],
    },
    popupTemplate: '<div class="iw-content"><h3>Flood Zone</h3><table class="condensed-table zebra-striped bordered-table"><tr><th>Type</th><td>{label}</td></tr></table></div>',
    singlePopup: true
});

Elementary Schools

var schoolMarker = new L.Icon({
        iconUrl: "../../docs-demo/img/markers/school.png",
        iconSize: new L.Point(32, 37),
        iconAnchor: new L.Point(16, 37),
        popupAnchor: new L.Point(0, -35)
    
});

giscloud_elementary_schools = new lvector.GISCloud({
    mapID: 29104,
    layerID: 121819,
    where: "type = 'Elementary'",
    showAll: true,
    popupTemplate: function(properties) {
        return '<div class="iw-content"><h3>' + properties.name.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}) + ' ' + properties.type + '</h3><h4>' + properties.address + '</h4></div>';
    },
    singlePopup: true,
    scaleRange: [11, 20],
    symbology: {
        type: "single",
        vectorOptions: {
            icon: schoolMarker
        }
    }
});

Bus Stops

var busMarker = new L.Icon({
    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)
    }
});

giscloud_bus_stops = new lvector.GISCloud({
    mapID: 29158,
    layerID: 121929,
    popupTemplate: '<div class="iw-content"><h3>Stop ID - {stopid}</h3><h4>{stopdesc}</h4><h4>Routes - {routes}</h4></div>',
    singlePopup: true,
    scaleRange: [14, 20],
    symbology: {
        type: "single",
        vectorOptions: {
            icon: busMarker
        }
    }
});