Humanity’s calling for the next hundred years is restoring natural beauty to Mother Earth. We believe that the planet is more of a being to be in communion with, rather than a resource to be extracted. To assist in this mission, we are providing a platform to help with global pollution and litter cleanup. This work belongs to the future of the human race, and therefore, we are using technology to provide community support for the cleanup effort. Its host of features is not just valuable to our users, but also to the planet itself.

We are advancing humanity’s mission of waste and plastic-pollution cleanup for the protection of Nature from harm and to improve the lives of human and non-human inhabitants. We provide a hub for the mission of cleaning up the planet for many different individuals and organizations, and we aim to be the ultimate resource and center of the cleanup effort.

We are a team of deeply devoted environmentalists who have a passion for restoring natural beauty. The planet is our common home, we borrow it from our children, and we inherit it from our parents. Caring for our common home with all living things will call forth into the future a life with less war, famine, destruction, climate disaster, hate, and division.

Software development live sessions happen on discord https://discord.gg/JvEQMSQaYr.

Litter Map is also a registered nonprofit organization with open board meetings on discord.

Web front-end for the Litter Map application.

• Interactive map powered by Google Maps
• User interface built with solid
• Build system written in gulp
• Scripts and runtime dependencies bundled with esbuild
• SVG icons from Font Awesome

Set up the configuration file:

• cp config-example.json config.json

Edit config.json and fill in necessary details.

Install the pnpm package manager for managing dependencies and running development scripts.

Install dependencies:

• pnpm i

You can run a quick basic check on the configuration file with:

• pnpm check-config

Build the app:

• pnpm build

Start local server:

• pnpm serve

In a separate terminal, start the proxy that combines the front-end and back-end services under one host URL:

• pnpm proxy

The app should now be available at http://localhost:9999

If your browser complains about the self-signed SSL certificate, just bypass that warning.

Build and then monitor source files for changes, which automatically trigger a rebuild:

• pnpm watch

Install them with pnpm and just import them in the scripts. The build system is going to automatically roll everything into a self-contained bundle and insert it into the end product.

To check if new versions of packages exist:

• pnpm outdated

To update the dependencies to the newest versions:

• pnpm up --latest

Use ngrok as an internet HTTPS proxy to the local HTTP proxy started with pnpm proxy for HTTPS support:

• ngrok http 9999

For example, certain browsers may silently refuse to perform geolocation in an insecure context.

For Google Sign-in to work, the OAuth URL will need to be white-listed in the Google OAuth client profile settings (see backend documentation).

While the website can be loaded from another machine serving it over a network, Google Sign-in will refuse to log you in if the redirect URL is not from an approved domain. Google OAuth will refuse to white-list a local IP, so the solution is to specify localhost as the redirect target (which it does accept) and then to use a local forwarding proxy to fetch the website over the network.

• Install termux from the F-Droid repository
• Run pkg install nodejs openssl-tool
• Run npm i -g https-proxy-cli
• Run https-proxy -p 9999 -t https://<IP-OF-SERVER-MACHINE>:9999
• Load website via https://localhost:9999

Check which packages depend on a node package:

• pnpm ll --depth 999 <package>

• Firefox currently has a bug which prevents source maps from working for scripts inlined inside the HTML document

• The final JS and CSS from the build process are injected into the HTML after it is built from the Pug source. The project is at the moment using an experimental update to the gulp-inject plugin for gulp to do it. See: klei/gulp-inject#279

• Since Windows uses back slashes (\) as path separators (which can be traced to a decision made in MS-DOS 2.0), the build script might need significant modifications to its path handling in order to run properly on Windows

• Introduction to JavaScript
• Using source maps for debugging
• Debugging on mobile with Firefox
• Node package managers: NPM vs Yarn vs PNPM

• Stylus cheatsheet
• A look at solid
• solid: documentation
• solid: examples
• Learn to code reactive front-ends with Solid (playlist)
• JSX syntax in-depth
• Dealing with sticky :hover effects on mobile

• API reference
• API reference: Info windows
• API reference: Street View
• Choosing the Google Maps API release channel
• Accessibility features in Google Maps API
• Google Maps API feature requests and issue tracker

The build tasks are orchestrated with Gulp, which takes knowledge to master but enables a high level of flexibility and performance with a concise formulation.

• Gulp examples
• Vinyl file descriptor API

Copyright (C) Litter Map contributors (see AUTHORS.md)

This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License along with this program. If not, see https://www.gnu.org/licenses/.