Logo TIB AV-Portal Logo TIB AV-Portal

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

Video in TIB AV-Portal: Leaflet.annotate - Semantic markup for geographic web maps in HTML

Formal Metadata

Leaflet.annotate - Semantic markup for geographic web maps in HTML
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
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
Meeting/Interview projects
mapping beasts Markup open subsets experts sun perspective hypertext elements web plugin platforms web map mapping formating bits markup perspective Computer animation visualisation case communication libraries WAN
current Observation building mapping 3rd sun Arm van Sans information elements web Google Sum domain man standards map mapping information sin Development independent coma bits applications Computer animation visualisation case box WAN
standards mash up mapping table code 3rd functions sun perspective Arm web touch core web web standards mapping Development sun lines markup browser perspective contents Computer animation sort libraries
web pages mapping Elektronischer Datenaustausch map information mapping formating sources Guide analytics coma bits perspective dimension Types Indexable Types organization
plugin mapping map information mapping projects interactive Menu scans Continuation markup sun cotangent elements computational mixture Types Computer animation Authorization Right Display Sum web WAN
man mapping map Types Computer animation information The list WPAN Menu sort
man Observation map markup component Markov-Erweiterung staff markup infinity perspective hypertext elements web Computer animation phase level extent Sum web
addition mapping map combination browser markup sun browser web Computer animation means terms Sum tasks web WAN
Pointer mapping Computer animation objects maximal markup browser Emulation web
building mapping images sets The list Stream perspective metadata elements terms single Sum web data types sources map mapping information plan Menu lines Wissensordnung markup terms elements words alternatives Computer animation visualisation search engine orders sort Dublin Core
man table feedback code coma markup Emulation powerful perspective web geometric contents Computer animation provide website life testing Payload implementation extent current libraries web
overlay man Observation functionality mapping screens mapping Sphere part several elements web geometric Computer animation different systems plugin systems record tasks WAN
point choice standards complex mapping script markup component time machine part dimension elements geometric goodness configuration hierarchy case core square viewer Dimension structure category web data types overlay rules map mapping analysis markup Continuation terms elements Types Location configuration Computer animation repo search engine Clifford organization systems libraries
overlay images dimension contents image terms Dimension box category libraries web data types overlay sources time mapping expressive Flickr markup category configuration Computer animation circle case URN
Meta overlay mapping runtime encoding images ups division indicators functions sun metadata area elements image Dublin Core different objects Query chinesische Restsatz libraries Arc diamond web data types sources man plugin standards mapping Development bits markup terms Continuation applications elements contents Computer animation classes
feedback component sources neural network van circle implementation normal PEAS Security web data types mapping information high resolution web pages coma markup bin Indexable Computer animation visualisation Void's thumb systems
Virtual Home Environment map web pages maximal coma angles fan metadata elements Computer animation terms Sum descriptions Gravitationsgesetz
choice decision time views ones sets schemes open subsets argument part Meeting/Interview hypermedia case model exception Chi-Quadrat-Verteilung man map mapping feedback TVs effects bits Computing category Types message-based provide organization WPAN mapping table link metadata elements contents Napster terms lies Sum plugin web categorical Databases Semantic Web search engine statements life objects Abstract
Computer animation
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