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;
+}