Angular frontend reading remote GeoJSON locations from an API to display on a Leaflet + OSM map.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Rama 78f27ae573 Update README 1 month ago
e2e Initial commit 3 months ago
resources add logo, icon and structure info and contributors tab 3 months ago
scripts Add deploy script 2 months ago
src Change API to remote 1 month ago
.gitignore Initial commit 3 months ago
LICENSE Tweak info pages and section names 3 months ago
NOTES Add deploy script 2 months ago
README.md Update README 1 month ago
TODO Cache API calls 2 months ago
angular.json Implement marker clustering 3 months ago
config.xml Tweak some contents 3 months ago
deploy.sh Fix popover 2 months ago
ionic.config.json Add geolocation 3 months ago
package-lock.json Update package-lock.json 1 month ago
package.json Improve behaviour when changing tabs 1 month ago
tsconfig.json Initial commit 3 months ago
tslint.json Initial commit 3 months ago

README.md

Demo

https://use-faircoin-again.thedata.me/tabs/map

Intro

This is is a geolocations directory.

Basically it reads a GeoJSON data source, whose records include Geo-coords (Lat/Lon) and shows those locations as markers on a map. It also provides a listing with a simple search.

The search looks into the name, description and address fields.

It’s quite generic and could be reused for any kind of project which would like to map a list of locations and display them along with any related data they might have.

So if you have a project which needs a tool like this one, please, fork it and use it! If you send us pull requests, we’ll be happy to review and add them.

This project was started by a group of FairCoop members ( https://fair.coop ) with a new approach to find locations where to pay for products or services using FairCon near you.

It’s made with Ionic 4 +Angular 7, which can be plugged to any API (or static) GeoJSON data source to display locations on a map (Leaflet) using OpenStreetMaps.

If your GPS is turned on and you allow your brower permission to access it, the listing will be sorted by those nearest to you first.

For privacy reasons, we don’t use a third party provider to find the locations near by. Instead we use the Haversine Formula, which calculates the distance over a single line: https://en.wikipedia.org/wiki/Haversine_formula

For the directions, we are calling the native maps app for mobiles, and for desktop, temporarily gmaps. We will replace the latter as soon as we have a working replacement.

The GeoJSON looks like this:

{
    "geometry": {
        "coordinates": [
            "4.865687699999967",
            "52.3600834"
        ],
        "type": "Point"
    },
    "properties": {
        "address": "Overtoom 301, Amsterdam, Netherlands",
        "categories": {
            "category.name": {
                "icon_name": "icon_name",
                "name": "category_name"
            }
        },
        "date": "Feb/2019",
        "description": "",
        "faircoin_address": "xxxx",
        "hours": "Mon-Sun: 24hs",
        "id": 24326,
        "image": "",
        "name": "OT301",
        "phone": "+4423235235235234",
        "updated": "Feb/2019",
        "website": "https://fair.coop"
    },
    "type": "Feature"
},

That means that if you have a backend with locations which can output on that format, you could easily plug this app to it and see your own locations.

You might need to tweak the fields according to your data structure.

Install

1) Check your Ionic installation

This app is made with Ionic 4, so you need to install it first. You do that essentialy with:

 npm install -g ionic

For more details see: https://ionicframework.com/docs/installation/cli

You can check your Ionic version by running:

ionic --version

2. Install dependencies

Once you have ionic 4, run the following on your copy of this repository to install all dependencies for this project:

$ npm i

3. Run the app in development mode

If all went well, run the development server with:

ionic serve -c

Contributing

Fork this project, clone the fork and do your commits there. After you push your changes, send us a pull request that we will review and merge if applies.

Roadmap

  • Open for beta
  • Finish some minor layout and cosmetics
  • Fix bugs or issues
  • Release
  • Announce

Next milestone

  • Implement QR code for donation address
  • Implement multilanguage
  • Implement categories

History

This software started a proof-of-concept on how to use a dettached UI which gets data from a backend via an API serving JSON with the locations from use.fair-coin.org.

The backend started being an independent OCP (valuenetwork) install using GraphQL to serve the contents to this UI. Later we changed to a REST API serving GeoJSON and provided by faircoop’s site. You can find the GraphQL example use on the first commits of this repo.

This was started in collaboration with several FairCoop members and is open for ideas, feature requests, pull requests (mostly!), and contributions.