g3w-client

KO | EN

gitlite — search

#javascript #hacktoberfest #react #typescript #go #golang #android #docker #macos #java #awesome #security #pytorch #ios

(★ 25)

Map viewer addon for G3W-SUITE

g3w-client 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# G3W-CLIENT v4.2.0-alpha.0

[![License](https://img.shields.io/badge/license-MPL%202-blue.svg?style=flat)](https://raw.githubusercontent.com/g3w-suite/g3w-client/dev/LICENSE)

G3W-SUITE scripts and configuration files needed to set up a suitable local development enviroment for the [g3w-client](https://g3w-suite.readthedocs.io/en/latest/g3wsuite_client.html) cartographic viewer.

![g3w-client](https://g3w-suite.readthedocs.io/en/latest/_images/g3wclient_interface.png)

---

## Project setup

Download and install [Node.js and NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) and [Docker Compose](https://docs.docker.com/compose/install/) in your development enviroment.

Clone and place the [g3w-suite-docker](https://github.com/g3w-suite/g3w-suite-docker), [g3w-admin](https://github.com/g3w-suite/g3w-admin) and [g3w-client](https://github.com/g3w-suite/g3w-client) repositories into three separated adjacent folders:

```sh
cd /path/to/your/development/workspace

git clone https://github.com/g3w-suite/g3w-suite-docker.git --single-branch --branch dev ./g3w-suite-docker
git clone https://github.com/g3w-suite/g3w-admin.git --single-branch --branch dev ./g3w-admin
git clone https://github.com/g3w-suite/g3w-client.git --single-branch --branch dev ./g3w-client
```
Download all javascript and docker dependencies from within your [g3w-client](https://github.com/g3w-suite/g3w-client) local repository:

```sh
cd ./g3w-client
```
```sh
npm install         # javascript dependencies (client)
```
```sh
npm run docker pull # docker dependencies (admin)
```

Create these configuration files from the available templates:

- `/g3w-client/config.js` ← [config.template.js](https://github.com/g3w-suite/g3w-client/blob/dev/config.template.js)
- `/g3w-suite-docker/.env` ← [.env.example](https://github.com/g3w-suite/g3w-suite-docker/blob/dev/.env.example)
- `/g3w-suite-docker/config/g3w-suite/settings_docker.py` ← [settings_docker.py](https://github.com/g3w-suite/g3w-suite-docker/blob/dev/config/g3w-suite/settings_docker.py)
- `/g3w-suite-docker/shared-volume/` ← add this folder if it doesn't exist

And check that the following parameters are set as follows:

```sh
# /g3w-suite-docker/.env

WEBGIS_DOCKER_SHARED_VOLUME=./shared-volume # path to docker container shared volume
G3WSUITE_LOCAL_CODE_PATH=../g3w-admin       # path to local g3w-admin folder
G3WSUITE_DEBUG=True                         # default: False
```

Now your folder structure should matches this one:

```
.
├── g3w-admin/
│
├── g3w-client/
│   ├── node_modules/
│   ├── package.json
│   ├── package-lock.json
│   └── config.js
│
└── g3w-suite-docker/
    ├── config/
    │   └── g3w-suite/
    │       └── settings_docker.py
    ├── shared-volume/
    ├── scripts/
    │   └── docker-entrypoint-dev.sh
    ├── .env
    ├── docker-compose-dev.yml
    └── README_DEV.md
    
```

For more info about this project dependencies see:

- [package.json](https://github.com/g3w-suite/g3w-client/blob/dev/package.json)
- [docker-compose-dev.yml](https://github.com/g3w-suite/g3w-suite-docker/blob/dev/docker-compose-dev.yml)

---

## How to develop

From within your [g3w-client](https://github.com/g3w-suite/g3w-client) local repository:

```sh
cd ./g3w-client
```

You can start the built-in development servers by using the following:

```sh
npm run docker:up # start g3w-admin server (backend)
```

```sh
npm run dev       # watch g3w-client assets (frontend)
```

### Plugins

If you want develop client plugins you need place them in the [`src/plugins`](https://github.com/g3w-suite/g3w-client/blob/dev/src/plugins) folder:

```sh
.
└── src/
    └── plugins/
        ├── base
        ├── eleprofile
        ├── sidebar
        └── ...
```

Update your [`config.js`](https://github.com/g3w-suite/g3w-client/blob/dev/config.template.js) file accordingly:

```js
// overrides global `window.initConfig.group.plugins` property for custom plugin development

const G3W_PLUGINS = [
  'base',
  'eleprofile',
  'sidebar',
  ...
];
```

And then start again the development servers:

```sh
npm run docker:up      # backend server (g3w-admin)
npm run dev            # frontend server (g3w-client)
```

For further information about plugin development, see also: [`src/plugins/README.md`](https://github.com/g3w-suite/g3w-client/blob/dev/src/src/plugins/README.md)

## Publish

<details>
<summary> 1. Releasing a new version of G3W-CLIENT </summary

- [ ] Ensure all [milestones](https://github.com/g3w-suite/g3w-client/milestones) issues and pull requests are resolved.
- [ ] Create or checkout to a new appropriate branch: (eg. `v3.5.x` when bumping code from `3.5.0` to `3.5.1`)
- [ ] Compile and create new tag: `npm version v3.5.1`
- [ ] Draft a new [GitHub Relase](https://github.com/g3w-suite/g3w-client/releases/new)

<summary> 1.1 <code>git tag</code> usage </summary>

**Listing local tags:**
```sh
git tag
```

**Add a new tag:**
```sh
git tag v3.5
```

**Update an existing tag:**
```sh
git tag -f v3.5
```

**Delete an  existing tag:**
```sh
git tag -d v3.5
```

**Publish a local tag:**
```sh
git push origin v3.5
```

**Publish all local tags:**
```sh
git push --tags
```

---

Fore more info:

- https://www.atlassian.com/git/tutorials/inspecting-a-repository/git-tag

</details>

<details>
<summary> 2. Updating G3W-ADMIN after the release </summary

- [ ] Create a new branch from client release zip archive: https://github.com/g3w-suite/g3w-client/releases
- [ ] Create a new PR with title: `⬆️ Bump g3w-client from <old_version> to <new_version>`
- [ ] Add the [`dependencies`](https://github.com/g3w-suite/g3w-admin/pulls?q=is%3Apr+is%3Aclosed+label%3Adependencies) label
- [ ] Add a link to changelog page in PR description (eg: `**g3w-client: [v3.8.10](https://github.com/g3w-suite/g3w-client/releases/tag/v3.8.10)**`)

</details>

---

### FAQ

[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/g3w-suite/g3w-client)

<summary>1. How can I start or stop docker containers?</summary>

For those unfamiliar with docker development [docker-compose](https://docs.docker.com/compose/) is a tool for defining and running multi-container applications.

Below are described the most frequent commands, that are also available here in this repository as [npm scripts](https://docs.npmjs.com/cli/run-script/), you can find similar information by running `npm run` from the command line.

Define and run the services that make up the g3w-client (admin) development server:

```
docker
  docker compose --env-file ../g3w-suite-docker/.env --file ../g3w-suite-docker/docker-compose-dev.yml --project-name g3w-suite-docker --project-directory ../g3w-suite-docker
```

Create and start containers (run default admin server at [localhost:8000](http://localhost:8000)):

```
docker:up
  npm run docker up -- -d
```

Stop and remove containers, networks, images, and volumes:

```
docker:down
  npm run docker down
```

Validate and view the Compose file (load and parse [docker-compose-dev.yml](https://github.com/g3w-suite/g3w-suite-docker/blob/dev/docker-compose-dev.yml) and [.env](https://github.com/g3w-suite/g3w-suite-docker/blob/dev/.env.example) variables):

```
docker:config
  npm run docker config
```

View output from containers:

```
docker:logs
    npm run docker logs
```

For more info:

- [Overview of docker-compose CLI](https://docs.docker.com/compose/reference/)

</details>

<summary>2. How can I inspect actual docker configuration?</summary>

If you are having trouble with your current project configuration you can use the docker config command to inspect the actual values of the variables passed to your docker container:

```sh
npm run docker config
```

If your container struggles to boot properly you can also use the docker logs command related to a specific container:

```sh
npm run docker logs g3w-suite -- -f
npm run docker logs postgis -- -f
```

For more info:

- [Overview of g3w-suite dockerization](https://g3w-suite.readthedocs.io/en/latest/docker.html)

</details>

<summary>3. How can I keep client plugins updated ?</summary>

Currently built-in and custom plugins are managed with several "independent" git repositories, so there is currently no automated task to achieve this.

You can use the following commands to fetch the latest changes of built-in plugins:

```sh
cd /g3w-client/src/plugins/editing

git pull editing
```

```sh
cd /g3w-client/src/plugins/openrouteservice

git pull openrouteservice
```

```sh
cd /g3w-client/src/plugins/qplotly

git pull qplotly
```

```sh
cd /g3w-client/src/plugins/qtimeseries

git pull qtimeseries
```

If you are looking for an alternative workflow, also try to take a look at [git submodules](https://git-scm.com/book/en/v2/Git-Tools-Submodules) or [git subtrees](https://www.atlassian.com/git/tutorials/git-subtree)

</details>

<summary>4. How can I add a custom item to main menu?</summary>

Example, adding a custom link to "change map" modal:

![image](https://github.com/user-attachments/assets/a1fd6d45-fb34-48bd-847c-c6d6f6a36057)

You can achieve this through the following python setting:

```py
# g3w-suite-docker/config/g3w-suite/settings_docker.py

G3W_CLIENT_HEADER_CUSTOM_LINKS = [{
  "i18n":   True,
  "icon":   "fas fa-sync-alt",
  "title":  "changemap",
  "type":   "modal",
  "target": "#modal-changemap"
}]
```

which is roughly equivalent to:

```js
// path/to/your/custom.js

g3w.app.once('initconfig', () => {
  initConfig.header_custom_links = [{
    "i18n":   true,
    "icon":   "fas fa-sync-alt",
    "title":  "changemap",
    "type":   "modal",
    "target": "#modal-changemap"
  }];
});
```

For more info: [`G3W_CLIENT_HEADER_CUSTOM_LINKS`](https://g3w-suite.readthedocs.io/en/v3.11.x/settings.html#g3w-client-header-custom-links)

</details>

<summary>5. How can I add a custom context menu item?</summary>

```js
/* Custom context menu item (v4.1.0) */

g3w.app.on('map:context-menu', menu => {
  menu.items.push({
    label: 'Custom map entry',
    children: [{ label: 'Child 1', cbk: () => alert('child 1') }],
    position: 100,
  });
});
```

</details>

<summary>6. How can I change the default colors?</summary>

There are several options (depending on your coding skills 👨‍💻), but our basic advice is almost always the same 👉 [`G3WSUITE_CUSTOM_CSS`](https://g3w-suite.readthedocs.io/en/v3.11.x/branding.html#g3wsuite-custom-css).

![image](https://github.com/user-attachments/assets/a0f86d7e-e501-4bb7-8a16-03022278d9fc)

Here is a foundation you can use for create a your own custom theme:

```css
/* Custom G3W-CLIENT theme (v4.0.0) */

:root {
  --skin-color: red;
}

.main-sidebar {
  --bgcolor: #eee;
  border-right: 1px solid #d6d6d6;
}

.main-sidebar *:not(legend) {
  color: initial !important;
}

.sidebar-aside-toggle {
  --bgcolor: #555;
}

.main-sidebar .panel-button.fa-circle {
  display: none;
}

.ol-scale-line-inner {
  color: #fff;
  border-color: hsl(from currentColor h s l / 80%);
}
```

</details>

<summary>7. How can I translate this project?</summary>

Language files are stored into the [`src/static/locales`](https://github.com/g3w-suite/g3w-client/blob/dev/src/static/locales) folder.

By adding some of these lines (eg. into your `plugin.js` or `custom.js`) you can change or add custom translation entries:

```js
g3w.app.isReady().then(() => {
  g3w.gettext.register('en', { 'Credits': 'Impressum' }); // change default "en" locale: `Credits` (en) → `Impressum` (en)
  g3w.gettext.register('it', { 'Credits': 'Impressum' }); // change default "it" locale: `Credits` (en) → `Impressum` (it)
});
```

Otherwise, edit one of that files and then submit a [pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request) with appropriate changes.

</details>

### Changelog

All notable changes to this project are documented in the [releases](https://github.com/g3w-suite/g3w-client/releases) page.

---

**Compatibile with:**
[![g3w-admin version](https://img.shields.io/badge/g3w--admin-3.11-1EB300.svg?style=flat)](https://github.com/g3w-suite/g3w-admin/tree/v.3.11.x)
[![g3w-suite-docker version](https://img.shields.io/badge/g3w--suite--docker-3.11-1EB300.svg?style=flat)](https://github.com/g3w-suite/g3w-suite-docker/tree/v3.11.x)

---

**License:** MPL-2

g3w-client

g3w-client 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

g3w-client

g3w-client 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README