diff --git a/src/Metamaps/DataFetcher.js b/src/Metamaps/DataFetcher.js
index 7a9f2fae..4b60c0f8 100644
--- a/src/Metamaps/DataFetcher.js
+++ b/src/Metamaps/DataFetcher.js
@@ -32,9 +32,15 @@ async function denyAccessRequest(mapId, requestId) {
   return res.status === 200
 }
 
+async function requestAccess(mapId) {
+  const res = await postWithCookies(`/maps/${mapId}/access_request`)
+  return res.status === 200
+}
+
 module.exports = {
   getMetacodes,
   getCurrentUser,
   approveAccessRequest,
-  denyAccessRequest
+  denyAccessRequest,
+  requestAccess
 }
\ No newline at end of file
diff --git a/src/Metamaps/GlobalUI/ReactApp.js b/src/Metamaps/GlobalUI/ReactApp.js
index 321c0383..aa115425 100644
--- a/src/Metamaps/GlobalUI/ReactApp.js
+++ b/src/Metamaps/GlobalUI/ReactApp.js
@@ -149,7 +149,8 @@ const ReactApp = {
       downloadScreenshot: ImportDialog.downloadScreenshot,
       onExport: format => () => {
         window.open(`${window.location.pathname}/export.${format}`, '_blank')
-      }
+      },
+      requestAccess: DataFetcher.requestAccess
     }
   },
   getCommonProps: function() {
diff --git a/src/Metamaps/Map/index.js b/src/Metamaps/Map/index.js
index 0bd657f6..7c176c7a 100644
--- a/src/Metamaps/Map/index.js
+++ b/src/Metamaps/Map/index.js
@@ -128,6 +128,14 @@ const Map = {
           DataModel.attachCollectionEvents()
           self.requests = data.requests
           isLoaded()
+        },
+        error: function(res) {
+          // forbidden
+          if (res.status === 403) {
+            browserHistory.push(`/maps/${id}/request_access`)
+          } else {
+            GlobalUI.notifyUser('There was an error fetching the map')
+          }
         }
       })
     }
diff --git a/src/routes/RequestAccess.js b/src/routes/RequestAccess.js
index b3288099..0122d945 100644
--- a/src/routes/RequestAccess.js
+++ b/src/routes/RequestAccess.js
@@ -1,7 +1,35 @@
 import React, { Component } from 'react'
 
 class RequestAccess extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      requestPending: false,
+      requestSent: false,
+      error: false
+    }
+  }
+
+  requestAccess = async () => {
+    if (this.state.requestSent || this.state.requestPending || this.state.error) {
+      return
+    }
+    this.setState({ requestPending: true })
+    const success = this.props.requestAccess(this.props.params.id)
+    if (success) {
+      this.setState({
+        requestPending: false,
+        requestSent: true
+      })
+    } else {
+      this.setState({
+        requestPending: false,
+        error: true
+      })
+    }
+  }
   render = () => {
+    const { requestPending, requestSent, error } = this.state
     return (
       <div id="yield">
         <div className='request_access'>
@@ -9,32 +37,16 @@ class RequestAccess extends Component {
           <div className='explainer_text'>
             Hmmm. This map is private, but you can request to edit it from the map creator.
           </div>
-          <div className='make_request'>REQUEST ACCESS</div>
+          <div className='make_request' onClick={this.requestAccess}>
+            {!requestPending && !requestSent && !error && 'REQUEST ACCESS'}
+            {requestSent && 'Request Sent'}
+            {requestPending && 'requesting...'}
+            {error && 'There was an error'}
+          </div>
         </div>
       </div>
     )
   }
 }
 
-export default RequestAccess
-
-/*
-<script>
-$(document).ready(function() {
-  $('.make_request').click(function() {
-    var that = $(this)
-    that.off('click')
-    that.text('requesting...')
-    $.ajax({
-      url: '/maps/<%= params[:id] %>/access_request',
-      type: 'POST',
-      contentType: 'application/json',
-      statusCode: {
-        200: function () { that.text('Request Sent'); setTimeout(function () {window.location.href = '/'}, 2000) },
-        400: function () { that.text('An error occurred') }
-      }
-    })
-  })
-})
-</script>
-*/
\ No newline at end of file
+export default RequestAccess
\ No newline at end of file