MapML: The (new) "map" HTML element
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Subtitle |
| |
| Alternative Title |
| |
| Title of Series | ||
| Number of Parts | 295 | |
| Author | ||
| Contributors | ||
| 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. | |
| Identifiers | 10.5446/43483 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
| |
| Keywords |
FOSS4G Bucharest 2019101 / 295
15
20
28
32
37
38
39
40
41
42
43
44
46
48
52
54
57
69
72
75
83
85
87
88
101
103
105
106
108
111
114
119
122
123
126
129
130
131
132
137
139
140
141
142
143
144
147
148
149
155
157
159
163
166
170
171
179
189
191
192
193
194
195
196
197
202
207
212
213
214
215
216
231
235
251
252
263
287
00:00
Element (mathematics)Duality (mathematics)Level (video gaming)NumberLibrary (computing)Server (computing)Complex (psychology)GeometryInstance (computer science)TesselationHome pageContent (media)TestbedLink (knot theory)InformationDynamical systemDirection (geometry)MereologyGroup actionSubject indexingWeb browserLattice (order)World Wide Web ConsortiumPlug-in (computing)ImplementationLatent heatArithmetic progressionSlide ruleVideoconferencingJava appletMarkup languageCodeBitGoogolMappingWritingBeta functionWeb 2.0Set (mathematics)Open setLogicSoftware testingRevision controlExpert systemDifferent (Kate Ryan album)Type theoryStandard deviationWeb crawlerWeb pageAreaPerspective (visual)NP-hardAverageCategory of beingNormal (geometry)Element (mathematics)Point (geometry)Flash memoryShape (magazine)Uniform resource locatorFormal languageComputer-assisted translationPointer (computer programming)Web-DesignerProjective planeState of matterService (economics)Presentation of a groupView (database)DialectNatural numberNetwork topologyProcess (computing)Cellular automatonDescriptive statisticsCASE <Informatik>Moment (mathematics)MassElectronic mailing listWordAddress spaceWebsiteLine (geometry)FamilyMultilaterationGoogle MapsSoftwareMessage passingGradientLecture/Conference
09:25
Level (video gaming)Dependent and independent variablesTrailVector spaceFile formatInternet service providerImplementationSinc functionWeb browserSource codeRevision controlType theoryFluid staticsMereologyHome pageGeometryServer (computing)Content (media)Exception handlingCodeComputer fileUniform resource locatorSet (mathematics)Extension (kinesiology)Service (economics)SoftwareNumberoutputProjective planeData managementLibrary (computing)DatabaseLine (geometry)CodeWeb 2.0DemosceneClique-widthTesselationParameter (computer programming)InformationWeb pageDevice driverGoodness of fitFunction (mathematics)Link (knot theory)WordInstance (computer science)File viewerOcean currentSoftware testingSlide ruleMedical imagingMultiplicationMultiplication signInternetworkingClient (computing)FeedbackStandard deviationElectronic mailing listCore dumpGroup actionNetwork topologyDifferent (Kate Ryan album)WeightMappingSound effectNatural numberFilm editingCellular automatonFood energyLatent heatEmailMachine visionObject (grammar)Variable (mathematics)System callMathematicsPatch (Unix)CASE <Informatik>Order (biology)Element (mathematics)FamilyChord (peer-to-peer)Process (computing)BitMatching (graph theory)Product (business)Universal product codeFlow separationRight angleGame theorySoftware developerLecture/Conference
18:43
TesselationView (database)Level (video gaming)Group actionSoftware developerSet (mathematics)InformationVector spaceSource codeSlide rulePoint (geometry)Type theoryDefault (computer science)Web browserAverageParameter (computer programming)WebsiteRevision controlGraphical user interfaceHome pageServer (computing)Multiplication signRepository (publishing)Block (periodic table)Web-DesignerUniform resource locatorOpen sourceLattice (order)Web 2.0Computer fileMereologyImplementationVideo gameElectronic mailing listExpert systemWorld Wide Web ConsortiumService (economics)File viewerProduct (business)MappingOpen setElement (mathematics)FeedbackContent (media)Stress (mechanics)CodeData storage deviceWordLink (knot theory)Event horizonMathematicsMoment (mathematics)Interactive televisionFamilyDialectWater vaporOnline helpFlow separationAeroelasticityTraffic reportingNatural numberStrategy gameTrailExecution unitObservational studyLecture/Conference
28:01
Lecture/Conference
Transcript: English(auto-generated)
00:07
My name is Daniel Morissette from MapGears. I'll be talking about a new map HTML element that is being implemented in MapServer. That's a new spec that's being worked on, as you'll see.
00:20
As I said, I'm going to try to keep it lightweight. We, actually, I'm going to answer the questions that I had myself when I was introduced to that spec. Why do we want another spec? What problem is it solving? And then a little bit of what it is actually, what it is looking like. So there's a second author other on the presentation,
00:41
who is Peter Rashford from Natural Resource Canada. Peter was one of the instigators of that specification. He's working in the W3C, the World Wide Web Consortium, and in OGC with different stakeholders on that stuff. In my case, my involvement has been the implementation side. So I'm not an expert of the spec itself.
01:00
I will talk about it from the perspective of someone who's using it and implementing it. So implementing it in Map Server, and then also in GDAL and OGR. That's stuff that's coming soon. I'm going to use this. So as I said, why does the world need another spec? Why do we need MapML?
01:20
So that's the first question I asked Peter when he talked to me about this thing. And I realized that the idea is that it's just simply because dealing with maps on the web is easy for us, GIS people. But it's kind of hard for the average web developer. People who are used to building websites, HTML, CSS, and that normal Java.
01:41
Well, first of all, it does involve writing JavaScript code, but not just writing JavaScript code, actually selecting a JavaScript API and then writing custom JavaScript code for it. So whether you choose something like a proprietary API like Google Maps, for instance, or even if you use an open API like Leaflet or OpenLayers, you still have to write custom code and understand
02:01
the logic of that code to be able to add a simple map to your web page. And even though it looks trivial, you can copy and paste stuff, but there's the fact that you need to understand the syntax and all of that. Plus, once you think you're done, well, now you need to plan for your next update
02:21
because of deprecated APIs, because there are new devices that were not supported by the version of the library that you use or new browser features, that type of stuff. So you're constantly upgrading and retouching that code. Every couple of years, you have to retouch the code, whatever you've used as a starting point. So imagine a world where adding a map to an HTML page
02:44
is as simple as this, as simple as adding a video tag. And if you remember a few years ago, adding a video to a page involved the Flash plugin or other custom solutions. But now in HTML, there is a video tag, so all you need to do is add those few lines, and the browser is going to take care of the rest.
03:02
So that's the idea. So imagine a map tag, a map HTML element, that would do all of that job for us. So I'm cat compliant. So yeah, essentially, the idea of MapML is to have a map HTML element and to make
03:20
it easy for web people to just add a map and to hide all the complexity behind the specification, which is handled by the software. So imagine a map HTML element that's built into the browser, no JavaScript library. That's supported by all the browsers and devices, so you don't need to worry about device compatibility. That's an established standard, so there is no more
03:42
deprecated API upgrades and stuff. Once you've deployed your HTML page, it will continue to work. That's leveraging existing map standards, so it's not reinventing the wheel. So if you have tile services, WMS, WFS, whatever, they will work. That's DOM friendly. So if you're a web person, you're going to feel at home, you'll be able to go and dive and play
04:02
with the features on the map and really manipulate the map information, but in the way you would manipulate the rest of the stuff in your HTML page. That's compatible with both static and dynamic map contents. And in the end, that's also easier for search bots
04:21
to find an index, because there would be one syntax, not five JavaScript syntax that you would need to analyze if you were a search bot trying to index contents. So we can dream. It's a big list. It's a big shopping list. And the map ML is one first step in that direction. So that's where we're at right now.
04:44
Map ML is, that's the take home slide. If you have to take a picture, that's the one. There's three things to remember. Map ML is a work in progress. There is currently a draft specification. The work is led by a community group at the W3C,
05:00
but also with joint people from the OGC as well. And the spec really is composed of two pieces. There's the HTML map element, the actual map element that you put in the HTML page that looks pretty much like the video element that I was looking at earlier. And then there's a map markup language, which is the way the server tells the browser how
05:20
to deal with the map. So we'll look at those two pieces a little more later in the presentation. So the community group, just to give you a bit of history, this whole thing started in March 2014 when Peter proposed this at the joint W3C and OGC linking spatial data workshop.
05:41
At the moment, the chair of the community group, not are Peter Rushforth and Juan Maso. There are 38 participants, and this is the link. So the slides will be shared at the end. So you have a bunch of links that you'll find that allow you to get more information. So this is the link to the community group
06:01
and all their resources. So, so far, there's been specification work and implementation work done as part of OGC test beds in past years. And just recently, there's been an implementation done as a community plug-in in GeoServer. I've been working on the map server and GDL OGR
06:20
implementations. I'll talk about them a little later. OGC test bed 15 is coming, so there are players who are going to continue to play in OGC on that spec. And this September, Peter and others from the community group are going to be meeting at the W3C TPAC, which is essentially, for people familiar with OGC,
06:41
it's like the OGC TC meeting. So it's the technical something communities of the W3C. So they're discussing, continuing to discuss the spec at W3C this fall. And future activities, there is more implementations coming. One of the big items, and now I'm
07:00
talking about the community group, but one of the big things is there is no buy-in from the browser people yet. They don't, they're not convinced yet. So as you'll see, there are a couple of implementations from the geospatial side, but the browser people is where some of the work needs to be done to have reference implementations in browsers.
07:23
They call them origin trials, essentially. That's how you can have new features in browser being tested by a set of beta testers. So that's the type of stuff that's going to be coming, as well. And eventually, once the spec is mature enough, we can hope that there would be a joint standard that would be developed between W3C and OGC
07:42
if it does solve the need that it's trying to solve. So on the spec itself now, so I said there's two parts to it. There's the map HTML element that you place in your HTML page. And essentially, the map HTML element, it's built on top of the old, for those
08:01
who have done HTML stuff, there used to be a map HTML element that allowed the host to have the clickable areas and shapes way back when. And it's been forgotten. I don't think anyone uses that anymore. But it's leveraging that, so it's extending that by adding new properties like projection, latitude, longitude, which is the initial view, zoom,
08:23
width, and height, which existed before. It's adding the ability to control, to add or remove map controls, adding layer references, which are links to map ML documents, which is the second part of the spec, where the server tells the browser how to deal with the map data. And finally, the areas they used to exist before.
08:40
They were the clickable shapes that we had in HTML maps in the original versions of HTML. So that's what the hello world would look in, the map element that you'd have in the simplest example. So you have your map tag with your projection, initial view, and then the reference layer
09:01
to which you give a label, and then a URL that either points to a static document that contains the map ML language that I'm going to show later, or it could be a pointer to a geo server instance or a map server instance that, as I'm going to show you later, is able to automatically generate the contents
09:22
that the browser needs there. But you, as a web developer, don't need to worry. All you need to know is the entry point, feed it there, and then your map is added to your HTML. So no more JavaScript syntax. That's all you need to put in your HTML page to be able to instantiate a map of this specific size
09:41
with this data layer in it. If you have multiple layers, you'd have multiple layer items that you add in your map object. And then, actually, if I click on this one, I'll show you what it looks like, if the internet works for me.
10:01
So this is actually the current implementation. Since the browsers don't support map ML yet, they call that a polyfill in the web world. So polyfill comes from the word polyfilla, which is kind of patching stuff, plaster to patch walls. So essentially, there's a polyfill built on Leaflet.
10:22
So right now, there's a Leaflet viewer that implements the map ML. So that's how we're testing the implementation on the server side. And because I have three layers, so I can turn layers on and off. So that's what my, so I have essentially told my browser, I want to be able, I have three layers that I want to control independently.
10:41
And this is a browsable map, essentially. That's a WMS map behind the scenes. So that's why it's taking a bit of time. And it's not beautiful. It's just a test map. So these couple of lines of HTML produce this map. And the idea is that if the spec was supported by all browsers, it would behave the right way
11:02
on any type of device. Now, well, that's all there is to know about the map element, essentially. Now, the magic happens when the server provides the right information to the browser. So what are we doing for time?
11:21
Good. So map ML is XHTML or micro XML encoding for map information. So for a given data layer, it will provide a map extend supported projection. That's the type of stuff you're used to put in your map file as well, or that you would find in a WMS
11:41
get capabilities, for instance. Then you're going to have, the current version of the spec will support the following types of data sources. So tile sources, like a WMTS or XYZ layers, that type of stuff. Image sources, so a WMS, essentially, a request that returns a complete map image. So it can be WMS, but it could be anything else,
12:01
because the map ML syntax allows you to code different formats for the URLs. Core resources, so essentially, that's used for get feature info in WMS. So it's essentially going to return you a vector response of whatever was found at that location. And feature sources, which is like WFS.
12:22
So if you wanted to provide vector data to your browser, you would do that with the feature source in your map ML. And there's also provisions for dealing with legends, copyright attribution, that type of stuff. And the map ML also provides a DOM-friendly encoding for geometries.
12:40
It looks pretty much like WKT, except that the way WKT passes coordinates is by sending a set of X and Y, X and Y, X and Y. And this is not DOM-friendly, so the way the syntax works for the map ML is to set pairs of coordinates so that they can be accessible through the DOM in a more easy way.
13:05
So that's one exception where it's kind of reinventing a new syntax, again, for geometries, but it's a requirement to be DOM-friendly. So this is what the map ML syntax looks like. It's kind of messy visually, but keep in mind
13:21
that you're not writing that as a human. It's the software that creates that code and sends it to the web browser. So essentially, it's an HTML-like type of syntax. It's providing, it's setting a set of input variables, and then it's doing variable replacements in the URL.
13:40
So in this case, it's WMS, so you'll see width equals W. And W here is defined as an input of type width. So those types are defined in the spec, so type width, type location. There's a number of types of inputs that are defined in the map ML spec that allow you to control the behavior of your URLs
14:00
and then the behavior of your map. So essentially, the server tells the browser through that syntax how to deal with that data source. So this is a WMS example. This is a tile map example. So you'd have your tile map URL with z, x, y. So this is what the map ML looks like for this.
14:21
10 minutes. And so I won't go over the whole spec, just showing you examples, just so that you have an idea. Essentially, what you need to know is that the server normally takes care of that. Whether it's geo-server or map-server, they will build that and return it
14:40
to the browser through the link that you provided in the map tag. So current implementations of map ML. On the browser side, there is this leaflet-based polyfill that I mentioned. So it's a leaflet. I'll have a slide on it that shows how to install it if you want to use it. But essentially, it's a leaflet implementation.
15:00
George Manson University, as part of the test beds, implemented their own map clients as well. But unfortunately, there's still no native browser implementation. So that's on the to-do list. That's one of the things that Peter and the people in the community group are working hard on together with the W3C people. On the server side, or the toolkit side,
15:22
there is a community plug-in in geo-server. I'm working on the map-server implementation. It's RFC 123, if you want to keep track of it. There's also going to be an implementation in general in OGR, essentially implementing the vector feature format so that, actually, we can use it for queries in map-server. So we don't need to implement it.
15:40
Plus, someone who want to take a data source and publish it as a static map ML source can just OGR to OGR. And generate the right contents. Cubewerks has an implementation on the server side. And Ed Sherry, which is a company in the Ottawa area, also has an implementation in their Gnosis server. And finally, there's a set of services
16:01
that Natural Resource Canada are serving at this URL. So I talked about the leaflet-based polyfill, the implementation of the spec. So the way to use it, there's a Bower package for it. Bower is a package manager for JavaScript libraries. So just Bower install a web map in a folder.
16:22
And you're going. Then you instantiate it in your web page. So you need those two lines to invoke it and instantiate it. And then you plug your map element, and your map shows up. It's as simple as that. The idea is that when there's native browser support, you can get rid of this. And all you need is the map element.
16:43
The map-server implementation is, well, it's worked on under RFC 123. It's not been committed to the master version of map-server yet. It's part of my personal GitHub fork. You can get the code from there. It is working. Like I've shown you one example of a map that
17:02
was driven by map-server. Essentially, the way it's been implemented, it's the usual map-server URL with your map file reference. And it's kind of an extension to a WMS. The way we've done it is as an extension to WMS. So if you have a WMS service or WMS map file, you just need to use request equals getMapML
17:21
and specify a WMS layer name. And it's going to return the contents that the browser needs to be able to do its job. And specify which MapML projection code you want to use. MapML defines four common projection codes. It does not support all the EPSG database like WMS does. It's trying to simplify the problem for the web browser. Only a few projections need to be supported.
17:44
So that's what is added to map-server to be able to support it. There's code behind the scenes. But from the user standpoint, that's all there is to it. So when you add the reference to a map-server layer in a MapML tag in HTML, well, you'd put your map equals and then those three arguments.
18:01
That's what you put in the map HTML element. The OGR driver is going to be a method to output OGR vector features as MapML using that syntax that I said is a DOM-friendly way to encode the geometries. It's not done yet. It's going to come in the fall.
18:22
And on the next steps, well, on the community working group, as I said, they need to work on getting the browser support from the browser people and then some implementations. But also get standards people from the W3C side and from the GIS side, from us. They want to have feedback on the spec,
18:40
on what could be done better, whether this really fills a need or not, all of that stuff. Help on the DOM API development, because many of you are DOM experts and might have feedback on the best way to handle stuff. You can help by spreading the world. After seeing this talk, you can see, well, there might be people interested in the spec that could join.
19:04
So Natural Resource Canada is planning to deploy production services using the Map Server and GeoServer implementations, which they funded. So that's part of the trick and the reason why I'm here today. Then get browser support implementation,
19:20
and hopefully more implementations coming from the community after there is traction around the spec. So have a look. Join the community working group if you want. Implement the spec. Spread the word. That's what we want. A bunch of useful links. They're going to be in the slides about where
19:40
the examples are, where the spec is, all the information. And that's it for my quick talk on this. We have time, I think, for a few more questions. Yep. Any questions? Yep.
20:04
Vector tiles could be supported as another type of source. As I've shown, vector tiles, like the URL to invoke a vector tile would just be a URL similar to this one.
20:21
So from the MapML syntax standpoint, it's supported. It's just a matter of the viewer or the browser knowing what to do with it. So it's a matter of implementing it. But actually, this is something that's being discussed in the community group right now. They talked about vector tile. They talked about UTF grid, which some of you may have used in the past.
20:40
So they're wondering, should we add provision for that in the spec? But there's not much to add, really, because the way the spec has been defined will allow supporting that. It's more a matter of saying, as a web browser, you have to support vector tiles as well. Other questions? Yep.
21:09
That's a very good question. It started in 2014, so it's been five years already in the works. I think the reason why I'm here today and the reason why I gave you a high-level talk like this,
21:20
I've been in this talk answering my own questions when Peter told me about this. I was like, OK, why do we need that? How does it work? Give me the high-level, the 1,000 feet view of it. So I think we need more of these so that there's traction, that there's people who are going to start using it and start pushing for it. I believe there is value in a simple HTML map
21:41
element like this. That's why I'm here. But then, yes, it's going to take time. I see that almost like the WMS, the first version of WMS at the end of the 90s, 20 years ago. It was a first attempt at doing something, and today I think it's served us well. So two years, five years, hopefully not 10.
22:02
If in a couple of years we can have a map element like this in the HTML browsers that makes the life of web developers easier, I think we'll have achieved something. And you'll have heard of it for the first time here, you and then you.
22:29
The question was, did we speak directly to browser vendors about implementation? I did not myself, because I'm on the implementation side in Map Server, but Peter, Rashford, and the other members of the community group, they work at W3C with them.
22:43
So their meeting face to face in September as part of a larger technical committee meetings of the W3C. So they are there. They're talking with them. Their strategy, I'm not sure if I'm supposed to tell, we can close the mic. But the idea is if there's enough support for it
23:01
on the GIS side, they're thinking that then the browsers are going to have to follow. So well, that was a question actually. The major browsers are open source implementation. So do we need to start doing open source development against the browsers to start pushing for this?
23:21
That might be a way to go. You had a question? Yeah, I guess like 90% of the company websites showing, this is the location of our store, or these are all the stores around the world of this brand. And you are actually adding the base map as well. Is there a simple way of adding, say, give me any world map,
23:41
any Google map, whatever, and put a point here or here? That is a question that has come up in the community group. And there has been a debate of, should there be a set of default maps so that you don't even need to provide the layer? You can just provide the points that are going to go on top. So that's been debated. And then there's arguments of, is there
24:02
a risk that then Chrome would only support Google Maps, and then another browser would only support another source? There's that risk. But then you could still do it here. If you don't provide a layer, you probably don't care. All you need is a base map. You're right.
24:21
But this is the type of questions that have been. So the way the community group works, they use a GitHub repository to discuss the spec. So they bring up issues as a GitHub issue, and then they discuss them. And there's one issue exactly about this question. So if you want to pitch in, you're welcome. You'll find it in the list of links, the GitHub repository
24:41
for the spec. I know there were more hands, and I forgot about them. So please raise your hand again.
25:05
Well, this could be a static file on the same server that you would refer to, just like a CSS, just like an HTML page refers to a CSS. So now I'm answering myself the question. I guess you could also have a block inside your HTML that allows you to instantiate that.
25:20
Maybe, but having it as a separate file is not too big a deal. It could be static. It doesn't have to be dynamic. That's the idea, actually. One of the design principles of the spec so far has been it has to work with dynamic and static contents. It doesn't have to rely on any server-side stuff. So if you're able to export your stuff as a snapshot or something, it can work with static files as well.
25:44
You had a question? So is there an on-zoom end?
26:00
Very good question. I did not notice that there might be provision for that. But since it's trying to be DOM-friendly, any type of way to deal with events like in an HTML page normally should apply to this. So unload and that type of stuff might work as well. But I'm not the expert there.
26:23
That's a good question. But the idea is that if you want to interact with the map, with custom stuff, you would do it through the DOM, no longer with leaflet or open layers, but you would use JavaScript code that plays with the DOM to change the look of the map or change the CSS that's
26:41
applied to the features that are your points on the map and that type of stuff. More questions? Actually, we can discuss that. Well, there's no other talk to go to, so it's almost 6 o'clock for those who want to go for the beer. There's going to be a map server, birds of a feather,
27:00
gathering here in this room after. So we can discuss. There's no set agenda for the buff. It's just let's get together and chat about whatever question you have about map server, meet the developers type of thing. And if you have questions, you can, if you're interested or have questions, you can email me or Peter.
27:20
The slides are going to be available through the conference website. And I'm sure Peter would be thrilled to hear interest from people who want to contribute to the spec on various aspects, even if it's just feedback. Doesn't have to be code. But knowing what does the community think of this? Is this solving it? Is this going to be useful, make your life easier?
27:42
Of course, as GIS experts, maybe you don't need it as much as the average web people would find use for that. But anyway, so thanks a lot. And yeah, the buff is going to start in a few minutes. Thanks.