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.
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.
Read more ...
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!');
});
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
})
});
'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....
