GIS in the Browser - The Good Parts

Video in TIB AV-Portal: GIS in the Browser - The Good Parts

Formal Metadata

GIS in the Browser - The Good Parts
Title of Series
CC Attribution 3.0 Germany:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Release Date
Open Source Geospatial Foundation (OSGeo)
Production Year
Production Place
Portland, Oregon, United States of America

Content Metadata

Subject Area
Long gone (hopefully) are the days of replicating the "professionals only" desktop GIS interface in a browser. However, with modern browsers, HTML5 APIs, and increased efficiency of javascript engines it is possible to performantly replicate GIS functionality in a purely client-side browser application. Moderately complex geoprocessing, persistent client-side storage and simple to complex data visualization are all possible now. We walk through the underlying technology and demonstrate the practical use of it in an open-source sample application. Technologies covered include IndexedDB, WebStorage, Workers, Strongly Typed Arrays and Canvas. Some attention will also be paid to performance limitations, browser support and polyfills for older browsers.
Keywords javascript html5 geoprocessing
Server (computing) Information Computer file Mapping Multiplication sign Web browser Shape (magazine) Number Web 2.0 Computer animation Modul <Datentyp> Website Software framework Endliche Modelltheorie
Point (geometry) Covering space Computer animation Mapping Electronic visual display Web browser Number
Process (computing) Computer animation Information Multiplication sign Surface Right angle Web browser Field (computer science)
Graphical user interface Message passing Thread (computing) Computer animation Different (Kate Ryan album) 1 (number) Web browser Endliche Modelltheorie Bounded variation Window Neuroinformatik
Sequel Electronic mailing list Database Web browser Power (physics) Number Web 2.0 Array data structure Computer animation Operator (mathematics) Buffer solution Normal (geometry) Integer Object (grammar) Routing
Revision control Web 2.0 Subject indexing Arithmetic mean Computer animation Data storage device Database Local ring
Server (computing) Computer animation Visualization (computer graphics) Telecommunication Interface (computing) Data storage device
Point (geometry) Computer animation Video game Library (computing) Condition number
Point (geometry) Web page Demon Server (computing) Context awareness Thread (computing) Divisor Computer file Code Gene cluster Primitive (album) Web browser Drop (liquid) Streaming media Mereology Element (mathematics) Neuroinformatik Twitter Number Web 2.0 Array data structure Strategy game Cuboid Electronic visual display Nichtlineares Gleichungssystem Physical system Area Mobile Web Information Demo (music) Consistency Binary code Data storage device Shared memory Parallel port Limit (category theory) Cartesian coordinate system Subject indexing Computer animation Mixed reality Buffer solution output Iteration Spacetime Library (computing)
Trail Computer animation Computer file Mapping Multiplication sign Control flow Coma Berenices Tuple Demoscene
and of the took about just things we do in the browser these days and this is clearly not the model want anymore I still see in unfortunately a large number of of sites like this when you go and look at the that I give a melancholy other websites and other places like that have data or to provide some kind of you for information and David the still stuck on a very old model and and and a lot there's also you do with and that so much uh stuff goes back to the server to do anything interesting at all the most stuff is just display of and I think we've moved beyond that so this is a less of a demonstration of what is assume you just copy and paste and create yourself right now but more of what's possible and what we should be moving towards of you know we've got a nice modular CSS frameworks and then you i frameworks that we don't need any whole solution anymore you can put your little pieces you want in style at the way you want to make a these individualized and do things that are a specific for a year users and so you don't even need to have a a web server to look at the files and I can that these days and again count the nerve has if you ask me the shape file and I wanna see it on the OpenLayers map for some other kind of map of however I do that and the for a long time was like will you really have to have some that server and it's gotta be can bring that shit fell into ju j centers else like that and then I'm sorry it out and so now I
get a nice little of drag-n-drop tools that will let you just drag and drop stuff onto a map like this example from cover calf of and I can just drop of very large a number of points on the here and then am it sends those back to a worker it takes a zipped shapefile unzips it and displays the points all your browser and of course no doing alive it's not working at working supersleuth so it was an impressive earlier uh will give them back to that I might I might regret doing mostly demands of the but I
will this will get back to that but I'm so what's powering a lot of this stuff is an some newer and baby
eyes they're really not new there but had the support for them is now ubiquitous enough then unless you for some reason have to support II 8 of them were less and even with that there's Pauli fields and stuff like that and but so process or ii 9 right 10 will get you and then with although the modern browsers there's things that and support for a long time so be able to draw canvas by which provide you a nice drawing surface the you can and very quickly draw a lot of information on it doesn't slow down your browser of 2 SEG support again you see that's I 9 above and then
was powering that other example which mean
the is there where workers
which of those are a a separate process then add is enough
background of of your browser so it will spin up extra threads and do stuff on those roads and doesn't any realizes the Don but it does provide a good way to do computation extend it intensive stuff without slowing down the browser about and they support for it is the free widespread uh as as like this that you're and I 10 above and there are some variations and differences in windows or other things which is a so you you can have to deal with but I the so like she's the this could go it the model not able to scale this properly the in it OK well the mind of they would that's the efficiency of of all passing data back and forth these 2 things are II and that's those are the ones of our own safari Firefox and Chrome the with the lower being the better you can do better hello I'd takes a a thousand messages a way of the so they've got we get these and things that can help us out and then you can do visually Kansas stuff that with the browser still remaining available and the 1st one and
I'm definitely going doing half landowners because the 3 things that I want to straighten up the working now that I am in front of body of we so when things that make
better makes it easy to use somewhat workers a really gives the workers are unlike advantages these strongly typed arrays which again there and I 10 and above in all modern browsers and so it's instead of just a normal Joseph array which can be a list of any object Spitzer the like an unsigned integers of some or all of buffers by so it's a it's numbers it's just numbers and of the the that can be very quickly and passed around by reference or transferred over different threads and operate on very efficiently so of back in a set route powers and some the new and cool stuff you see well Jill and the allows you to do interesting stuff and so web sequel database
it's never really caught on and that's a shame because it is a good way to to store things and they give you a nice you see polite database in the browser of but uh
we do have web storage which is the local storage thing and we do have some index DB choose means which is got pretty and the bigger support knowing is really missing is safari and that's got a a kitchen as well and the next version of Safari which should be coming out very soon now the maybe announcement and the Apple think it is have we have full support for as well of and with that you can use things so things
of so if you cannot use
stuff like at a leaflet on and if you have to talk to them the RGS server or uh or want to use a things like that we've got there's as really foot which is just a I another communication where the let you talk to it knows how to talk to the servers and then bring it into of a visualization but on on leaflet which is gives you a nice interface use that and 1 of these you can also do is use and Terraformer the finest of a way that you can use the index be and of local storage to to persistent persister stuff so you could hold on a dataset and the and it gets stored and local storage you to be disconnected and still be able to to show it to later yeah
this condition set for that and so even stuff that make up that's been thought to be alone fairly complex anyone to do on the server of like taking up points in trying to implement it tends Anna and then displaying them that this is a simple example on of using D 3 but you can use of of the library called Delaney fast which that the divine and use it directly in a stuff like leaflet for upper layers or the as the RGS API and the and get the same kind of of speed and performance and which and July asking as show some of that and the my my life delivers not working at all but the the well so I do know I'm kind of done and stuff he heard anyway as there any questions consequent yes you got it right on
yeah there is there is a size or iterations and it depends on the browser and the device so the if you like and desktop verses of mobile device those are different and the some things like uh will let you request more or less space of things and they will other browsers will actually and thank you like destroyed the database build and do do a new 1 so if worry about that and limitations are generally reasonable unless you're storing it's a lots of Mosaddegh I think so you can get the Over the pretty pretty large amount and index B which is even more than you do in local storage I and share of he said the the supply where workers that they had sentations as to what you could actually give them what what what data they could work on what your point to invoke them was that is that simply numerical or is that just primitives that no so you get you can pass on all but pretty much anything over to Web Worker And it out the things that you can't pass our O'Donnell months and the that canvas element so your native Donald Michie can't passes over because there's no DOM over in the browser by sigh over and the worker but at anything as you can see you can you possibly the primitives you pass at any of these uh strongly typed arrays of antidepressant blobs so all 1 the could do it is an and that's what I was part of my game aware of we take as a file so you can have a file input and the open a file or just drag it to a dragon drop area and then and you can pass that directly over to worker and then they can work on it and and past the data back to you and so that's it's nice it's a really nice to have that ability it it makes you not tied to having a server in more than just a display and data on to to some degree of other having use that as of equation that you're gonna do you know several million geocodes or and you know your buffering and I coalescing you large geometries and so the you probably our performance was going to do a lot better at doing it on a desktop owned or perceiving server side that for morally complex stuff simple them or a complex the browser is gotten good enough for you can do a lot of interest from there yes the work Stone because this is um a client-side library so those who have to bring gold data over to the Atlantic before clustering right so it doesn't reduce the network traffic right so there soon strategies for helping out that and 1 is 2 to bring that data down and then calculate the clusters over and a worker thread and then center clusters features so that cluster of like bounding box in its information over back to the the main thread but you're right it doesn't it's and it's not you're not you're still having to pull that data down i so if you're doing you can stream data through it WebSockets and other things like that it's been somewhat the server is supporting and if you said you got as a server that will support streaming by you can also improved performance like could you say were about the implications of the to any trying to wish my can of missed her that connected to everything else EDU is an example of something that it's relatively complex and that you could now do you have efficiently and the browser just as like as assuming that even 2 years ago you wouldn't think about doing without doing over on a desktop application or consonants are assigned and so that's what that was and I had a I don't know I had about points that are going to be triangulated Chen but here fortunately never did open Muller here well any other questions that's the the demon and which can be adopted file with 6 share file you and as I understood you know was supposed to go to workers yes or no right so instead of libraries for unzipping files or in India have human factors hold yeah no there's there's I'm a shapefile JS which understands the reach files and at the end of and how to unzip them as well so you can you can use that and it's really nice there's a so other enchanted things ability of workers as and related stuff like that that you and a system with binary data and this like a trading animated GIFs from you cannot there's a think where you can actually to select a number of guests from you computer and then it takes those inter Web worker creates an immediately gives it back to you and mean it's all right there in the browser so OK so try the sorry dividend work but the idea of like pushing the sh there's a pile of the Web Worker in sorted Deunan parallels pages loading is really Austin that's an awesome idea of do you have any like your else you could share with us for at the zip code or the code for doing that's when look at it offline yeah I will I was and so I'll I'll put the and the demo on my get a proposed story and uh also the tweet that information out so it's up in the prieto is my get have username to give up that come in prio I'm and it's map prio as on 20 Twitter and that so the 1st example I showed that actually from Calvin Metcalfe Anna the so yet
leaflet that Calvin Metcalf . com and you can drag and drop of shit files and tuple Jason and Jason onto the map and will display and so I would I I take that example and then at his mother's of 2 it from them yes if there are no it if there no more questions I just want to make a quick announcement and if you were in this track for the whole time you saw how crowded it
was and if you're interested in this scene track for 4 after the break and we decided to swap rooms track on track 7 will be swapping times visits a little bigger over there little more so just now for Track 7 is around here 143 144 to double room the the thank you