MapComponents, a new component framework for developing web map applications
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 |
| |
| Title of Series | ||
| Number of Parts | 351 | |
| Author | ||
| License | CC Attribution 3.0 Unported: 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/69145 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language | ||
| Production Year | 2022 |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
| |
| Keywords |
FOSS4G Firenze 202299 / 351
1
7
13
22
25
31
33
36
39
41
43
44
46
52
53
55
58
59
60
76
80
93
98
104
108
127
128
133
135
141
142
143
150
151
168
173
176
178
190
196
200
201
202
204
211
219
225
226
236
242
251
258
263
270
284
285
292
00:00
Software frameworkDeclarative programmingModul <Datentyp>CodeWeb pageSoftware frameworkINTEGRAL
00:12
Element (mathematics)INTEGRALWebsiteLibrary catalogTexture mappingDifferenz <Mathematik>Functional (mathematics)Standard deviationSlide ruleDifferent (Kate Ryan album)Open setLibrary (computing)State of matterWeb 2.0Field (computer science)Software testingSoftware frameworkRight angleUser interfaceDivision (mathematics)XMLComputer animation
01:41
Texture mappingRoutingInteractive televisionTime seriesEvent horizonShared memoryElement (mathematics)DiagramGreatest elementState of matterRootComputer animation
02:17
Template (C++)CodeDeclarative programmingModul <Datentyp>Software frameworkState of matterAreaTesselationTexture mappingVector spaceProjective planeDifferent (Kate Ryan album)FeedbackMixture modelStandard deviationType theoryLibrary catalogCuboidGreatest elementServer (computing)MeasurementComputer animation
Transcript: English(auto-generated)
00:00
You can find on our page many examples and examples to see how you get started and what is possible. The code is on GitHub and with the integration of React we have a modular-based component framework
00:21
and it's a JavaScript library for building user interfaces. You have, for example, divs or text fields or buttons that you can integrate. As we want to talk about maps, you can also create map elements or map-associated elements like layers or tools.
00:47
We provide a catalog of React components for working with maps. The geospatial component, as you can see here on the slide, is provided via map-libre with all its great functionality that it brings to you.
01:09
Alternatively, you could also use different map libraries like, for example, open layers. And now Hannes will tell you more about the solutions.
01:21
Test, test. Yes, that works nice. Right, we have some examples. You can also find them on the website. For example, we have a small Web GIS standard stuff like different WMS layers and so on. And they all React components so they all interact with the shared state. Web GIS is always interesting but also kind of standard stuff.
01:42
Let's look at some more examples. We built some dashboard from an internal event. You can see there's a map-libre map in the center with some geoJSON layers. We have some diagram at the bottom and some things to click on on the sides. And it's all React components so it all shares the state. We can click on one thing and the other elements will react to that shared state.
02:03
And for example, you see here the map updates to the time series. And if I click on the right side, it also shows then some route of a person, for example, on the map interactively. The dashboard was a mixture of React components. This here is just one component, a magnifier we call it.
02:23
We have two map layers, a WMS layer, for example, and a vector tiles layer. And there's a glass to look through it and you can see the state is shared. So we see the same area even in 3D if we rotate the map. If you know React, you might know these storyboards.
02:41
So there's lots of components for React. We have some standard geoJSON layers. We have different kind of other components like markers and measure tools. And in the storyboard, you can look at our components. You can try them and you can reuse them for your own purposes. Here you see, for example, a geoJSON layer where you just change the paint type and map components will for you reload that layer and do everything in the background.
03:04
That's needed for Map Libre. Yeah, let's skip that quickly. It's very active. We are starting to use it. I'm using TypeScript now and we will look at server side components in the future. Basically, it's a young project for us and we are starting out and we are very interested to get your feedback or ideas.
03:23
So look at our catalog of React components. Maybe you also used React already. You wrote your own map components. Maybe ours are more useful to you. We hope so. So yeah, play around. There's a play box in the bottom. Thank you.