Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 445 lines (359 sloc) 11.993 kb
02c7dab a few additions and symbology changes
Zachary Johnson authored
1 <html>
2 <head>
3 <title>OpenLayers-Symbology Proportional Symbol example</title>
4
5 <!-- styles -->
a9e3ae8 Fixing cartograms so they work
Zachary Johnson authored
6 <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
02c7dab a few additions and symbology changes
Zachary Johnson authored
7 <link rel="stylesheet" type="text/css" href="../style/css/ol.thematic.css" />
8
9 <!-- external libraries ( ol, colorbrewer, jquery ) -->
de4d13e Finishing up perceptual scaling for proportional symbols
Zachary Johnson authored
10 <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
02c7dab a few additions and symbology changes
Zachary Johnson authored
11 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
a9e3ae8 Fixing cartograms so they work
Zachary Johnson authored
12 <script type="text/javascript" src="ext4/ext-all.js"></script>
02c7dab a few additions and symbology changes
Zachary Johnson authored
13
14 <!-- local symbology code -->
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
15 <script type="text/javascript" src="../src/js/ol/thematic/ol.classification.js"></script>
02c7dab a few additions and symbology changes
Zachary Johnson authored
16 <script type="text/javascript" src="../src/js/ol/thematic/ol.thematic.js"></script>
17 <script type="text/javascript" src="../src/js/ol/thematic/ol.propsymbol.js"></script>
18
19 <script type="text/javascript">
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
20
21 Ext.require('Ext.slider.*');
22
36d1619 many styling changes
Zachary Johnson authored
23 var map, propLayer,
340eb65 Switching all examples over to OSM and a few fixes
Zachary Johnson authored
24 url = '../data/json/county_unemployment.geo.json',
25 indicator = 'unemployed',
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
26 format = new OpenLayers.Format.GeoJSON(), /* this is optional as GeoJSON is the default */
27 classBreaksSlider,
2edb331 Adding isolines and many other changes
Zachary Johnson authored
28 classSizeSlider,
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
29 legendWidth = 300;
02c7dab a few additions and symbology changes
Zachary Johnson authored
30
31 function init()
32 {
33 map = new OpenLayers.Map( 'map' );
340eb65 Switching all examples over to OSM and a few fixes
Zachary Johnson authored
34 map.addLayer(new OpenLayers.Layer.OSM());
02c7dab a few additions and symbology changes
Zachary Johnson authored
35
36 createPropLayer();
37 };
38
39 function createPropLayer()
40 {
36d1619 many styling changes
Zachary Johnson authored
41 propLayer = new ol.thematic.ProportionalSymbol( map, {
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
42 url : url,
43 indicator : indicator,
829d430 Adding perceptual scaling to the proportional symbol base class
Zachary Johnson authored
44
45 classed : true,
46
47 scaling : 'mathematical',
48
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
49 defaultSymbolizer : { 'strokeColor' : '#ff0000', 'strokeWidth' : 1, 'strokeOpacity' : .5, 'fillOpacity' : .5, 'fillColor' : '#0099cc',
50 'graphicName' : 'circle' },
51 requestSuccess : function( request )
02c7dab a few additions and symbology changes
Zachary Johnson authored
52 {
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
53 map.zoomToExtent( this.layer.getDataExtent(), true );
02c7dab a few additions and symbology changes
Zachary Johnson authored
54
55 populateControls();
56 updateControls();
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
57 updateClassed();
02c7dab a few additions and symbology changes
Zachary Johnson authored
58 wireControls();
59 },
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
60 updateSuccess : function()
61 {
938fcea Fixing and adding some tests
Zachary Johnson authored
62 if ( !propLayer.classed )
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
63 {
64 return;
65 }
66
67 var appliedBreaks = propLayer.classification.getBoundsArray();
68
938fcea Fixing and adding some tests
Zachary Johnson authored
69 if ( ( classBreaksSlider == null ) || !Array.equalsInOrder( appliedBreaks, classBreaksSlider.getValues() ) )
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
70 {
71 updateClassBreaksSlider();
72 }
73
2edb331 Adding isolines and many other changes
Zachary Johnson authored
74 var appliedSizes = propLayer.sizeInterpolation;
75
938fcea Fixing and adding some tests
Zachary Johnson authored
76 if ( ( classSizeSlider == null ) || !Array.equalsInOrder( appliedSizes, classSizeSlider.getValues() ) )
2edb331 Adding isolines and many other changes
Zachary Johnson authored
77 {
78 updateClassSizeSlider();
79 }
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
80 }
02c7dab a few additions and symbology changes
Zachary Johnson authored
81 });
82 };
83
84
85 function populateControls()
86 {
87 // attributes
88 // we'll just base this off the first feature
89 var $attributeSelect = $('select#attributes');
36d1619 many styling changes
Zachary Johnson authored
90 var feature = propLayer.layer.features[0];
02c7dab a few additions and symbology changes
Zachary Johnson authored
91
92 var attributes = feature.attributes,
93 option;
94
95 $.each( attributes, function( key, value )
96 {
97 // see if value is a number
98 if ( !isNaN( value ) )
99 {
100 option = '<option value="' + key + '">' + key + '</option>';
101 $attributeSelect.append( option );
102 }
103 });
104
105 var $classMethodSelect = $('select#classMethods');
106
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
107 $.each( ol.thematic.Distribution, function( key, value )
02c7dab a few additions and symbology changes
Zachary Johnson authored
108 {
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
109 if ( typeof( value ) == 'string' )
110 {
111 option = '<option value="' + value + '">' + value + '</option>';
112 $classMethodSelect.append( option );
113 }
02c7dab a few additions and symbology changes
Zachary Johnson authored
114 });
115
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
116 var $shapeSelect = $('select#shapes');
02c7dab a few additions and symbology changes
Zachary Johnson authored
117
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
118 $.each( ol.thematic.ProportionalSymbol.Shapes, function( key, value )
119 {
120 if ( typeof( value ) == 'string' )
121 {
122 option = '<option value="' + value + '">' + value + '</option>';
123 $shapeSelect.append( option );
124 }
125 });
126
2edb331 Adding isolines and many other changes
Zachary Johnson authored
127 var $scalingSelect = $('select#scaling');
128
129 $.each( ol.thematic.ProportionalSymbol.Scaling, function( key, value )
130 {
131 if ( typeof( value ) == 'string' )
132 {
133 option = '<option value="' + value + '">' + value + '</option>';
134 $scalingSelect.append( option );
135 }
136 });
137
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
138 };
139
140 function onManualClassBreaksSliderChange()
141 {
142 if ( $('select#classMethods').val() != ol.thematic.Distribution.CLASSIFY_WITH_BOUNDS )
143 {
144 $('select#classMethods').val( ol.thematic.Distribution.CLASSIFY_WITH_BOUNDS );
145 }
146
147 var options = {
148 method : ol.thematic.Distribution.CLASSIFY_WITH_BOUNDS,
149 classBreaks : classBreaksSlider.getValues()
150 };
151
152 propLayer.updateOptions( options );
153 propLayer.applyClassification();
02c7dab a few additions and symbology changes
Zachary Johnson authored
154 };
155
2edb331 Adding isolines and many other changes
Zachary Johnson authored
156 function onManualClassSizeSliderChange()
157 {
158 if ( $( 'select#scaling' ).val() != ol.thematic.ProportionalSymbol.Scaling.MANUAL )
159 {
160 $( 'select#scaling' ).val( ol.thematic.ProportionalSymbol.Scaling.MANUAL );
161 }
162
163 var options = {
164 scaling : ol.thematic.ProportionalSymbol.Scaling.MANUAL,
165 sizes : classSizeSlider.getValues()
166 };
167
168 propLayer.updateOptions( options );
169 propLayer.applyClassification();
170 };
171
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
172
02c7dab a few additions and symbology changes
Zachary Johnson authored
173 function updateControls()
174 {
175 var $attributeSelect = $('select#attributes');
36d1619 many styling changes
Zachary Johnson authored
176 $attributeSelect.val( propLayer.indicator );
02c7dab a few additions and symbology changes
Zachary Johnson authored
177
178 var $numClassesSelect = $('select#numClasses');
36d1619 many styling changes
Zachary Johnson authored
179 $numClassesSelect.val( propLayer.numClasses );
02c7dab a few additions and symbology changes
Zachary Johnson authored
180
181 var $classMethodSelect = $('select#classMethods');
36d1619 many styling changes
Zachary Johnson authored
182 $classMethodSelect.val( propLayer.method );
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
183
184 var $classedInput = $('input#classed');
185 $classedInput.prop( "checked", propLayer.classed );
186
187 var $shapeSelect = $('select#shapes');
188 $shapeSelect.val( propLayer.defaultSymbolizer.graphicName || 'circle' );
de4d13e Finishing up perceptual scaling for proportional symbols
Zachary Johnson authored
189
190 var $scalingSelect = $('select#scaling');
191 $scalingSelect.val( propLayer.scaling );
192
193 if ( propLayer.classed )
194 {
195 updateClassBreaksSlider();
2edb331 Adding isolines and many other changes
Zachary Johnson authored
196 updateClassSizeSlider();
de4d13e Finishing up perceptual scaling for proportional symbols
Zachary Johnson authored
197 }
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
198 };
199
200 function updateClassBreaksSlider()
201 {
202 var newBreaks = propLayer.classification.getBoundsArray();
203
204 // if the number of classes has changed, destroy and re-create component
2edb331 Adding isolines and many other changes
Zachary Johnson authored
205 if ( !classBreaksSlider || !classBreaksSlider.values || classBreaksSlider.values.length != newBreaks.length )
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
206 {
2edb331 Adding isolines and many other changes
Zachary Johnson authored
207 if ( classBreaksSlider != null )
208 {
209 classBreaksSlider.destroy();
210 }
211
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
212 classBreaksSlider = new Ext.slider.Multi( {
213 renderTo: 'classBreaks-slider',
214 hideLabel: false,
215 clickToChange: false,
216 width: legendWidth,
217
218 minValue: propLayer.distribution.minVal,
219 maxValue: propLayer.distribution.maxVal,
220 values: newBreaks,
221 listeners: {
222 dragend: function( slider, e ) {
223 onManualClassBreaksSliderChange();
224 }
225 }
226 });
227 }
228 // else loop through class breaks and set each value on the component
229 else
230 {
231 if ( classBreaksSlider.minValue != propLayer.distribution.minVal )
232 {
233 classBreaksSlider.setMinValue( propLayer.distribution.minVal );
234 }
235
236 if ( classBreaksSlider.maxValue != propLayer.distribution.maxVal )
237 {
238 classBreaksSlider.setMaxValue( propLayer.distribution.maxVal );
239 }
240
241 var i = -1;
242 while ( ++i < newBreaks.length )
243 {
244 classBreaksSlider.setValue( i, newBreaks[i] );
245 }
246 }
2edb331 Adding isolines and many other changes
Zachary Johnson authored
247 };
248
249 function updateClassSizeSlider()
250 {
251 var newSizes = propLayer.sizeInterpolation;
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
252
2edb331 Adding isolines and many other changes
Zachary Johnson authored
253 if ( !classSizeSlider || !classSizeSlider.values || classSizeSlider.values.length != newSizes.length )
254 {
255 if ( classSizeSlider != null )
256 {
257 classSizeSlider.destroy();
258 }
259
260 classSizeSlider = new Ext.slider.Multi( {
261 renderTo: 'sizing-slider',
262 hideLabel: false,
263 clickToChange: false,
264 width: legendWidth,
265
266 minValue: propLayer.minSize,
267 maxValue: propLayer.maxSize,
268 values: newSizes,
269 listeners: {
270 dragend: function( slider, e ) {
271 onManualClassSizeSliderChange();
272 }
273 }
274 });
275 }
276 else
277 {
278 if ( classSizeSlider.minValue > propLayer.minSize )
279 {
280 classSizeSlider.setMinValue( propLayer.minSize );
281 }
282
283 if ( classSizeSlider.maxValue < propLayer.maxSize )
284 {
285 classSizeSlider.setMaxValue( propLayer.maxSize );
286 }
287
288 var i = -1;
289 while ( ++i < newSizes.length )
290 {
291 classSizeSlider.setValue( i, newSizes[i] );
292 }
293 }
02c7dab a few additions and symbology changes
Zachary Johnson authored
294 };
295
296 function wireControls()
297 {
298 $( 'div.control select' ).change( function( event )
299 {
36d1619 many styling changes
Zachary Johnson authored
300 updatePropLayer();
02c7dab a few additions and symbology changes
Zachary Johnson authored
301 });
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
302
303 // classed / unclassed
304
305 $( 'input#classed' ).change( function( event )
306 {
307 updateClassed();
308 updatePropLayer();
309 });
310 };
311
312 function updateClassed()
313 {
314 var classed = $( 'input#classed' ).prop( "checked" );
315
316 $( 'div#numClasses select' ).prop( 'disabled', !classed );
317 $( 'div#classMethods select' ).prop( 'disabled', !classed );
318
938fcea Fixing and adding some tests
Zachary Johnson authored
319 if ( classBreaksSlider != null )
320 {
321 classBreaksSlider.setDisabled( !classed );
322 }
323 if ( classSizeSlider != null )
324 {
325 classSizeSlider.setDisabled( !classed );
326 }
2edb331 Adding isolines and many other changes
Zachary Johnson authored
327
328 if ( !classed && (propLayer.scaling == ol.thematic.ProportionalSymbol.Scaling.MANUAL) )
329 {
330 $('select#scaling').val( ol.thematic.ProportionalSymbol.Scaling.MATHEMATICAL );
331 }
02c7dab a few additions and symbology changes
Zachary Johnson authored
332 };
333
36d1619 many styling changes
Zachary Johnson authored
334 function updatePropLayer()
02c7dab a few additions and symbology changes
Zachary Johnson authored
335 {
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
336 // if the variable has changed and the current class. method is bounds, switch to equal interval
337 if ( propLayer.method == ol.thematic.Distribution.CLASSIFY_WITH_BOUNDS )
338 {
339 if
340 (
341 ( $('select#numClasses').val() != propLayer.numClasses )
2edb331 Adding isolines and many other changes
Zachary Johnson authored
342 ||
343 ( $('select#attributes').val() != propLayer.indicator )
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
344 )
345 {
346 $('select#classMethods').val( ol.thematic.Distribution.CLASSIFY_BY_EQUAL_INTERVALS );
347 }
348 }
349
2edb331 Adding isolines and many other changes
Zachary Johnson authored
350 if ( propLayer.scaling == ol.thematic.ProportionalSymbol.Scaling.MANUAL )
351 {
352 if ( $('select#numClasses').val() != propLayer.numClasses )
353 {
354 $('select#scaling').val( ol.thematic.ProportionalSymbol.Scaling.MATHEMATICAL );
355 }
356 }
357
02c7dab a few additions and symbology changes
Zachary Johnson authored
358 var options = {
359 indicator : $('select#attributes').val(),
360 numClasses : $('select#numClasses').val(),
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
361 method : $('select#classMethods').val(),
de4d13e Finishing up perceptual scaling for proportional symbols
Zachary Johnson authored
362 classed : $( 'input#classed' ).prop( "checked" ),
363 scaling : $( 'select#scaling' ).val()
02c7dab a few additions and symbology changes
Zachary Johnson authored
364 };
365
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
366 propLayer.defaultSymbolizer.graphicName = $('select#shapes').val();
367
36d1619 many styling changes
Zachary Johnson authored
368 propLayer.updateOptions( options );
369 propLayer.applyClassification();
02c7dab a few additions and symbology changes
Zachary Johnson authored
370 };
371
372 </script>
373 </head>
374
375
376
377 <body onload="init()">
378 <h1>OpenLayers-Symbology Proportional Symbol example</h1>
379
380 <div id="map"></div>
381
382 <div id="controls">
383 <h2>controls:</h2>
384
385 <div class="controlArea">
386 <h3>data</h3>
387
388 <div class="control">
389 <h4>attribute</h4>
390 <select id="attributes"></select>
391 </div>
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
392 </div>
393
394 <div class="controlArea">
395 <h3>classification</h3>
02c7dab a few additions and symbology changes
Zachary Johnson authored
396
397 <div class="control">
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
398 <input id="classed" type="checkbox">Classed</input>
399 </div>
400
401 <div class="control" id="numClasses">
02c7dab a few additions and symbology changes
Zachary Johnson authored
402 <h4>number of classes</h4>
403 <select id="numClasses">
404 <option value="3">3</option>
405 <option value="4">4</option>
406 <option value="5">5</option>
407 <option value="6">6</option>
408 <option value="7">7</option>
409 <option value="8">8</option>
410 <option value="9">9</option>
411 </select>
412 </div>
413
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
414 <div class="control" id="classMethods">
02c7dab a few additions and symbology changes
Zachary Johnson authored
415 <h4>classification method</h4>
416 <select id="classMethods"></select>
417 </div>
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
418
419 <div class="control" id="legend">
420 <h4>the legend is the key</h4>
2edb331 Adding isolines and many other changes
Zachary Johnson authored
421 <div class="slider" id="classBreaks-slider"></div>
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
422 </div>
02c7dab a few additions and symbology changes
Zachary Johnson authored
423
424 </div>
425
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
426 <div class="controlArea">
de4d13e Finishing up perceptual scaling for proportional symbols
Zachary Johnson authored
427 <h3>scaling / shapes</h3>
428
429 <div class="control">
430 <h4>scaling method</h4>
2edb331 Adding isolines and many other changes
Zachary Johnson authored
431 <select id="scaling"></select>
432
433 <div class="slider" id="sizing-slider"></div>
de4d13e Finishing up perceptual scaling for proportional symbols
Zachary Johnson authored
434 </div>
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
435
436 <div class="control">
de4d13e Finishing up perceptual scaling for proportional symbols
Zachary Johnson authored
437 <h4>shape</h4>
e28ce49 cartogram changes, plus a few other things
Zachary Johnson authored
438 <select id="shapes"></select>
439 </div>
440
441 </div>
02c7dab a few additions and symbology changes
Zachary Johnson authored
442 </div>
443 </body>
444
445 </html>
Something went wrong with that request. Please try again.