npm package: @mapgear/geoapps-ui-framework
Description: This package contains the GeoApps UI Framework. With this package you can design and build easily apps based on the GeoApps-platform.
Author: MapGear B.V.
Latest version: 1.4.2

# 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](https://github.com/facebook/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](https://www.npmjs.com/package/@mapgear/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:

```tsx
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 <tenanturl> 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:

```css
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;
}
```