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

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

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>

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>

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.

Check out the API documentation

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

git clone [email protected]:<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

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.

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.

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.