Merge pull request #687 from OpenGeoscience/style-from-array

Update styles from arrays.

examples/animation/example.json

@@ -0,0 +1,9 @@
+{
+  "path": "animation",
+  "title": "Animate Features",
+  "exampleCss": ["main.css"],
+  "exampleJs": ["main.js"],
+  "about": {
+    "text": "This example shows how to animate features by updating styles."
+  }
+}

examples/animation/index.jade

@@ -0,0 +1,60 @@
+extends ../common/templates/index.jade
+
+block append mainContent
+  div#controls
+    .form-group(title="The data set to plot.")
+      label(for="dataset") Data Set
+      select#dataset(param-name="dataset", placeholder="Activity")
+        option(value="adderall", url="AdderallCities2015.csv" title="9555 points") Adderall
+        option(value="cities", url="cities.csv" title="30101 points") U.S. Cities
+        option(value="earthquakes", url="earthquakes.json" title="1.3 million points") Earthquakes
+      span#points-loaded
+    .form-group(title="Number of points.  Leave blank for the entire original data set.  If a smaller number, only a subset of points will be shown.  If a larger number, some of the data will be duplicated with random offsets.")
+      label(for="points") Number of Points
+      input#points(type="number" min="1" step="100")
+      span#points-shown
+    .form-group.style-list
+      label Styles to animate:
+    .form-group.style-list
+      span
+        label(for="fill") Fill
+        input#fill(type="checkbox", placeholder="false")
+      span
+        label(for="fillColor") Fill Color
+        input#fillColor(type="checkbox", placeholder="false")
+      span
+        label(for="fillOpacity") Fill Opacity
+        input#fillOpacity(type="checkbox", placeholder="true", checked="checked")
+      span
+        label(for="radius") Radius
+        input#radius(type="checkbox", placeholder="true", checked="checked")
+      span
+        label(for="stroke") Stroke
+        input#stroke(type="checkbox", placeholder="false")
+      span
+        label(for="strokeColor") Stroke Color
+        input#strokeColor(type="checkbox", placeholder="false")
+      span
+        label(for="strokeOpacity") Stroke Opacity
+        input#strokeOpacity(type="checkbox", placeholder="true", checked="checked")
+      span
+        label(for="strokeWidth") Stroke Width
+        input#strokeWidth(type="checkbox", placeholder="true", checked="checked")
+    .form-group
+      button#play Play
+      button#pause Pause
+      button#stop Stop
+    .form-group
+      span.timing-group
+        span Framerate 
+        span#timing-framerate 0
+        span  fps
+      span.timing-group
+        span Avg. Proc. 
+        span#timing-generate 0
+        span  ms
+      span.timing-group
+        span Avg. Update 
+        span#timing-update 0
+        span  ms
+

examples/animation/main.css

@@ -0,0 +1,57 @@
+#controls {
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: absolute;
+  left: 10px;
+  top: 80px;
+  z-index: 1;
+  border-radius: 5px;
+  border: 1px solid grey;
+  box-shadow: 1px 1px 3px black;
+  opacity: 0.5;
+  transition: opacity 250ms ease;
+  background: #CCC;
+  color: black;
+  padding: 4px;
+  font-size: 14px;
+  max-height: calc(100% - 100px);
+  min-width: 310px;
+}
+#controls:hover {
+  opacity: 1;
+}
+#controls .form-group {
+  margin-bottom: 0;
+}
+#controls label {
+  min-width: 120px;
+}
+#controls #points {
+  width: 100px;
+}
+#controls #points-loaded,#controls #points-shown {
+  display: inline-block;
+  font-size: 11px;
+  padding-left: 5px;
+}
+#controls table input {
+  width: 55px;
+}
+#controls table th {
+  text-align: center;
+}
+span.timing-group {
+  font-size: 11px;
+  padding-right: 10px;
+}
+#controls .style-list {
+  max-width: 320px;
+  font-size: 12px;
+}
+#controls .style-list span {
+  padding-right: 5px;
+}
+#controls .style-list label {
+  min-width: 0;
+  max-width: none;
+}