Added @mapbox/mapbox-gl-rtl-text plugin (fixes #126)

config/webpack.config.js

@@ -3,6 +3,7 @@ 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,5 +51,11 @@ module.exports = {
       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,6 +5,7 @@ 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: {
@@ -70,6 +71,12 @@ 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

@@ -20,6 +20,7 @@
   "license": "MIT",
   "homepage": "https://github.com/maputnik/editor#readme",
   "dependencies": {
+    "@mapbox/mapbox-gl-rtl-text": "^0.1.0",
     "classnames": "^2.2.5",
     "codemirror": "^5.18.2",
     "color": "^1.0.3",
@@ -103,6 +104,7 @@
     "babel-preset-es2015": "6.18.0",
     "babel-preset-react": "6.16.0",
     "babel-runtime": "^6.11.6",
+    "copy-webpack-plugin": "^4.0.1",
     "css-loader": "0.26.1",
     "eslint": "^3.5.0",
     "eslint-plugin-react": "^6.2.0",

src/components/map/MapboxGlMap.jsx

@@ -13,6 +13,8 @@ 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");
+
 function renderLayerPopup(features) {
   var mountNode = document.createElement('div');
   ReactDOM.render(<FeatureLayerPopup features={features} />, mountNode)