Switch to using object urls so we don't need ajax for mapbox-gl-rtl-text plugin (issue #126)

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"
-      }
-    ]),
   ]
 };

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 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"
-      }
-    ]),
   ]
 };

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",

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'
-
+import '../../libs/mapbox-rtl'
-MapboxGl.setRTLTextPlugin("/mapbox-gl/plugins/mapbox-gl-rtl-text.js");
 
 function renderLayerPopup(features) {
   var mountNode = document.createElement('div');

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);