Mapping Fear of Crime using Opelayers3

As part of my PHD research I had to create a WebGIS platform to present questionnaire answers for varius questions related to the Urban Fear Of Crime. 

The platform created under the Urban Fear of Crime Project supports two main goals through a user friendly, intuitive and easy to use interface. On the one hand, the collection of data by our online survey questionnaire and on the other, the analysis of submitted answers. Analyses can refer to one or more questions while their outcomes and results are provided as one or two-way tables and charts. Respectively, cartographic visualizations of variables (questions) can be 2D or 3D respectively in the form of point density or thematic maps at a respondent or country level. Filters can always be applied to data (answers and respondents) selecting subsets either by attribute or by dynamically drawing the geometric shape of the study area on the screen or finally, by uploading a respective schematic file (KML). Results can then be exported both in an image (png) or data (CSV, GeoJSN) file format. 

We are currently working on and we will soon be able to allow certified users (professors, teachers, researchers and students as well as practitioners) to set up their own research groups and teams whose submitted by their members data (completed questionnaires) they will have the ability to download in a CSV file in order to be further processed and analyzed for their own research purposes and projects.

I would greatly appreciate it if you could spend a few minutes of your time to fill our online survey questionnaire. Please be assured that all responses are anonymous and will strictly be used for the completion of my doctoral dissertation thesis.
Once you finish with questionnaire you may refresh the map webpage  and see your answers mapped.

For the completion of the project the following libraries has been used:


1. openlayers 3 . For the WebGis capabilities.
2. Chart.js. For the creation of Graphs and Charts
3. ol3-ext from Viglino.  Using two lib extensions as follows:
 3.1 OL3-AnimatedCluster. For drawing animated clusters on map
 3.2 ol.style.Chart . For drawing charts on map 
4. sidebar-v2 for ol3. Just a side bar over the map as a map control
5. Ol3-geocoder.  An ol3 geocoding control
6. Jquery + bootstrap for the UI.

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 ..........