https://github.com/narwassco/mapbox-gl-js-client

This is the repository of Mapbox GL JS implementation for Narok Water
https://github.com/narwassco/mapbox-gl-js-client

mapbox-gl-js vectortiles

Last synced: 10 days ago
JSON representation

This is the repository of Mapbox GL JS implementation for Narok Water

• Host: GitHub
• URL: https://github.com/narwassco/mapbox-gl-js-client
• Owner: narwassco
• License: mit
• Archived: true
• Created: 2020-04-17T13:57:52.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-05-15T10:54:23.000Z (over 2 years ago)
• Last Synced: 2024-08-02T03:01:25.923Z (4 months ago)
• Topics: mapbox-gl-js, vectortiles
• Language: JavaScript
• Homepage: https://narwassco.github.io/mapbox-gl-js-client/
• Size: 22.2 MB
• Stars: 1
• Watchers: 2
• Forks: 2
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# This repository was moved into [narwassco/watergis](https://github.com/narwassco/watergis) repo.

# mapbox-gl-js-client

![](https://github.com/narwassco/mapbox-gl-js-client/workflows/Node.js%20CI/badge.svg)

![GitHub](https://img.shields.io/github/license/narwassco/mapbox-gl-js-client)

[![Gitter](https://badges.gitter.im/narwassco/community.svg)](https://gitter.im/narwassco/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)

This client shows Mapbox Vetor Tile of water supply map for Narok Water.

## Installation

```

git clone https://github.com/narwassco/mapbox-gl-js-client.git

cd mapbox-gl-js-client

yarn

```

## Configuration

Please edit your own settings on `config.js` such as mapbox accessToken, stylefile URL, etc.

```js

{

    accessToken : process.env.ACCESSTOKEN,

    attribution : 'Your attribution',

    styles : [

        { title: 'Style Name', uri: 'Stylefile URL',}, 

    ],

    center: [35.87063, -1.08551],

    zoom: 13,

    search:{ //if searching window is not necessary, please delete "search" property from config.js

        url: 'GeoJSON URL for searching',

        target: ['connno', 'serialno'], //target column name for searching

        format: (p) => {return `${p.customer}, ${p.connno}, ${p.serialno}, ${p.village}`}, //format of searching result

        place_type: ['meter'],

        placeholder: 'Search CONN NO or S/N',

        zoom: 17,

    },

    popup: { //if popup is not necessary, please delete "popup" property from config.js

        //target of layer name which you want to show popup

        target: ['meter','flow meter','valve','washout','firehydrant','tank','pipeline'/**,'intake','wtp'*/]

    }

}

```

## for Development

```

yarn start

```

Then, local server will be launched automatically. You can access to http://localhost:8080/ and check how your development works before deploying to gh-pages.

## Before deploying

### put `Mapbox AccessToken` and `CNAME` in `.env` file

Before deploying to your Github pages, please make sure configuring your `AccessToken` and `CNAME` in `.env`. 

```js

ACCESSTOKEN=Your public access token for Mapbox

CNAME=Your custom domain. If you don't have custom domain, just delete it.

```

### Delete Script of Google Analytics from `index.html`

```html

    window.dataLayer = window.dataLayer || [];

    function gtag(){dataLayer.push(arguments);}

    gtag('js', new Date());

    gtag('config', 'UA-170080825-1');

```

## Build

```

yarn run build

```

Then, `bundle.js` will be created under `dist` direcotry.

## Deploy to gh-pages

```

yarn run deploy

```

## Attribution

When you use printed map, please includes attribution as follows.

If you can include HTML, use this code snippet that includes links to Mapbox & OpenStreetMap:

```html

© NARWASSCO, Ltd. © Mapbox © OpenStreetMap Improve this mapPowered by the United Nations Vector Tile Toolkit

```

For print output or if you can’t include links, use this text-only attribution:

```

© NARWASSCO, Ltd. ©Mapbox ©OpenStreetMap contributors, Powered by the United Nations Vector Tile Toolkit

```