Add to Watchlist

Leaflet.annotate - Semantic markup for geographic web maps in HTML

40 views

Citation of segment
Embed Code
Purchasing a DVD Cite video

Formal Metadata

Title Leaflet.annotate - Semantic markup for geographic web maps in HTML
Title of Series FOSS4G Bonn 2016
Part Number 41
Number of Parts 193
Author Reißig, Malte
License 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.
DOI 10.5446/20426
Publisher FOSS4G, Open Source Geospatial Foundation (OSGeo)
Release Date 2016
Language English

Content Metadata

Subject Area Computer Science
Abstract I investigated the public Schema.org vocabulary, the Dublin Core Metadata Element Set, the HTML living standard and SVG 1.1 to make it easy for map makers and publishers to advance the markup they publish. With an understanding of geographic web maps as documents of composite structure i want to share and discuss a LeafletJS implementation representing this investigation. Building on the descriptive markup and this model of a geographic web map i also want to share the idea of developing a user dialog which could support readers of maps in analyzing WHO contributed WHERE, WHEN - and WHAT is the map about. The Leaflet.annotate API can be seen as an interface proposal for other authoring tools or geographic content management systems and with that I hope to contribute to a discussion around accessible and responsible publishing of geographic maps on the WWW.
Keywords Leibniz Institut für Länderkunde
Series
Annotations
Transcript
Loading...
Hey welcome and thanks for coming
my name is might arise again don't want to talk about and if the annotators a project I didn't that if an electric
I currently technical research assistant at the latter's Institute for Regional geography and on work in the Department for cartography and visual communication at 1st I want to talk a bit about my research perspectives and the necessary you stand what I think I might have little opinion on the contributions of my work after that I wouldn't use the experiment is more kind of an experiment and it's in plugin for the leaf of mapping library which is a beast licensed and quite popular on the way to the In the recent years more and more geographical web maps have been developed and published on the
open web platform technically this has turned all variants of these maps into documents all the hypertext markup language making them appear to me naturally as graph-like and semi-structured data through utilizing web mapping libraries mapmakers effectively turning due data of various formats into HTML elements but
I personally find what much sometimes a bit hard to read because there's so much information condensed compressed and so I thought I had this is language HTML reflect our current mapping practices and what our current practices a possibilities to extend HTML vocabulary to all mapping needs the advancing on Markov through bringing elements that reviews or H a with meaning sorry anchored in the geographical domain would allow us to make our geographical concepts and data contained in the maps explicit and accessible having kind of standard of new Hallemans emitted out of our own making these values accessible would allow 1 application developers like me and that's my background to build support of tools and visualizations which match our current a web mapping practices so take
studying my research was kind of the observation that I have difficulties to read and this maps then I was questioning I ask myself so I kind of found quite can't I find in this interactive assistant helping me to easily access and read all the information which the use encoded into their visit to give generalization and the 2nd question was how could a general and reusable map independent solution or approach to this problem possibly look like just 1
thing to add so that I'm not misunderstood and deliver them to park and as an experiment and my research findings are from independent of a concrete Web Mapping library also investigated the button over the over the possibilities to realize is that of the sun OpenLayers pardon and I have the utmost respect for the lever contribute some developers because I know so very hot his succeed and develop a library which is so popular and easy to use minimal straightforward to extend some very grateful and all credits go to leave community to making this possible because all walls I think the code is about 300 lines of code world and spend about a week and was transforming nation of leaflet sort helps to get in touch with them and new 1 the for yeah we're looking at is the standard HTML output overly food of web mapping library and so the next 1 to
go click through my research perspective the 3 core concepts which I utilized to prepare the research and the 1st is the notion of a map mashup mashups it's a concept
coined by eternal in 2006 and I get aware of it by a bit but not mission in 2013 which they basically referred to match where users makes sorry there's some types of information from various sources through georeferencing on a base map the so no big Data geovisualization for analytical purposes but I more what kind of a container format for all kinds of information displaying and using the geographical dimension as an index and organization principles the 2nd
background was from user centered perspective I question my so what kind of questions would like to ask when reading a map and their the professor matter and and the whole cost guide on how to critic maps as well as a guide from the Canadian not non profit organization for 7 to 10 days on how to deconstruct web pages that we're going and from them I deduced a perspective how like a task-oriented conception of how we could how we have finding the information they want and which is often implicitly encoded in the maps so the user centered perspective and with
that from that on i the 3rd concept was like interactive cartography which is kind of a mixture of the human computer interaction and on Custer cartographic research no mixing up because maps become more that didn't active and other researchers like Robert The Wealth of for example unlike a crowd and of course right to publish a lot about how we want to interact with that and how we can change the user experience for users of maps in general on yeah he is the author of the search dialogs which tells me to access information I would go to do details later on very briefly next up there
some OK this side also this kind of and project which use map as anchor to get a show them up previously this map
is in its use would if you click on them and menu button the bobo buttons like some say that you
get this listing and can filter this information so you really can work with information and that's what I'm talking about when I talk about cartographic injection and and empowering users to filter skim this sort of geographic items contained in the maps OK
so much for that the methodology and made a sketch and will on this basically the staff through my research from this initial observation that g of geographical that maps are off now html documents what that does not sound so overwhelmingly in New I couldn't find any exercise anyone who exercise that into dead 1 so I think that this 1 contribution because HTML is abundant quantity concept and we know and a phase where hypertext is in a certain level so we users can define 0 elements ourselves we talk about web components with changing the name of the elements and there's a lot of markup extensions available already which we with with which we can that extend to all advance market we publish and that's what I did before the diving into the standards and talk about this Markov extension side as presented use this perspective how to model could could maps then analyzed all the standard documents and so little button so these are documents he persons and and then the blue so
called this is that other
proposals which now exists fully that annotated is 15 terms and it's a combination of Schema . org vocabularies and Dublin Core vocabularies and both together make up then the standard of or near the proposal of the recommendation I'm going to show and I implemented yes non mixed up this
size was not talking that's what the geographic web maps as additional like nowadays on the left it with the browser if you inspect the document in your browser you get presented the treaty and of the text
and the hierarchical organized on data and
that's I think interesting for cartographic research and another to look at that it's not fixed it's something we can adapt to our ideas and concepts how we understand and yeah this is said to on a member approach to that
so the 2nd contribution was this a 15 on terms of matter that the 1st 2 lines the 1st 3 lines come from schema . org and the last 3 lines from Dublin Core just shortly schema . org is a general-purpose vocabulary which 1 is also well supported by search engines so the and and it defines and describes terms which which she described as a concepts in our everyday life and and the 2nd the Dublin Core popular because it's quite established already and it's and a set of metadata terms to other conceived in 2008 to annotate any kind of information is also the most basic made about him and my proposes to even some annotated every single word map element contained in the geographic maps maps with these 15 minutes of terms so they become independent items reusable and so on the this
is sort from an example of what people do with maps plane is this songs and streams in the background so it's actually an order collection and a lot of work and efforts when I was like what I say information organization practice went into sending this man but from the document perspective it's a container where which cannot be reused I cannot export open this in VOC yet because it's just in the map and this single items are not addressable identifiable and so on so it would be cool to build alternative visualizations and maps as reusable containers on yeah and the 3rd conclusion
for the research committee I hope is this set small black which transforms the way leave it produces HTML which I want to show you I time cool as I said leave that as a BSD-licensed javascript library along us to to develop and publish injective geovisualization on the web a according to were
built with . com is currently life installed at over 80 thousand websites at least I think and 1 of the bigger websites using it is OpenStreetMap but also a lot of commercial providers building and I'm yeah cherishing the simplicity and extendability of of leaflet and you probably all them and which leverage the power of it and bring it to the users so
the next vocabulary as I set out to study was a leaflet vocabulary and this is a sketch of the a sketch of a basic element it based web map on the left you have a lot of body the due date which provides a recorded reference system then we have the base layer which I'm not going to talk about because it's most it's always a different technology than HTML and then we have set several kinds of overlays and my plugin concentrates on an airplane users of leaflets to annotate these overlays and parts of these overlays where the schema . org terminology as we say here at this single items contained in 1 layer can be grouped arbitrarily to and the layers can be stacked and overlaid we are here looking
at our screens just imagine how this all works and this also this as a functionality because users can simply hide and show the is this is built into leaflets but the 1st observation was also that no matter how complex arrangements you do with leave it in the task of API HTML does not
reflect this that this an organization which is really hard because it removes hierarchical and you can more than we do more complex things than hierarchical organization and it was just the the overlays and singer Webmap elements so anything important to say to those I
think the thanks to prevent a plug-in i with the plug-in for the Repo consists of 2 components the 1st is that the the descriptive need to include if you want to generate semantic markup in your existing leaflet map and the 2nd 1 is the experiment for how to visualize is mark up and change the user experience about how used see in time and the experience maps so important part to generate but more meaningful HTML analysis the mark data to so this is how it looks like to use the visitors hate I extended the standard API off of 4 5 but core items of the Levant marker libraries a market the supermarket and when you pass enlightened type option additionally you which is the the the first one to one to a schema the port name you get already annotations annotated market on so then leave it will be have a lot of knowledge about the geographical dimension of this the acidic structure in this kind of medicine square garden in this point we have a point of location for the Madison Square Garden and when you pass this option into and GOOD fed script but it gets typed as acidic structure it um tend do then the coordinates are machine readable so the geographic dimension of the civic structured it's actually and coordinatization l and searchable by the by by search engines you don't need to worry about more except you the 2 types which is what we use in numerous to buy the machines still I think are also not aware about the research there but that's the that's my choice to empower basics you type that my choice to empower users of Clifford annotated more complex the schema works on for example the sculpture where this the the soccer market actually represents a structure in the world and you want to go and and say OK I want to map actually the the
entity or the artist who created this sculpture so in this case I need to be more specific about the geographical property indicating the geographic work otherwise if I a mark up a picture on Flickr I would need to say OK this is the the the content depicted in this picture is actually located at what you read now so this is all kind
of seeing that terms which allow for the expression of geographical dimension are supported by the leaf apply and here you see a bounding box for a map overlay image
where I already have added a bit of made which is now thank you searchable and indexable by by the surgeons but also by us as application developers the additional example of the image only the blue 1 is what leave it does originally the red 1 is what I did and the other 1 yellow on is Dublin Core and the deep orange 1 schema and this happens in runtime and developments gets added to the map when elements get added to the map I just transformed the output and so make sure that the diamond the syntax fits this is an example because we have also SOG fragments in Chanel embedded so this kind of different to our standard and recommendations and textual and that my metadata and you see From a poem about the cornea Island I guess I had never been to New York City but there was written a poem actually this coordinates so yeah the same for pop ups and even the adjacent layers so if you if integrate documents like you Jason on you explicitly after called annotated method because I don't want to annotate automatically or kinds of layers you load this 1 difference full it then compared to the other but not elements OK could go more into details but think this already showing what is capable of
enhancing the last minute before a big problem for questions of quickly demonstrate a map using different annotate and
understand it have here is a map
of the security from Wikidata which I just blatantly mapped onto the base layer and all the circle Marcus president president of the pictures of public sculptures and in Paris is just single graphical index if you want to visit Paris and see some of the art in the public space and this is already annotated as I speak and now I have this 2nd component which allows me to systematically analyze and browse the condoms because it is easier the visualizations is hard you can read any information is not really useful and so we can index which generates itself from the mark up and show some method of information we actually the source of information and this this is
actually a sculpture but 1 of those familiar so this is
an interlinked not and I can also search for example in the metadata elements and description and name and highlight certain things so it's much more positive because of the 15 terms of and propose that each of the 15 terms and I was now for filtering and accessing and and and developing reusable interactions for and their visitors of oral that maps on that's thanks for listening
and hope you join downloaded as just show the
link and contribute feedback is very common and I I hope the OK thank you the model of the rest of the view of lies on and of this my is that is social media dataset of this is the way in we call the ideas you want and they all on 1 In all of the the question was if there's not a single exist metadata assignments which cover my proposal and what I combined the 2 different and not and other vocabularies so my decision was driven by and I just could find out the scheme that always officially supported by major companies in search engines and it's it's a general-purpose vocabulary which is what I want the user so to speak about about the maps I want to enable the use of to annotate the content of the map and a general purpose way so so but I met organizations I'm that articles and make pictures I met met the persons these are concepts of a general purpose vocabulary and I not I don't want to need users to think about that map elements as abstract way as layers all elements but I want to specify the content types of search engine was 1 that the rich categorization of a general-purpose macabre was the 2nd choice was given that AUC and 1 integrated Dublin Core now is that it is possible I compare these 2 it is possible to do a all the things I do is just 1 of them but and I decided against that because org would have the solution just using schema would be very quirky and a lot of referential statements and Dublin Core I felt is also well supported and well known by many tools so my main objective was supposed to reach as many to not make anything you and didn't find another 1 so these are the most prominent ones I knew and I had there was there also about support for search engines and this was also get this kind of a faceted arguments about why did did this design decision but I hope a could explain a bit the reasoning behind it well if you don't to get away with the need to be so the question is if it's bound to data motherx no the example I showed was just using data from the data and Wikidata is open facts database also dealing with and Semantic Web and this is this part of the Montego Semantic Web that's an emerging database and I just was a great showcase to highlight how these map elements they actually get interlinked with with other semantic databases so I can actually in mind that reference these entities that's what I wanted to show and that's why I used to make a data but you can also use any other databases OK all we you need to think about the life problem that because they all of In the example like parts of them that automatically a spark occurred to begin data and it's already there the metadata so I just could give over a given through to my plugin and only to annotate anything and except for the type because I knew OK this is what I do is here the sculpture type but we get it at the same time could also replace maybe schema . org in if in the future because it has the same concept as a general-purpose vocabulary is just very specific to wikipedia but it just it's not about that the have 2 senses constant for also the of the yes I think OpenStreetMaps and for example has creator contributor date that a lot of the basic metadata to which I'm interested in and when reading a map is present in OpenStreetMap and that's that's what I hope for because actually we don't need to change much what do much manually to to enrich the mark but to make all improve on Markov overlaps just to see how the existing tools and data providers can actually it with that terms and properties can map onto this plugin so and so did the whole set of features and data are a pass through the use of computer what why and I choose the question was why did that shows the effect is that of 3 on it but I didn't leave it was quite quite readable code in in in an understandable I would say is the most prominent thing because it was easy to extend and furthermore I know about more maps is done with leaflet then I know about Napster with D 3 so it's a big audience on we also want to thank you
Meeting/Interview
Projective plane
Mapping
Texture mapping
Mapping
File format
Transport Layer Security
Element (mathematics)
Markup language
Bit
Markup language
Expert system
Perspective (visual)
Hypertext
Open set
Perspective (visual)
Web 2.0
Computer animation
Visualization (computer graphics)
Personal digital assistant
Telecommunication
Plug-in (computing)
Computing platform
Library (computing)
World Wide Web Consortium
Wide area network
Ocean current
Domain name
State observer
Building
Mapping
Storage area network
Formal language
Web 2.0
Summation
Metropolitan area network
Standard deviation
Texture mapping
Mapping
Information
Sine
Software developer
Element (mathematics)
Independence (probability theory)
Coma Berenices
Bit
Cartesian coordinate system
Computer animation
Visualization (computer graphics)
Personal digital assistant
Cuboid
Wide area network
Standard deviation
World Wide Web Consortium
Mashup <Internet>
Standard deviation
Mapping
Mapping
Code
Software developer
Markup language
Line (geometry)
Function (mathematics)
Perspective (visual)
Web browser
Table (information)
Perspective (visual)
Web 2.0
Content (media)
Computer animation
Touch typing
Core dump
Quicksort
Library (computing)
World Wide Web Consortium
Web page
Mapping
Electronic data interchange
Texture mapping
Information
Mapping
File format
Source code
Electronic program guide
Analytic set
Coma Berenices
Bit
Perspective (visual)
Subject indexing
Type theory
Hausdorff dimension
Self-organization
Data type
Plug-in (computing)
Mapping
Texture mapping
Information
Mapping
Projective plane
Interactive television
Markup language
Port scanner
Control flow
Trigonometric functions
Computer
Summation
Mixture model
Type theory
Computer animation
Authorization
Element (mathematics)
Right angle
Electronic visual display
World Wide Web Consortium
Wide area network
Metropolitan area network
Mapping
Texture mapping
Type theory
Computer animation
Information
Electronic mailing list
Personal area network
Quicksort
Metropolitan area network
State observer
Texture mapping
Connectivity (graph theory)
Element (mathematics)
Markup language
Staff (military)
Markov-Erweiterung
Markup language
Infinity
Perspective (visual)
Hypertext
Web 2.0
Summation
Computer animation
Phase transition
Energy level
Extension (kinesiology)
World Wide Web Consortium
Addition
Mapping
Texture mapping
Combinational logic
Markup language
Web browser
Web browser
Web 2.0
Summation
Computer animation
Arithmetic mean
Term (mathematics)
Task (computing)
World Wide Web Consortium
Wide area network
Pointer (computer programming)
Mapping
Computer animation
Object (grammar)
Markup language
Web browser
Emulation
World Wide Web Consortium
Maxima and minima
Building
Mapping
Computer-generated imagery
Electronic mailing list
Streaming media
Perspective (visual)
Metadata
Summation
Plane (geometry)
Term (mathematics)
Single-precision floating-point format
World Wide Web Consortium
Data type
Texture mapping
Information
Mapping
Element (mathematics)
Open source
Markup language
Line (geometry)
Set (mathematics)
Knowledge organization
Term (mathematics)
Word
Exterior algebra
Computer animation
Visualization (computer graphics)
Search engine (computing)
Order (biology)
Element (mathematics)
Quicksort
Dublin Core
Metropolitan area network
Feedback
Geometry
Code
Markup language
Coma Berenices
Table (information)
Emulation
Power (physics)
Perspective (visual)
Web 2.0
Video game
Content (media)
Computer animation
Internet service provider
Website
Software testing
Computer worm
Implementation
Extension (kinesiology)
Electric current
Library (computing)
World Wide Web Consortium
Overlay-Netz
Metropolitan area network
State observer
Mapping
Touchscreen
Mapping
Geometry
Element (mathematics)
Sphere
Mereology
Functional (mathematics)
Flow separation
Web 2.0
Computer animation
Subtraction
Physical system
Plug-in (computing)
Row (database)
Physical system
Task (computing)
Wide area network
Axiom of choice
Point (geometry)
Standard deviation
Complex (psychology)
Mapping
Multiplication sign
Connectivity (graph theory)
Hierarchy
Virtual machine
Markup language
Mereology
Goodness of fit
Computer configuration
Core dump
Square number
File viewer
Hausdorff dimension
Scripting language
Data structure
Category of being
World Wide Web Consortium
Data type
Overlay-Netz
Rule of inference
Texture mapping
Mapping
Scripting language
Geometry
Element (mathematics)
Mathematical analysis
Markup language
Control flow
Term (mathematics)
Uniform resource locator
Computer configuration
Computer animation
Software repository
Search engine (computing)
Hausdorff dimension
Clifford algebra
Element (mathematics)
Self-organization
Data type
Physical system
Library (computing)
Overlay-Netz
Computer-generated imagery
Content (media)
Medical imaging
Term (mathematics)
Hausdorff dimension
Cuboid
Category of being
Library (computing)
World Wide Web Consortium
Data type
Overlay-Netz
Multiplication sign
Mapping
Expression
Open source
Flickr
Markup language
Category of being
Computer configuration
Computer animation
Circle
Personal digital assistant
Uniform resource name
Hausdorff dimension
Meta element
Query language
Overlay-Netz
Mapping
Computer-generated imagery
Ultraviolet photoelectron spectroscopy
Division (mathematics)
Price index
Function (mathematics)
Metadata
Area
Medical imaging
Social class
Dublin Core
Object (grammar)
Chinese remainder theorem
Subtraction
Library (computing)
Arc (geometry)
Rhombus
World Wide Web Consortium
Data type
Run time (program lifecycle phase)
Metropolitan area network
Plug-in (computing)
Standard deviation
Mapping
Software developer
Element (mathematics)
Open source
Bit
Markup language
Term (mathematics)
Control flow
Cartesian coordinate system
Content (media)
Computer animation
Element (mathematics)
Code
Dublin Core
Mapping
Information
Feedback
Connectivity (graph theory)
Web page
Source code
Home page
Coma Berenices
Markup language
Binary file
Subject indexing
Image resolution
Computer animation
Visualization (computer graphics)
Oval
Thumbnail
Circle
Implementation
Normal (geometry)
Addressing mode
Information security
Physical system
World Wide Web Consortium
Data type
Ewe language
Texture mapping
Element (mathematics)
Home page
Coma Berenices
Angle
Hand fan
Metadata
Maxima and minima
Summation
Computer animation
Term (mathematics)
Descriptive statistics
Newton's law of universal gravitation
Axiom of choice
Logical constant
Decision theory
Scientific modelling
Multiplication sign
View (database)
1 (number)
Parameter (computer programming)
Mereology
Table (information)
Summation
Video game
Meeting/Interview
Linker (computing)
Hypermedia
Exception handling
Chi-squared distribution
Metropolitan area network
Texture mapping
Mapping
Feedback
Topological vector space
Sound effect
Bit
Computer
Category of being
Message passing
Internet service provider
Self-organization
Personal area network
Data type
Numbering scheme
Mapping
Open set
Metadata
Content (media)
Napster
Term (mathematics)
Database
Lie group
Plug-in (computing)
World Wide Web Consortium
Element (mathematics)
Morley's categoricity theorem
Set (mathematics)
Semantic Web
Search engine (computing)
Statement (computer science)
Object (grammar)
Dublin Core
Abstraction
Computer animation
Loading...
Feedback

Timings

  515 ms - page object

Version

AV-Portal 3.8.0 (dec2fe8b0ce2e718d55d6f23ab68f0b2424a1f3f)