OpenLayers3 GeoJSON clustering - first steps troubleshooting guide, part 2

OL2 had the specific layer strategy that makes clusters from points.
But OpenLayers3 haven't yet.
OpenLayers 3 has own method to do that, but you need use the feature array with points stack as source.

Everything is okay if we use stack of coordinates or array of independent points.
The panic starts when you should to make clusters from geojson points.
But what you should do if you want to load geojson with points created in QGIS?

At first we need to transform geojson object to stack of point objects.
How to do that without nervous i don't found, but we can to extract the lat\lng from geojson with
jQuery.getJSON() or with AJAX json request.

Example

$.getJSON( "file.geojson", function( data ) {
  var features = [];
  $.each( data, function(key, value) {
    features.push(value);
});

/// - "file.geojson" - path to your geojson

var fln = features[2].length;

/// - features contents 3 elements: ["FeatureCollection", Object, Array[92]]
We need to get length of array that includes features, so we need to use features[2].

var points = [];
for (var i = 0; i < fln; ++i) {
  points.push(new ol.Feature(new ol.geom.Point(features[2][i]['geometry']['coordinates'][0])));
}
console.log(points);

/// - now we need to extract coordinates of every feature and create point objects.
features[2][i]['geometry']['coordinates'][0]
features[2] - array with geojson points
[i] - points number (0-91)
['geometry'] - point attribute with geometry
['coordinates'] - attribute that consist coordintes
[0] - array with lat\lng that we should use to create ol.geom.Point. 

var source = new ol.source.Vector({
  features: points
});

/// - creating of vector source from array of ol.Feature point objects 

var clusterSource = new ol.source.Cluster({
  distance: 40,
  source: source
});

/// - creating of cluster source from our vector source

var styleCache = {};
var clusters = new ol.layer.Vector({
  source: clusterSource,
  style: function(feature, resolution) {
    var size = feature.get('features').length;
    var style = styleCache[size];
    if (!style) {
      style = [new ol.style.Style({
          radius: 20,
          stroke: new ol.style.Stroke({
            color: 'rgba(225,225,225,0.2)',
   width: 10
          }),
          fill: new ol.style.Fill({
            color: '#3399CC'
          })
        }),
        text: new ol.style.Text({
          text: size.toString(),
          fill: new ol.style.Fill({
            color: '#fff'
          })
        })
      })];
      styleCache[size] = style;
    }
    return style;
  }
});

/// - styling as in OL3 clustering example

map.addLayer(clusters);

/// - adding cluster layer to the map
});


About styling with response to cluster size i will write later

Read more ...

OpenLayers 3: onload, moveend events, kml, geojson layers - first steps troubleshooting guide, part 1

When I started my familiarity with OpenLayers 3, this map library has looked like a hell for me because... because before that I had used only Google Maps API for interactive maps coding.
So, this is my first part of first step troubleshooting guide
In this post i want to make a review of a few solutions for a first-step problems that i had with OL3.
P.S.
I`m not  a professional in webmaps, so if you know best solutions - comment please.

OpenLayers 3 events

Often everybody thinks that information about events in openlayers 3 is something elementary and writes nothing about that. OL3 API contains some info, but it is smashed like a butter on a bread (moreover, you need turn off 'stable only' checkbox). 

OpenLayers 3 onload events

OL3 do not contains clean version of onload event, but it contains some another triggers that should help to realize onload event in openlyers 3 :

'postrender' - event that shoots after the map has beer rendered.

map.on('postrender', function(){ 

 alert('Loaded!'); 

});

But this realization have one little problem. Method .on() will activate your target action each time when map will render. Practically you will have alert('Loaded!')  after each zooming or map dragging (any map change that needs to be rendered).

Solution is simple.

Near the .on() method OL3 includes .once() - method that activate target action only once, and this is very useful for us.


map.once('postrender', function(){
 alert('Loaded once!');
});


In this realization out`s target alert('Loaded!') loaded only once, after first render of the map.

OpenLayers 3 map move events (onmove)

For these needs we should use 'moveend' - map event that shoots after each completed map dragging.

map.on('moveend', function(){ 

 alert('The map has been moved!'); 

});

OpenLayers 3 map click events

In OL3 implemented few types of click events:

'click' - for each click on the map.

map.on('click', function(){ 

 alert('Any click'); 

});

'dblclick' - for double click on the map.

map.on('dblclick', function(){ 

 alert('Double click'); 

});

'singleclick' - event of one single click without doubling.

map.on('singleclick', function(){ 

 alert('True single click'); 

});

OpenLayers 3 geoJSON and KML layers.

Using of layers is a GIS basics. OL3 has flexible abilities to add layers to your map, but this flexibility needs some attention.

For creating a layer object OpenLayers 3 uses source object. That's means that before creating layer you need to create source object from your source file.

The most frequently used types of geometry source are GeoJSON and KML.

For geoJSON source we should use ol.source.GeoJSON, for KML we should use ol.source.KML.

   

var LayerSource = new ol.source.GeoJSON({

url: "filename.geojson"

});

And then create vector layer from this source

var VectorLayer = new ol.layer.Vector({

source: LayerSource, 

style: yourstyle

});


'VectorLayer' - your layer with geojson\KML geometry.

'yourstyle' - features style. Simple example of OpenLayers 3 styling:

var yourstyle = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,105,91,0.5)' // use rgba for opacity
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 1
})
});

To be counted....

Read more ...