Open Community Map

Open Community Map is a platform intended to gather various local community and location-based services on one map.

It can be used from:

• https://communitymap.online
• Partner 3rd party website with the map embedded with <iframe> or with React SDK
• Self-hosted solution

More details about project ideas and structure can be found in the Wiki

Slack workspace

Feel free to join our Slack space and ask questions or share your ideas with us!

Embedding into 3rd party site

It's possible to embed the map into 3rd party site. You need to use the appId we'll provide you.

https://communitymap.online/embed/?appId=<your-app-id>

Example:

<iframe
  src="https://communitymap.online/embed?appId=Test42"
  allow="geolocation"
  style="border-width: 0;"
  width="100%"
  height="850"
></iframe>

Options

Currently you can filter to show only your objects on the map using optional filterOrigin query parameter. If it's missing, all types of objects are shown.

Optional centerLat and centerLng parameters define the default coordinates to the map.

Optional autolocate parameter allows to detect client's location automatically. User's permission will be requested the first time. Default value: false.

Optional canAdd allows to hide UI elements for adding objects from this view. If you need to add them your own way, hide them and use the API.

NOTE that you may use them in non-embed URLs as well - they work in the same manner.

See also this example

<iframe
  src="https://communitymap.online/embed?appId=Test42&filterOrigin=Test42&centerLat=43.123&centerLng=24.122&canAdd=false&autolocate=true"
  allow="geolocation"
  style="border-width: 0;"
  width="100%"
  height="850"
></iframe>

React SDK

This is the most flexible and powerful way for integration. It allows different customizations and interactions with the map and its objects.

Read more in its Documentation

It's in early alpha and could be subject for many changes.

API

Check out the API documentation

Collaborators needed!

Fork the project and then clone your fork. Read more about Fork & PR strategy

git clone git@github.com:<YOUR_GITHUB_USER>/communitymap-ui.git

cd community-map/

yarn install

Build the react-sdk library, that is part of the repo.

cd react-sdk/

yarn build

Use yarn watch to make the build process monitor continuosly file changes.

Now you can run the web app in another console:

cd webapp/

yarn start

It runs the app in the development mode.

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.

You will also see any lint errors in the console.

You will use pre-configured Community Map Dev firebase project.

Read also about the DB structure

Google Maps for Development purposes only

The maps with show 'For development purposes only' watermark all over the map.

To fix that create .env file and fill in your Google Maps Key.

Uploading images

Cloudinary is currently used as image storage with their upload widget - in order to be able to upload images you need to create cloudinary account and set your cloud name as REACT_APP_CLOUDINARY_CLOUD_NAME.

It's also recommended to create presets for image uploads. Currently Place logo can be uploaded, the preset can be defined by REACT_APP_CLOUDINARY_UPLOAD_PRESET_LOGO env variable.

Fill them in your .env for development and github secrets if using them for build and deploy.

Self-hosted with different Firebase project

For self-hosted installation you need to configure different Firebase project.

cp .env.sample .env

Init firebase and choose your firebase project

firebase init

Copy web app firebase config from Firebase Project Settings -> General -> Your Apps -> Web apps -> (*) Config and store it in src/firebaseConfig.ts like this:

export const firebaseConfig = {
  ...
}

And here's the description of the DB structure

---

This project was bootstrapped with Create React App.