CartoDB
Sewer Network
This demo shows a point an a line table from CartoDB, sewer lines and man holes. The man holes are displayed using a simple symbology while the sewer lines use the range symbology. Pipes up to 8" in diameter are shown with a thinner green line, while larger pipes are shown with a thicker orange line.
We're also using the singlePopup option here so that only one Popup is shown for each layer. This keeps the map from getting cluttered when selecting lots of features.
cartodb_sewer_line = new lvector.CartoDB({
user: "geojason",
table: "sewer_line",
scaleRange: [15, 20],
symbology: {
type: "range",
property: "pipe_dia",
ranges: [
{
range: [0, 8],
vectorOptions: {
weight: 4,
color: "#46461f",
opacity: 0.8
}
},{
range: [8.00001, 100],
vectorOptions: {
weight: 8,
color: "#ff7800",
opacity: 0.8
}
}
]
},
popupTemplate: '<div class="iw-content"><h3>Sewer Line</h3><table class="condensed-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 customMarker = L.Icon.extend({
options: {
iconUrl: "../../docs-demo/img/markers/manhole.png",
shadowUrl: null,
iconSize: new L.Point(16, 16),
iconAnchor: new L.Point(8, 8),
popupAnchor: new L.Point(1, -8)
}
});
cartodb_man_hole = new lvector.CartoDB({
user: "geojason",
table: "man_hole",
scaleRange: [16, 20],
symbology: {
type: "single",
vectorOptions: {
circleMarker: true,
radius: 20
}
},
popupTemplate: '<div class="iw-content"><h3>Man Hole</h3><table class="condensed-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
One huge benefit when using CartoDB is that we get direct SQL access to the PostGIS database. In this example we're using the ST_Simplify function to trim down the number of vertices on returned geometry so that features appear a little quicker. This isn't necessary on all data sets but is helpful when dealing with complex geometries.
Keep in mind when performing geometric functions with SQL, your output geometry must be in a field named the_geom to return proper GeoJSON.
cartodb_flood_zones = new lvector.CartoDB({
user: "geojason",
table: "flood_zones",
fields: "cartodb_id,label,st_simplify(the_geom,0.000008) the_geom",
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"><tr><th>Type</th><td>{label}</td></tr></table></div>',
singlePopup: true
});