Building an open source imagery browser: UX and technical decisions to develop OpenAerialMap

Video thumbnail (Frame 0) Video thumbnail (Frame 1306) Video thumbnail (Frame 2166) Video thumbnail (Frame 3377) Video thumbnail (Frame 3897) Video thumbnail (Frame 8330) Video thumbnail (Frame 9173) Video thumbnail (Frame 9848) Video thumbnail (Frame 11030) Video thumbnail (Frame 11571) Video thumbnail (Frame 26510) Video thumbnail (Frame 30307) Video thumbnail (Frame 30912) Video thumbnail (Frame 35414) Video thumbnail (Frame 35892)
Video in TIB AV-Portal: Building an open source imagery browser: UX and technical decisions to develop OpenAerialMap

Formal Metadata

Building an open source imagery browser: UX and technical decisions to develop OpenAerialMap
Title of Series
Part Number
Number of Parts
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

Content Metadata

Subject Area
Last summer the new OpenAerialMap launched. OpenAerialMap (OAM) is now providing access to open satellite, aerial, and UAV imagery around the world. Users can search through a web-based map browser, conduct geographic queries to an API, upload imagery to publish openly licensed imagery, and process imagery into tile map services. Searching through many sources of imagery in a usable way was one of the biggest challenges we saw when designing the system. We knew usability was going to be critical to the adoption and success of OAM so we created a new type of grid interaction to search and find imagery. This talk will present the design and technical build process for developing the new OAM map browser and the open source tools that power the system. We'll discuss our UX experiments and how they influenced the build process, and talk about how and why we used React JS to build a grid-based imagery browser. The OAM community of open source tools is growing over the next year. We'll also provide a recap of the roadmap for the next year and how anyone can get involved.
Keywords Development Seed
Observational study Open source Software developer Decision theory Open source Parameter (computer programming) Web browser Open set Web browser Different (Kate Ryan album) Hybrid computer Queue (abstract data type) Spacetime
Satellite Medical imaging Dependent and independent variables Graph (mathematics) Dependent and independent variables Decision theory Projective plane Open source Shared memory Self-organization Web browser
Building Multiplication sign Musical ensemble Arithmetic progression
Point (geometry) Slide rule Connectivity (graph theory) Multiplication sign Set (mathematics) Library catalog Online help Angle Verteiltes System Open set Web browser Power (physics) Medical imaging Subject indexing Authorization Cuboid Position operator Physical system Form (programming) Greedy algorithm Dependent and independent variables Mapping Information Building Projective plane Computer network Bit Basis <Mathematik> Library catalog Perturbation theory Open set Web browser Category of being Subject indexing Software Quicksort
Medical imaging Execution unit Uniform resource locator Error message Cellular automaton Interactive television Angle Web browser Thomas Kuhn Number
Medical imaging Beta function Mapping Cellular automaton Image resolution Musical ensemble Angle Flynn's taxonomy Hand fan Number
Area Point (geometry) Medical imaging Software Image resolution Artificial neural network Mass Form (programming) Local Group
Medical imaging Image resolution Multiplication sign Computer-generated imagery Normed vector space Angle Web browser Frame problem
Satellite Discrete group Context awareness Pixel Building INTEGRAL View (database) Multiplication sign Direction (geometry) Zoom lens 1 (number) Analogy Set (mathematics) Insertion loss Angle Disk read-and-write head Mereology Independence (probability theory) Medical imaging Programmer (hardware) Roundness (object) Bit rate Different (Kate Ryan album) Computer configuration Core dump Square number Cuboid Process (computing) Vertex (graph theory) Pixel Monster group Physical system Area Touchscreen Mapping Software developer Token ring Hecke operator Perturbation theory Type theory Message passing Process (computing) Artistic rendering Self-organization Pole (complex analysis) Point (geometry) Dataflow Perfect group Open source Connectivity (graph theory) Artificial neural network Library catalog Web browser Drop (liquid) Event horizon Graph coloring Number Goodness of fit Energy level Nichtlineares Gleichungssystem Noise (electronics) Addition Zoom lens Dependent and independent variables Information Consistency Cellular automaton Projective plane Stack (abstract data type) Library catalog Rectangle Evolute Web browser Component-based software engineering Medical imaging Visualization (computer graphics) Blog Game theory Family Local ring
Point (geometry) Computer icon Computer file Information Real number Multiplication sign Moment (mathematics) Physical law Analogy Online help Metadata Theory Medical imaging Video game Right angle Endliche Modelltheorie Form (programming)
Execution unit Server (computing) Presentation of a group Link (knot theory) Open source Cellular automaton Multiplication sign Moment (mathematics) Token ring Interactive television Sheaf (mathematics) Database Web browser Frame problem Thomas Kuhn Medical imaging Category of being Subject indexing Word Process (computing) Bit rate Resultant Tunis
Component-based software engineering Category of being Computer file Hypermedia
argument in everybody my name is many of his own and I'm from different space hundreds and working in interviews and that's not the session is I think it's a nice way to continue after the the keynote from the European Commission about the availability of a lot of of of the observation data uh so let's start with openers the hybrid on my name is Daniel Silver Award for development seed and they bring you open enrollment it also known as building an open-source imagery browser you x and technical decisions to develop over yeah I'm working
very short battle for my talk because this is not going uh has anyone heard of over a before where the OEM project 0 well OK that's that's nice not expecting it in so I'm going to explain to everyone else within the problems we're trying to solve with this tool and why we decided to build it and then some considerations around uh decisions we have to make all developing it so 1st things 1st of all what kind of problems are trying to solve why did we decide to
build it we notice it was the lack of imagery for disaster response and this kind of imagery usually it's to be as apt to date and as available as possible users need to yield to find it pretty easily so to actually have an impact the 2 images from satellites and manned aerial vehicles and all of that of a graph become increasingly available after a disaster nowadays especially because you have a lot of organizations and even individuals that just as capture a lot of imagery that then share with the world so what open tries to do is to provide a simple way for users to a search find and then use and this kind of image for humanitarian a response in disaster preparedness the good example of this it's actually during the ball out mammals guinea as
you can see the progress of the OSM and it's in the
background happening bands
this was done using aerial footage of so
68 volunteers were able to map this big region
in a very short time
and this is very important for us preparedness because then the
proper authorities that can get
to the different places they can know what the facilities are
available where they are and this can actually make
a significant change in
people's lives and how How help
is this going to place that d open images what is actually the basis upon which the OEM project is built it's a network of openly licensed image using greedy cup Commons by 4 it's a distributed system not in the usual IT sense of distributed systems but in a sense that any person or entity can actually host 1 of these away and notes and it's actually pretty easy to do so and to contribute with imagery to our our system essentially we have 2 ways 1st 1 is to host 1 these notes yourselves you follow the instructions that are less than the readme you have to really see imagery under a CC-BY 4 so needs to be open and available for anyone and then once you add your information to the Register you're done and it's available it's out there for anyone to use there however if you can't afford to post node if you don't want to do so if you have the technical skills or the time to maintain 1 you can still out so contribute with imagery that you can use the Apollo there which is a form that we build and upload images to the hot wire note I'm going at the form of a little bit further in the next slide but they have mentioned only MMS open map but what is this what when I'm when I'm talking about here so M is actually a set of tools so we have different little components and we use them to find and share the images available on the 0 I so the 1st component is the catalog the catalog is responsible for indexing all the imagery in all the nodes in the O I and then making it available through this powerful API as supports and filtering by different properties like a bounding box uh the provide position date but it basically any property that's that's available however that this catalog and although can allow users to find all the images they're looking for it's a very curator it's about power users that not every user is able to understand and again response not every uses civil to use an API and so but at this point we knew the way forward the average joe to be able to use it to be able to query the system and get the information they wanted so and there's the browser as a solution the only audio and browser that provides sort tries to provide a simple way for Europe Common User to search find and use this kind of imagery OK let's see if we can get a little bit more this working that OK so and here's the
quality has a lot of my so this is actually the browser as it is right now but it provides a great based interaction so users can search for a specific location or they can just browse the world will end find whatever by solving for some each cell shaded according to the number of images
available and then you get a little number that tells you how many footprints of role this specific cell plus so let's look something up so want to select something you get the preview of the footprints there and then you
can have be review of the map this image is the very low resolution 1 so it comes from months of age and that for a satellite get like a very very big image but I haven't another a very nice
forms in the Philippines so let's go to those work but it's so
this is the same as far as you can see it's along little suspect because this image covers an incredibly small area it's captured by the UAB but it's incredibly high resolution so 4 centimeters and this is very very good for tracing purposes and so what the user responded with kind of images looking forward in the downloaded or they can use it directly in the foreseeable point of some ideal Johnson just any software that supports the masses can have to be able to to
find images more easily and also to we also support a simple filtering like like time frame or by the resolution you looking for or even if you want all images for just the 1 with the with the MSE so in brief this is what the browser there's notable like so the back so
the grid the actual browser grid was the most difficult thing to do in deal project not just technically but also a conceptually we had to figure out a way to show a lot of imagery uh in a simple way but yet powerful some way that would not overwhelm the user but our 1st try was to just place all the footprint on a map and see how this would work so it didn't of course it's a lot of noise you can if you're out where things and or where things start and you are not able to actually pick a specific specific footprints we have different sensors we have these images covering different areas coming from satellites you if he's drones that then people stitch the together so this kind of approach doesn't really work and so drawing inspiration from the heck screen experiments of drift yes indeed battleship game actually we end up playing a few rounds and we came up with this kind of core but grid uh basically it's the cell agreed that covers the for the Euler and then itself it's colored according to the number of footprints intersect so lighter colors less footprints topical more footprints that it's very easy for the user of understand that and it's very easy to navigate because light areas last without varies more and it's simple the user can just find the air is looking for and then you can zoom in and more granularly pick whatever you're looking for so the idea was there now the building process we ended up having 3 different variations of discrete so the 1st uh and option was that we started with was to a droplet based on geographical coordinates this seemed to work well but then we start moving away from the equator can we got 2 rectangles instead of squares and this was also the dramatic for the user because and for someone that doesn't keep in mind now the maps work and that you have like a projection and the earth is round it's it's weird it seemed that we Europe we're covering more area as we moved away from the equator although this is not true in the user would just get confused at this and then you get to the polls and the new directives of so long it becomes difficult to use and so we changed our approach to a kind of pixel perfect rate which we call the flow of pixel perfect pretty it's drawn based on pixels of course but by converting between coordinates and the pixels every time it's not as geographically accurate as the other 1 because once you get near the poles since the squares are always in size they pick up a smaller area but from navigation standpoint it's our problem because it the DDD the intersections of still calculated correctly and so it we won't be lying to the user that but it's so this is how it would work however this certainly had some problems with so it was not perform so as you can see OK as I as what is status all sorry this was explained a new screen interesting OK so we get to the point I want to go so here so here we actually zoomed out of 1 level and as you can see the squares got smaller and the colors disappear as since we had like fixed-size squares as soon as we saw the upper level we need it Wetmore squares to the map and the browser just couldn't cope with this because the muskrats increased exponentially and the browser would just stop working so we actually had to limit the zoom level and actually disable the Korup at the levels this was a big problem for the user because you do this context so at this level you wouldn't know where images where nor where to find them you went to either zoom in and then back there you you couldn't have like a global view of the of the system which was also a problem the head the solution for this was to use a resume independent grid which is what's implemented right now and what we've seen on the on the browser um it it is unique for might thank you so but isn't C the number of squares on-screen it's almost always the same and as assuming we have a increase in ratio of 1 to 4 so each allele square the becomes for different squares monsters remains so you can see that when the testimony 26 when you zoom in it will become for different squares so this concentration and make so that the users don't lose context of what's happening and in the area that they take up it's always the same so would be the square doesn't move and the imagery is not lost this is way faster for the brother friend there because a number of credits lower it's easy for the user and we can have d equal but always visible which gives us a very nice worldview like this you can immediately see where imagery is and what's available OK some text that now we have to build all this we used map box for the map which will be giving a fantastic books as well so we have a lot of experience with the working with an epoxy it's a very powerful system it supports powerful styling it's and it's very easily extensible and then we decided to pair it with react so when you started building this like 1 year ago or so react showed a good promise and and ice growth and evolution it's open source it has a good community and it's it's very simple to use at developments in we also often go and strive for cutting edge technologies and new things and trying new approaches to things in the past we have actually try to pair met box and angular but it turned out not to be as easy as with react but it reacts unidirectional dataflow are actually makes for a very nice integration between the 2 of them especially because of how its response to the events and it as the top-to-bottom rendering process which was also interesting that besides all this we use Travis to keep everything in check people that that's running and to keep everything deployed always think so I've mentioned in the beginning of some of the tools that make up only including the catalog and the browser which we've them eventually there but we have some some or some other ones so the 1 of the people there so this is the tool you can use to upload images to the hot wire note and it's also former to develop it's not fully open to everyone you need a token to be able to use it but it's a breeze get you just have to state their intentions with kind of mystery have and then your assigned 1 in your this is just so that we can try to reduce the number of spam images we we get but we have like a documentation that basically gathers everything every information about project quite different tools are built what they can do and actually also how to run your local copy it's still the information is still being added to it some development so if you rather it you may find coming soon message somewhere and the last but not least we have the design system so designed system here has enough material for a top of its own so I'm going to go over it very briefly it's basically a set of styles guidelines and other kind of shareable coat components to be used throughout the way ensure of visual and you have real consistency uh if someone else someone starts a new apyrene for iambic just installed this design system and they will have a bunch of pre-made tools and styles of interest use so that everything looks more as part of its and branding then we have a nice blog post about sensors and invited the diagnosis cities such as and systems and on why they're important and why we think they're a a good approach to some some 2 types of projects so what does the future look like for all and uh the 1st thing we want to do is to simplify the contribution process how people can actually help us but most of this will be done by a simplifying the process of approving imagery and contributing with imagery to the to the project and we also were looking to get more organizations level and nodes so if any of you guys has images that they can share all they want to share with the or you can find them somewhere but please consider getting to know that or if you can do that just contribute to the to opponent that also always helps but other way to get involved is with gold if you're a programmer you can just contribute to it goes to help us out otherwise just go over the tools we built give us opinions give us ideas everything is open source everything is available under the Ottawa organization it up so just check it out and let us know what you think that thank you very much so we have some time for additional questions if anyone wants to know anything about that because it was wondering about
the growing a lot of data that might be of the of the of the of the law and the letter of of the use the all right you know what about this moment the only point of X is we have through the Council of the which is that Jason API we can get information and metadata about all the all the images that we have here already the quality of the model on real life world but that's that's interesting and it may be something we we eventually to there are some of the values of of the the center of the which is on file based theories that later on want look good on you know what they can and all of and that will not have the self help from other people out and then they can be answered in this and the time you don't mind by this experiment in a that yeah definitely deflating maybe someday we will implement but think this this was the 1st 1 is would like it it is yeah sure definitely that would be it would be amazing actually is there is yeah yeah I actually yes so a is and you have to 2 ways to do it you either of the node if you can and then you have you UQ could be the owner let's say of the Belgian node or that if you can't do that you can just get the imagery and unipolar through the appeal to form uh but you have to make sure that you can do that and that that'd be the image we can become available under CC BY 4 but besides that yes it did not contain essentially yeah so this the no you few of the like the raw imagery you can use the India Poland
which shows this 1 yeah so this little form and it goes on but basically you know down
here you have fields for for all the images and even just put the links to the images in the people in this approach the hot Moyano uh which is our note if you can't have a euro
yes and the the overlapping images as the on the browser so the present only allows for the preview of 1 image at a time you you get the side panel with all the images available for a specific rate for a specific cell and then you can just select that whatever you want and there is some filtering allowed by lack of time frame last year last month last week but then once you have all the results you just have to go like 1 by 1 to see that the the the metadata and get whatever you want if if you're looking for a more powerful interaction and then DAPI would be the way to go yes there I'm not entirely sure I think Judith is the the best performance you can upload images and the elevation data we're not using it at the moment in the browser and I would showing it but it will it will be stored as a property in the database may be for a future learning process it's but right now we assume everything Amazon S 3 buckets so going on it's it's very easy to have a 0 and node you had you need to have a place which is accessible by everyone like mystery bucket or your own server if you will and then just for the section to read me which is basically at you at the URL so you're noted that to the rate at which a registered to interested and that's it then that we're working the problems the index everything and as long as the above it is accessible then uh you will find that the problem we hear the question you have but there are no it's English only uh we we don't have the multilingual support from and that's something that we had considered for the future it it yeah should bear developed 0 open source so you can find the understand and the huddle assembling it up and yeah and if you go to school so so please that deals no effect and thank you very much again you can find me on the the word but it so you can find
me 100 then this alone but there or in your social media file is seminal or if you want more questions so our
work of private property around so just common from that