Added an XYZ tile source and added a visibility model to Layer.

Also added an example of the XYZ tile source on the MarkerPage with a
layer selector. The map now calls Layer.detach() on all of its layers
when it is itself detached.

openlayers3-parent/openlayers3-examples/pom.xml

@@ -45,6 +45,11 @@
             <artifactId>wicketstuff-annotation</artifactId>
             <version>${project.version}</version>
         </dependency>
+        <dependency>
+            <groupId>de.agilecoders.wicket</groupId>
+            <artifactId>wicket-bootstrap-extensions</artifactId>
+            <version>0.10.0</version>
+        </dependency>
 
         <!-- LOGGING DEPENDENCIES - LOG4J -->
         <dependency>

openlayers3-parent/openlayers3-examples/src/main/java/org/wicketstuff/openlayers3/examples/MarkerPage.html

@@ -5,7 +5,16 @@
             <div class="col-md-12">
 
                 <p>Below is a map of the world. This map centered on the location of Miles' office and provides a
-                    helpful marker to ensure that you don't miss it.</p>
+                    helpful marker to ensure that you don't miss it. Use the layer drop-down to toggle between
+                    the street layer and the satellite layer.</p>
+
+                <div>
+	                <form wicket:id="form">
+	                    <div wicket:id="layer">
+	                        <select wicket:id="layerSelector"></select>
+	                    </div>
+	                </form>
+                </div>
 
                 <div wicket:id="marker">[MARKER]</div>
 

openlayers3-parent/openlayers3-examples/src/main/java/org/wicketstuff/openlayers3/examples/MarkerPage.java

@@ -2,7 +2,13 @@
 
 import java.util.Arrays;
 
+import org.apache.wicket.ajax.AjaxRequestTarget;
+import org.apache.wicket.ajax.form.AjaxFormComponentUpdatingBehavior;
+import org.apache.wicket.markup.html.form.Form;
+import org.apache.wicket.model.IModel;
+import org.apache.wicket.model.LoadableDetachableModel;
 import org.apache.wicket.model.Model;
+import org.apache.wicket.model.util.ListModel;
 import org.wicketstuff.annotation.mount.MountPath;
 import org.wicketstuff.openlayers3.DefaultOpenLayersMap;
 import org.wicketstuff.openlayers3.api.Map;
@@ -12,42 +18,79 @@
 import org.wicketstuff.openlayers3.api.layer.Tile;
 import org.wicketstuff.openlayers3.api.overlay.Overlay;
 import org.wicketstuff.openlayers3.api.source.tile.Osm;
+import org.wicketstuff.openlayers3.api.source.tile.XYZ;
 import org.wicketstuff.openlayers3.api.util.Color;
 import org.wicketstuff.openlayers3.component.Marker;
 import org.wicketstuff.openlayers3.examples.base.BasePage;
 
+import de.agilecoders.wicket.core.markup.html.bootstrap.form.BootstrapForm;
+import de.agilecoders.wicket.core.markup.html.bootstrap.form.FormGroup;
+import de.agilecoders.wicket.extensions.markup.html.bootstrap.form.select.BootstrapSelect;
+
 /**
  * Provides a page with a mpa that includes a marker.
  */
 @MountPath("/marker")
 public class MarkerPage extends BasePage {
 
-    /**
-     * Marker over Miles' office.
-     */
-    private Marker marker;
+    private static final String MA_ORTHO_URL = "http://tiles.arcgis.com/tiles/hGdibHYSPO59RG1h/arcgis/rest/services/USGS_Orthos_2013_2014/MapServer/tile/{z}/{y}/{x}";
 
-    @Override
-    protected void onInitialize() {
-        super.onInitialize();
+    private enum LayerOption {
+        STREET,
+        SATELLITE;
+    }
 
-        // create and add our marker
-        add(marker = new Marker("marker", Model.of(new Color("#4169E1"))));
+    private static class LayerSelectedModel extends LoadableDetachableModel<Boolean> {
+
+        private IModel<LayerOption> model;
+        private LayerOption layerOption;
+
+        public LayerSelectedModel(IModel<LayerOption> model, LayerOption layerOption) {
+            this.model = model;
+            this.layerOption = layerOption;
+        }
+
+        @Override
+        protected Boolean load() {
+            return layerOption.equals(model.getObject());
+        }
+
+    }
+
+    public MarkerPage() {
+        super();
+
+        // model of the selected layer
+        final IModel<LayerOption> model = Model.of(LayerOption.STREET);
+
+        // create and add our marker over Miles' office
+        Marker marker = new Marker("marker", Model.of(new Color("#4169E1")));
+        add(marker);
 
         // create and add our marker
-        add(new DefaultOpenLayersMap("map",
+        final DefaultOpenLayersMap map = new DefaultOpenLayersMap("map",
 
                 // create the model for our map
                 Model.of(new Map(
 
                         // list of layers
                         Arrays.<Layer>asList(
 
-                                // a new tile layer with the map of the world
+                                // a new tile layer with the street map of Noho
                                 new Tile("Streets",
 
                                         // a new web map service tile layer
-                                        new Osm())),
+                                        new Osm(),
+                                        // visible when the layer selector is street
+                                        new LayerSelectedModel(model, LayerOption.STREET)),
+
+                                // a new tile layer with the satellite map of Noho
+                                new Tile("Ortho",
+
+                                        // MA ortho-imagery layer
+                                        new XYZ().setUrl(MA_ORTHO_URL),
+                                        // visible when the layer selector is satellite
+                                        new LayerSelectedModel(model, LayerOption.SATELLITE))),
 
                         // list of overlays
                         Arrays.<Overlay>asList(
@@ -69,6 +112,27 @@ protected void onInitialize() {
                                 new LongLat(-72.638382, 42.313181, "EPSG:4326").transform(View.DEFAULT_PROJECTION),
 
                                 // zoom level for the view
-                                16)))));
+                                16))));
+        add(map);
+
+        // form for changing the layer
+        Form<LayerOption> form = new BootstrapForm<>("form", model);
+        add(form);
+
+        // layer selector -- refresh the map's layers on change
+        form.add(new FormGroup("layer")
+                .add(new BootstrapSelect<>("layerSelector", model,
+                        new ListModel<>(Arrays.asList(LayerOption.values())))
+                    .setLabel(Model.of("Layer"))
+                    .add(new AjaxFormComponentUpdatingBehavior("change") {
+
+                        @Override
+                        protected void onUpdate(AjaxRequestTarget target) {
+                            map.updateLayers(target);
+                        }
+
+                    })));
+
     }
+
 }