Skip to content

Instantly share code, notes, and snippets.

@jsanz

jsanz/map-styling.html

Created July 8, 2014 21:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jsanz/d4ca621cb400abbcc5f4 to your computer and use it in GitHub Desktop.
Save jsanz/d4ca621cb400abbcc5f4 to your computer and use it in GitHub Desktop.
Download ZIP
Styling on the Open Layers workshop
Raw
map-styling.html
<!DOCTYPE html>
<html>
<head>
<title>My Map</title>
<link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css">
<style>
#map-id {
width: 512px;
height: 256px;
}
</style>
<script src="openlayers/lib/OpenLayers.js"></script>
</head>
<body>
<h1>My Map</h1>
<div id="map-id"></div>
<script>
var nyc = new OpenLayers.Bounds(
-74.032, 40.685,
-73.902, 40.876
);
var map = new OpenLayers.Map("map-id", {
projection: new OpenLayers.Projection("EPSG:4326"),
maxExtent: nyc,
restrictedExtent: nyc,
maxResolution: 0.0005,
numZoomLevels: 5
});
var base = new OpenLayers.Layer.WMS(
"Giant polygon",
"/geoserver/wms",
{layers: "giant_polygon"}
);
map.addLayer(base);
var center = new OpenLayers.LonLat( -73.987, 40.737);
map.setCenter(center,3);
map.addControl(new OpenLayers.Control.LayerSwitcher());
var landmarks = new OpenLayers.Layer.Vector("NY Landmarks", {
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.WFS({
version: "1.1.0",
url: "/geoserver/wfs",
featureType: "poly_landmarks",
featureNS: "http://www.census.gov",
srsName: "EPSG:4326"
}),
styleMap: new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
strokeColor: "white",
strokeWidth: 1
}, {
rules: [
new OpenLayers.Rule({
filter: new OpenLayers.Filter.Logical({
type: OpenLayers.Filter.Logical.OR,
filters: [
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "CFCC", value: "D82"
}),
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "CFCC", value: "D83"
}),
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "CFCC", value: "D84"
}),
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "CFCC", value: "D85"
})
]
}),
symbolizer: {
fillColor: "#B4DFB4",
strokeColor: "#88B588",
strokeWidth: 2
}
}),
new OpenLayers.Rule({
filter: new OpenLayers.Filter.Logical({
type: OpenLayers.Filter.Logical.OR,
filters: [
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "CFCC", value: "H11"
}),
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "CFCC", value: "H31"
}),
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "CFCC", value: "H41"
}),
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "CFCC", value: "H51"
})
]
}),
symbolizer: {
fillColor: "#8AA9D1",
strokeColor: "#436C91",
strokeWidth: 1
}
}),
new OpenLayers.Rule({
filter: new OpenLayers.Filter.Logical({
type: OpenLayers.Filter.Logical.OR,
filters: [
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "CFCC", value: "D31"
}),
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "CFCC", value: "D43"
}),
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "CFCC", value: "D64"
}),
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "CFCC", value: "D65"
}),
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "CFCC", value: "D90"
}),
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "CFCC", value: "E23"
})
]
}),
symbolizer: {
fillColor: "#A5A5A5",
strokeColor: "#6E6E6E",
strokeWidth: 1
}
}),
new OpenLayers.Rule({
elseFilter: true,
symbolizer: {
fillColor: "navy"
}
})
]
})
})
});
map.addLayer(landmarks);
var roads_back = new OpenLayers.Layer.Vector("Roads back", {
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.WFS({
version: "1.1.0",
url: "/geoserver/wfs",
featureType: "tiger_roads",
featureNS: "http://www.census.gov",
srsName: "EPSG:4326"
}),
styleMap: new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
strokeWidth: "7",
strokeColor: "red"
}, {
rules: [
new OpenLayers.Rule({
minScaleDenominator:32000,
symbolizer: {
strokeWidth: "2",
strokeColor: "#666666"
}
}),
new OpenLayers.Rule({
maxScaleDenominator:32000,
symbolizer: {
strokeWidth: "7",
strokeColor: "#666666"
}
})
]
})
})
});
map.addLayer(roads_back);
var roads_front = new OpenLayers.Layer.Vector("Roads front", {
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.WFS({
version: "1.1.0",
url: "/geoserver/wfs",
featureType: "tiger_roads",
featureNS: "http://www.census.gov",
srsName: "EPSG:4326"
}),
styleMap: new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
strokeWidth: "7",
strokeColor: "red"
}, {
rules: [
new OpenLayers.Rule({
maxScaleDenominator:32000,
symbolizer: {
strokeWidth: "4",
strokeColor: "#FFFFFF"
}
})
]
})
})
});
map.addLayer(roads_front);
var labels = new OpenLayers.Layer.WMS(
"Roads labels",
"/geoserver/wms",
{
layers: "tiger_roads",
styles: "tiger_roads_labels",
format: 'image/png',
transparent: true
},
{
isBaseLayer: false
}
);
map.addLayer(labels);
</script>
</body>
</html>
Raw
tiger_roads_labels.sld
<?xml version="1.0" encoding="UTF-8"?>
<StyledLayerDescriptor version="1.0.0"
xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
xmlns="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<NamedLayer> <Name> area landmarks </Name>
<UserStyle>
<FeatureTypeStyle>
<FeatureTypeName>Feature</FeatureTypeName>
<!-- label -->
<Rule>
<MaxScaleDenominator>32000</MaxScaleDenominator>
<TextSymbolizer>
<Label>
<ogc:PropertyName>NAME</ogc:PropertyName>
</Label>
<Font>
<CssParameter name="font-family">Times New Roman</CssParameter>
<CssParameter name="font-style">Normal</CssParameter>
<CssParameter name="font-size">14</CssParameter>
<CssParameter name="font-weight">bold</CssParameter>
</Font>
<LabelPlacement>
<LinePlacement>
</LinePlacement>
</LabelPlacement>
<Halo>
<Radius>
<ogc:Literal>2</ogc:Literal>
</Radius>
<Fill>
<CssParameter name="fill">#FFFFFF</CssParameter>
<CssParameter name="fill-opacity">0.85</CssParameter>
</Fill>
</Halo>
<Fill>
<CssParameter name="fill">#000000</CssParameter>
</Fill>
<VendorOption name="group">true</VendorOption>
</TextSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment