{"id":21975069,"url":"https://github.com/watergis/mapboxgljs-boilerplate","last_synced_at":"2025-04-28T15:39:57.338Z","repository":{"id":109406189,"uuid":"293063098","full_name":"watergis/mapboxgljs-boilerplate","owner":"watergis","description":"This is the template of Mapbox GL JS implementation for Water Services Providers.","archived":false,"fork":false,"pushed_at":"2023-06-22T14:35:35.000Z","size":2898,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-22T04:04:30.914Z","etag":null,"topics":["boilerplate","mapbox-gl-js","vectortiles"],"latest_commit_sha":null,"homepage":"https://watergis.github.io/mapboxgljs-boilerplate/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/watergis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":["JinIgarashi"],"open_collective":"watergis","custom":["https://www.paypal.me/jinigarashi"]}},"created_at":"2020-09-05T11:35:21.000Z","updated_at":"2025-03-20T13:20:17.000Z","dependencies_parsed_at":"2023-12-08T21:45:19.997Z","dependency_job_id":null,"html_url":"https://github.com/watergis/mapboxgljs-boilerplate","commit_stats":{"total_commits":21,"total_committers":2,"mean_commits":10.5,"dds":"0.38095238095238093","last_synced_commit":"eab7b7495d5713b0e04b5eb49894091ae59dc6b4"},"previous_names":[],"tags_count":7,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/watergis%2Fmapboxgljs-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/watergis%2Fmapboxgljs-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/watergis%2Fmapboxgljs-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/watergis%2Fmapboxgljs-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/watergis","download_url":"https://codeload.github.com/watergis/mapboxgljs-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251340312,"owners_count":21573880,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","mapbox-gl-js","vectortiles"],"created_at":"2024-11-29T15:49:31.488Z","updated_at":"2025-04-28T15:39:57.309Z","avatar_url":"https://github.com/watergis.png","language":"JavaScript","funding_links":["https://github.com/sponsors/JinIgarashi","https://opencollective.com/watergis","https://www.paypal.me/jinigarashi"],"categories":[],"sub_categories":[],"readme":"# mapboxgljs-boilerplate\n![](https://github.com/watergis/mapboxgljs-boilerplate/workflows/Node.js%20CI/badge.svg)\n![GitHub](https://img.shields.io/github/license/watergis/mapboxgljs-boilerplate)\n[![Gitter](https://badges.gitter.im/narwassco/community.svg)](https://gitter.im/narwassco/community?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge)\n\nThis is the template of Mapbox GL JS implementation for Water Services Providers.\n\n## Installation\n\n```\ngit clone https://github.com/watergis/mapboxgljs-boilerplate.git\ncd mapboxgljs-boilerplate\nnpm i\n```\n\n## Configuration\nPlease edit your own settings on `config.js` such as mapbox accessToken, stylefile URL, etc.\n\n```js\n{\n    accessToken : process.env.ACCESSTOKEN,\n    attribution : 'Your attribution',\n    styles : [\n        { title: 'Style Name', uri: 'Stylefile URL',}, \n    ],\n    center: [35.87063, -1.08551],\n    zoom: 13,\n    search:{ //if searching window is not necessary, please delete \"search\" property from config.js\n        url: 'GeoJSON URL for searching',\n        target: ['connno', 'serialno'], //target column name for searching\n        format: (p) =\u003e {return `${p.customer}, ${p.connno}, ${p.serialno}, ${p.village}`}, //format of searching result\n        place_type: ['meter'],\n        placeholder: 'Search CONN NO or S/N',\n        zoom: 17,\n    },\n    popup: { //if popup is not necessary, please delete \"popup\" property from config.js\n        //target of layer name which you want to show popup\n        target: ['meter','flow meter','valve','washout','firehydrant','tank','pipeline'/**,'intake','wtp'*/]\n    }\n}\n```\n\n## demo\n\nTry [codesandbox](https://codesandbox.io/s/mapboxgljs-boilerplate-910p6)\n\nSee [demo](https://watergis.github.io/mapboxgljs-boilerplate/)\n\n## for Development\n\n```\nnpm start\n```\nThen, local server will be launched automatically. You can access to http://localhost:8080/ and check how your development works before deploying to gh-pages.\n\n## Before deploying\n### put `Mapbox AccessToken` and `CNAME` in `.env` file\nBefore deploying to your Github pages, please make sure configuring your `AccessToken` and `CNAME` in `.env`. \n\n```js\nACCESSTOKEN=Your public access token for Mapbox\nCNAME=Your custom domain. If you don't have custom domain, just delete it.\n```\n\n### Insert Script of Google Analytics from `index.html`\n```html\n\u003cscript async src=\"https://www.googletagmanager.com/gtag/js?id=Your Google Analytics Code\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    window.dataLayer = window.dataLayer || [];\n    function gtag(){dataLayer.push(arguments);}\n    gtag('js', new Date());\n    gtag('config', 'Your Google Analytics Code');\n\u003c/script\u003e\n```\n\n## Build\n\n```\nnpm run build\n```\nThen, `bundle.js` will be created under `dist` direcotry.\n\n## Deploy to gh-pages\n\n```\nnpm run deploy\n```\n\n## Automate to deploy by Github Actions\nPlease add github workflows file as name of `.github/workflows/node.js.yml` file.\n\nThe below is an example of workflow file. Please change the repository name, and also register your Mapbox AccessToken and CNAME as secrets in Github repository.\n```yaml\n# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node\n# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions\n\nname: Node.js CI\n\non:\n  push:\n    branches: [ master ]\n\njobs:\n  build:\n\n    runs-on: ubuntu-latest\n\n    steps:\n    - uses: actions/checkout@v2\n    - name: Use Node.js\n      uses: actions/setup-node@v1\n      with:\n        node-version: 12.x\n    - run: npm ci\n      env:\n        NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}\n    - name: configure git, build and deploy\n      env:\n        NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}\n        ACCESSTOKEN: ${{secrets.ACCESSTOKEN}}\n        CNAME: ${{secrets.CNAME}}\n      run: |\n        echo \"ACCESSTOKEN=${ACCESSTOKEN}\" \u003e .env\n        echo \"CNAME=${CNAME}\" \u003e\u003e .env\n        npm run build\n        git config --global user.name \"watergis+githubci\"\n        git config --global user.email \"watergis+githubci@users.noreply.github.com\"\n        git remote set-url origin https://x-access-token:${NODE_AUTH_TOKEN}@github.com/watergis/mapboxgljs-boilerplate.git\n        npm run deploy\n```\n\n## Attribution\n\nWhen you use printed map, please includes attribution as follows.\n\nIf you can include HTML, use this code snippet that includes links to Mapbox \u0026 OpenStreetMap:\n```html\n© NARWASSCO, Ltd. © \u003ca href='https://www.mapbox.com/about/maps/'\u003eMapbox\u003c/a\u003e © \u003ca href='https://www.openstreetmap.org/copyright'\u003eOpenStreetMap\u003c/a\u003e \u003cstrong\u003e\u003ca href='https://www.mapbox.com/map-feedback/' target='_blank'\u003eImprove this map\u003c/a\u003e\u003c/strong\u003ePowered by the United Nations Vector Tile Toolkit\n```\n\nFor print output or if you can’t include links, use this text-only attribution:\n```\n© NARWASSCO, Ltd. ©Mapbox ©OpenStreetMap contributors, Powered by the United Nations Vector Tile Toolkit\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwatergis%2Fmapboxgljs-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwatergis%2Fmapboxgljs-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwatergis%2Fmapboxgljs-boilerplate/lists"}