We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

MapComponents, a new component framework for developing web map applications

00:00

Formal Metadata

Title
MapComponents, a new component framework for developing web map applications
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
Publisher
Release Date
Language
Production Year2022

Content Metadata

Subject Area
Genre
Abstract
MapComponents is a new component framework to quickly and easily build dynamic geospatial web apps. It includes React front-end components for all kinds of projects, from small apps with a narrow and specific focus up to complex geospatial suites for the web. Server-side components are also planned to aid the development of flexible backend services. MapComponents - is a modular framework to create tailored geospatial web apps built upon modern webbrowser technology - can be used to visualise and analyse geo data - can be used for desktop and mobile applications (online and offline; progressive web apps (PWA)) - provides independent components which can be combined into full-fledged geospatial web applications (e.g. dashboards, WebGIS, ...) - provides a catalog of components and example applications - uses a flexible core which theoretically supports any kind of mapping library (currently supported are MapLibre, Mapbox GL JS and OpenLayers) - is easily integrated into existing stacks - makes it easy to rapidly design and deploy a map centric web app MapComponents is developed by WhereGroup GmbH and is available under the MIT license. mapcomponents.org/ We will present the project, with its current state and goals, and will show practical examples.
Keywords
202
Thumbnail
1:16:05
226
242
Software frameworkDeclarative programmingModul <Datentyp>CodeWeb pageSoftware frameworkINTEGRAL
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
Texture mappingRoutingInteractive televisionTime seriesEvent horizonShared memoryElement (mathematics)DiagramGreatest elementState of matterRootComputer animation
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)
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
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.
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.
Alternatively, you could also use different map libraries like, for example, open layers. And now Hannes will tell you more about the solutions.
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.
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.
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.
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.
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.
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.
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.