Created a norcal.cities.geojson file via geojson.io site.
In this tutorial we will load a small data set into MongoDB and build a simple map that adds a marker to a map. There is some preparation for this tutorial, so you will need the following:
- a working MeanJS environment
- created an Article in your working environment
- be prepared to do some find / replace in the GeoJSON data file attached to this tutorial
- be able to run commands from the terminal to load data into MongoDB via mongoimport and install angular-leaflet-directive
- add the dependencies
-
Preparation Steps
Step 1 - A working MEAN.JS environmetn
Step 2 - Robomong GUI for looking at MongoDB
Step 3 - GeoJSON data (cities.geojson)
Tutuorial Steps
Step 1 - Create the module using yeoman generator
Step 2 - Edit the data model schema
Step 3 - Load the data
Step 4 - Install Leaflet Directive, Inject leaflet-directive in app/env/all.js
Step 5 - Edit the partials and controller to show a map based on the cities.geojson data
Step 6 - Checkpoint. We should have the ability to see a list of cities, click a link and "view" the map.
Step 7 - Create other controller edits. This is the promise() setup in findOne().
Step 8 - Edit the edit partial,
Step 9 - add a new city, edit new city,
Other ideas
- spatial searches
What we're going to do in this tutorial is work through using the MEANJS stack to create a very simple app that plots a marker on a map. In order to get this working, we're going to need a geojson file of points (norcal.cities.geojson) and you'll need to have a working MEANJS environment.
Start by following the MEANJS directions to create a working environment. Once you've got the boilerplate code running, you might want to get a copy of RoboMongo; a gui tool for managing MongoDB collections on OSX. RoboMongo will allow us to look at the data and help you understand how it is structured.
Creating the application module is done using the command yo meanjs:crud-module <moduleName> where module name is the name of the app. Using your terminal, navigate into your MEANJS directory and issue the command yo meanjs:crud-module cities; This will scaffold a cities module include a controller, model, and view partials. You'll find these files in the public/modules/cities/controllers, public/modules/cities/views and app/models/ directories.
Next we'll load our cities geojson data into MongoDB. Download the norcal.cities.geojson file to your MEANJS directory. Using a terminal, navigate into the MEANJS directory and issue the following command, mongoimport --db test -c cities --type json --file ./norcal.cities.geojson. Check your work via RoboMongo or the Mongo shell. In RoboMongo, double click and Refresh the data to see your collection.
Our cities module needs to be edited to map to the data in our cities dataset. The scaffolding process creates HTML partial files. These partial files will have a Title field and a Submit button. We need to add the fields we want to work with. We'll also need to expand on the scaffolded model file to add the fields found in the cities dataset.
Our cities dataset really only has two fields we're concerned with. Name is the name of the city (Santa Cruz, San Francisco, Davis, Merced, Santa Barbara). The other field we'll work with is coordinates; our longitude and latitude values.
Let's start with our model file found at app/models/city.server.model.js. Open this file in your favorite editor. Our default model:
/**
* City Schema
*/
var CitySchema = new Schema({
name: {
type: String,
default: '',
required: 'Please fill City name',
trim: true
},
created: {
type: Date,
default: Date.now
},
user: {
type: Schema.ObjectId,
ref: 'User'
}
});
Here's a record from our dataset:
{
"type": "Feature",
"properties": {
"name": "Santa Cruz"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.9921875,
37.00255267215955
]
}
}
We're going to need to edit our model file to map to our GeoJSON. This involves nesting the name field and coordinates fields such that it looks like this.
var CitySchema = new Schema({
properties: {
name: {
type: String,
default: '',
required: 'Please fill in a city name',
trim: true
}
},
geometry: {
type: { type: String },
coordinates: {
type: []
}
},
created: {
type: Date,
default: Date.now
},
user: {
type: Schema.ObjectId,
ref: 'User'
}
});