https://github.com/bernardodiasc/awesomap-old

https://github.com/bernardodiasc/awesomap-old

Last synced: 21 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/bernardodiasc/awesomap-old
• Owner: bernardodiasc
• Created: 2015-09-18T14:24:30.000Z (over 9 years ago)
• Default Branch: gh-pages
• Last Pushed: 2015-09-22T05:12:26.000Z (over 9 years ago)
• Last Synced: 2023-04-19T06:46:54.338Z (about 2 years ago)
• Language: JavaScript
• Homepage:
• Size: 4.76 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Awesome Map

This is a project for study purpose. And javascript code playground, experimentations are being doing in this repo, do not use for production before review the code.

## App Features (so far)

- Extract Exif Geolocation from image file, create a marker in that location and display the image in the popup

  - If you don't have any device with GPS, use the images in `sample-images` folder for testing

- Select multiple files at once

## Instructions

To build the bundle, run `npm run build`

## Informations

Map built with [MapBox](https://www.mapbox.com/).

[ES6 features](http://es6-features.org/) used:

- Block-Scoped Variables

- Arrow Functions

- Template Strings

- Destructuring Assignment

- Modules

- Classes

- Promises

- Iterators

## To Do

### Code

- [Replace callbacks with ES6 Generators](http://modernweb.com/2014/02/10/replacing-callbacks-with-es6-generators/)

- React.js components

- CSS Modules

- Unit Tests

- BDD Tests

- [Tumblr API Docs](https://www.tumblr.com/docs/en/api/v2)

  - [Tumblr Api on NPM](https://www.npmjs.com/package/tumblr)

- [Hyperscript](https://www.npmjs.com/package/hyperscript)

### Interface

- Create better interface with panels - **OK**

  - Top header panel for navigation - **OK**

  - Right side panel for control - **OK**

    - Upload button should be in this panel - **OK**

    - List os inputed images

    - Each image have:

      - Checkbox

      - Thumbnail

      - Input fields for title, description

      - Date information extrated from EXIF tag is have, if not a date input field

      - List of tags

      - List of persons

      - String address grabbed from MapBox API that matches the EXIF geo tag

      - Marker button that watches next click in the map and grab geo location values

    - Checked images are be highlighted

  - Left side panel for the map - **OK**

- Rotate image in css based on EXIF orientation tag

### Experience

- When input an image:

  - In the map panel:

    - Create marker in the geolocation tagged - **OK**

    - Focus on the marker with high zoom - **OK**

    - Open the popup of the new marker with the image

  - In the control panel:

    - Create a list of images

    - Include the current image in the list as selected

- When input other images:

  - In the map panel:

    - Create marker in the geolocation tagged - **OK**

    - Focus on boundary with all markers related to selected images in the control list with needed zoom

    - Close all popups (?)

    - Open the popup new marker with the image

  - In the control panel:

    - Same as the first

    - Include the current image in the list as selected

- When changing selected images in the control list

  - Close all popups (?)

  - Change boundary and zoom to fit all markers related to selected images

- If the image have none EXIF tags:

  - The image will show in the list, to place in the map the marker button should be used

- Allow multiple files to be inputed once - **OK**