diff --git a/src/components/App.jsx b/src/components/App.jsx
index 8be737f..7741969 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -213,7 +213,7 @@ export default class App extends React.Component {
         survey: localStorage.hasOwnProperty('survey') ? false : true,
         debug: false,
       },
-      mapOptions: {
+      mapboxGlDebugOptions: {
         showTileBoundaries: false,
         showCollisionBoxes: false,
         showOverdrawInspector: false,
@@ -469,18 +469,22 @@ export default class App extends React.Component {
     }
   }
 
+  _getRenderer () {
+    const metadata = this.state.mapStyle.metadata || {};
+    return metadata['maputnik:renderer'] || 'mbgljs';
+  }
+
   mapRenderer() {
     const mapProps = {
       mapStyle: style.replaceAccessTokens(this.state.mapStyle, {allowFallback: true}),
-      options: this.state.mapOptions,
+      options: this.state.mapboxGlDebugOptions,
       onDataChange: (e) => {
         this.layerWatcher.analyzeMap(e.map)
         this.fetchSources();
       },
     }
 
-    const metadata = this.state.mapStyle.metadata || {}
-    const renderer = metadata['maputnik:renderer'] || 'mbgljs'
+    const renderer = this._getRenderer();
 
     let mapElement;
 
@@ -532,10 +536,10 @@ export default class App extends React.Component {
     this.setModal(modalName, !this.state.isOpen[modalName]);
   }
 
-  onChangeDebug = (key, value) => {
+  onChangeMaboxGlDebug = (key, value) => {
     this.setState({
-      mapOptions: {
-        ...this.state.mapOptions,
+      mapboxGlDebugOptions: {
+        ...this.state.mapboxGlDebugOptions,
         [key]: value, 
       }
     });
@@ -593,8 +597,9 @@ export default class App extends React.Component {
 
     const modals = <div>
       <DebugModal
-        debugOptions={this.state.mapOptions}
-        onChangeDebug={this.onChangeDebug}
+        renderer={this._getRenderer()}
+        mapboxGlDebugOptions={this.state.mapboxGlDebugOptions}
+        onChangeMaboxGlDebug={this.onChangeMaboxGlDebug}
         isOpen={this.state.isOpen.debug}
         onOpenToggle={this.toggleModal.bind(this, 'debug')}
       />
diff --git a/src/components/modals/DebugModal.js b/src/components/modals/DebugModal.js
index 9973033..bddb48f 100644
--- a/src/components/modals/DebugModal.js
+++ b/src/components/modals/DebugModal.js
@@ -7,9 +7,10 @@ import Modal from './Modal'
 class DebugModal extends React.Component {
   static propTypes = {
     isOpen: PropTypes.bool.isRequired,
-    onChangeDebug: PropTypes.func.isRequired,
+    renderer: PropTypes.string.isRequired,
+    onChangeMaboxGlDebug: PropTypes.func.isRequired,
     onOpenToggle: PropTypes.func.isRequired,
-    debugOptions: PropTypes.object,
+    mapboxGlDebugOptions: PropTypes.object,
   }
 
   render() {
@@ -20,15 +21,22 @@ class DebugModal extends React.Component {
       title={'Debug'}
     >
       <div className="maputnik-modal-section maputnik-modal-shortcuts">
-        <ul>
-          {Object.entries(this.props.debugOptions).map(([key, val]) => {
-            return <li key={key}>
-              <label>
-                <input type="checkbox" value={val} onClick={(e) => this.props.onChangeDebug(key, e.target.checked)} /> {key}
-              </label>
-            </li>
-          })}
-        </ul>
+        {this.props.renderer === 'mbgljs' &&
+          <ul>
+            {Object.entries(this.props.mapboxGlDebugOptions).map(([key, val]) => {
+              return <li key={key}>
+                <label>
+                  <input type="checkbox" checked={val} onClick={(e) => this.props.onChangeMaboxGlDebug(key, e.target.checked)} /> {key}
+                </label>
+              </li>
+            })}
+          </ul>
+        }
+        {this.props.renderer === 'ol' &&
+          <div>
+            No debug options available for the OpenLayers renderer
+          </div>
+        }
       </div>
     </Modal>
   }