Getting geo-location to work in Vue
- https://www.npmjs.com/package/vue2-google-maps
- https://alligator.io/vuejs/vue-google-maps/
- https://medium.com/netscape/deploying-a-vue-js-2-x-app-to-heroku-in-5-steps-tutorial-a69845ace489
- https://youtu.be/RbFNihP7H7I
+ $ `vue create project_name`
+ $ `cd project_name`
+ https://console.developers.google.com/apis
+ On the left of the page, Click on Credentials - API Key (the key icon)
+ This will give you your API Key
+ It should look something like this: `AWzaSyC13JVX4Fa8C2mqaI42QhxqSIONruP0z9A`
import Vue from 'vue'
import App from './App.vue'
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.config.productionTip = false
Vue.use(VueGoogleMaps, {
load: {
key: 'USE OWN GOOGLE MAP API KEY', /* this numer is your key from Google you just got */
libraries: 'places',
}
})
new Vue({
render: h => h(App)
}).$mount('#app')<template>
<div id="app">
<div ref="vgmap">
<gmap-map class="google-map"
:center="center"
:zoom="inzoom">
<gmap-marker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="false"
></gmap-marker>
</gmap-map>
</div>
</div>
</template>
<script>
export default {
name: 'app',
mounted: function() {
this.geolocation()
},
data () {
return {
inzoom : 15,
center: {lat: 10.0, lng: 10.0},
markers: [],
/* markersx: [
{position: {lat: 10.0, lng: 10.0}},
{position: {lat: 11.0, lng: 11.0}}
]*/
}
},
methods: {
geolocation() {
navigator.geolocation.getCurrentPosition((position) => {
this.center = {
lat: position.coords.latitude,
lng: position.coords.longitude,
}
var myPosition = {position: { lat: position.coords.latitude,
lng: position.coords.longitude,}};
this.markers.push(myPosition);
console.log(myPosition);
console.log(this.markers);
});
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.google-map {
width: 700px;
height: 400px;
margin: 0 auto;
background: gray;
}
.button {
display: inline-block;
margin: -4px;
}
</style>
$ npm run serve
some ideas on how we can make the traveling route to work
http://geekonjava.blogspot.com/2016/05/demo-animated-moving-marker-on-google.html
-
Create API Rest end point
GETto retrieve GPS points to draw markers on Gmap vue
JSON Object should look like:
{position: {lat: 10.0, lng: 10.0}} -
Create on the db backend a table of gps points with lat and long entries
-
Let's focus on one of the metro lines , maybe the red line?
- Do we have a pic of every station along the route?
- Do we have the gps locations of every station?
- We will need a table on our end to keep that info
Implement Axios ( http resources on the current code )
to use the Rails backend API
$ brew install mongodb
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 3 taps (heroku/brew, homebrew/core, homebrew/cask).
==> New Formulae
peru
==> Updated Formulae
git ✔ geoipupdate node@8
heroku/brew/heroku ✔ goreleaser pulumi
heroku/brew/heroku-node ✔ gutenberg the_platinum_searcher
[email protected] ✔ harfbuzz tor
activemq hlint watchexec
afflib homebank wireguard-tools
chronograf [email protected] wskdeploy
folly [email protected] zsh
==> Installing dependencies for mongodb: gdbm
==> Installing mongodb dependency: gdbm
==> Downloading https://homebrew.bintray.com/bottles/gdbm-1.18.high_sierra.bottle.tar.gz
######################################################################## 100.0%
==> Pouring gdbm-1.18.high_sierra.bottle.tar.gz
🍺 /usr/local/Cellar/gdbm/1.18: 20 files, 584.4KB
==> Installing mongodb
==> Downloading https://homebrew.bintray.com/bottles/mongodb-4.0.2.high_sierra.bottle.tar.gz
######################################################################## 100.0%
==> Pouring mongodb-4.0.2.high_sierra.bottle.tar.gz
==> Caveats
To have launchd start mongodb now and restart at login:
brew services start mongodb
Or, if you don't want/need a background service you can just run:
mongod --config /usr/local/etc/mongod.conf
==> Summary
🍺 /usr/local/Cellar/mongodb/4.0.2: 18 files, 256.6MB
==> Caveats
==> mongodb
To have launchd start mongodb now and restart at login:
brew services start mongodb
Or, if you don't want/need a background service you can just run:
mongod --config /usr/local/etc/mongod.conf
$ brew services start mongodb
==> Successfully started `mongodb` (label: homebrew.mxcl.mongodb)
- Windows -
Open on http://localhost:27017/
It looks like you are trying to access MongoDB over HTTP on the native driver port.
- start the mongodb server: $
mongod - open the command prompt: $
mongo - create a database: $
use <dbname>
> use stations
switched to db stations
Example: The $ db.stations.insertMany plus the JSON block that follows (It automatically saves.)
db.stations.insertMany(
[
{
"route_id": 801,
"lineName": "Blue Line",
"lineStation": "Anaheim Street Station",
"latitude": 33.7818299,
"longitude": -118.18938
},
{
"route_id": 801,
"lineName": "Blue Line",
"lineStation": "Pacific Coast Hwy Station",
"latitude": 33.7890899,
"longitude": -118.18938
}
]);> db.stations.find().pretty()
{
"_id" : ObjectId("5b97f18ddd1f8b7076ec271d"),
"route_id" : 801,
"lineName" : "Blue Line",
"lineStation" : "Anaheim Street Station",
"latitude" : 33.7818299,
"longitude" : -118.18938
}
{
"_id" : ObjectId("5b97f18ddd1f8b7076ec271e"),
"route_id" : 801,
"lineName" : "Blue Line",
"lineStation" : "Pacific Coast Hwy Station",
"latitude" : 33.7890899,
"longitude" : -118.18938
}
- https://ademirgabardo.wordpress.com/2016/02/02/installing-and-running-mongodb-on-mac-osx-for-beginners/
- https://www.tutorialspoint.com/mongodb/mongodb_query_document.htm
- July 7th ???
Marina Del Rey
- rails new lovela --api --skip-active-record
- cd lovela
- gem 'mongoid', '~> 6.0'
- gem 'bson_ext'
- bundle install
- rails g mongoid:config
- rails db:create
- Use the mongo cli to populate the database
- rails g scaffold Station route_id: Integer lineName lineStation latitude longitude
Note: I modified the model station.rb and removed the String datatype on latitude and longitude, this may not make a difference
- rails s
- goto localhost:3000/stations