@mapgear/geoapps-ui-framework v1.3.3

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

• 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

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