https://github.com/weaponsforge/gmaps
Testing Google Maps APIs and LeafletJS
https://github.com/weaponsforge/gmaps
google-maps-api google-maps-javascript-api googlemutant leaflet-map leafletjs webpack webpack-dev-server webpack5
Last synced: 2 months ago
JSON representation
Testing Google Maps APIs and LeafletJS
- Host: GitHub
- URL: https://github.com/weaponsforge/gmaps
- Owner: weaponsforge
- Created: 2023-09-11T07:31:00.000Z (over 1 year ago)
- Default Branch: dev
- Last Pushed: 2023-10-10T16:43:02.000Z (over 1 year ago)
- Last Synced: 2025-01-31T10:44:37.028Z (4 months ago)
- Topics: google-maps-api, google-maps-javascript-api, googlemutant, leaflet-map, leafletjs, webpack, webpack-dev-server, webpack5
- Language: JavaScript
- Homepage:
- Size: 455 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## gmaps
> 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.**
### Content
- [gmaps](#gmaps)
- [Content](#content)
- [Dependencies](#dependencies)
- [Installation](#installation)
- [Usage](#usage)
- [References](#references)
### Dependencies
The following dependecies are used for this project. Feel free to experiment using other dependencies and versions.
1. Windows 64-bit OS
2. NodeJS
- node version 18.14.2
- npm version 9.5.0
3. NodeJS webpack modules (installed via npm)
- webpack 5.64.2
- webpack-dev-server 4.5.0
- webpack-cli 4.9.1
- css-loader 6.5.1
- style-loader 3.3.1
## Installation
1. Clone this repository.
`https://github.com/weaponsforge/gmaps.git`
2. Install dependencies.
`npm install`
3. Create a `.env` file from the `.env.example` file. Update the variables in the `.env` file as needed.
| Variable Name | Desccription |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| APP_NAME | Application name |
| MAP_LAT | Latitude |
| MAP_LON | Longitude |
| MAP_ZOOM_INIT | Web map's initial zoom (0 - 21) |
| MAP_ZOOM_MAX | Web map's maximum zoom (0 - 21) |
| MAP_BASEMAP_URL | Base map URL |
| MAP_BASEMAP_ATTRIB | Bas map attribution text |
| MAPBOX_ACCESS_TOKEN | MapBox access token.
Provide a `"LeafletMapBox.accessToken"` constructor parameter in the `LeafletMapBox` class if this variable has no value. |
| MAPBOX_STYLE_URL | MapBox style URL (basemap style) |
| GOOGLE_API_KEY | Google Maps API key |
4. Checkout a branch that tests specific Google Maps related items:
- **dev**
- Full screen LeafletJS web map demo.
- `git checkout dev`
- **feature/weaponsforge-10**
- Experiments in listing all home addresses inside a circle radius, Issue [#10](https://github.com/weaponsforge/gmaps/issues/10)
- `git checkout feature/weaponsforge-10`
- **feature/weaponsforge-11**
- Experiments in capturing a screenshot from a 3D (tilted) Google Map, Issue [#11](https://github.com/weaponsforge/gmaps/issues/11)
- `git checkout feature/weaponsforge-11`
- **feature/weaponsforge-22**
- Experiments drawing shapes on a 2D/3D (tilted) Google Map, Issue [#22](https://github.com/weaponsforge/gmaps/issues/22)
- `git checkout feature/weaponsforge-22`
- **feature/weaponsforge-25**
- Experiments comparing different types of base maps (MapBox satellite, 2D Google Map, 3D Google Map), Issue [#25](https://github.com/weaponsforge/gmaps/issues/25)
- `git checkout feature/weaponsforge-25`
- **feature/weaponsforge-35**
- Experiments testing precicion Leaflet.draw Polygon Pins (vertex) placements, Issue [#35](https://github.com/weaponsforge/gmaps/issues/35)
- `git checkout feature/weaponsforge-35`
## Usage
1. Run the localhost static website development environment.
`npm run dev`
1. Edit the existing static files from the **./src** directory and wait for live reload. Your updates will reflect on the web browser.
2. To include new static website files on live reload:
- Stop the localhost **dev** server.
- Create new static (.js, .css) files inside the **./src** directory.
- Import the new **.js** and **.css** files in **./src/index.js**
- Javascript events may need to be attached to Html DOM elements using `.addEventListener()` if you are only using raw Html files.
- New Html files need to be encoded inside `new HtmlWebpackPlugin({ ... })` in **webpack.config.js**
- 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 -> rules` part.
- Re-start the **dev** server.
`npm run dev`
1. Build the project for production environment. Built static files are placed in the **/dist** directory.
`npm run build`
1. Run the production static website (does not use live reload).
`npm run start`
## References
[[1]](https://github.com/weaponsforge/livereload-basic) - live reload using gulp + browser-sync (demo)
[[2]](https://trello.com/c/n25MYtq8) - webpack notes (trello)
@weaponsforge
20230911