Examples with Map ol.Map used on opensource projects

Example 11 with Map

use of ol.Map in project gwt-ol3 by TDesjardins.

the class AnimationExample method show.

/* (non-Javadoc)
     * @see de.desjardins.ol3.demo.client.example.Example#show() */
@Override
public void show(String exampleId) {
    Coordinate centerCoordinate = new Coordinate(13.37, 52.52);
    Coordinate transformedMidPoint = Projection.transform(centerCoordinate, DemoConstants.EPSG_4326, DemoConstants.EPSG_3857);
    // create an OSM-layer
    XyzOptions osmSourceOptions = new XyzOptions();
    Osm osmSource = new Osm(osmSourceOptions);
    LayerOptions osmLayerOptions = new LayerOptions();
    osmLayerOptions.setSource(osmSource);
    Tile osmLayer = new Tile(osmLayerOptions);
    // create a view
    View view = new View();
    view.setCenter(transformedMidPoint);
    view.setZoom(16);
    // create the map
    MapOptions mapOptions = new MapOptions();
    mapOptions.setLoadTilesWhileAnimating(true);
    mapOptions.setTarget(exampleId);
    mapOptions.setView(view);
    Collection<Base> lstLayer = new Collection<Base>();
    lstLayer.push(osmLayer);
    mapOptions.setLayers(lstLayer);
    Map map = new Map(mapOptions);
    // add some controls
    map.addControl(new ScaleLine());
    MousePositionOptions mousePositionOptions = new MousePositionOptions();
    ProjectionOptions projectionOptions = new ProjectionOptions();
    projectionOptions.setCode(DemoConstants.EPSG_4326);
    mousePositionOptions.setProjection(new Projection(projectionOptions));
    MousePosition mousePosition = new MousePosition(mousePositionOptions);
    mousePosition.setCoordinateFormat(Coordinate.createStringXY(5));
    map.addControl(mousePosition);
    Coordinate tvTowerCoordinate = Projection.transform(new Coordinate(13.409, 52.52), DemoConstants.EPSG_4326, DemoConstants.EPSG_3857);
    Coordinate pplaceCoordinate = Projection.transform(new Coordinate(13.377, 52.509), DemoConstants.EPSG_4326, DemoConstants.EPSG_3857);
    Coordinate zooCoordinate = Projection.transform(new Coordinate(13.338, 52.508), DemoConstants.EPSG_4326, DemoConstants.EPSG_3857);
    final List<Coordinate> coordinates = Arrays.asList(transformedMidPoint, tvTowerCoordinate, pplaceCoordinate, zooCoordinate);
    Scheduler.get().scheduleFixedPeriod(() -> {
        int index = getNextIndex(coordinates.size());
        AnimationOptions panAnimationOptions = new AnimationOptions();
        panAnimationOptions.setDuration(2000);
        // Switch this to rotate the animation while animating.
        // panAnimationOptions.setRotation(view.getRotation() + 2 * Math.PI);
        panAnimationOptions.setCenter(coordinates.get(index));
        view.animate(panAnimationOptions);
        AnimationOptions zoomOutAnimationOptions = new AnimationOptions();
        zoomOutAnimationOptions.setDuration(1000);
        zoomOutAnimationOptions.setResolution(view.getResolution() + 4);
        AnimationOptions zoomInAnimationOptions = new AnimationOptions();
        zoomInAnimationOptions.setDuration(1000);
        zoomInAnimationOptions.setResolution(view.getResolution());
        view.animate(zoomOutAnimationOptions, zoomInAnimationOptions);
        return true;
    }, 6000);
}

Example 12 with Map

use of ol.Map in project gwt-ol3 by TDesjardins.

the class MapboxExample method show.

/* (non-Javadoc)
     * @see de.desjardins.ol3.demo.client.example.Example#show()
     */
@Override
public void show(String exampleId) {
    XyzOptions mapboxOptions = new XyzOptions();
    mapboxOptions.setTileSize(new Size(512, 512));
    mapboxOptions.setUrl("https://api.mapbox.com/styles/v1/mapbox/dark-v8/tiles/{z}/{x}/{y}?access_token=" + ACCESS_TOKEN);
    mapboxOptions.setAttributions("© <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>");
    Xyz mapboxSource = new Xyz(mapboxOptions);
    LayerOptions xyzLayerOptions = OLFactory.createOptions();
    xyzLayerOptions.setSource(mapboxSource);
    Tile mapboxLayer = new Tile(xyzLayerOptions);
    // create a view
    View view = new View();
    Coordinate centerCoordinate = new Coordinate(1490463, 6894388);
    view.setCenter(centerCoordinate);
    view.setZoom(10);
    // create the map
    MapOptions mapOptions = new MapOptions();
    mapOptions.setTarget(exampleId);
    mapOptions.setView(view);
    Map map = new Map(mapOptions);
    ol.control.Attribution attributionControl = new ol.control.Attribution();
    attributionControl.setCollapsed(false);
    map.addControl(attributionControl);
    map.addControl(new MousePosition());
    map.addControl(DemoUtils.createMapboxLogo());
    map.addLayer(mapboxLayer);
}

Example 13 with Map

use of ol.Map in project gwt-ol3 by TDesjardins.

the class MeasureExample method show.

/* (non-Javadoc)
     * @see de.desjardins.ol3.demo.client.example.Example#show()
     */
@Override
public void show(String exampleId) {
    // create a OSM-layer
    XyzOptions osmSourceOptions = OLFactory.createOptions();
    Osm osmSource = new Osm(osmSourceOptions);
    LayerOptions osmLayerOptions = OLFactory.createOptions();
    osmLayerOptions.setSource(osmSource);
    Tile osmLayer = new Tile(osmLayerOptions);
    // create a view
    View view = OLFactory.createView();
    Coordinate centerCoordinate = new Coordinate(-0.1275, 51.507222);
    Coordinate transformedCenterCoordinate = Projection.transform(centerCoordinate, "EPSG:4326", "EPSG:3857");
    view.setCenter(transformedCenterCoordinate);
    view.setZoom(10);
    // create the map
    MapOptions mapOptions = OLFactory.createOptions();
    mapOptions.setTarget(exampleId);
    mapOptions.setView(view);
    Map map = new Map(mapOptions);
    map.addLayer(osmLayer);
    // add some controls
    map.addControl(new ScaleLine());
    DemoUtils.addDefaultControls(map.getControls());
    Attribution attribution = new Attribution();
    attribution.setCollapsed(true);
    map.addControl(attribution);
    // add some interactions
    map.addInteraction(new KeyboardPan());
    map.addInteraction(new KeyboardZoom());
    // add measurement functionality to the map
    final Measure measure = new Measure(map);
    // start measuring immediately
    measure.startMeasureLength(new MeasureListener() {

        @Override
        public void onMeasure(MeasureEvent evt) {
            // log the measured length
            GWT.log("measure: " + evt.getMeasure());
        }
    }, true, true);
}

Example 14 with Map

use of ol.Map in project gwt-ol3 by TDesjardins.

the class OverlayExample method show.

/* (non-Javadoc)
     * @see de.desjardins.ol3.demo.client.example.Example#show()
     */
@Override
public void show(String exampleId) {
    // create a OSM-layer
    XyzOptions osmSourceOptions = OLFactory.createOptions();
    Osm osmSource = new Osm(osmSourceOptions);
    LayerOptions osmLayerOptions = OLFactory.createOptions();
    osmLayerOptions.setSource(osmSource);
    Tile osmLayer = new Tile(osmLayerOptions);
    // create a view
    View view = new View();
    Coordinate centerCoordinate = OLFactory.createCoordinate(2.3, 51.507222);
    Coordinate transformedCenterCoordinate = Projection.transform(centerCoordinate, "EPSG:4326", "EPSG:3857");
    view.setCenter(transformedCenterCoordinate);
    view.setZoom(10);
    // create the map
    MapOptions mapOptions = OLFactory.createOptions();
    mapOptions.setTarget(exampleId);
    mapOptions.setView(view);
    Map map = new Map(mapOptions);
    map.addLayer(osmLayer);
    // add some controls
    map.addControl(OLFactory.createScaleLine());
    DemoUtils.addDefaultControls(map.getControls());
    Attribution attribution = new Attribution();
    attribution.setCollapsed(true);
    map.addControl(attribution);
    // add some interactions
    map.addInteraction(OLFactory.createKeyboardPan());
    map.addInteraction(OLFactory.createKeyboardZoom());
    DivElement overlay = Document.get().createDivElement();
    overlay.setClassName("overlay-font");
    overlay.setInnerText("Created with GWT SDK " + GWT.getVersion());
    OverlayOptions overlayOptions = OLFactory.createOptions();
    overlayOptions.setElement(overlay);
    overlayOptions.setPosition(transformedCenterCoordinate);
    overlayOptions.setOffset(OLFactory.createPixel(-300, 0));
    map.addOverlay(new Overlay(overlayOptions));
}

Example 15 with Map

use of ol.Map in project gwt-ol3 by TDesjardins.

the class WfsExample method show.

/* (non-Javadoc)
     * @see de.desjardins.ol3.demo.client.example.Example#show()
     */
@Override
public void show(String exampleId) {
    // create a vector layer
    Vector vectorSource = new Vector();
    VectorLayerOptions vectorLayerOptions = new VectorLayerOptions();
    vectorLayerOptions.setSource(vectorSource);
    ol.layer.Vector wfsLayer = new ol.layer.Vector(vectorLayerOptions);
    // create a view
    View view = new View();
    Coordinate centerCoordinate = new Coordinate(-8908887.277395891, 5381918.072437216);
    view.setCenter(centerCoordinate);
    view.setZoom(12);
    view.setMaxZoom(19);
    // create the map
    MapOptions mapOptions = OLFactory.createOptions();
    mapOptions.setTarget(exampleId);
    mapOptions.setView(view);
    Map map = new Map(mapOptions);
    map.addLayer(DemoUtils.createOsmLayer());
    map.addLayer(wfsLayer);
    Wfs wfs = new Wfs();
    WfsWriteFeatureOptions wfsWriteFeatureOptions = new WfsWriteFeatureOptions();
    String[] featureTypes = { "water_areas" };
    wfsWriteFeatureOptions.setSrsName("EPSG:3857");
    wfsWriteFeatureOptions.setFeaturePrefix("osm");
    wfsWriteFeatureOptions.setFeatureNS("http://openstreemap.org");
    wfsWriteFeatureOptions.setFeatureTypes(featureTypes);
    // set a filter
    wfsWriteFeatureOptions.setFilter(new IsLike("name", "Mississippi*"));
    wfsWriteFeatureOptions.setOutputFormat("application/json");
    // create WFS-XML node
    Node wfsNode = wfs.writeGetFeature(wfsWriteFeatureOptions);
    RequestBuilder requestBuilder = new RequestBuilder(RequestBuilder.POST, "https://ahocevar.com/geoserver/wfs");
    requestBuilder.setRequestData(new XMLSerializer().serializeToString(wfsNode));
    requestBuilder.setCallback(new RequestCallback() {

        @Override
        public void onResponseReceived(com.google.gwt.http.client.Request request, Response response) {
            GeoJson geoJson = new GeoJson();
            Feature[] features = geoJson.readFeatures(response.getText());
            vectorSource.addFeatures(features);
            map.getView().fit(vectorSource.getExtent());
        }

        @Override
        public void onError(com.google.gwt.http.client.Request request, Throwable exception) {
            Window.alert(exception.getMessage());
        }
    });
    try {
        requestBuilder.send();
    } catch (RequestException e) {
        Window.alert(e.getMessage());
    }
}