6.2 KiB

Raw Blame History

WDI-PANTHALASSA

Title: Maps & Multiple Models
Type: Homework
Duration: Two days"
Creator: Thom Page
Course: WDIr-Panthalassa
Competencies: Mongoose subdocuments, Google Maps, AJAX

Maps and Multiple Models

Subdocuments and referencing between models in Mongoose
Program flow
Getting server data into static javascript files / Google Maps
Breaking RESTful conventions

App

Use the starter code provided

Run npm install to install all the dependencies from package.json.

Have a good look through the starter code and become familiar with it. There are many places where you will need to add code in order to get the app to work.

####Pages (3 in total):

Users index
- Has a dropdown menu of all users. When the option is changed, the page goes to the user's show page
- Has a form for creating a new user
  - redirects to new user's show page
- Has a link to see all locations
- Nothing on the map

Locations index
- Has a list in the control panel of all locations from all users
- Displays all locations on a Google Map
- A link to see locations by user (users index)

Users show
- User's name is there
- Shows just this user's locations
- Has a form to add a new location for this user
  - redirect back here to user's show page
- Has a delete button
  - deletes user and associated locations. Deleted locations should not show up on the locations index.

Notes on routes and views

We are going 'off-road' by breaking RESTful conventions to suit the design of our app.

Our Users index doesn't display all the users directly, rather a dropdown with all the users.

Notice that the app does not have a separate new.ejs view, either for users or locations. The forms are integrated into the index and show pages.

When a new location is added, it is not added in isolation but only in relation to a user.

There are no edit pages.

When the user is deleted, all of that user's associated locations should also be deleted (and locations are not deletable in isolation).

Method-Override is used to amke the delete route work from the browser (as usual). Note that with the big method-override snippet in server.js, and the hidden field in the form, you should only need to specify the route in the action field.

Data modeling

A user should have at minimum:

username: String

AND a way to reference the locations associated with that user:

locations: [locationsSchema]

A Location should have at minimum:

name: String,
lat: Number,
lng: Number

In the spoilers section below, there is an example User schema.

Data, AJAX, and Static files

The Google Maps stuff is all front-end static JS. Don't try to get all this going until you have your routes and relations working.

However, we want to get data on to the map at some point, because each marker is positioned according to lat and lng values stored in the database.

How can we get server / database data into our static JS files?

In the locationsIndex.js file in the public folder, underneath the Maps setup there is a jQuery ajax call to get the data to put in the Markers. Ajax is a way to pull data from remote urls, and that's all it is. In this case, we're just pulling our own data from our server. The ajax call is looking for JSON, so along with all your regular routes that render views, you will need to make a route that just serves up JSON, and the ajax will pick it up.

** Make routes that serve JSON in addition to the routes that render views**.

You may want to use ajax on your User show page, too. This is trickier. You will need to get creative as to how your javascript file will get the user id for the route. There is a potential solution at the bottom of this page.

The most basic ajax command is:

  $.ajax('/route').done(function(data) {
        console.log(data);
    });

.done is a promise that waits for the asynchronous call to be complete before passing the acquired data to the callback.

All it does it ask the route for data. Then, you can do whatever you want with that data within the ajax callback.

Google Maps

There is alot of Maps syntax included in the starter code. Have a look through it, but don't try too hard to understand all of it. Most of it is copied from the documentation. Note that it is extremely precious, and if you touch it, it will probably break, so be careful. Nevertheless, if you are inclined, try to take it apart and see how it works.

Seed Locations

You can get latitude and longitude from a (real) Google Map by right clicking (or control+click) on the map and selecting "what's here?". The lat and lng will show up. Click on the lat and lng for a copyable-pastable format.

Some seeds:

name: 'Prospect Park',
lat: 40.660301, 
lng: -73.968977

name: 'Columbus Circle',
lat: 40.768280,
lng: -73.982351

name: 'General Assembly',
lat: 40.740047,
lng: -73.990092

name: 'Brooklyn Navy Yard',
lat: 40.699671,
lng: -73.973941

name: 'PS1',
lat: 40.745507, 
lng: -73.946899

name: Starrett City,
lat: 40.650274,
lng: -73.883603

name: 'Flushing Meadows',
lat: 40.739762, 
lng: -73.840828

name: 'Sumner Houses',
lat: 40.697482, 
lng: -73.940075

##### Here there be spoilers

Getting dynamic ids into static files

Potential solution for getting user id into static JS AJAX call:

Are you sure you don't want to find your own solution?

Disclaimer: these are just some of many solutions, you could do it other ways too.

Answer
Use window.location.pathname to use the user's id from the url bar.

Another Answer
Display the user id on the webpage. Hide it with css. Use JQuery to grab it.

User schema linked to Locations schema

Example User Schema:

var mongoose = require('mongoose');
var locationSchema = require('./locations').schema;

var userSchema = mongoose.Schema({

	username: String,
	locations: [locationSchema]

});

module.exports = mongoose.model('User', userSchema);

6.2 KiB Raw Blame History