From 14cdeae3eb0d88e8a08c57728a8a9ea9b2471d37 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 11 Apr 2017 17:29:28 +0100
Subject: [PATCH] Switch to using object urls so we don't need ajax for
 mapbox-gl-rtl-text plugin (issue #126)

---
 config/webpack.config.js            |  9 +--------
 config/webpack.production.config.js |  9 +--------
 package.json                        |  4 +---
 src/components/map/MapboxGlMap.jsx  |  3 +--
 src/libs/mapbox-rtl.js              | 11 +++++++++++
 5 files changed, 15 insertions(+), 21 deletions(-)
 create mode 100644 src/libs/mapbox-rtl.js

diff --git a/config/webpack.config.js b/config/webpack.config.js
index 267374c..a50402a 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -3,7 +3,6 @@ var webpack = require('webpack');
 var path = require('path');
 var loaders = require('./webpack.loaders');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
-var CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const HOST = process.env.HOST || "127.0.0.1";
 const PORT = process.env.PORT || "8888";
@@ -50,12 +49,6 @@ module.exports = {
     new HtmlWebpackPlugin({
       title: 'Maputnik',
       template: './src/template.html'
-    }),
-    new CopyWebpackPlugin([
-      {
-        from: "node_modules/@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js",
-        to: "mapbox-gl/plugins/mapbox-gl-rtl-text.js"
-      }
-    ]),
+    })
   ]
 };
diff --git a/config/webpack.production.config.js b/config/webpack.production.config.js
index 54fb88a..9f5a5e1 100644
--- a/config/webpack.production.config.js
+++ b/config/webpack.production.config.js
@@ -5,7 +5,6 @@ var loaders = require('./webpack.loaders');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
-var CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
   entry: {
@@ -71,12 +70,6 @@ module.exports = {
       template: './src/template.html',
       title: 'Maputnik'
     }),
-    new webpack.optimize.DedupePlugin(),
-    new CopyWebpackPlugin([
-      {
-        from: "node_modules/@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js",
-        to: "mapbox-gl/plugins/mapbox-gl-rtl-text.js"
-      }
-    ]),
+    new webpack.optimize.DedupePlugin()
   ]
 };
diff --git a/package.json b/package.json
index f62459f..486fc31 100644
--- a/package.json
+++ b/package.json
@@ -104,12 +104,11 @@
     "babel-preset-es2015": "6.18.0",
     "babel-preset-react": "6.16.0",
     "babel-runtime": "^6.11.6",
-    "copy-webpack-plugin": "^4.0.1",
+    "base64-loader": "^1.0.0",
     "css-loader": "0.26.1",
     "eslint": "^3.5.0",
     "eslint-plugin-react": "^6.2.0",
     "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "0.9.0",
     "html-webpack-plugin": "^2.22.0",
     "json-loader": "^0.5.4",
     "karma": "^1.3.0",
@@ -126,7 +125,6 @@
     "stylelint": "^7.7.1",
     "stylelint-config-standard": "^15.0.1",
     "transform-loader": "^0.2.3",
-    "url-loader": "0.5.7",
     "wdio-mocha-framework": "^0.5.9",
     "wdio-phantomjs-service": "^0.2.2",
     "wdio-spec-reporter": "^0.1.0",
diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx
index 16caba7..b26bca3 100644
--- a/src/components/map/MapboxGlMap.jsx
+++ b/src/components/map/MapboxGlMap.jsx
@@ -12,8 +12,7 @@ import Color from 'color'
 import { colorHighlightedLayer } from '../../libs/highlight'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import '../../mapboxgl.css'
-
-MapboxGl.setRTLTextPlugin("/mapbox-gl/plugins/mapbox-gl-rtl-text.js");
+import '../../libs/mapbox-rtl'
 
 function renderLayerPopup(features) {
   var mountNode = document.createElement('div');
diff --git a/src/libs/mapbox-rtl.js b/src/libs/mapbox-rtl.js
new file mode 100644
index 0000000..558bea2
--- /dev/null
+++ b/src/libs/mapbox-rtl.js
@@ -0,0 +1,11 @@
+import MapboxGl from 'mapbox-gl/dist/mapbox-gl.js'
+
+// Load mapbox-gl-rtl-text using object urls without needing http://localhost for AJAX.
+const data = require("base64?mimetype=text/javascript!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js");
+
+const blob = new window.Blob([window.atob(data)]);
+const objectUrl = window.URL.createObjectURL(blob, {
+  type: "text/javascript"
+});
+
+MapboxGl.setRTLTextPlugin(objectUrl);