Examples with Slider org.cleanlogic.showcase.client.examples.slider.Slider used on opensource projects

Example 1 with Slider

use of org.cleanlogic.showcase.client.examples.slider.Slider in project gwt-cs by iSergio.

the class ImageryLayersSplit method buildPanel.

@Override
public void buildPanel() {
    ViewerOptions viewerOptions = new ViewerOptions();
    viewerOptions.imageryProvider = ArcGisMapServerImageryProvider.create("https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
    viewerOptions.baseLayerPicker = false;
    final ViewerPanel csVPanel = new ViewerPanel(viewerOptions);
    ImageryLayerCollection layers = csVPanel.getViewer().imageryLayers();
    TileMapServiceImageryProviderOptions tileMapServiceImageryProviderOptions = new TileMapServiceImageryProviderOptions();
    tileMapServiceImageryProviderOptions.url = "https://cesiumjs.org/blackmarble";
    tileMapServiceImageryProviderOptions.credit = Credit.create("Black Marble imagery courtesy NASA Earth Observatory");
    tileMapServiceImageryProviderOptions.flipXY = true;
    ImageryLayer blackMarble = layers.addImageryProvider(Cesium.createTileMapServiceImageryProvider(tileMapServiceImageryProviderOptions));
    blackMarble.splitDirection = ImagerySplitDirection.LEFT();
    csVPanel.getViewer().scene().imagerySplitPosition = 0.5;
    Slider slider = new Slider("Slider", 0, 100, 50);
    slider.setStep(1);
    slider.setWidth("100%");
    slider.addListener(new SliderListener() {

        @Override
        public void onStart(SliderEvent e) {
        // 
        }

        @Override
        public boolean onSlide(SliderEvent e) {
            Slider source = e.getSource();
            double value = source.getValue() / 100.;
            csVPanel.getViewer().scene().imagerySplitPosition = value;
            return true;
        }

        @Override
        public void onChange(SliderEvent e) {
        // 
        }

        @Override
        public void onStop(SliderEvent e) {
        // 
        }
    });
    AbsolutePanel aPanel = new AbsolutePanel();
    aPanel.add(csVPanel);
    aPanel.add(slider, 0, 5);
    contentPanel.add(aPanel);
    contentPanel.add(new HTML("<p>Use the split property to only show layers on one side of a slider.</p>"));
    initWidget(contentPanel);
}

Example 2 with Slider

use of org.cleanlogic.showcase.client.examples.slider.Slider in project gwt-cs by iSergio.

the class Models3DColoring method buildPanel.

@Override
public void buildPanel() {
    ViewerOptions csViewerOptions = new ViewerOptions();
    csViewerOptions.infoBox = false;
    csViewerOptions.selectionIndicator = false;
    csViewerOptions.shadows = false;
    csVPanel = new ViewerPanel(csViewerOptions);
    ModelGraphicsOptions modelGraphicsOptions = new ModelGraphicsOptions();
    modelGraphicsOptions.uri = new ConstantProperty<>(GWT.getModuleBaseURL() + "SampleData/models/CesiumAir/Cesium_Air.glb");
    modelGraphicsOptions.minimumPixelSize = new ConstantProperty<>(128);
    modelGraphicsOptions.maximumScale = new ConstantProperty<>(20000);
    modelGraphicsOptions.color = new ConstantProperty<>(getColor("red", alpha));
    modelGraphicsOptions.colorBlendMode = new ConstantProperty<>(ColorBlendMode.HIGHLIGHT());
    modelGraphicsOptions.colorBlendAmount = new ConstantProperty<>(colorBlendAmount);
    modelGraphicsOptions.silhouetteColor = new ConstantProperty<>(getColor("red", alpha));
    modelGraphicsOptions.silhouetteSize = new ConstantProperty<>(silhouetteSize);
    ModelGraphics modelGraphics = new ModelGraphics(modelGraphicsOptions);
    Cartesian3 position = Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000.0);
    double heading = Math.toRadians(135);
    double pitch = 0;
    double roll = 0;
    org.cesiumjs.cs.core.HeadingPitchRoll hpr = new org.cesiumjs.cs.core.HeadingPitchRoll(heading, pitch, roll);
    Quaternion orientation = Transforms.headingPitchRollQuaternion(position, hpr);
    EntityOptions entityOptions = new EntityOptions();
    entityOptions.name = GWT.getModuleBaseURL() + "SampleData/models/CesiumAir/Cesium_Air.glb";
    entityOptions.position = new ConstantPositionProperty(position);
    entityOptions.orientation = new ConstantProperty<>(orientation);
    entityOptions.model = modelGraphics;
    csVPanel.getViewer().trackedEntity = csVPanel.getViewer().entities().add(entityOptions);
    ListBox modeLBox = new ListBox();
    modeLBox.addItem("Hightlight", "0");
    modeLBox.addItem("Replace", "1");
    modeLBox.addItem("Mix", "2");
    modeLBox.addChangeHandler(new ChangeHandler() {

        @Override
        public void onChange(ChangeEvent event) {
            ListBox source = (ListBox) event.getSource();
            mixSlider.setVisible(false);
            mixTBox.setVisible(false);
            if (source.getSelectedValue().equalsIgnoreCase("0")) {
                colorBlendMode = ColorBlendMode.HIGHLIGHT();
            } else if (source.getSelectedValue().equalsIgnoreCase("1")) {
                colorBlendMode = ColorBlendMode.REPLACE();
            } else if (source.getSelectedValue().equalsIgnoreCase("2")) {
                colorBlendMode = ColorBlendMode.MIX();
                mixSlider.setVisible(true);
                mixTBox.setVisible(true);
            }
            csVPanel.getViewer().trackedEntity.model.colorBlendMode = new ConstantProperty<>(colorBlendMode);
        }
    });
    ListBox colorLBox = new ListBox();
    colorLBox.addItem("White", "White");
    colorLBox.addItem("Red", "Red");
    colorLBox.addItem("Green", "Green");
    colorLBox.addItem("Blue", "Blue");
    colorLBox.addItem("Yellow", "Yellow");
    colorLBox.addItem("Gray", "Gray");
    colorLBox.setSelectedIndex(1);
    colorLBox.addChangeHandler(new ChangeHandler() {

        @Override
        public void onChange(ChangeEvent event) {
            ListBox source = (ListBox) event.getSource();
            colorStr = source.getSelectedValue();
            csVPanel.getViewer().trackedEntity.model.color = new ConstantProperty<>(getColor(source.getSelectedValue(), alpha));
        }
    });
    alphaSlider = new Slider("Alpha", 0, 100, 100);
    alphaSlider.setWidth("100px");
    alphaSlider.setStep(1);
    alphaSlider.addListener(new MSliderListener());
    alphaTBox = new TextBox();
    alphaTBox.setSize("30px", "12px");
    alphaTBox.setValue("" + 1);
    alphaTBox.addChangeHandler(new MChangeHandler());
    mixSlider = new Slider("Mix", 0, 100, 50);
    mixSlider.setStep(1);
    mixSlider.setVisible(false);
    mixSlider.addListener(new MSliderListener());
    mixTBox = new TextBox();
    mixTBox.setSize("30px", "12px");
    mixTBox.setValue("0.5");
    mixTBox.setVisible(false);
    mixTBox.addChangeHandler(new MChangeHandler());
    ListBox silhouetteColorLBox = new ListBox();
    silhouetteColorLBox.addItem("Red", "Red");
    silhouetteColorLBox.addItem("Green", "Green");
    silhouetteColorLBox.addItem("Blue", "Blue");
    silhouetteColorLBox.addItem("Yellow", "Yellow");
    silhouetteColorLBox.addItem("Gray", "Gray");
    silhouetteColorLBox.addChangeHandler(new ChangeHandler() {

        @Override
        public void onChange(ChangeEvent event) {
            ListBox source = (ListBox) event.getSource();
            silhouetteColorStr = source.getSelectedValue();
            silhouetteColor = getColor(source.getSelectedValue(), alpha);
            csVPanel.getViewer().trackedEntity.model.silhouetteColor = new ConstantProperty<>(getColor(silhouetteColorStr, silhouetteAlpha));
        }
    });
    silhouetteAlphaSlider = new Slider("SilhouetteAlpha", 0, 100, 100);
    silhouetteAlphaSlider.setStep(1);
    silhouetteAlphaSlider.addListener(new MSliderListener());
    silhouetteAlphaTBox = new TextBox();
    silhouetteAlphaTBox.setSize("30px", "12px");
    silhouetteAlphaTBox.setValue("" + 1);
    silhouetteAlphaTBox.addChangeHandler(new MChangeHandler());
    silhouetteSizeSlider = new Slider("SizeAlpha", 0, 1000, 20);
    silhouetteSizeSlider.setStep(1);
    silhouetteSizeSlider.addListener(new MSliderListener());
    silhouetteSizeTBox = new TextBox();
    silhouetteSizeTBox.setSize("30px", "12px");
    silhouetteSizeTBox.setValue("" + 2);
    silhouetteSizeTBox.addChangeHandler(new MChangeHandler());
    final ListBox modelsLBox = new ListBox();
    modelsLBox.addItem("Aircraft", "0");
    modelsLBox.addItem("Ground vehicle", "1");
    modelsLBox.addItem("Hot Air Balloon", "2");
    modelsLBox.addItem("Milk truck", "3");
    modelsLBox.addItem("Skinned character", "4");
    modelsLBox.addChangeHandler(new ChangeHandler() {

        @Override
        public void onChange(ChangeEvent changeEvent) {
            csVPanel.getViewer().entities().removeAll();
            switch(modelsLBox.getSelectedValue()) {
                case "0":
                    createModel(GWT.getModuleBaseURL() + "SampleData/models/CesiumAir/Cesium_Air.glb", 5000.0);
                    break;
                case "1":
                    createModel(GWT.getModuleBaseURL() + "SampleData/models/CesiumGround/Cesium_Ground.glb", 0);
                    break;
                case "2":
                    createModel(GWT.getModuleBaseURL() + "SampleData/models/CesiumBalloon/CesiumBalloon.glb", 1000.0);
                    break;
                case "3":
                    createModel(GWT.getModuleBaseURL() + "SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb", 0);
                    break;
                case "4":
                    createModel(GWT.getModuleBaseURL() + "SampleData/models/CesiumMan/Cesium_Man.glb", 0);
                    break;
                default:
                    break;
            }
        }
    });
    CheckBox shadowsCBox = new CheckBox("Shadows");
    shadowsCBox.getElement().getStyle().setColor("white");
    shadowsCBox.setWidth("100px");
    shadowsCBox.setValue(true);
    shadowsCBox.addValueChangeHandler(new ValueChangeHandler<Boolean>() {

        @Override
        public void onValueChange(ValueChangeEvent<Boolean> event) {
            csVPanel.getViewer().shadows = event.getValue();
        }
    });
    FlexTable flexTable = new FlexTable();
    flexTable.setHTML(1, 0, "<font color=\"white\">Model Color</font>");
    flexTable.setHTML(2, 0, "<font color=\"white\">Mode</font>");
    flexTable.setWidget(2, 1, modeLBox);
    flexTable.setHTML(3, 0, "<font color=\"white\">Color</font>");
    flexTable.setWidget(3, 1, colorLBox);
    flexTable.setHTML(4, 0, "<font color=\"white\">Alpha</font>");
    flexTable.setWidget(4, 1, alphaSlider);
    flexTable.setWidget(4, 2, alphaTBox);
    flexTable.setHTML(5, 0, "<font color=\"white\">Mix</font>");
    flexTable.setWidget(5, 1, mixSlider);
    flexTable.setWidget(5, 2, mixTBox);
    flexTable.setHTML(6, 0, "<font color=\"white\">Model Silhouette</font>");
    flexTable.setHTML(7, 0, "<font color=\"white\">Color</font>");
    flexTable.setWidget(7, 1, silhouetteColorLBox);
    flexTable.setHTML(8, 0, "<font color=\"white\">Alpha</font>");
    flexTable.setWidget(8, 1, silhouetteAlphaSlider);
    flexTable.setWidget(8, 2, silhouetteAlphaTBox);
    flexTable.setHTML(9, 0, "<font color=\"white\">Size</font>");
    flexTable.setWidget(9, 1, silhouetteSizeSlider);
    flexTable.setWidget(9, 2, silhouetteSizeTBox);
    flexTable.setWidget(10, 0, modelsLBox);
    flexTable.setWidget(10, 1, shadowsCBox);
    AbsolutePanel aPanel = new AbsolutePanel();
    aPanel.add(csVPanel);
    aPanel.add(flexTable, 20, 20);
    contentPanel.add(new HTML("<p>Create 3D coloring models.</p>"));
    contentPanel.add(aPanel);
    initWidget(contentPanel);
}

Example 3 with Slider

use of org.cleanlogic.showcase.client.examples.slider.Slider in project gwt-cs by iSergio.

the class ImageryAdjustment method buildPanel.

@Override
public void buildPanel() {
    csVPanel = new ViewerPanel();
    csVPanel.getViewer().imageryLayers().layerAdded.addEventListener(new UpdateViewModel());
    csVPanel.getViewer().imageryLayers().layerRemoved.addEventListener(new UpdateViewModel());
    csVPanel.getViewer().imageryLayers().layerMoved.addEventListener(new UpdateViewModel());
    brightnessSlider = new Slider("brightness", 0, 300, 100);
    brightnessSlider.setStep(1);
    brightnessSlider.setWidth("150px");
    brightnessSlider.addListener(new MSliderListener());
    brightnessTBox = new TextBox();
    brightnessTBox.addChangeHandler(new MChangeHandler());
    brightnessTBox.setText("" + 1);
    brightnessTBox.setSize("30px", "12px");
    HorizontalPanel brightnessHPanel = new HorizontalPanel();
    brightnessHPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
    brightnessHPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
    brightnessHPanel.setSpacing(10);
    brightnessHPanel.add(brightnessSlider);
    brightnessHPanel.add(brightnessTBox);
    contrastSlider = new Slider("contrast", 0, 300, 100);
    contrastSlider.setStep(1);
    contrastSlider.setWidth("150px");
    contrastSlider.addListener(new MSliderListener());
    contrastTBox = new TextBox();
    contrastTBox.addChangeHandler(new MChangeHandler());
    contrastTBox.setText("" + 1);
    contrastTBox.setSize("30px", "12px");
    HorizontalPanel contrastHPanel = new HorizontalPanel();
    contrastHPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
    contrastHPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
    contrastHPanel.setSpacing(10);
    contrastHPanel.add(contrastSlider);
    contrastHPanel.add(contrastTBox);
    hueSlider = new Slider("hue", 0, 300, 0);
    hueSlider.setStep(1);
    hueSlider.setWidth("150px");
    hueSlider.addListener(new MSliderListener());
    hueTBox = new TextBox();
    hueTBox.addChangeHandler(new MChangeHandler());
    hueTBox.setText("" + 0);
    hueTBox.setSize("30px", "12px");
    HorizontalPanel hueHPanel = new HorizontalPanel();
    hueHPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
    hueHPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
    hueHPanel.setSpacing(10);
    hueHPanel.add(hueSlider);
    hueHPanel.add(hueTBox);
    saturationSlider = new Slider("saturation", 0, 300, 100);
    saturationSlider.setStep(1);
    saturationSlider.setWidth("150px");
    saturationSlider.addListener(new MSliderListener());
    saturationTBox = new TextBox();
    saturationTBox.addChangeHandler(new MChangeHandler());
    saturationTBox.setText("" + 1);
    saturationTBox.setSize("30px", "12px");
    HorizontalPanel saturationHPanel = new HorizontalPanel();
    saturationHPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
    saturationHPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
    saturationHPanel.setSpacing(10);
    saturationHPanel.add(saturationSlider);
    saturationHPanel.add(saturationTBox);
    gammaSlider = new Slider("gamma", 0, 300, 100);
    gammaSlider.setStep(1);
    gammaSlider.setWidth("150px");
    gammaSlider.addListener(new MSliderListener());
    gammaTBox = new TextBox();
    gammaTBox.addChangeHandler(new MChangeHandler());
    gammaTBox.setText("" + 1);
    gammaTBox.setSize("30px", "12px");
    HorizontalPanel gammaHPanel = new HorizontalPanel();
    gammaHPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
    gammaHPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
    gammaHPanel.setSpacing(10);
    gammaHPanel.add(gammaSlider);
    gammaHPanel.add(gammaTBox);
    FlexTable flexTable = new FlexTable();
    flexTable.setCellSpacing(1);
    flexTable.setCellPadding(1);
    flexTable.setHTML(1, 0, "<font color=\"white\">Brightness</font>");
    flexTable.setWidget(1, 1, brightnessHPanel);
    flexTable.setHTML(2, 0, "<font color=\"white\">Contrast</font>");
    flexTable.setWidget(2, 1, contrastHPanel);
    flexTable.setHTML(3, 0, "<font color=\"white\">Hue</font>");
    flexTable.setWidget(3, 1, hueHPanel);
    flexTable.setHTML(4, 0, "<font color=\"white\">Saturation</font>");
    flexTable.setWidget(4, 1, saturationHPanel);
    flexTable.setHTML(5, 0, "<font color=\"white\">Gamma</font>");
    flexTable.setWidget(5, 1, gammaHPanel);
    AbsolutePanel aPanel = new AbsolutePanel();
    aPanel.add(csVPanel);
    aPanel.add(flexTable, 20, 20);
    contentPanel.add(new HTML("<p>Adjust brightness, contrast, hue, saturation, and gamma of an imagery layer.</p>"));
    contentPanel.add(aPanel);
    initWidget(contentPanel);
}

Example 4 with Slider

use of org.cleanlogic.showcase.client.examples.slider.Slider in project gwt-cs by iSergio.

the class ImageryLayersManipulation method buildPanel.

@Override
public void buildPanel() {
    ViewerOptions viewerOptions = new ViewerOptions();
    viewerOptions.baseLayerPicker = false;
    ViewerPanel csVPanel = new ViewerPanel(viewerOptions);
    imageryLayers = csVPanel.getViewer().imageryLayers();
    setupLayers();
    updateLayerList();
    _callback.onSuccess(null);
    HorizontalPanel baseLayersHPanel = new HorizontalPanel();
    baseLayersHPanel.setSpacing(5);
    baseLayersHPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
    baseLayersHPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
    final ListBox baseLayersLBox = new ListBox();
    baseLayersHPanel.add(baseLayersLBox);
    Slider baseLayersSlider = new Slider("baseLayersAlpha", 0, 100, 100);
    baseLayersSlider.setWidth("200px");
    baseLayersSlider.addListener(new MSliderListener());
    baseLayersHPanel.add(baseLayersSlider);
    baseLayersLBox.addChangeHandler(new ChangeHandler() {

        @Override
        public void onChange(ChangeEvent changeEvent) {
            ListBox source = (ListBox) changeEvent.getSource();
            ImageryLayer baseLayer = baseLayers.get(source.getSelectedValue());
            int activeLayerIndex = 0;
            int numLayers = layers.size();
            for (int i = 0; i < numLayers; ++i) {
                if (baseLayers.containsValue(layers.get(i))) {
                    activeLayerIndex = i;
                }
            }
            ImageryLayer activeLayer = layers.get(activeLayerIndex);
            float alpha = activeLayer.alpha;
            boolean show = activeLayer.show;
            imageryLayers.remove(activeLayer, false);
            imageryLayers.add(baseLayer, numLayers - activeLayerIndex - 1);
            baseLayer.show = show;
            baseLayer.alpha = alpha;
            updateLayerList();
            selectedLayer = baseLayer;
        }
    });
    Callback<Void, Void> cesiumCreated = new Callback<Void, Void>() {

        @Override
        public void onFailure(Void aVoid) {
        // 
        }

        @Override
        public void onSuccess(Void aVoid) {
            for (Map.Entry<String, ImageryLayer> entry : baseLayers.entrySet()) {
                baseLayersLBox.addItem(entry.getKey(), entry.getKey());
            }
        }
    };
    addCallback(cesiumCreated);
    contentPanel.add(new HTML("<p>Layer imagery from multiple sources, including WMS servers, Bing Maps, ArcGIS Online, OpenStreetMaps, and more, and adjust the alpha of each independently.</p>"));
    contentPanel.add(baseLayersHPanel);
    contentPanel.add(csVPanel);
    initWidget(contentPanel);
}

Example 5 with Slider

use of org.cleanlogic.showcase.client.examples.slider.Slider in project gwt-cs by iSergio.

the class Clustering method buildPanel.

@Override
public void buildPanel() {
    csVPanel = new ViewerPanel();
    KmlDataSourceOptions kmlDataSourceOptions = new KmlDataSourceOptions();
    kmlDataSourceOptions.camera = csVPanel.getViewer().camera;
    kmlDataSourceOptions.canvas = csVPanel.getViewer().canvas();
    Promise<KmlDataSource, Void> dataSourcePromise = csVPanel.getViewer().dataSources().add(KmlDataSource.load(GWT.getModuleBaseURL() + "SampleData/kml/facilities/facilities.kml", kmlDataSourceOptions));
    dataSourcePromise.then(new Fulfill<KmlDataSource>() {

        @Override
        public void onFulfilled(KmlDataSource dataSource) {
            int pixelRange = 25;
            int minimumClusterSize = 3;
            boolean enabled = true;
            dataSource.clustering.enabled = enabled;
            dataSource.clustering.pixelRange = pixelRange;
            dataSource.clustering.minimumClusterSize = minimumClusterSize;
            PinBuilder pinBuilder = new PinBuilder();
            pin50 = pinBuilder.fromText("50+", Color.RED(), 48).toDataUrl();
            pin40 = pinBuilder.fromText("40+", Color.ORANGE(), 48).toDataUrl();
            pin30 = pinBuilder.fromText("30+", Color.YELLOW(), 48).toDataUrl();
            pin20 = pinBuilder.fromText("20+", Color.GREEN(), 48).toDataUrl();
            pin10 = pinBuilder.fromText("10+", Color.BLUE(), 48).toDataUrl();
            singleDigitPins = new String[8];
            for (int i = 0; i < singleDigitPins.length; ++i) {
                singleDigitPins[i] = pinBuilder.fromText("" + (i + 2), Color.VIOLET(), 48).toDataUrl();
            }
            // start with custom style
            customStyle(dataSource);
            _dataSource = dataSource;
        }
    });
    pixelRangeSlider = new Slider("pixelRange", 1, 200, 15);
    pixelRangeSlider.setStep(1);
    pixelRangeSlider.setWidth("150px");
    pixelRangeSlider.addListener(new MSliderListener());
    pixelRangeTBox = new TextBox();
    pixelRangeTBox.addChangeHandler(new MChangeHandler());
    pixelRangeTBox.setText("" + 15);
    pixelRangeTBox.setSize("30px", "12px");
    HorizontalPanel pixelRangeHPanel = new HorizontalPanel();
    pixelRangeHPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
    pixelRangeHPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
    pixelRangeHPanel.setSpacing(10);
    pixelRangeHPanel.add(pixelRangeSlider);
    pixelRangeHPanel.add(pixelRangeTBox);
    minimumClusterSizeSlider = new Slider("minimumClusterSize", 1, 20, 3);
    minimumClusterSizeSlider.setStep(1);
    minimumClusterSizeSlider.setWidth("150px");
    minimumClusterSizeSlider.addListener(new MSliderListener());
    minimumClusterSizeTBox = new TextBox();
    pixelRangeTBox.addChangeHandler(new MChangeHandler());
    minimumClusterSizeTBox.setText("" + 3);
    minimumClusterSizeTBox.setSize("30px", "12px");
    HorizontalPanel minimumClusterSizeHPanel = new HorizontalPanel();
    minimumClusterSizeHPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
    minimumClusterSizeHPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
    minimumClusterSizeHPanel.setSpacing(10);
    minimumClusterSizeHPanel.add(minimumClusterSizeSlider);
    minimumClusterSizeHPanel.add(minimumClusterSizeTBox);
    CheckBox enabledCBox = new CheckBox();
    enabledCBox.setValue(true);
    enabledCBox.addValueChangeHandler(new ValueChangeHandler<Boolean>() {

        @Override
        public void onValueChange(ValueChangeEvent<Boolean> valueChangeEvent) {
            _dataSource.clustering.enabled = valueChangeEvent.getValue();
        }
    });
    CheckBox customStyleCBox = new CheckBox();
    customStyleCBox.setValue(true);
    customStyleCBox.addValueChangeHandler(new ValueChangeHandler<Boolean>() {

        @Override
        public void onValueChange(ValueChangeEvent<Boolean> valueChangeEvent) {
            customStyle(_dataSource);
        }
    });
    FlexTable flexTable = new FlexTable();
    flexTable.setHTML(1, 0, "<font color=\"white\">Pixel Range</font>");
    flexTable.setWidget(1, 1, pixelRangeHPanel);
    flexTable.setHTML(2, 0, "<font color=\"white\">Minimum Cluster Size</font>");
    flexTable.setWidget(2, 1, minimumClusterSizeHPanel);
    flexTable.setHTML(3, 0, "<font color=\"white\">Enabled</font>");
    flexTable.setWidget(3, 1, enabledCBox);
    flexTable.setHTML(4, 0, "<font color=\"white\">Custom Style</font>");
    flexTable.setWidget(4, 1, customStyleCBox);
    AbsolutePanel aPanel = new AbsolutePanel();
    aPanel.add(csVPanel);
    aPanel.add(flexTable, 20, 20);
    contentPanel.add(new HTML("<p>Cluster labels, billboards and points.</p>"));
    contentPanel.add(aPanel);
    initWidget(contentPanel);
}