From c61ef32ea052b8d31cc9400c4fec5705f013a471 Mon Sep 17 00:00:00 2001 From: Jonah Adkins Date: Tue, 15 Sep 2015 16:36:25 -0400 Subject: [PATCH] fixing _this & _this --- src/index.html | 2 +- src/js/mapview/MapView.js | 152 +++++++++++++++++++------------------- src/sass/_globals.scss | 31 ++++---- 3 files changed, 94 insertions(+), 91 deletions(-) diff --git a/src/index.html b/src/index.html index 69810f1..f3578f2 100644 --- a/src/index.html +++ b/src/index.html @@ -25,7 +25,7 @@
-Map My Location +MAP MY LOCATION diff --git a/src/js/mapview/MapView.js b/src/js/mapview/MapView.js index a86c78f..bcd1ef1 100644 --- a/src/js/mapview/MapView.js +++ b/src/js/mapview/MapView.js @@ -1,110 +1,112 @@ L.Dropchop = L.Dropchop || {}; L.Dropchop.MapView = L.Class.extend({ - statics: {}, + statics: {}, - // default options - options: {}, + // default options + options: {}, - initialize : function( options ) { + initialize: function(options) { - // override defaults with passed options - L.setOptions(this, options); + // override defaults with passed options + L.setOptions(this, options); - this.numLayers = 0; - this._map = null; + this.numLayers = 0; + this._map = null; - // init hooks - this._setupMap(); + // init hooks + this._setupMap(); - } , + }, - _setupMap : function () { + _setupMap: function() { - // mapbox token - L.mapbox.accessToken = 'pk.eyJ1Ijoic3ZtYXR0aGV3cyIsImEiOiJVMUlUR0xrIn0.NweS_AttjswtN5wRuWCSNA'; + // mapbox token + L.mapbox.accessToken = 'pk.eyJ1Ijoic3ZtYXR0aGV3cyIsImEiOiJVMUlUR0xrIn0.NweS_AttjswtN5wRuWCSNA'; - //add locate me button - var geolocate = document.getElementById('geolocate'); + //add locate me button + var geolocate = document.getElementById('geolocate'); - // create a map object on the `map` element id - this._map = L.mapbox.map('map', null, { - zoomControl: false, - worldCopyJump: true - }).setView([0,0], 3); + // create a map object on the `map` element id + this._map = L.mapbox.map('map', null, { + zoomControl: false, + worldCopyJump: true + }).setView([0, 0], 3); - // locate me js shhtuffs + // locate me js shhtuffs -var myLayer = L.mapbox.featureLayer().addTo(this._map); + var myLayer = L.mapbox.featureLayer().addTo(this._map); -// This uses the HTML5 geolocation API, which is available on -// most mobile browsers and modern browsers, but not in Internet Explorer -// -// See this chart of compatibility for details: -// http://caniuse.com/#feat=geolocation -if (!navigator.geolocation) { - geolocate.innerHTML = 'Geolocation is not available'; -} else { - geolocate.onclick = function (e) { + // This uses the HTML5 geolocation API, which is available on + // most mobile browsers and modern browsers, but not in Internet Explorer + // + // See this chart of compatibility for details: + // http://caniuse.com/#feat=geolocation + if (!navigator.geolocation) { + geolocate.innerHTML = 'Geolocation is not available'; + } else { + geolocate.onclick = function(e) { e.preventDefault(); e.stopPropagation(); this._map.locate(); - }; -} + }.bind(this); + } + + // Once we've got a position, zoom and center the map + // on it, and add a single marker. + this._map.on('locationfound', function(e) { + this._map.fitBounds(e.bounds); -// Once we've got a position, zoom and center the map -// on it, and add a single marker. -this._map.on('locationfound', function(e) { - this._map.fitBounds(e.bounds); - myLayer.setGeoJSON({ + myLayer.setGeoJSON({ type: 'Feature', geometry: { - type: 'Point', - coordinates: [e.latlng.lng, e.latlng.lat] + type: 'Point', + coordinates: [e.latlng.lng, e.latlng.lat] }, properties: { - 'title': 'Here I am!', - 'marker-color': '#ff8888', - 'marker-symbol': 'star' + 'title': 'There You Are', + 'marker-color': '#207178', + 'marker-symbol': 'heart' } + }); + + // And hide the geolocation button + //geolocate.parentNode.removeChild(geolocate); + }.bind(this) + ); + + // If the user chooses not to allow their location + // to be shared, display an error message. + this._map.on('locationerror', function() { + geolocate.innerHTML = 'Position could not be found'; }); + // define our baselayers from mapbox defaults + var baseLayers = { + "Mapbox Streets": L.mapbox.tileLayer('mapbox.streets'), + "Mapbox Outdoors": L.mapbox.tileLayer('mapbox.outdoors'), + "Mapbox Light": L.mapbox.tileLayer('mapbox.light'), + "Mapbox Dark": L.mapbox.tileLayer('mapbox.dark'), + "Mapbox Satellite": L.mapbox.tileLayer('mapbox.satellite') + }; - // And hide the geolocation button - geolocate.parentNode.removeChild(geolocate); -}); + // sets the base layer default as mapbox streets + baseLayers['Mapbox Streets'].addTo(this._map); -// If the user chooses not to allow their location -// to be shared, display an error message. -this._map.on('locationerror', function() { - geolocate.innerHTML = 'Position could not be found'; -}); - // define our baselayers from mapbox defaults - var baseLayers = { - "Mapbox Streets": L.mapbox.tileLayer('mapbox.streets'), - "Mapbox Outdoors": L.mapbox.tileLayer('mapbox.outdoors'), - "Mapbox Light": L.mapbox.tileLayer('mapbox.light'), - "Mapbox Dark": L.mapbox.tileLayer('mapbox.dark'), - "Mapbox Satellite": L.mapbox.tileLayer('mapbox.satellite') - }; - - // sets the base layer default as mapbox streets - baseLayers['Mapbox Streets'].addTo(this._map); - - // sets location of base layer control to the bottom right - L.control.layers(baseLayers, {}, { - position: 'bottomright', - collapsed: false - }).addTo(this._map); - - // sets the location of the zoom buttons to the top right - L.control.zoom({ - position: 'topright' - }).addTo(this._map); + // sets location of base layer control to the bottom right + L.control.layers(baseLayers, {}, { + position: 'bottomright', + collapsed: false + }).addTo(this._map); - } + // sets the location of the zoom buttons to the top right + L.control.zoom({ + position: 'topright' + }).addTo(this._map); + + } }); diff --git a/src/sass/_globals.scss b/src/sass/_globals.scss index b468472..f41bcc1 100644 --- a/src/sass/_globals.scss +++ b/src/sass/_globals.scss @@ -31,22 +31,23 @@ bottom: 0; } .ui-button { + font-family:$font-input; font-size: 12; background:#FFF; + color:#000; + display:block; + position:absolute; + top:70%;right:0%; + width:138px; + height:25px; + margin:0 10px 0 0; + padding:3px 3px 3px 3px; + z-index:100; + text-align:center; + border:1px solid rgba(0,0,0,0.4); + border-radius:3px; + } + .ui-button:hover { + background:rgba(255,255,255,0.6); color:#000; - display:block; - position:absolute; - top:70%;right:0%; - width:140px; - height:25px; - margin:0 10px 0 0; - padding:3px 3px 3px 3px; - z-index:100; - text-align:center; - border:1px solid rgba(0,0,0,0.4); - border-radius:3px; } - .ui-button:hover { - background:rgba(255,255,255,0.2); - color:#000; - }