Bestand wählen
Merken

Creating Custom HTML Elements for Maps

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
values looping through a bunch of elements are the objects to see if things have changed a lot of stuff that isn't very quick and requires a lot of work and under the and at a minimum it requires loading all these big libraries where we have the potential for an alternative to relies on more browser native capabilities and the last thing is a case simplicity or for people that are not terribly big fans of the dorms API at least of lowered adit lower additional surface area for API is in the browser context meaning that there's less we have to learn unless we have to add to our sort of working knowledge in order to interact with our man elements on a page so I will make
maps now well with Plano JavaScript's and what is this look like
so we have a page it's got a little divide the map our we'il scripts to grab news map box to sign make it into a match and we have a
page and it works and it's great but there's a couple things that I think are not so that 1 is the fact that we have to sort of like that get this identifier over there and so we put it on like a big underscore caps variable on the windows of knows it's private constant you know that's not a real thing we when a set of you to be here but we don't put that in our script file because that has to be reusable and maybe were starting out on the server when we render the page templates and I will come back to the page after rings script it sort of goes back and forth there's not that type of encapsulation or hiding of activity even know all we're doing is trying to show a map of where we currently are so an improvement on this
that's not that new anymore is a framework called Angular JS there are other ones there's sort of the same generation and has very much the agenda of not being unobtrusive JavaScript to the being very obtrusive of adding mark up to the door and the ads behavior to HTML elements much in the way that we're talking about but it still requires a lot of mechanics under the hood to make those changes work that's what I was referring to when I said that let their libraries that have performance of the take a performance it because of things like having to check a lot of values of looping over a DOM elements to make changes etc. or to repopulate ones so what would an angular desk custom element look like well it looks a lot like what we had before except now we have managed to take some of those values that I was unhappy about having to scatter around and and absolutes on our map element this my map is a custom tribute which we in angular is defined as a directive so what this script is doing is telling the browser or running this little application work on map components inside of that when you encounter a directive that is my guest map the CamelCase gets transformed I want you to run this function on that element when you go through and compile you're Angular JS this on my page that's not totally clear on I would probably have to spend a bunch of time looking at the docks and then be translating the docks and would all have to look at the docks for it to become really familiar what this API what this directive and application creation API is doing even know all we want is to be able to do something along these lines so that the next and
exciting alternative is what components but the moment of part of 5 they're sort of the underlying edge of ones they're getting consensus that almost to the almost to to compete almost feature complete in chrome it's not a lot of places where Google isn't but it has a lot of potential and there's some great fills so let's go ahead and start using them now this is what are my map 8 elements might look like in a world of Web components were doing essentially the same thing we were doing with Angular JS except this time instead of it being give with a customer attributes its own type of elements of I forgot to show the angular version alive it is exactly the same as the other 1 as a song so what's different this is how we define our
custom element in Web components land but it's a little bit more verbose I guess then that a angular version that's largely because the words that the native DOM interface users are longer but all we do is we say give me a prototype HTML element I'm going to extend that with this new functionality that I'm attaching to it by just defining a method this is a special 1 to create a call that it happens as soon as the elements created appears on the page and we just do our whole make maps map have met now we have what we so that they have
a page element that is just my
map that can take at tributes users a would instantiates itself and their it's
but there's a lot more we can do with that's the whole point of getting a native issue or a artificially native HTML element format would be to add encapsulated behaviors that we can hide from other developers but still export but still make available as justice element to drop on a page so let's get started trying a bit of that the the there is another another US special callback call after be changed all that but this gets called whenever 1 of those attributes that we created or any of them on an element a cousin element changes so we created this little 1 metaprogramming thing where when a value changes we see if there is a that value changed function on are element and then if there is we call with the new value what this allows us to do
what
is good to our Mac tha of the and change the zoom level of by changing that attribute now this might not seem like the coolest thing but it's pretty cool because that's a low level that's browser land a low-level interface to have that object works and it's being processed as a change in the same Q of events as the browsers doing all that other stuff it's not another layer of evaluation is going through another framework that we loaded just because we wanted to have an interaction it didn't ship with a the diamond browser to begin with we can also go the other way so doing the same thing we did before but when talk about 2 things here 1st is that we're making a new method called my marker map and were extending not the HTML element prototype but that my prototype that we created the reason this is important is because the said portability is 1 of the benefits of this approach to creating HTML elements by having an easy interface to extend ones we get from other developers we create the possibility of taking up the map composition code that we have we flip navbox Google Maps OpenLayers whatever creating elements that use that to create a map instance adding behaviors to it and having other the other developers and other developers refined and leverage those behaviors all taking place within this 1 little tag that for the people that are using it or not necessarily building upon approaches using in their applications they can remain sort of blissfully unaware of instead of having a large library with many classes that they have to Colin and attached to things and all this so back to what we were changing 1st will create a nice little gather on object it just returns the attributes for Latin 1 as an array which is what we want them as when we're zooming about or changing things up and then will add 0 this is important but we have to call the constructor you if the call the created called that that we define an original but my maps object of here because JavaScript inheritance doesn't actually do that for you and your overriding the critical that the important thing if you don't realize that you will have of that time these we add a map dragged listener we use that to set the attributes on the element this is going the other way we have to do the bind this another thing will cause the unfortunate things if you forget because otherwise this this will be the start map and that will work so I will also add a marker and on the markers click event will dispatch a customer then we call market collected up to our element so taken altogether let's see what this gets us but so there is our friend and then as you drive around the less and 1 attributes change if we had other things listening to on them were looking at the more technically with the were the they would be updated but additionally on our marketplace we can add fun little asserted it's going to do a couple of things it's going to grab the marker map and an event listener for are Margaret click customer then this is a really small but and then it's going to make an alert referring to this that awards which will Paul are nice little gather that we created on our element which is In this context
that's so once we create that listener right a when you drive around people with very good memory numbers will see those are different and now we have 0 and now we have a fair amount of functionality that is all taking place within I the all
within our creation of these but the nation attributes I mentioned portability and extensibility as an important benefit of all this that aspect of it is still in the works there is the yes 6 at Mr. Ackerman scripts 6 the next generation of javascript has a module system until then there are many module systems a lot of them are computing and mutually exclusive part what I like is required ASR have that logo was a slight also I and we're going to
take what lastly at how we can use that to accomplish the portability and much the portability extensibility that I've been referring to without doing things they're sloppy such as as the 1st units are not doing your examples of such is having all these the globally defined in but not so let's look at a modular version of our little map with so again
it's the same as the previous 1 the code is just organize somewhat differently so on this index page all we do is we create are element with our attributes and we do this thing that required yes does where we load the library itself which is the model order and then we look for this manuscript all main does is this it says when configuring the my map sub-module tell this map box he configuration value when looking for Matt box look here and the dependencies of this page are my Matt marker that's it there's no other there's nothing else that we have to sort of run
on the page now we've load all the information we need to have the browser look at that page CIA constant element and know what to do so how does that work the the my marker map scripts that it looks forward to load because we said it was a dependence of the page has my map as a dependency it takes the my maps class where the object to class start a scripted thing ends extended the way we were going before but it doesn't have access to it it's not a global the the it's not globally available anymore it's just here but we are able to extend it and return our own the my marker map objects and we've registered our a request custom element so for looking up this is a dependency we have to go and find that here it is it takes a special dependency which is the module 1 so that gives us access to reconfigure method that returns this value from their of required tests sort bootstrap set up on this also gets our she credential which I haven't mentioned being a problem but it's not that great that we have the lake embedded on the page each time it gets that out of there and put into a configuration context which is where it belongs and it says that we need that box which is good to know because otherwise we wouldn't have the ability to set up our map but this was all the information we needed in order to get are page ready to use that custom element so so so to go back to why we
wanted to do this hopefully that illustrates the encapsulation and extensibility the potential of using custom elements to define the mapping is also many other behavior is 1 of the reasons I think maps are a great example of this is because they are data they are part of a document that we're trying to convey because it's a very much fits with the idea of web pages as documents representing data even though there often web applications we can still get a lot of thinking them as structured documents that have structure elements to reflect information the I mentioned that the
support for this is really only available in chrome on so we will also wanted to be everywhere else too so they created a project called polymer which is a Polish fills for the and for custom elements for web components which you can use pretty much anywhere and in any modern browser but there's another system called X tags from allowed they actually both share the underlying polical code now even though they have a different approach to extending it to do other things I'm also when I was putting it together I noticed that the polymer logo supposed to i think also be a brackets with the closing down so that's pretty cool knows that as it was in comparison to the tags 1 which is just some characters
so I mentioned this in passing before there's an idea and at least when I was a youngster or it was fashionable to talk about unobtrusive java script it's the idea that we shouldn't clutter the downward on click events that if we did that style and or sort of bring it back to go back and forth and also that we you should sort of just have web pages look like web pages not have them have all this have all that they have too much mark up or add 2 new elements we should have it so that the addtional was legible I think it's nicer to think of it not as unobtrusive dollar script but idiomatic HTML having pages that use the ideas and the sort of what expressive power there is in HTML to up build are pages and applications and everything else it of the together on the web including our maps when we're able to do something like this and have those at tributes respond to user interactions and update the user's view based on changes the underlying data the reason that's exciting to me is because it is idiomatic in is an idiomatic we HTML weight is a way that fits with the assumptions and the characteristics of HTML to build our map interfaces into our web pages but I guess that is not a full explanation of why it is that I find it quite so thrilling but perhaps some of you are sympathetic so but this is what we're able to do I think it's a lot better than grabbing element by site the maybe with the do with take query we have the like cats into and all this is available in visible and maybe its global now we can wrap it in some of angular brackets the way parts of web pages were meant to be and all this stuff will the example pages and other little read with the links to all the things will be on get hot as soon as I do that on the thank you that's it few years and talk faster the Minerva so there's plenty of time for questions if you as actions the the is the only when components are those CSS accessible yes so there's a whole thing about
this terrifying well part of the terrifying in the shadow down the so those elements we created you can so there's there's 2 parts thing to think you may be asking that the more complicated 1 yes so this is always actually asylum on that page but they're just an element but could you give could be a input now it's my map so you can declare CSS styles like that and they were I when you insert things inside of the custom element you created styles from outside so applied there is a thing you can do which is creating a shadow DOM route from your custom HTML elements and inside that is sort of kind of like being inside an I frame in that you can apply styles the only the only work there can do not leak out you can say all deeds of blue inside of my thing it would not affect the other ones and you have cells in the outside specified as going into shadow dom areas versus not doing so so there's a lot of stuff there and a lot of it is still being hammered out to try to figure out where to put the those boundaries so people can make components that where they indicate the way that it looks while still having control from outside make it fit into where it's going so this is there any each tier Mellish way to specify the structure of the internal of accustomed to file and uh 1 component I so this building atomic JavaScript codes for example so the quite the that's the same question of what would be the good way to use java script to build the but it structural page enhances like we don't really have a great 1 you can create the elements and insert them that's kind of slow you can create is a string and inserted against rear-ended that has like page flow issues you can just have the tag the old we we can just have stuck inside of there and interact with its a like I am Perelman find all my children called this count them use that to figure out what color I should be but they those can even be on rendered and you can use and is another weighted just pass information for example we could have had it so yet so to 2 things really quickly on we could have done things such that inside of my map we were like Mark Bear last the cost you and I look for those when we the for when we in our created back and uses the populate map with Markers as opposed to having like a bunch of out of at tributes is also let it the sort of like innumerable thing so you can put them in yourself and anyway so it's an element you put yourself anywhere you like but you could before you can also have an there initially and your question on you can also use a templating a fictional imports template API should also part of it and the whole additional 5 universe affine and closely related to our web components on and that is another way bring HTML the reason it's not necessarily super relevant for web maps is or the reason is unnecessarily superallowed relevant for web maps right now the ones that are based on using the Don is that you don't that the job a script for creating those markers and all those bits already exists and you wouldn't want to like reverse-engineer that into a templated then you bright and in a world where we thought about how the composer maps out of them more out of pre-existing HTML elements and less set of sort of JavaScript synthesize ones that we then arranged then having templates or instantiating a bunch of elements would make more sense or you're talking that what components they're like forms that a drop in we would wanna have fictional important way but formats it seems less relevant there thank you the
Addition
Vektorpotenzial
Extrempunkt
Browser
Flächentheorie
Extrempunkt
Kontextbezogenes System
Quick-Sort
Computeranimation
Homepage
Arithmetisches Mittel
Objekt <Kategorie>
Flächeninhalt
Flächentheorie
Fächer <Mathematik>
Programmbibliothek
Äußere Algebra eines Moduls
Flächeninhalt
Ordnung <Mathematik>
Ereignishorizont
Innerer Punkt
Metropolitan area network
Mapping <Computergraphik>
Matching <Graphentheorie>
Quader
Skript <Programm>
Teilbarkeit
Computeranimation
Homepage
Browser
Mathematisierung
Geheimnisprinzip
Kartesische Koordinaten
Framework <Informatik>
Computeranimation
Homepage
Eins
Richtung
Variable
Unterring
Datentyp
Bildschirmfenster
Programmbibliothek
Skript <Programm>
Zusammenhängender Graph
Lineares Funktional
Kraftfahrzeugmechatroniker
Template
Automatische Differentiation
Elektronische Publikation
Quick-Sort
Mapping <Computergraphik>
Generator <Informatik>
Menge
Betrag <Mathematik>
Server
Identifizierbarkeit
Lineares Funktional
Bit
Vektorpotenzial
Vervollständigung <Mathematik>
Momentenproblem
Versionsverwaltung
Systemaufruf
Quick-Sort
Computeranimation
Homepage
Eins
Mapping <Computergraphik>
W3C-Standard
Einheit <Mathematik>
Datentyp
Mereologie
Äußere Algebra eines Moduls
Wort <Informatik>
Benutzerführung
Zusammenhängender Graph
Prototyping
Schnittstelle
Lineares Funktional
Punkt
Mathematisierung
Systemaufruf
Computeranimation
Lineare partielle Information
Homepage
Mapping <Computergraphik>
Intel
E-Learning
Einheit <Mathematik>
Dateiformat
Softwareentwickler
Attributierte Grammatik
Browser
Mathematisierung
Klasse <Mathematik>
Interaktives Fernsehen
Kartesische Koordinaten
Extrempunkt
Code
Framework <Informatik>
Computeranimation
Übergang
Eins
Vererbungshierarchie
Programmbibliothek
Eins
Softwareentwickler
Mobiles Endgerät
Chi-Quadrat-Verteilung
Attributierte Grammatik
Schnittstelle
Leistungsbewertung
Prototyping
Inklusion <Mathematik>
Konstruktor <Informatik>
Schnelltaste
Systemaufruf
Zoom
Kontextbezogenes System
Quick-Sort
Ereignishorizont
Mapping <Computergraphik>
Objekt <Kategorie>
Rhombus <Mathematik>
Einheit <Mathematik>
Hochvakuum
Lateinisches Quadrat
Instantiierung
Lineares Funktional
Spielkonsole
Güte der Anpassung
Zahlenbereich
Computeranimation
Generator <Informatik>
Rechter Winkel
Festspeicher
Mereologie
Skript <Programm>
Emulator
Maßerweiterung
Mobiles Endgerät
Gammafunktion
Modul <Software>
Quader
Versionsverwaltung
Code
Quick-Sort
Computeranimation
Homepage
Mapping <Computergraphik>
Informationsmodellierung
Einheit <Mathematik>
Programmbibliothek
Maßerweiterung
Ordnung <Mathematik>
Mobiles Endgerät
Konfigurationsraum
Attributierte Grammatik
Vektorpotenzial
Quader
Browser
Klasse <Mathematik>
Bootstrap-Aggregation
Web-Applikation
Geheimnisprinzip
Web-Seite
Computeranimation
Homepage
Skript <Programm>
Emulator
Datenstruktur
Maßerweiterung
Konfigurationsraum
Softwaretest
Kontextbezogenes System
Modul
Quick-Sort
Mapping <Computergraphik>
Objekt <Kategorie>
Konstante
Einheit <Mathematik>
Last
Mereologie
Elektronischer Fingerabdruck
Information
Ordnung <Mathematik>
Fitnessfunktion
Web Site
Gewicht <Mathematik>
Gemeinsamer Speicher
Browser
Gruppenoperation
Applet
Mathematisierung
Interaktives Fernsehen
Kartesische Koordinaten
Web-Seite
Code
Computeranimation
Homepage
Benutzerbeteiligung
Poisson-Klammer
Skript <Programm>
Zusammenhängender Graph
Leistung <Physik>
Abfrage
Paarvergleich
Physikalisches System
Binder <Informatik>
Quick-Sort
Mapping <Computergraphik>
Mereologie
Projektive Ebene
Charakteristisches Polynom
Lesen <Datenverarbeitung>
Bit
Applet
Zellularer Automat
Ordinalzahl
Zählen
Homepage
Eins
Bildschirmmaske
Benutzerbeteiligung
Reverse Engineering
Prozess <Informatik>
Abschattung
Skript <Programm>
Vorlesung/Konferenz
Affiner Raum
Zusammenhängender Graph
Tropfen
Datenstruktur
Grundraum
Template
Gebäude <Mathematik>
Routing
Ein-Ausgabe
Datenfluss
Quick-Sort
Mapping <Computergraphik>
Randwert
Menge
Flächeninhalt
Deklarative Programmiersprache
Mereologie
Codierung
Dateiformat
Information
Kantenfärbung
Message-Passing
Zeichenkette

Metadaten

Formale Metadaten

Titel Creating Custom HTML Elements for Maps
Serientitel FOSS4G 2014 Portland
Autor Luxemburg, Daniel
Lizenz CC-Namensnennung 3.0 Deutschland:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen.
DOI 10.5446/31709
Herausgeber FOSS4G, Open Source Geospatial Foundation (OSGeo)
Erscheinungsjahr 2014
Sprache Englisch
Produzent Foss4G
Open Source Geospatial Foundation (OSGeo)
Produktionsjahr 2014
Produktionsort Portland, Oregon, United States of America

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract Maps appear all over the web but the core structural language of the web—HTML—does not natively support them. Adding dynamic or interactive maps to a web page or web application can involve complex JavaScript code that is difficult to reuse between contexts.Web developers are starting to have opportunities to change this. Some newer web development frameworks are designed to support HTML page elements with custom attributes as a way of defining behaviors. These frameworks anticipate web components, an emerging standard for creating fully custom HTML tags. Custom attributes and elements make it possible to effectively expand HTML to include `...`.This talk will demonstrate how to use existing JavaScript map libraries to create flexible, reusable maps that take the form of HTML elements with custom attributes. Looking forward, we'll explore how web components let us take this technique even further and create true custom HTML elements for maps and the display of other geo data.Crafting custom HTML map elements doesn't just mean making maps a first-class citizen of web page markup, it offers a whole new way to create and share web-based mapping tools between applications and organizations.
Schlagwörter web
map
javascript
leaflet
angularjs
web components
html

Ähnliche Filme

Loading...
Feedback