GeoApps UI Framework

This package contains the GeoApps UI Framework. With this package you can design and build easily apps based on the GeoApps-platform.

More information?: www.geoapps.nl

What's new

Release 1.4.2

• Improvement: Smartlist was only updating the filter on the key-prop change. We updated the implementation to also trigger data reload when only the filter-prop was updated.

Release 1.4.1

• Bugfix: Smartlist performs now correctly a server side search when using the search box. This update requires at least GeoApps 31.0.38 or newer
• Bugfix: In the legend, a radio folder was not correctly rendered and showed a message that the layer item was not supported

Release 1.4.0

• Smartlist has been optimized to reduce the amount of unnecessary re-renders and data loads when the component is initialized

Release 1.3.4

• Bugfix: layers and folders are now correctly enabled and disabled again the legend
• Bugfix: ;ayers were ordered in the Legend-component in reverse (top most layer at the bottom)

Release 1.3.0

• Breaking: MapBlock is renamed to MapComponent
• Breaking: The properties on GeoApps and MapComponent has been changed
• The package now handles React correctly, and requires a minimum version of react and react-dom 16.14.0 in your own project. No additional config is required anymore
• The components for the action bar, groups and buttons are added in this version
• Extended the symbology legend with the rendering options for rasters and points
• Smartlist has been optimized with built-in server side processing for filtering or sorting. No migration is necessary, this is automatically applied within existing lists.

Getting started

This guide will help you set up a new React project with the GeoApps UI Framework.

Start a project

Start a new React project. Create-react-app is a useful tool to get going. For this getting started guide, we'll use TypeScript and NPM. Create-react-app also supports JavaScript, or Yarn of you prefer.

npx create-react-app my-geoapp --template typescript --use-npm
cd my-geoapp

Add GeoApps UI Framework

Adding the GeoApps UI Framework is as easy as running a NPM install command. This will automatically add the latest version of the UI framework:

npm install @mapgear/geoapps-ui-framework

Start development server

By now, you can start a development server. This server will serve the application on http://localhost:3000/ and will live update whenever you make changes. By default, a browser window will be opened every time you start the development server. If you don't want that to happen, create an .env file at the same level als your package.json file and node_modules directory. Enter this content:

BROWSER=none

Add components

Open the file src/App.tsx in your favorite IDE or (code) editor. Replace its content with:

import "./App.css";
import {
    GeoApps,
    SmartForm,
    TabbedContainer,
    MapBlock,
} from "@mapgear/geoapps-ui-framework";

function App() {
    return (
        <GeoApps>
            <div className="maincontainer">
                <TabbedContainer id="1" className="sidepanel sidepanel-left">
                    <Tab id="form">
                        <SmartForm formId={3} contentId={1} />
                    </Tab>
                </TabbedContainer>

                <div id="2" className="mainpanel">
                    <MapComponent
                        mapId="ENTER YOUR MAP ID HERE"
                        tenantUrl="ENTER YOUR TENANT URL HERE"
                    />
                </div>
            </div>
        </GeoApps>
    );
}

export default App;

Don't forget to change the mapId and tenantUrl property of the MapComponent component.

Add references to libraries

Add references to required libraries to your HTML's head node in public/index.html. Make sure you replace with the url of your tenant.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://<tenanturl>/scripts/geoapps/v1/geoapps.min.js"></script>

Styling

Optionally, replace your stylesheet in src/App.css with the following content:

body {
  padding: 0px;
}
html, body {
  height: 100%;
}
* {
  box-sizing: content-box;
}
.geoapps-map {
  width: 100%;
  height: 100vh;
}
.maincontainer {
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
}
.sidepanel {
  flex: 1;
  max-width: 300px;
  height: 100%;
  overflow: hidden;
}
.mainpanel {
  display: flex;
  flex: 1;
}