Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Adding example for rule based styling

For the first time in the history of OpenLayers, we can render
features with multiple symbolizers now, which is also shown in
this new example.
  • Loading branch information...
commit d4ecf53801f982ce19410d76bd6ff59e6b5149c9 1 parent d3c4869
@ahocevar ahocevar authored
Showing with 149 additions and 0 deletions.
  1. +47 −0 examples/style-rules.html
  2. +102 −0 examples/style-rules.js
View
47 examples/style-rules.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta http-equiv="X-UA-Compatible" content="chrome=1">
+ <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+ <link rel="stylesheet" href="style.css" type="text/css">
+ <style type="text/css">
+ html, body, #map {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ }
+ #text {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ z-index: 20000;
+ background-color: white;
+ padding: 0 0.5em 0.5em 0.5em;
+ border-radius: 4px;
+ }
+ @media only screen and (max-width: 600px) {
+ #text {
+ display: none;
+ }
+ }
+ </style>
+ <title>Vector Layer Example</title>
+ </head>
+ <body>
+ <div id="map">
+ <div id="text">
+ <h1 id="title">Style rules example</h1>
+ <div id="shortdesc">Draws features with rule based styles.</div>
+ <div id="docs">
+ <p>See the
+ <a href="style-rules.js" target="_blank">style-rules.js source</a>
+ to see how this is done.</p>
+ </div>
+ </div>
+ </div>
+ <div id="tags">vector, feature, canvas</div>
+ <script src="loader.js?id=style-rules" type="text/javascript"></script>
+ </body>
+</html>
View
102 examples/style-rules.js
@@ -0,0 +1,102 @@
+goog.require('ol.Collection');
+goog.require('ol.Coordinate');
+goog.require('ol.Expression');
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.RendererHint');
+goog.require('ol.View2D');
+goog.require('ol.filter.Filter');
+goog.require('ol.geom.LineString');
+goog.require('ol.layer.Vector');
+goog.require('ol.projection');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Line');
+goog.require('ol.style.Rule');
+goog.require('ol.style.Style');
+
+
+var source = new ol.source.Vector({
+ projection: ol.projection.getFromCode('EPSG:3857')
+});
+
+source.addFeatures([
+ new ol.Feature({
+ g: new ol.geom.LineString([[-10000000, -10000000], [10000000, 10000000]]),
+ 'color': '#BADA55',
+ 'where': 'inner'
+ }),
+ new ol.Feature({
+ g: new ol.geom.LineString([[-10000000, 10000000], [10000000, -10000000]]),
+ 'color': '#BADA55',
+ 'where': 'inner'
+ }),
+ new ol.Feature({
+ g: new ol.geom.LineString([[-10000000, -10000000], [-10000000, 10000000]]),
+ 'color': '#013',
+ 'where': 'outer'
+ }),
+ new ol.Feature({
+ g: new ol.geom.LineString([[-10000000, 10000000], [10000000, 10000000]]),
+ 'color': '#013',
+ 'where': 'outer'
+ }),
+ new ol.Feature({
+ g: new ol.geom.LineString([[10000000, 10000000], [10000000, -10000000]]),
+ 'color': '#013',
+ 'where': 'outer'
+ }),
+ new ol.Feature({
+ g: new ol.geom.LineString([[10000000, -10000000], [-10000000, -10000000]]),
+ 'color': '#013',
+ 'where': 'outer'
+ })
+]);
+
+var style = new ol.style.Style({
+ rules: [
+ new ol.style.Rule({
+ filter: new ol.filter.Filter(function(feature) {
+ return feature.get('where') == 'outer';
+ }),
+ symbolizers: [
+ new ol.style.Line({
+ strokeStyle: new ol.Expression('color'),
+ strokeWidth: 4,
+ opacity: 1
+ })
+ ]
+ }),
+ new ol.style.Rule({
+ filter: new ol.filter.Filter(function(feature) {
+ return feature.get('where') == 'inner';
+ }),
+ symbolizers: [
+ new ol.style.Line({
+ strokeStyle: '#013',
+ strokeWidth: 4,
+ opacity: 1
+ }),
+ new ol.style.Line({
+ strokeStyle: new ol.Expression('color'),
+ strokeWidth: 2,
+ opacity: 1
+ })
+ ]
+ })
+ ]
+});
+
+var vector = new ol.layer.Vector({
+ source: source,
+ style: style
+});
+
+var map = new ol.Map({
+ layers: new ol.Collection([vector]),
+ renderer: ol.RendererHint.CANVAS,
+ target: 'map',
+ view: new ol.View2D({
+ center: new ol.Coordinate(0, 0),
+ zoom: 2
+ })
+});
Please sign in to comment.
Something went wrong with that request. Please try again.