Geosense Geoportal

Geosense Mapping PortalOpenLayers 3 in daily work

Jachym Cepicky1, Vojtech Dubrovsky1, Radovan Otruba1

1Geosense s.r.o.http://geosense.cz

Free and Open Source Software for Geospatial

Geosense Mapping PortalOpenLayers 3 in daily work

Jachym Cepicky1, Vojtech Dubrovsky1, Radovan Otruba1

1Geosense s.r.o.http://geosense.cz

Free and Open Source Software for Geospatial

2014

-07-

16Geosense Mapping Portal

Hi allmy name is Jachym Cepicky, but you can call me Jack Hack if youlike.

It is great pleasure to me, being here at FOSS4G Europe, and havepossibility to see you all in here and have possibility to talk to you, asmembers of open geospatial community.

http://geosense.cz

http://geosense.cz

2014

-07-


I’m the member of OSGeo’s board of directors Foundation and chairof czech local chapter, we call ourselves ”Open GeoInfrastracture”

2014

-07-


More then ten years, I’m involved in the development of open sourcesoftware for geospatial, some of you may remember me as memberof GRASS development team and founder of PyWPS project. Butsince 2007, so about 7 years, I’m focused mostly on development ofgeo applications for web.

2014

-07-


I’m here talking as member of the development team at Geosensecompany. Geosense is czech company with international ambitions,which was founded in 2009. We used to say, that we are doinginformation systems with strong spatial informations.

2014

-07-


It was founded by Vlada Capen and Jan Zvonik - as you can see, theyare nice guys - and the development team, which was formed aboutyear ago, has started to work on something, we call the newgeoportal. Why new: because it’s supposed to replace the oldproduct. It has of course server and client components and today, I’mgoing to present the way, how we came to the client - javascript - part

2014

-07-


Back to my self or to my jurney: I switched from desktop to webdevelopemnt during 2007, and it was OpenLayers library, whichtought me, how to write clean and nice looking code (at leastcompared to GRASS GIS) in JavaScript. I, unlike some of you, neverfeard OpenLayers complexity, since it always was so clean andsimple, yet powerfull, at least compared to what I was used to in theC-world from 80’s - I mean GRASS again.

2014

-07-


In other words, I replaced issues with various libraries verions andlinux distributions, byt issues caused by various browsers and theirversions

2014

-07-


OpenLayers 2 was and still is very inspiring to me also regarding it’sfeatures. It is true geospatial library, with capabilities to display alldata you needed, parse all formats you came across and to mock anytype of functionality within day, your boss required.

2014

-07-


OpenLayers is great in displaying vector data too. But howmany timesdid this happen to you, as to me?

2014

-07-


We’ve crached the limits of the web around the first decate of year2000. SVG was supported on most browsers, except for IE. Even IE 8was already around, we still needed to support IE 6 for some gov.institutsions. Combinatiton of SVG and VML was working well, but itwas so terribly slow, and displaying larger datasets (speaking aboutsize of several MBs) was like impossible.

2014

-07-


Last years, I had a chance to visit FOSS4G in Nottingham and Iwanted to make research, wether we stick with OpenLayers 2, go toLeaflet or move on to OpenLayers 3. My personal feeling around thattime was, we stick with OpenLayers 2 and will observe, how thesituation will develop.

2014

-07-


But after great session, full of OpenLayers 3 presentations, given byTim Schaub, Eric Lemoine, Tom Payne and others, I was keen ontrying OpenLayers 3 on real project, it was time to move on.

2014

-07-


When I came back home, we started to rewrite old, OpenLayers2-based geoportal from scratch

2014

-07-


The old geoportal, how we call it nowadays, is still OpenLayers2-based beast, with all good and bad, what belongs to the passedera:

2014

-07-


• It’s big, speaking about size of javascript files, you need totransfare from server to client

• It’s almost impossible to render larger amount of data (even withcanvas renderer it’s much easier)

• It’s hard to maintain, because of not so well structured code

• We simply dislkied to continue in this way

2014

-07-


We started with OpenLayers 3. It took us two weeks to setup andthink about the whole dev environemnt, since OpenLayers 3 isrelaying strongly on Google Closure library. We experimented withPlovr - Java building tool for closure - for couple of months, till we gotrid of it during last month, we are using bootstrap for UI desing, butwithou JQuery – where ever we should refer to JQuery, we stick withstandard closure elements.

I old portal re-implementedI vector-data focusedI tests (CasperJS)I 250kBI strong type control

I old portal re-implementedI vector-data focusedI tests (CasperJS)I 250kBI strong type control

2014

-07-


Nowadays we have

• 90% of functionality of the old portal reimplemented

• all vector data are rendered as vector data, which will enable usmore closer user integration

• test driven development using casprejs

• small compiled library

• system, which is hammering us over figter tips, once we dosomething nasty during the development

map vs. data

map vs. data

2014

-07-


The portal itself has two modes - map-centrique and data-centrique.

2014

-07-


In the map-centrique mode, user can browse the map, switchinglayers and so on. But after the user opens data table

2014

-07-


The map becames just supporting overview map to the databaseapplication, where user can filter, search and sort all features,available in the dataset. This is the key concept of the application:user can make a choice between data-centrick and map-centrick viewon the data. Either he or she focuses on the table, applies filters,search in the table. Then he switches to map, can filter the or searchthe data again...Other functions, such as feature detail, measuring or filtering areavailable as well.

2014

-07-


The whole application is now able to handle 10 000 (ten thounsends)of features, with just 300KB of javascript code. It loads faster, scalesnicely, we like to work with it.

2014

-07-


Since we are using boostrap, we are focusing ourselves on tabletversion as well. The whole portal is wokring wihout mouse orkeaboard, using only biggger touch device

API

API2014

-07-


The portal is intended to work with proprietary server informationsystem API, but it’s written in a way, that it should be possible to use itin separate way.

I Setup dev environmentI Moving dev environmentI Node.js builderI JqueryI Templating system


2014

-07-


Problems we had to face:

• It is very complicated for non-javascript programmers, to setupand think over development environemnt. The whole world ofJavaScript is moving forward too fast, to catch it up. There iscompletely new world with magical words, like PhantomJS,NodeJS, CaspreJS, closure.

• The environment is not settelt yet, new JavaScript build systemare creatd every day. Yesterday everybody used Grunt,nowadays, Gulp is the big hype. What you really need? IMHOpython-based build script will do.



2014

-07-


• We tryed to use Gulp for building, but result was, that NodeJSwas not able to handle all 500 files, we use for our geoportal.

• Also gui libraries are changing fast. Jquery is no longermust-use library, not even for mobile. Bootstrap seems to be oneof the most promissing. But using bootstrap without jquerymeans, you have to deal with some fancy gui elements. We arenow implementing everything using standard closure elements.

• And not to forget templating systems. Closure has one, but it’snot so nice. Now, when react is around, we would like to switchto it

2014

-07-


What do I want to say: the javascript world is chaning fast, there isplently of building systems (even you can scratch new one for yourproject), there are number of libraries, which can be used for yournot-only-mapping applications, there are several gui libraries andtemplating systems. All together it’s somehow very complicated fororiginaly server-side coders. But we all enjoy this new world ofJavaScript, it gives us some time to play again.

OL3 usable, even some api changes during time

we like it!

OL3 usable, even some api changes during time

we like it!

2014

-07-


Conclusion to us: if you are waiting with openlayers 3, go for it. It washard at the beginning to keep our steps synchronized withOpenLayers team, but it was possible. Today’s changes are relativelysmall and we did not break compatibility for long time already.

OL3 usable, even some api changes during timewe like it!

OL3 usable, even some api changes during timewe like it!

2014

-07-


OpenLayer 3 is nice library, which I personally think is one step aheadof Leaflet. Do not get me wrong, Leaflet is very nice and powerfultool, but we need the complexity of OpenLayers and so, we considerOpenLayers 3 as good choice.

I Google Closure libraryI OpenLayers 3I Bootstrap (NO JQuery)I Python build scriptI BowerI CasperJSI Jenkins

I Google Closure libraryI OpenLayers 3I Bootstrap (NO JQuery)I Python build scriptI BowerI CasperJSI Jenkins

2014

-07-


this is briefly to our dev stack, we use obviously openlayers3 on top ofgoogle closure library, we are using boostrap for some gui parts butwithout jquery components, casperjs for unit testing and integrationtesting and jenkins for automatic building process. For solvingautomatic dependencies, we use bower.

http://geosense.czhttp://dev.geosense.cz/gp2p/master/examples/

gp2.htmlhttp:

//dev.geosense.cz/gp2p/rc/examples/gp2.html

http://geosense.czhttp://dev.geosense.cz/gp2p/master/examples/

gp2.htmlhttp:

//dev.geosense.cz/gp2p/rc/examples/gp2.html

2014

-07-


http://geosense.cz

http://dev.geosense.cz/gp2p/master/examples/gp2.html


http://dev.geosense.cz/gp2p/rc/examples/gp2.html


http://geosense.cz





?

?

2014

-07-


Geosense Geoportal

Documents

Transcript of Geosense Geoportal