geosense geoportal
DESCRIPTION
How did we come to develop new GeoPortal, based on OpenLayers 3TRANSCRIPT
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.
2014
-07-
16Geosense Mapping Portal
I’m the member of OSGeo’s board of directors Foundation and chairof czech local chapter, we call ourselves ”Open GeoInfrastracture”
2014
-07-
16Geosense Mapping Portal
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-
16Geosense Mapping Portal
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-
16Geosense Mapping Portal
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-
16Geosense Mapping Portal
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-
16Geosense Mapping Portal
In other words, I replaced issues with various libraries verions andlinux distributions, byt issues caused by various browsers and theirversions
2014
-07-
16Geosense Mapping Portal
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-
16Geosense Mapping Portal
OpenLayers is great in displaying vector data too. But howmany timesdid this happen to you, as to me?
2014
-07-
16Geosense Mapping Portal
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-
16Geosense Mapping Portal
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-
16Geosense Mapping Portal
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-
16Geosense Mapping Portal
When I came back home, we started to rewrite old, OpenLayers2-based geoportal from scratch
2014
-07-
16Geosense Mapping Portal
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-
16Geosense Mapping Portal
• 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-
16Geosense Mapping Portal
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-
16Geosense Mapping Portal
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-
16Geosense Mapping Portal
The portal itself has two modes - map-centrique and data-centrique.
2014
-07-
16Geosense Mapping Portal
In the map-centrique mode, user can browse the map, switchinglayers and so on. But after the user opens data table
2014
-07-
16Geosense Mapping Portal
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-
16Geosense Mapping Portal
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-
16Geosense Mapping Portal
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-
16Geosense Mapping Portal
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
I Setup dev environmentI Moving dev environmentI Node.js builderI JqueryI Templating system
2014
-07-
16Geosense Mapping Portal
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.
I Setup dev environmentI Moving dev environmentI Node.js builderI JqueryI Templating system
I Setup dev environmentI Moving dev environmentI Node.js builderI JqueryI Templating system
2014
-07-
16Geosense Mapping Portal
• 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-
16Geosense Mapping Portal
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-
16Geosense Mapping Portal
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-
16Geosense Mapping Portal
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-
16Geosense Mapping Portal
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-
16Geosense Mapping Portal
?
?
2014
-07-
16Geosense Mapping Portal