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 toMapComponent
-
Breaking: The properties on
GeoApps
andMapComponent
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;
}