Improve geolocation button

packages/rocketchat-ui-message/message/messageBox.coffee

@@ -80,11 +80,7 @@ Template.messageBox.helpers
 			return 'show-send'
 
 	showLocation: ->
-		if Geolocation.error()
-        	console.log("Geolocation is not supported by this browser.");
-        	return false
-		
-		return Template.instance().showLocationButton.get()
+		return Template.instance().location.get() isnt false
 
 	notSubscribedTpl: ->
 		return RocketChat.roomTypes.getNotSubscribedTpl @_id
@@ -165,40 +161,35 @@ Template.messageBox.events
 	'click .message-form .icon-location.location': (event, instance) ->
 		roomId = @_id
 
-		if instance.showLocationButton
-
-			userGeoLocation = new ReactiveVar null
-
-			Tracker.autorun (computation) ->
-
-				userGeoLocation.set(Geolocation.latLng())
-
-				if userGeoLocation.get()
-					computation.stop()
-
-					latitude = userGeoLocation.get().lat
-					longitude = userGeoLocation.get().lng
-
-					text = '<div class="location-preview"><img src="https://maps.googleapis.com/maps/api/staticmap?zoom=14&size=250x250&markers=color:gray%7Clabel:%7C'+latitude+','+longitude+'&key='+instance.googleMapsKey.get()+'" /></div>'
-
-					swal
-						title: t('Share_Location_Title')
-						text: text
-						showCancelButton: true
-						closeOnConfirm: true
-						closeOnCancel: true
-						html: true
-					, (isConfirm) ->
-
-						if isConfirm isnt true
-							return
+		position = instance.location.get()
+
+		latitude = position.coords.latitude
+		longitude = position.coords.longitude
+
+		text = """
+			<div class="location-preview">
+				<img style="height: 250px; width: 250px;" src="https://maps.googleapis.com/maps/api/staticmap?zoom=14&size=250x250&markers=color:gray%7Clabel:%7C#{latitude},#{longitude}&key=#{RocketChat.settings.get('MapView_GMapsAPIKey')}" />
+			</div>
+		"""
+
+		swal
+			title: t('Share_Location_Title')
+			text: text
+			showCancelButton: true
+			closeOnConfirm: true
+			closeOnCancel: true
+			html: true
+		, (isConfirm) ->
+			if isConfirm isnt true
+				return
 
-						Meteor.call "sendMessage", {
-							_id: Random.id()
-							rid: roomId
-							msg: ""
-							location: { 'type': 'Point', 'coordinates': [ longitude, latitude ]}
-						}
+			Meteor.call "sendMessage",
+				_id: Random.id()
+				rid: roomId
+				msg: ""
+				location:
+					type: 'Point'
+					coordinates: [ longitude, latitude ]
 
 
 	'click .message-form .mic': (e, t) ->
@@ -245,8 +236,7 @@ Template.messageBox.onCreated ->
 	@isMessageFieldEmpty = new ReactiveVar true
 	@showMicButton = new ReactiveVar false
 	@showVideoRec = new ReactiveVar false
-	@showLocationButton = new ReactiveVar false
-	@googleMapsKey = new ReactiveVar false
+	@location = new ReactiveVar false
 
 	@autorun =>
 		videoRegex = /video\/webm/i
@@ -263,8 +253,19 @@ Template.messageBox.onCreated ->
 		else
 			@showMicButton.set false
 
-		if RocketChat.settings.get('MapView_Enabled') and RocketChat.settings.get('MapView_GMapsAPIKey')?.length
-			@showLocationButton.set true
-			@googleMapsKey.set RocketChat.settings.get('MapView_GMapsAPIKey')
+		if RocketChat.settings.get('MapView_Enabled') and RocketChat.settings.get('MapView_GMapsAPIKey')?.length and navigator.geolocation?.getCurrentPosition?
+			success = (position) =>
+				@location.set position
+
+			error = (error) =>
+				console.log 'Error getting your geolocation', error
+				@location.set false
+
+			options =
+				enableHighAccuracy: true
+				maximumAge: 0
+				timeout: 10000
+
+			navigator.geolocation.watchPosition success, error
 		else
-			@showLocationButton.set false
+			@location.set false

packages/rocketchat-ui-message/message/messageBox.html

@@ -7,13 +7,6 @@
 					<i class="icon-attach file"></i>
 					<input type="file" accept="{{fileUploadAllowedMediaTypes}}">
 				</div>
-				
-				{{#if showLocation}}
-					<div class="message-buttons location">
-						<i class="icon-location location"></i>
-					</div>
-				{{/if}}
-				
 				{{#if showSandstorm}}
 					<div class="message-buttons sandstorm-offer">
 						<i class="icon-plus" title="{{_ "Sandstorm_Powerbox_Share"}}"></i>
@@ -28,6 +21,13 @@
 					</div>
 				</div>
 
+				{{#unless showSend}}
+					{{#if showLocation}}
+						<div class="message-buttons location">
+							<i class="icon-location location"></i>
+						</div>
+					{{/if}}
+				{{/unless}}
 				<div class="message-buttons {{showMic}} {{showSend}}">
 					<div class="mic">
 						<i class="icon-mic" aria-label="{{_ "Record"}}"></i>
@@ -39,11 +39,13 @@
 						<i class="icon-paper-plane" aria-label="{{_ "Send"}}"></i>
 					</div>
 				</div>
-				<div class="message-buttons {{showVRec}}">
-					<div class="video-button">
-						<i class="icon-videocam" aria-label="{{_ "Record"}}"></i>
+				{{#unless showSend}}
+					<div class="message-buttons {{showVRec}}">
+						<div class="video-button">
+							<i class="icon-videocam" aria-label="{{_ "Record"}}"></i>
+						</div>
 					</div>
-				</div>
+				{{/unless}}
 			</div>
 			<div class="users-typing">
 				{{#with usersTyping}}