Open Layers 3 - Playing with Projections

I big issue when plotting GIS maps is the projection of your data. Open layers 3 gives much more flexibility, than Open layers 2 used to do, on that field. With the latest versions of OL3 you can even reproject rasters and tiles on the client side. This is awesome in it?
But how is it working?
Lets go through some example cases.

 Case 1.I am not a mapping geek. I just want to show a map.
This is the simplest case. Just load a tile layer and let ol3 to choose the projection. This would be the EPSG:3857  as most public tile layers services provide their tile data in EPSG:3857. This is OSM, Google, Bing map etc. So ,just to make clear, if you dont provide any projection during map config EPSG:3857 shall be used and any layer we add on map should be reprojected on that projection on client side if needed.

 ------> Here is an example (CASE1). And its fiddle here

 var map = new ol.Map({  
     layers: [  
      new ol.layer.Tile({  
       source: new ol.source.OSM()  
      })  
     ],  
     target: 'map',  
     view: new ol.View({  
      center: [0, 0],  
      zoom: 2  
     })  
    });  

 Case 2.I am a bit more advanced user. So I want to have control of the map projection
Now if you want to give your map a projection other than EPSG:3857 then you have to assign it to the ol.view of your map. In this case there are 2 sub cases.

   - subcase1. I want to project in EPSG:4326
In this subcase there is no special treatment. Just assign EPSG:4326 on the view of your map.


-------> Here is an example (CASE2 - subcase1). And its fiddle here

 var map = new ol.Map({  
  layers: [  
   new ol.layer.Tile({  
    source: new ol.source.OSM()  
   })  
  ],  
  target: 'map',  
  view: new ol.View({  
   projection:'EPSG:4326',//here is your 4326 projection
   center: [0, 0],  
   zoom: 2  
  })  
 });  

- subcase2. I want to project in a projection other than 4326 or 3857 and the projection code I am looking for exist in the epsg.io database.
In this subcase ol3 need an external library to go on. This is proj4js.js (further info and download here)
So we need to follow the steps below.
1. Load the external library within our html page
2. Search for our projection in the http://epsg.io/. Once we find the projection we are looking for  we go to Export --> Proj4js and then we do copy-paste the javascript definition of our projection.



3. Next step is to add the line of code we just copied to our javascript section.
So lets say we are looking for EPSG:2100 which is the National Greek Projection. Then we need to add this line of code:

 proj4.defs("EPSG:2100","+proj=tmerc +lat_0=0 +lon_0=24 +k=0.9996 +x_0=500000 +y_0=0 +ellps=GRS80 +towgs84=-199.87,74.79,246.62,0,0,0,0 +units=m +no_defs");  

So now ol3 is aware about our new projection. It would also be good to add the extent for our new projection, using the following

 var 2100extent= [-34387.6695, 3691163.5140, 1056496.8434, 4641211.3222];  
 proj.get('EPSG:2100').setExtent(2100extent);  

So lets put in all together now. We want our map to be projected on EPSG:2100 and thus all layers added on map to be reprojected on EPSG:2100

 var extent2100 = [-34387.6695, 3691163.5140, 1056496.8434, 4641211.3222];  
  proj4.defs("EPSG:2100","+proj=tmerc +lat_0=0 +lon_0=24 +k=0.9996 +x_0=500000 +y_0=0 +ellps=GRS80 +towgs84=-199.87,74.79,246.62,0,0,0,0 +units=m +no_defs");  
 ol.proj.get('EPSG:2100').setExtent(extent2100);  
 var layer = new ol.layer.Tile({  
     source: new ol.source.OSM()  
   });  
 var map = new ol.Map({  
  layers: [layer],  
  target: 'map',  
  view: new ol.View({  
   projection: 'EPSG:2100',  
    center: [510457.300375, 4150059.924838],  
   zoom: 4  
  })  
 });  

An here is a fiddle

What if I want to add a wms layer to the map with my custom projection???? Do I need to tell ol3 so reproject my wms layer?????

Well, the direct answer is no you dont have to. Unless you want the reprojection to take place on the server side. Which is not normal for myself. Reprojecting on the server side would stretch my server. So as long as I have the option to do it on client and so not heavy-load my server I prefer to do it on client.

So lets go back to the question. You just have to cofigure your WMS layer and add it to your map. Like so:

 var wmslayer = new ol.layer.Image({  
      source: new ol.source.ImageWMS({  
       url: 'http://suite.opengeo.org/geoserver/wms',  
       params: {'LAYERS': 'opengeo:countries'},  
       serverType: 'geoserver'  
      })  
     }) 

map.addLayer(wmslayer);

And here is one more fiddle to see it live

TO BE CONTINUED WITH FEW MORE CASES ..........

KML,GPX,GeoJson,WKT Online Parser and Viewer

Here is a simple online formats parser, I have recently develop, and I would like to share.
May handle KML,GPX,GeoJson,WKT formats. It is just an html file with a few javascript. May be freely downloaded from here.
You may view the online parser here (full screen)
Or get a snapshot

openlayers3 (ol3) Magnifying Control

Ispired from official ol3 Layer Spy example, I have made a magnifying custom control.
Make map cursor act as a magnifying lense. Click on M button
This ol3 control is also hosted on gitgub. Here is the link to downlaod (includes example and configuration options).
No dependency on third party libs. Just ol3.
Here is a fiddle

open layers new version 3.11.2

open layers version 3.11.2 launched.
release notes may be found here --> release notes
Latest version may be downloaded from here -->v3.11.2.zip.
Still wait, for the vector api, the donut polygon support (intermediate solution for donut polygon may be found here -->draw hole fiddle ) as well as the undo/redo interaction. Hope to get these on next version.
One of the great things with this latest version is the raster reprojection support. This includes tiles as well. That means you can view bing maps, OSM etc within your local projection. Or even display your local projection tiles to bing maps projection. Great thing .... in it?
Some examples to present this functionality may be found here
--> reprojection-by-code.html
--> reprojection-wgs84.html
--> raster reprojection.html
There is also a new version for the ol3-cesium based on this new open layers version.
ol3-cesium v1.10 may be downloaded from here -->ol3_cesium_v1.10
Good news is that OL3-Cesium is now built together with OL3. check it here 
Enjoy all of you GIS Dudes 

openlayers 3 - Layer Control/Switcher - Extjs

Lately , I had a requirement for a layer contol-switcher tool for openlayers 3 (OL3). The one currently exists here is good enough if you expect to get something like OL2 used to have. But in my case this wasn't enough.
So, I had to do it from scratch. Searching on the web for a fancy jquery tree , supporting drag-drop between tree nodes, grouping of tree nodes, check box support, image support etc, I was surprised I couldn't find something very impressive to use. So I ended up with extjs tree panel , which has all the needed functionality and it is quit impressive. Though, it is not jquery so extjs library needs to be loaded.

I have made a github project you may see and freely download here. Note that the project is on its very early stages and many things will probably change. Just download the rar file and open it. Double click in any example to see it in action.

If any of you, boys and girls, look forward to contribute please let me know. I would be more than grateful.

Some examples up and running to get the idea.

basic example:
http://ptsagkis.github.io/extjs_ol3_layercontrol/example.html
minimalistic example:
http://ptsagkis.github.io/extjs_ol3_layercontrol/example0_minimalistic.html
example with options:
http://ptsagkis.github.io/extjs_ol3_layercontrol/example1_withoptions.html
switching themes:
http://ptsagkis.github.io/extjs_ol3_layercontrol/example3_themes.html
legend icons from geoserver:
http://ptsagkis.github.io/extjs_ol3_layercontrol/example3.html
add wfs vector layer dynamic and asign loadstart, loadend, loaderror events 
http://ptsagkis.github.io/extjs_ol3_layercontrol/example4_dynamic_add_layer.html
use an extjs layout for best UI experience
http://ptsagkis.github.io/extjs_ol3_layercontrol/example5_extjslayout.html
change visibility programmticaly and fire the listener to toggle check box
http://ptsagkis.github.io/extjs_ol3_layercontrol/example6_vector.html

Openlayers 3 - load start / load end events on layers

With the latest versions of OL3 we have the ability to listen for the 'loadstart' and 'loadend' events on layers exist on our map. In openlayers 2 that was quite clear.

With the latest versions of  openlayers 3, things start to be a bit more clear, though not as clear as it used to be on OL2.

So for TILE (ol.layer.Tile) layers our code snip should look like:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

//declare the layer var osmLayer = new ol.layer.Tile({ source: new ol.source.OSM() }); //asign the listeners on the source of tile layer osmLayer.getSource().on('tileloadstart', function(event) { //replace with your custom action document.getElementById('tilesloaderindicatorimg').src = 'css/images/tree_loading.gif'; }); osmLayer.getSource().on('tileloadend', function(event) { //replace with your custom action document.getElementById('tilesloaderindicatorimg').src = 'css/images/ok.png'; }); osmLayer.getSource().on('tileloaderror', function(event) { //replace with your custom action document.getElementById('tilesloaderindicatorimg').src = 'css/images/no.png'; });

For WMS layers the approach is a bit different:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

//declare the layer var wmsLayer = new ol.layer.Image({ source: new ol.source.ImageWMS({ attributions: [new ol.Attribution({ html: '&copy; ' + '<a href="http://www.geo.admin.ch/internet/geoportal/' + 'en/home.html">' + 'National parks / geo.admin.ch</a>' })], crossOrigin: 'anonymous', params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'}, serverType: 'mapserver', url: 'http://wms.geo.admin.ch/' }) }); //and now asign the listeners on the source of it var lyrSource = wmsLayer.getSource(); lyrSource.on('imageloadstart', function(event) { console.log('imageloadstart event',event); //replace with your custom action var elemId = event.target.params_.ELEMENTID; document.getElementById(elemId).src = 'css/images/tree_loading.gif'; }); lyrSource.on('imageloadend', function(event) { console.log('imageloadend event',event); //replace with your custom action var elemId = event.target.params_.ELEMENTID; document.getElementById(elemId).src = 'css/images/ok.png'; }); lyrSource.on('imageloaderror', function(event) { console.log('imageloaderror event',event); //replace with your custom action var elemId = event.target.params_.ELEMENTID; document.getElementById(elemId).src = 'css/images/no.png'; });

For WFS Vecotr layers things are even more complicated:

so I made a fiddle you may see here -->fiddle

fiddle preview -->

OL3 (v3.20.0 ), draw holes on polygons. (javascript)

As ol3 have not yet implemented the "draw hole" vector functionality, I did a bit of work to achive it. So, in the meantime, my approach may help you. After the last update it works using 3.20.0 latest openlayers3 version. Propably it works with older versions as well but havent tested.

Also not that I use jsts library in order to verify whether drawn hole vertex is inside a polygon. 

Here is a demo  here(jsfiddle) (updated on 16/12/2016)

preview




It only works for simple (not multi) polygons. But you may add as many holes you like in a single polygon. It also lucks the visual hole effect during drawing (fixed with the new update).
Also prevents the draw hole ouside the selected polygon. 
I ll try to work with these and if I get something better I ll let you know.