Geosense Geoportal

Geosense Mapping Portal
OpenLayers 3 in daily work
Jáchym ˇCepický1, Vojtech Dubrovsky1, Radovan Otruba1
1Geosense s.r.o.
http://geosense.cz
Free and Open Source Software for Geospatial
OpenLayers 3 in daily work
Jáchym ˇCepický1, Vojtech Dubrovsky1, Radovan Otruba1
1Geosense s.r.o.
Free and Open Source Software for Geospatial
2014-07-16
Hi all
my name is Jachym ˇCepický, but you can call me Jack Hack if you
like.
It is great pleasure to me, being here at FOSS4G Europe, and have
possibility to see you all in here and have possibility to talk to you, as
members of open geospatial community.

2014-07-16
I’m the member of OSGeo’s board of directors Foundation and chair
of czech local chapter, we call ourselves ”Open GeoInfrastracture”

2014-07-16
More then ten years, I’m involved in the development of open source
software for geospatial, some of you may remember me as member
of GRASS development team and founder of PyWPS project. But
since 2007, so about 7 years, I’m focused mostly on development of
geo applications for web.

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

2014-07-16
It was founded by Vlada ˇCapen and Jan Zvonik - as you can see, they
are nice guys - and the development team, which was formed about
year ago, has started to work on something, we call the new
geoportal. Why new: because it’s supposed to replace the old
product. It has of course server and client components and today, I’m
going to present the way, how we came to the client - javascript - part

2014-07-16
Back to my self or to my jurney: I switched from desktop to web
developemnt during 2007, and it was OpenLayers library, which
tought me, how to write clean and nice looking code (at least
compared to GRASS GIS) in JavaScript. I, unlike some of you, never
feard OpenLayers complexity, since it always was so clean and
simple, yet powerfull, at least compared to what I was used to in the
C-world from 80’s - I mean GRASS again.

2014-07-16
In other words, I replaced issues with various libraries verions and
linux distributions, byt issues caused by various browsers and their
versions

2014-07-16
OpenLayers 2 was and still is very inspiring to me also regarding it’s
features. It is true geospatial library, with capabilities to display all
data you needed, parse all formats you came across and to mock any
type of functionality within day, your boss required.

2014-07-16
OpenLayers is great in displaying vector data too. But howmany times
did this happen to you, as to me?

2014-07-16
We’ve crached the limits of the web around the ﬁrst decate of year
2000. SVG was supported on most browsers, except for IE. Even IE 8
was already around, we still needed to support IE 6 for some gov.
institutsions. Combinatiton of SVG and VML was working well, but it
was so terribly slow, and displaying larger datasets (speaking about
size of several MBs) was like impossible.

2014-07-16
Last years, I had a chance to visit FOSS4G in Nottingham and I
wanted to make research, wether we stick with OpenLayers 2, go to
Leaﬂet or move on to OpenLayers 3. My personal feeling around that
time was, we stick with OpenLayers 2 and will observe, how the
situation will develop.

2014-07-16
But after great session, full of OpenLayers 3 presentations, given by
Tim Schaub, Eric Lemoine, Tom Payne and others, I was keen on
trying OpenLayers 3 on real project, it was time to move on.

2014-07-16
When I came back home, we started to rewrite old, OpenLayers
2-based geoportal from scratch

2014-07-16
The old geoportal, how we call it nowadays, is still OpenLayers
2-based beast, with all good and bad, what belongs to the passed
era:

2014-07-16
• It’s big, speaking about size of javascript ﬁles, you need to
transfare from server to client
• It’s almost impossible to render larger amount of data (even with
canvas 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-16
We started with OpenLayers 3. It took us two weeks to setup and
think about the whole dev environemnt, since OpenLayers 3 is
relaying strongly on Google Closure library. We experimented with
Plovr - Java building tool for closure - for couple of months, till we got
rid of it during last month, we are using bootstrap for UI desing, but
withou JQuery – where ever we should refer to JQuery, we stick with
standard closure elements.

old portal re-implemented
vector-data focused
tests (CasperJS)
250kB
strong type control
old portal re-implemented
vector-data focused
tests (CasperJS)
250kB
strong type control
2014-07-16
Nowadays we have
• 90% of functionality of the old portal reimplemented
• all vector data are rendered as vector data, which will enable us
more closer user integration
• test driven development using casprejs
• small compiled library
• system, which is hammering us over ﬁgter tips, once we do
something nasty during the development

map vs. data
map vs. data
2014-07-16
The portal itself has two modes - map-centrique and data-centrique.

2014-07-16
In the map-centrique mode, user can browse the map, switching
layers and so on. But after the user opens data table

2014-07-16
The map becames just supporting overview map to the database
application, 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 view
on 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 search
the data again...
Other functions, such as feature detail, measuring or filtering are
available as well.

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

2014-07-16
Since we are using boostrap, we are focusing ourselves on tablet
version as well. The whole portal is wokring wihout mouse or
keaboard, using only biggger touch device

API
API
2014-07-16
The portal is intended to work with proprietary server information
system API, but it’s written in a way, that it should be possible to use it
in separate way.

Setup dev environment
Moving dev environment
Node.js builder
Jquery
Templating system
Node.js builder
Jquery
Templating system
2014-07-16
Problems we had to face:
• It is very complicated for non-javascript programmers, to setup
and think over development environemnt. The whole world of
JavaScript is moving forward too fast, to catch it up. There is
completely new world with magical words, like PhantomJS,
NodeJS, CaspreJS, closure.
• The environment is not settelt yet, new JavaScript build system
are creatd every day. Yesterday everybody used Grunt,
nowadays, Gulp is the big hype. What you really need? IMHO
python-based build script will do.

Node.js builder
Jquery
Templating system
Node.js builder
Jquery
Templating system
2014-07-16
• We tryed to use Gulp for building, but result was, that NodeJS
was not able to handle all 500 ﬁles, we use for our geoportal.
• Also gui libraries are changing fast. Jquery is no longer
must-use library, not even for mobile. Bootstrap seems to be one
of the most promissing. But using bootstrap without jquery
means, you have to deal with some fancy gui elements. We are
now implementing everything using standard closure elements.
• And not to forget templating systems. Closure has one, but it’s
not so nice. Now, when react is around, we would like to switch
to it

2014-07-16
What do I want to say: the javascript world is chaning fast, there is
plently of building systems (even you can scratch new one for your
project), there are number of libraries, which can be used for your
not-only-mapping applications, there are several gui libraries and
templating systems. All together it’s somehow very complicated for
originaly server-side coders. But we all enjoy this new world of
JavaScript, it gives us some time to play again.

OL3 usable, even some api changes during time
2014-07-16
Conclusion to us: if you are waiting with openlayers 3, go for it. It was
hard at the beginning to keep our steps synchronized with
OpenLayers team, but it was possible. Today’s changes are relatively
small and we did not break compatibility for long time already.

we like it!
we like it!
2014-07-16
OpenLayer 3 is nice library, which I personally think is one step ahead
of Leaﬂet. Do not get me wrong, Leaﬂet is very nice and powerful
tool, but we need the complexity of OpenLayers and so, we consider
OpenLayers 3 as good choice.

Google Closure library
OpenLayers 3
Bootstrap (NO JQuery)
Python build script
Bower
CasperJS
Jenkins
Google Closure library
OpenLayers 3
Bootstrap (NO JQuery)
Python build script
Bower
CasperJS
Jenkins
2014-07-16
this is brieﬂy to our dev stack, we use obviously openlayers3 on top of
google closure library, we are using boostrap for some gui parts but
without jquery components, casperjs for unit testing and integration
testing and jenkins for automatic building process. For solving
automatic dependencies, we use bower.

http://dev.geosense.cz/gp2p/master/examples/
gp2.html
http:
//dev.geosense.cz/gp2p/rc/examples/gp2.html
http://dev.geosense.cz/gp2p/master/examples/
gp2.html
http:
//dev.geosense.cz/gp2p/rc/examples/gp2.html
2014-07-16

?
?
2014-07-16

Geosense Geoportal

More Related Content

Similar to Geosense Geoportal (20)

More from Jachym Cepicky (20)

Geosense Geoportal