CSS module

index.html

@@ -4,38 +4,6 @@
     <link rel="stylesheet" href="node_modules/openlayers/css/ol.css"></link>
     <style>
       .map { height: 400px; }
-      .ol-popup {
-        position: absolute;
-        background-color: white;
-        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
-        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
-        padding: 15px;
-        border-radius: 10px;
-        border: 1px solid #cccccc;
-        bottom: 12px;
-        left: -50px;
-      }
-      .ol-popup:after, .ol-popup:before {
-        top: 100%;
-        border: solid transparent;
-        content: " ";
-        height: 0;
-        width: 0;
-        position: absolute;
-        pointer-events: none;
-      }
-      .ol-popup:after {
-        border-top-color: white;
-        border-width: 10px;
-        left: 48px;
-        margin-left: -10px;
-      }
-      .ol-popup:before {
-        border-top-color: #cccccc;
-        border-width: 11px;
-        left: 48px;
-        margin-left: -11px;
-      }
       li:hover { background-color: yellow; }
       li.selected { background-color: orange; }
     </style>

index.js

@@ -5,6 +5,7 @@ var ReactRedux = require('react-redux');
 var createStore = Redux.createStore;
 var Provider = ReactRedux.Provider;
 var connect = ReactRedux.connect;
+require("./popup.css");
 
 
 var placeLayer = new ol.layer.Vector({

package.json

@@ -29,6 +29,8 @@
   "devDependencies": {
     "react-hot-loader": "^1.2.7",
     "jsx-loader": "^0.13.2",
+    "style-loader": "^0.12.0",
+    "css-loader": "^0.16.0",
     "webpack": "^1.9.11",
     "webpack-dev-server": "^1.9.0"
   }

popup.css

@@ -0,0 +1,42 @@
+.ol-popup {
+  position: absolute;
+  background-color: white;
+  -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
+  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
+  padding: 15px;
+  border-radius: 10px;
+  border: 1px solid #cccccc;
+  bottom: 12px;
+  left: -50px;
+  min-width: 280px;
+}
+.ol-popup:after, .ol-popup:before {
+  top: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.ol-popup:after {
+  border-top-color: white;
+  border-width: 10px;
+  left: 48px;
+  margin-left: -10px;
+}
+.ol-popup:before {
+  border-top-color: #cccccc;
+  border-width: 11px;
+  left: 48px;
+  margin-left: -11px;
+}
+.ol-popup-closer {
+  text-decoration: none;
+  position: absolute;
+  top: 2px;
+  right: 8px;
+}
+.ol-popup-closer:after {
+  content: "✖";
+}

webpack.config.js

@@ -22,6 +22,8 @@ module.exports = {
       loaders: ['react-hot', 'jsx-loader'],
       exclude: /node_modules/,
       include: __dirname
-    }]
+    },
+    { test: /\.css$/, loader: "style-loader!css-loader" }
+    ]
   }
 };