Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Gulliver

Create and share stories using interactive maps.

Geography and distance is a large part of what forms our opinions, shifts our narratives, and fundamentally molds our personalities. Where you are born changes your entire world perspective, and where you go from there is just as important.

Gulliver is an interactive storytelling application where users can tell stories based on their locations. Each 'chapter' of their story is a pin on a map.

Planning / UX

Below are a few wireframes that map out (pun intended) the overall user interface. Some features have not been added yet, such as the comments, likes, and addition of other media such as photos/video.

Weirdly interesting in my super-organized Trello board? Check it out

Wireframes

Landing page (not logged in)

Discover page (logged in)

My stories page

Edit one story

View another's story

Technologies

Code

Planning to contribute? Here's a brief explanation of how I'm displaying my stories on a map using Angular and the Leaflet-Angular-Directive.

First, here's how you render a map to your page:

  • Include this tag within your HTML.

       <leaflet lf-center="center"  width="100%" height="350px" markers="markers" icon="icon" layers="layers" defaults="defaults"></leaflet>
    
  • The attributes markers, center, etc. refer to what's attached to your controller's $scope. Here's what that looks like in your client-side controller (i.e. CreateStoryController.js)

        angular.extend($scope, {
            center: {
              //where the map will be centered
              lat: 40.095,
              lng: -3.823,
              zoom: 4
            },
            markers: {
            //where you add your markers!
              {
                lat: 40,
                lng: -3,
                message: "Hi, I'm a point on a map!" //the message added to each point
    
              }
            },
            defaults: {
              // checkout the Leaflet docs for more default settings
              scrollWheelZoom: 'center',
              markerZoomAnimation: true,
              autoPan: true,
              watch: true
            }
        });
    
  • To render a place new points, all you have to do is push new markers into the $scope.markers.

Files not shown:

  • I've hidden my Mapbox API Key as well as my .env file which includes my secret token for authentication. You will need to get your own keys in order for these to work (and make sure you add it in your .gitignore! ).

Future features

AKA contingent on whether I have the time
  • Users will be able to add photos and other media to each point.
  • Users will be able to like and comment other users' stories.
  • Users will be able to follow other users.
  • Users will be able to upload a profile picture and have a short bio.

Contributors

Special thanks to...

About

An app that lets you create and share stories through interactive maps (AngularJS, jQuery, Express)

Resources

Releases

No releases published
You can’t perform that action at this time.