The Book of OpenLayers3 [Code samples]

These are the code samples for The Book of OpenLayer3. Feel free to download the source code and contribute to this repository:

Working with loading strategies

The left map uses a fixed strategy, that means WFS is queried only once for a given bounding box and no more queries are made. The right map, uses a ol.loadingstrategy.bbox strategy which request the server each time we change the view and for the whole map's view extent.

Source code:


            // Tiled layer
            var osmLayer = new ol.layer.Tile({
                source: new ol.source.OSM()
            });

            // Source using a fixed box strategy
            var vsStrategyFixed = new ol.source.ServerVector({
                format: new ol.format.GeoJSON(),
                loader: function(extent, resolution, projection) {
                    var url = 'http://demo.opengeo.org/geoserver/wfs?'+
                        'service=WFS&request=GetFeature&'+
                        'version=1.1.0&typename=osm:water_areas&'+
                        'outputFormat=text/javascript&'+
                        'format_options=callback:loadFeaturesFixed&' +
                        'srsname=EPSG:3857&bbox=' + extent.join(',');

                    $.ajax({
                        url: url,
                        dataType: 'jsonp'
                    });
                },
                strategy: function() {
                    return [ [-8473015.930372493, 5673984.22207263, -8430593.37967422, 5704559.033386701] ];
                },
                projection: 'EPSG:3857'
            });

            // Executed when data is loaded by the $.ajax method.
            var loadFeaturesFixed = function(response) {
                vsStrategyFixed.addFeatures(vsStrategyFixed.readFeatures(response));
            };

            // Vector layer
            var vectorLayerFixed = new ol.layer.Vector({
                source: vsStrategyFixed,
                style: new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: 'green',
                        width: 2
                    })
                })
            });

            // Map
            var mapFixed = new ol.Map({
                target: 'mapFixed',
                renderer: 'canvas',
                layers: [osmLayer, vectorLayerFixed],
                view: new ol.View({
                    center: ol.proj.transform([-75.923853, 45.428736], 'EPSG:4326', 'EPSG:3857'),
                    maxZoom: 19,
                    zoom: 10
                })
            });

            // Source using a bbox strategy
            var vsStrategyBbox = new ol.source.ServerVector({
                format: new ol.format.GeoJSON(),
                loader: function(extent, resolution, projection) {
                    var url = 'http://demo.opengeo.org/geoserver/wfs?'+
                        'service=WFS&request=GetFeature&'+
                        'version=1.1.0&typename=osm:water_areas&'+
                        'outputFormat=text/javascript&'+
                        'format_options=callback:loadFeaturesBbox&' +
                        'srsname=EPSG:3857&bbox=' + extent.join(',');

                    $.ajax({
                        url: url,
                        dataType: 'jsonp'
                    });
                },
                strategy: ol.loadingstrategy.bbox,
                projection: 'EPSG:3857'
            });

            // Executed when data is loaded by the $.ajax method.
            var loadFeaturesBbox = function(response) {
                vsStrategyBbox.addFeatures(vsStrategyBbox.readFeatures(response));
            };

            // Vector layer
            var vectorLayerBbox = new ol.layer.Vector({
                source: vsStrategyBbox,
                style: new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: 'green',
                        width: 2
                    })
                })
            });

            // Map
            var mapBbox = new ol.Map({
                target: 'mapBbox',
                renderer: 'canvas',
                layers: [osmLayer, vectorLayerBbox],
                view: new ol.View({
                    center: ol.proj.transform([-75.923853, 45.428736], 'EPSG:4326', 'EPSG:3857'),
                    maxZoom: 19,
                    zoom: 10
                })
            });