{"id":22341763,"url":"https://github.com/weaponsforge/gmaps","last_synced_at":"2025-10-17T13:13:43.180Z","repository":{"id":194292958,"uuid":"689922778","full_name":"weaponsforge/gmaps","owner":"weaponsforge","description":"Testing Google Maps APIs and LeafletJS","archived":false,"fork":false,"pushed_at":"2023-10-10T16:43:02.000Z","size":466,"stargazers_count":1,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2025-01-31T10:44:37.028Z","etag":null,"topics":["google-maps-api","google-maps-javascript-api","googlemutant","leaflet-map","leafletjs","webpack","webpack-dev-server","webpack5"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/weaponsforge.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-09-11T07:31:00.000Z","updated_at":"2023-10-07T15:02:08.000Z","dependencies_parsed_at":"2023-10-10T19:54:16.858Z","dependency_job_id":null,"html_url":"https://github.com/weaponsforge/gmaps","commit_stats":null,"previous_names":["weaponsforge/gmaps"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weaponsforge%2Fgmaps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weaponsforge%2Fgmaps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weaponsforge%2Fgmaps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weaponsforge%2Fgmaps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weaponsforge","download_url":"https://codeload.github.com/weaponsforge/gmaps/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245625194,"owners_count":20646107,"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":["google-maps-api","google-maps-javascript-api","googlemutant","leaflet-map","leafletjs","webpack","webpack-dev-server","webpack5"],"created_at":"2024-12-04T08:08:10.743Z","updated_at":"2025-10-17T13:13:43.105Z","avatar_url":"https://github.com/weaponsforge.png","language":"JavaScript","readme":"## gmaps\r\n\r\n\u003e This repository will test several Google Maps APIs using a localhost static website development environment for plain HTML, CSS, and JavaScript files with live reload using **webpack + webpack-dev-server.**\r\n\r\n\r\n### Content\r\n\r\n- [gmaps](#gmaps)\r\n  - [Content](#content)\r\n  - [Dependencies](#dependencies)\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n- [References](#references)\r\n\r\n\r\n### Dependencies\r\n\r\nThe following dependecies are used for this project. Feel free to experiment using other dependencies and versions.\r\n\r\n1. Windows 64-bit OS\r\n2. NodeJS\r\n\t- node version 18.14.2\r\n\t- npm version 9.5.0\r\n3. NodeJS webpack modules (installed via npm)\r\n\t- webpack 5.64.2\r\n\t- webpack-dev-server 4.5.0\r\n\t- webpack-cli 4.9.1\r\n\t- css-loader 6.5.1\r\n\t- style-loader 3.3.1\r\n\r\n\r\n## Installation\r\n\r\n1. Clone this repository.\r\n`https://github.com/weaponsforge/gmaps.git`\r\n\r\n2. Install dependencies.\r\n`npm install`\r\n\r\n3. Create a `.env` file from the `.env.example` file. Update the variables in the `.env` file as needed.\r\n\r\n   | Variable Name       | Desccription                                                                                                                               |\r\n   | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\r\n   | APP_NAME            | Application name                                                                                                                           |\r\n   | MAP_LAT             | Latitude                                                                                                                                   |\r\n   | MAP_LON             | Longitude                                                                                                                                  |\r\n   | MAP_ZOOM_INIT       | Web map's initial zoom (0 - 21)                                                                                                            |\r\n   | MAP_ZOOM_MAX        | Web map's maximum zoom (0 - 21)                                                                                                            |\r\n   | MAP_BASEMAP_URL     | Base map URL                                                                                                                               |\r\n   | MAP_BASEMAP_ATTRIB  | Bas map attribution text                                                                                                                   |\r\n   | MAPBOX_ACCESS_TOKEN | MapBox access token.\u003cbr\u003e Provide a `\"LeafletMapBox.accessToken\"` constructor parameter in the `LeafletMapBox` class if this variable has no value. |\r\n   | MAPBOX_STYLE_URL    | MapBox style URL (basemap style)                                                                                                           |\r\n   | GOOGLE_API_KEY      | Google Maps API key                                                                                                                        |\r\n\r\n4. Checkout a branch that tests specific Google Maps related items:\r\n   - **dev**\u003cbr\u003e\r\n      - Full screen LeafletJS web map demo.\r\n      - `git checkout dev`\r\n   - **feature/weaponsforge-10**\u003cbr\u003e\r\n      - Experiments in listing all home addresses inside a circle radius, Issue [#10](https://github.com/weaponsforge/gmaps/issues/10)\r\n      - `git checkout feature/weaponsforge-10`\r\n   - **feature/weaponsforge-11**\u003cbr\u003e\r\n      - Experiments in capturing a screenshot from a 3D (tilted) Google Map, Issue [#11](https://github.com/weaponsforge/gmaps/issues/11)\r\n      - `git checkout feature/weaponsforge-11`\r\n   - **feature/weaponsforge-22**\u003cbr\u003e\r\n      - Experiments drawing shapes on a 2D/3D (tilted) Google Map, Issue [#22](https://github.com/weaponsforge/gmaps/issues/22)\r\n      - `git checkout feature/weaponsforge-22`\r\n   - **feature/weaponsforge-25**\u003cbr\u003e\r\n      - Experiments comparing different types of base maps (MapBox satellite, 2D Google Map, 3D Google Map), Issue [#25](https://github.com/weaponsforge/gmaps/issues/25)\r\n      - `git checkout feature/weaponsforge-25`\r\n   - **feature/weaponsforge-35**\u003cbr\u003e\r\n      - Experiments testing precicion Leaflet.draw Polygon Pins (vertex) placements, Issue [#35](https://github.com/weaponsforge/gmaps/issues/35)\r\n      - `git checkout feature/weaponsforge-35`\r\n\r\n## Usage\r\n\r\n1. Run the localhost static website development environment.\u003cbr\u003e\r\n`npm run dev`\r\n\r\n1.  Edit the existing static files from the **./src** directory and wait for live reload. Your updates will reflect on the web browser.\r\n\r\n2. To include new static website files on live reload:\r\n\t- Stop the localhost **dev** server.\r\n\t- Create new static (.js, .css) files inside the **./src** directory.\r\n\t\t- Import the new **.js** and **.css** files in **./src/index.js**\r\n\t\t- Javascript events may need to be attached to Html DOM elements using `.addEventListener()` if you are only using raw Html files.\r\n\t\t- New Html files need to be encoded inside `new HtmlWebpackPlugin({ ... })` in **webpack.config.js**\r\n\t\t- Specific specific file types other than CSS and image files may need to have their node module dependency installed and included in **webpack.config.js**'s `module -\u003e rules` part.\r\n\t- Re-start the **dev** server.\u003cbr\u003e\r\n`npm run dev`\r\n\r\n1. Build the project for production environment. Built static files are placed in the **/dist** directory.\u003cbr\u003e\r\n`npm run build`\r\n\r\n1. Run the production static website (does not use live reload).\u003cbr\u003e\r\n`npm run start`\r\n\r\n\r\n## References\r\n\r\n[[1]](https://github.com/weaponsforge/livereload-basic) - live reload using gulp + browser-sync (demo)\u003cbr\u003e\r\n[[2]](https://trello.com/c/n25MYtq8) - webpack notes (trello)\r\n\r\n\r\n@weaponsforge\u003cbr\u003e\r\n20230911\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweaponsforge%2Fgmaps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweaponsforge%2Fgmaps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweaponsforge%2Fgmaps/lists"}