Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Fixing and adding some tests

  • Loading branch information...
commit 938fceafc7e137c66dff39a84d823a882511221b 1 parent 44bab31
Zachary Johnson authored
View
79 tests/cartogram.choro.html
@@ -0,0 +1,79 @@
+<html>
+ <head>
+ <title>OpenLayers-Symbology Choro-Cartogram example</title>
+
+ <!-- styles -->
+ <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
+ <link rel="stylesheet" type="text/css" href="../style/css/ol.thematic.css" />
+
+ <!-- external libraries ( ol, colorbrewer, jquery ) -->
+ <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
+ <script type="text/javascript" src="../style/js/colorbrewer.js"></script>
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
+
+ <script type="text/javascript" src="ext4/ext-all.js"></script>
+
+ <!-- local symbology code -->
+ <script type="text/javascript" src="../src/js/ol/thematic/ol.classification.js"></script>
+ <script type="text/javascript" src="../src/js/ol/thematic/ol.thematic.js"></script>
+ <script type="text/javascript" src="../src/js/ol/thematic/ol.propsymbol.js"></script>
+ <script type="text/javascript" src="../src/js/ol/thematic/ol.cartogram.js"></script>
+ <script type="text/javascript" src="../src/js/ol/thematic/ol.choropleth.js"></script>
+
+ <script type="text/javascript">
+
+ Ext.require('Ext.slider.*');
+
+ var map, thematicLayer,
+ url = '../data/json/states.geo.json',
+ indicator = 'POP2010',
+ classBreaksSlider, classSizeSlider,
+ legendWidth = 300;
+
+ function init()
+ {
+ map = new OpenLayers.Map( 'map' );
+ var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+ "http://vmap0.tiles.osgeo.org/wms/vmap0",
+ {layers: 'basic'},
+ {isBaseLayer: true} );
+ map.addLayer(layer);
+
+ createThematicLayer();
+ };
+
+ function createThematicLayer()
+ {
+ thematicLayer = new ol.thematic.Cartogram( map, {
+ url : url,
+ indicator : indicator,
+ classed : false,
+ defaultSymbolizer : { 'strokeColor' : '#ff0000', 'strokeWidth' : 1, 'strokeOpacity' : .5, 'fillOpacity' : .5, 'fillColor' : '#0099cc' },
+ requestSuccess : function( request )
+ {
+ map.zoomToExtent( this.layer.getDataExtent(), true );
+
+ colorCartogram();
+ }
+ });
+ };
+
+ function colorCartogram()
+ {
+
+ };
+
+
+ </script>
+ </head>
+
+
+
+ <body onload="init()">
+ <h1>OpenLayers-Symbology Choro-Cartogram example</h1>
+
+ <div id="map"></div>
+
+ </body>
+
+</html>
View
171 tests/cartogram.html
@@ -25,7 +25,7 @@
var map, thematicLayer,
url = '../data/json/states.geo.json',
indicator = 'POP2010',
- classBreaksSlider,
+ classBreaksSlider, classSizeSlider,
legendWidth = 300;
function init()
@@ -45,6 +45,7 @@
thematicLayer = new ol.thematic.Cartogram( map, {
url : url,
indicator : indicator,
+ classed : false,
defaultSymbolizer : { 'strokeColor' : '#ff0000', 'strokeWidth' : 1, 'strokeOpacity' : .5, 'fillOpacity' : .5, 'fillColor' : '#0099cc' },
requestSuccess : function( request )
{
@@ -57,7 +58,24 @@
},
updateSuccess : function()
{
+ if ( !thematicLayer.classed )
+ {
+ return;
+ }
+
+ var appliedBreaks = thematicLayer.classification.getBoundsArray();
+
+ if ( ( classBreaksSlider == null ) || !Array.equalsInOrder( appliedBreaks, classBreaksSlider.getValues() ) )
+ {
+ updateClassBreaksSlider();
+ }
+
+ var appliedSizes = thematicLayer.sizeInterpolation;
+ if ( ( classSizeSlider == null ) || !Array.equalsInOrder( appliedSizes, classSizeSlider.getValues() ) )
+ {
+ updateClassSizeSlider();
+ }
}
});
};
@@ -94,20 +112,14 @@
}
});
- // class breaks
+ var $scalingSelect = $('select#scaling');
- classBreaksSlider = new Ext.slider.Multi( {
- renderTo: 'classBreaks-slider',
- hideLabel: false,
- clickToChange: false,
- width: legendWidth,
-
- minValue: thematicLayer.distribution.minVal,
- maxValue: thematicLayer.distribution.maxVal,
- listeners: {
- dragend: function( slider, e ) {
- onManualClassBreaksSliderChange();
- }
+ $.each( ol.thematic.ProportionalSymbol.Scaling, function( key, value )
+ {
+ if ( typeof( value ) == 'string' )
+ {
+ option = '<option value="' + value + '">' + value + '</option>';
+ $scalingSelect.append( option );
}
});
@@ -129,6 +141,23 @@
thematicLayer.applyClassification();
};
+ function onManualClassSizeSliderChange()
+ {
+ if ( $( 'select#scaling' ).val() != ol.thematic.ProportionalSymbol.Scaling.MANUAL )
+ {
+ $( 'select#scaling' ).val( ol.thematic.ProportionalSymbol.Scaling.MANUAL );
+ }
+
+ var options = {
+ scaling : ol.thematic.ProportionalSymbol.Scaling.MANUAL,
+ sizes : classSizeSlider.getValues()
+ };
+
+ thematicLayer.updateOptions( options );
+ thematicLayer.applyClassification();
+ };
+
+
function updateControls()
{
@@ -143,21 +172,29 @@
var $classedInput = $('input#classed');
$classedInput.prop( "checked", thematicLayer.classed );
+
+ var $scalingSelect = $('select#scaling');
+ $scalingSelect.val( thematicLayer.scaling );
+
+ if ( thematicLayer.classed )
+ {
+ updateClassBreaksSlider();
+ updateClassSizeSlider();
+ }
};
function updateClassBreaksSlider()
{
- if ( classBreaksSlider == null )
- {
- return;
- }
-
var newBreaks = thematicLayer.classification.getBoundsArray();
// if the number of classes has changed, destroy and re-create component
- if ( !classBreaksSlider.values || classBreaksSlider.values.length != newBreaks.length )
+ if ( !classBreaksSlider || !classBreaksSlider.values || classBreaksSlider.values.length != newBreaks.length )
{
- classBreaksSlider.destroy();
+ if ( classBreaksSlider != null )
+ {
+ classBreaksSlider.destroy();
+ }
+
classBreaksSlider = new Ext.slider.Multi( {
renderTo: 'classBreaks-slider',
hideLabel: false,
@@ -193,7 +230,53 @@
classBreaksSlider.setValue( i, newBreaks[i] );
}
}
+ };
+
+ function updateClassSizeSlider()
+ {
+ var newSizes = thematicLayer.sizeInterpolation;
+ if ( !classSizeSlider || !classSizeSlider.values || classSizeSlider.values.length != newSizes.length )
+ {
+ if ( classSizeSlider != null )
+ {
+ classSizeSlider.destroy();
+ }
+
+ classSizeSlider = new Ext.slider.Multi( {
+ renderTo: 'sizing-slider',
+ hideLabel: false,
+ clickToChange: false,
+ width: legendWidth,
+
+ minValue: thematicLayer.minSize,
+ maxValue: thematicLayer.maxSize,
+ values: newSizes,
+ listeners: {
+ dragend: function( slider, e ) {
+ onManualClassSizeSliderChange();
+ }
+ }
+ });
+ }
+ else
+ {
+ if ( classSizeSlider.minValue > thematicLayer.minSize )
+ {
+ classSizeSlider.setMinValue( thematicLayer.minSize );
+ }
+
+ if ( classSizeSlider.maxValue < thematicLayer.maxSize )
+ {
+ classSizeSlider.setMaxValue( thematicLayer.maxSize );
+ }
+
+ var i = -1;
+ while ( ++i < newSizes.length )
+ {
+ classSizeSlider.setValue( i, newSizes[i] );
+ }
+ }
};
function wireControls()
@@ -219,7 +302,19 @@
$( 'div#numClasses select' ).prop( 'disabled', !classed );
$( 'div#classMethods select' ).prop( 'disabled', !classed );
- classBreaksSlider.setDisabled( !classed );
+ if ( classBreaksSlider != null )
+ {
+ classBreaksSlider.setDisabled( !classed );
+ }
+ if ( classSizeSlider != null )
+ {
+ classSizeSlider.setDisabled( !classed );
+ }
+
+ if ( !classed && (thematicLayer.scaling == ol.thematic.ProportionalSymbol.Scaling.MANUAL) )
+ {
+ $('select#scaling').val( ol.thematic.ProportionalSymbol.Scaling.MATHEMATICAL );
+ }
};
function updateThematicLayer()
@@ -229,25 +324,31 @@
{
if
(
- ( $('select#attributes').val() != thematicLayer.indicator )
- ||
( $('select#numClasses').val() != thematicLayer.numClasses )
+ ||
+ ( $('select#attributes').val() != thematicLayer.indicator )
)
{
$('select#classMethods').val( ol.thematic.Distribution.CLASSIFY_BY_EQUAL_INTERVALS );
}
}
+ if ( thematicLayer.scaling == ol.thematic.ProportionalSymbol.Scaling.MANUAL )
+ {
+ if ( $('select#numClasses').val() != thematicLayer.numClasses )
+ {
+ $('select#scaling').val( ol.thematic.ProportionalSymbol.Scaling.MATHEMATICAL );
+ }
+ }
var options = {
indicator : $('select#attributes').val(),
numClasses : $('select#numClasses').val(),
method : $('select#classMethods').val(),
- classed : $( 'input#classed' ).prop( "checked" )
+ classed : $( 'input#classed' ).prop( "checked" ),
+ scaling : $( 'select#scaling' ).val()
};
-
- thematicLayer.defaultSymbolizer.graphicName = $('select#shapes').val();
-
+
thematicLayer.updateOptions( options );
thematicLayer.applyClassification();
};
@@ -301,10 +402,22 @@
<div class="control" id="legend">
<h4>the legend is the key</h4>
- <div id="classBreaks-slider"></div>
+ <div class="slider" id="classBreaks-slider"></div>
</div>
</div>
+
+ <div class="controlArea">
+ <h3>scaling / shapes</h3>
+
+ <div class="control">
+ <h4>scaling method</h4>
+ <select id="scaling"></select>
+
+ <div class="slider" id="sizing-slider"></div>
+ </div>
+
+ </div>
</div>
</body>
View
118 tests/cartogram.projected.html
@@ -2,7 +2,6 @@
<head>
<title>OpenLayers-Symbology Noncontiguous Cartogram Projected example</title>
-
<!-- styles -->
<link rel="stylesheet" type="text/css" href="../style/css/ol.thematic.css" />
@@ -12,7 +11,9 @@
<script type="text/javascript" src="../lib/proj4js-combined.js"></script>
<!-- local symbology code -->
+ <script type="text/javascript" src="../src/js/ol/thematic/ol.classification.js"></script>
<script type="text/javascript" src="../src/js/ol/thematic/ol.thematic.js"></script>
+ <script type="text/javascript" src="../src/js/ol/thematic/ol.propsymbol.js"></script>
<script type="text/javascript" src="../src/js/ol/thematic/ol.cartogram.js"></script>
<script type="text/javascript">
@@ -44,88 +45,16 @@
{
cartoLayer = new ol.thematic.Cartogram( map, {
'url' : url,
+ 'indicator' : indicator,
'requestSuccess' : function( request )
{
- this.updateOptions( {
- 'indicator' : indicator
- });
- this.applyClassification();
-
map.zoomToExtent( this.layer.getDataExtent(), true );
-
- populateControls();
- updateControls();
- wireControls();
},
- defaultSymbolizer : { 'strokeColor' : '#ffffff', 'strokeWidth' : 1, 'fillOpacity' : 1, 'fillColor' : 0 }
- });
- };
-
-
- function populateControls()
- {
- // attributes
- // we'll just base this off the first feature
- var $attributeSelect = $('select#attributes');
- var feature = cartoLayer.layer.features[0];
-
- var attributes = feature.attributes,
- option;
-
- $.each( attributes, function( key, value )
- {
- // see if value is a number
- if ( !isNaN( value ) )
- {
- option = '<option value="' + key + '">' + key + '</option>';
- $attributeSelect.append( option );
- }
- });
-
- };
-
- function updateControls()
- {
- var $attributeSelect = $('select#attributes');
- $attributeSelect.val( cartoLayer.indicator );
-
- var $classedInput = $('input#classed');
- $classedInput.prop( "checked", cartoLayer.classed );
-
- updateClassed();
- };
-
- function wireControls()
- {
- $( 'div.control select' ).change( function( event )
- {
- updateCartogramLayer();
- });
-
- $( 'input#classed' ).change( function( event )
- {
- updateClassed();
+ defaultSymbolizer : { 'strokeColor' : '#000000', 'strokeWidth' : 2, 'fillOpacity' : 1, 'fillColor' : '#dddddd' }
});
};
- function updateClassed()
- {
- var classed = $( 'input#classed' ).prop( "checked" );
-
- $( 'div#numClasses select' ).prop( 'disabled', !classed );
- $( 'div#classMethods select' ).prop( 'disabled', !classed );
- };
-
- function updateCartogramLayer()
- {
- var options = {
- indicator : $('select#attributes').val()
- };
-
- cartoLayer.updateOptions( options );
- cartoLayer.applyClassification();
- };
</script>
@@ -138,45 +67,6 @@
<div id="map"></div>
- <div id="controls">
- <h2>controls:</h2>
-
- <div class="controlArea">
- <h3>data</h3>
-
- <div class="control">
- <h4>attribute</h4>
- <select id="attributes"></select>
- </div>
- </div>
-
- <div class="controlArea">
- <h3>classification</h3>
-
- <div class="control">
- <input id="classed" type="checkbox">Classed</input>
- </div>
-
- <div class="control" id="numClasses">
- <h4>number of classes</h4>
- <select id="numClasses">
- <option value="3">3</option>
- <option value="4">4</option>
- <option value="5">5</option>
- <option value="6">6</option>
- <option value="7">7</option>
- <option value="8">8</option>
- <option value="9">9</option>
- </select>
- </div>
-
- <div class="control" id="classMethods">
- <h4>classification method</h4>
- <select id="classMethods"></select>
- </div>
-
- </div>
- </div>
</body>
</html>
View
171 tests/coloredIsolines.html
@@ -0,0 +1,171 @@
+<html>
+ <head>
+ <title>OpenLayers-Symbology Colored Isoline example</title>
+
+ <!-- styles -->
+ <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
+ <link rel="stylesheet" type="text/css" href="../style/css/ol.thematic.css" />
+
+ <!-- external libraries ( ol, colorbrewer, jquery, delaunay ) -->
+ <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
+ <script type="text/javascript" src="../style/js/colorbrewer.js"></script>
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
+ <script type="text/javascript" src="ext4/ext-all.js"></script>
+
+ <script type="text/javascript" src="../lib/delaunay.js"></script>
+
+ <!-- local symbology code -->
+ <script type="text/javascript" src="../src/js/ol/thematic/ol.classification.js"></script>
+ <script type="text/javascript" src="../src/js/ol/thematic/ol.thematic.js"></script>
+ <script type="text/javascript" src="../src/js/ol/thematic/ol.isoline.js"></script>
+ <script type="text/javascript" src="../src/js/ol/thematic/ol.choropleth.js"></script>
+
+ <script type="text/javascript">
+
+ Ext.require('Ext.slider.*');
+
+ var map, thematicLayer,
+ url = '../data/json/city.climate.json',
+ indicator = 'julyavetemp',
+ legendWidth = 300,
+ intervalSlider;
+
+ function init()
+ {
+ map = new OpenLayers.Map( 'map' );
+ var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+ "http://vmap0.tiles.osgeo.org/wms/vmap0",
+ {layers: 'basic'},
+ {isBaseLayer: true} );
+ map.addLayer(layer);
+
+ createThematicLayer();
+ };
+
+ function createThematicLayer()
+ {
+ thematicLayer = new ol.thematic.Isoline( map, {
+ url : url,
+ indicator : indicator,
+ interval : 2,
+ defaultSymbolizer : { 'pointRadius' : 3, 'fillOpacity' : 1, 'fillColor' : '#0099cc', 'strokeWidth' : 1, 'strokeColor' : '#0099cc' },
+
+ requestSuccess : function( request )
+ {
+ map.zoomToExtent( this.layer.getDataExtent(), true );
+
+ populateControls();
+ updateControls();
+ wireControls();
+
+ colorIsolines();
+ },
+
+ updateSuccess : function()
+ {
+ colorIsolines();
+ }
+ });
+ };
+
+ function colorIsolines()
+ {
+ var choroLayer = new ol.thematic.Choropleth( map, {
+ indicator : 'isolineValue',
+ layer : thematicLayer.layer,
+ colorStrokes : true,
+ colorScheme : 'YlOrRd'
+ });
+ };
+
+ function populateControls()
+ {
+ // attributes
+ // we'll just base this off the first feature
+ var $attributeSelect = $('select#attributes');
+ var feature = thematicLayer.features[0];
+
+ var attributes = feature.attributes,
+ option;
+
+ $.each( attributes, function( key, value )
+ {
+ // see if value is a number
+ if ( !isNaN( value ) )
+ {
+ option = '<option value="' + key + '">' + key + '</option>';
+ $attributeSelect.append( option );
+ }
+ });
+
+ intervalSlider = new Ext.slider.Multi( {
+ renderTo: 'interval-slider',
+ hideLabel: false,
+ clickToChange: false,
+ width: legendWidth,
+ minValue: 1,
+ maxValue: 20,
+ value: thematicLayer.interval,
+ listeners: {
+ change: function( slider, e ) {
+ updateThematicLayer();
+ }
+ }
+ });
+ };
+
+ function updateControls()
+ {
+ var $attributeSelect = $('select#attributes');
+ $attributeSelect.val( thematicLayer.indicator );
+ };
+
+ function wireControls()
+ {
+ $( 'div.control select' ).change( function( event )
+ {
+ updateThematicLayer();
+ });
+ };
+
+ function updateThematicLayer()
+ {
+ var options = {
+ indicator : $('select#attributes').val(),
+ interval : intervalSlider.getValue()[0]
+ };
+
+ thematicLayer.updateOptions( options );
+ thematicLayer.applyClassification();
+ };
+
+ </script>
+
+ </head>
+
+ <body onload="init()">
+ <h1>OpenLayers-Symbology Colored Isoline example</h1>
+
+ <div id="map"></div>
+
+ <div id="controls">
+ <h2>controls:</h2>
+
+ <div class="controlArea">
+ <h3>data</h3>
+
+ <div class="control">
+ <h4>attribute</h4>
+ <select id="attributes"></select>
+ </div>
+ </div>
+ <div class="controlArea">
+ <div class="control">
+ <h4>isoline interval</h4>
+ <div class="slider" id="interval-slider"></div>
+ </div>
+ </div>
+ </div>
+
+ </body>
+</html>
View
18 tests/propSymbol.html
@@ -46,10 +46,8 @@
url : url,
indicator : indicator,
- /* TODO get the multi-slider to reflect class breaks on instantiation */
classed : true,
- /* TODO check on this */
scaling : 'mathematical',
defaultSymbolizer : { 'strokeColor' : '#ff0000', 'strokeWidth' : 1, 'strokeOpacity' : .5, 'fillOpacity' : .5, 'fillColor' : '#0099cc',
@@ -65,21 +63,21 @@
},
updateSuccess : function()
{
- if ( !classBreaksSlider || !propLayer.classed )
+ if ( !propLayer.classed )
{
return;
}
var appliedBreaks = propLayer.classification.getBoundsArray();
- if ( !Array.equalsInOrder( appliedBreaks, classBreaksSlider.getValues() ) )
+ if ( ( classBreaksSlider == null ) || !Array.equalsInOrder( appliedBreaks, classBreaksSlider.getValues() ) )
{
updateClassBreaksSlider();
}
var appliedSizes = propLayer.sizeInterpolation;
- if ( !Array.equalsInOrder( appliedSizes, classSizeSlider.getValues() ) )
+ if ( ( classSizeSlider == null ) || !Array.equalsInOrder( appliedSizes, classSizeSlider.getValues() ) )
{
updateClassSizeSlider();
}
@@ -322,8 +320,14 @@
$( 'div#numClasses select' ).prop( 'disabled', !classed );
$( 'div#classMethods select' ).prop( 'disabled', !classed );
- classBreaksSlider.setDisabled( !classed );
- classSizeSlider.setDisabled( !classed );
+ if ( classBreaksSlider != null )
+ {
+ classBreaksSlider.setDisabled( !classed );
+ }
+ if ( classSizeSlider != null )
+ {
+ classSizeSlider.setDisabled( !classed );
+ }
if ( !classed && (propLayer.scaling == ol.thematic.ProportionalSymbol.Scaling.MANUAL) )
{
Please sign in to comment.
Something went wrong with that request. Please try again.