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
  • Content
  • Dependencies
• Installation
• Usage
• 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
     • git checkout feature/weaponsforge-10
   • feature/weaponsforge-11
     
     • Experiments in capturing a screenshot from a 3D (tilted) Google Map, Issue #11
     • git checkout feature/weaponsforge-11
   • feature/weaponsforge-22
     
     • Experiments drawing shapes on a 2D/3D (tilted) Google Map, Issue #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
     • git checkout feature/weaponsforge-25
   • feature/weaponsforge-35
     
     • Experiments testing precicion Leaflet.draw Polygon Pins (vertex) placements, Issue #35
     • git checkout feature/weaponsforge-35

Usage

1. Run the localhost static website development environment.
   npm run dev

2. Edit the existing static files from the ./src directory and wait for live reload. Your updates will reflect on the web browser.

3. 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

4. Build the project for production environment. Built static files are placed in the /dist directory.
   npm run build

5. Run the production static website (does not use live reload).
   npm run start

References

[1] - live reload using gulp + browser-sync (demo)
[2] - webpack notes (trello)

@weaponsforge
20230911