Use a css file rather than inline styles.
MODIFY
examples/common/css/examples.css
examples/common/css/examples.css
@@ -16,4 +16,5 @@ html, body {
#map {
width: 100%;
height: calc(100% - 60px);
+ overflow: hidden;
}

MODIFY
package.json
package.json
"karma-webpack": "^1.7.0",
"mousetrap": "^1.6.0",
"node-fs-extra": "^0.8.1",
+ "nib": "^1.1.2",
"node-resemble": "^1.1.3",
"phantomjs-prebuilt": "^2.1.5",
"proj4": "^2.3.14",
"raw-body": "^2.1.6",
"sinon": "1.17.3",
"style-loader": "^0.13.1",
+ "stylus": "^0.54.5",
+ "stylus-loader": "^2.4.0",
"url-loader": "^0.5.7",
"vgl": "0.3.10",
"webpack": "^1.12.14",

MODIFY
src/annotationLayer.js
src/annotationLayer.js
@@ -326,7 +326,7 @@ var annotationLayer = function (args) {
var createAnnotation, actions,
mapNode = m_this.map().node(), oldMode = m_mode;
m_mode = arg;
- mapNode.css('cursor', m_mode ? 'crosshair' : '');
+ mapNode.toggleClass('annotation-input', !!m_mode);
if (m_mode) {
Mousetrap(mapNode[0]).bind('esc', function () { m_this.mode(null); });
} else {

MODIFY
src/canvas/canvasRenderer.js
src/canvas/canvasRenderer.js
@@ -57,8 +57,7 @@ var canvasRenderer = function (arg) {
var canvas = $(document.createElement('canvas'));
m_this.context2d = canvas[0].getContext('2d');
- canvas.attr('class', 'canvas-canvas');
- canvas.css('display', 'block');
+ canvas.addClass('canvas-canvas');
$(m_this.layer().node().get(0)).append(canvas);
m_this.canvas(canvas);

MODIFY
src/canvas/heatmapFeature.js
src/canvas/heatmapFeature.js
@@ -349,7 +349,7 @@ var canvas_heatmapFeature = function (arg) {
context2d.setTransform(1, 0, 0, 1, 0, 0);
context2d.clearRect(0, 0, viewport.width, viewport.height);
- layer.canvas().css({transform: '', 'transform-origin': '0px 0px'});
+ layer.canvas().css({transform: ''});
m_this._createCircle();
m_this._computeGradient();

MODIFY
src/gl/vglRenderer.js
src/gl/vglRenderer.js
@@ -87,8 +87,7 @@ var vglRenderer = function (arg) {
s_init.call(m_this);
var canvas = $(document.createElement('canvas'));
- canvas.attr('class', 'webgl-canvas');
- canvas.css('display', 'block');
+ canvas.addClass('webgl-canvas');
$(m_this.layer().node().get(0)).append(canvas);
if (window.contextPreserveDrawingBuffer) {

MODIFY
src/index.js
src/index.js
var $ = require('jquery');
require('./polyfills');
+require('./main.styl');
+
module.exports = $.extend({
annotation: require('./annotation'),
annotationLayer: require('./annotationLayer'),

MODIFY
src/layer.js
src/layer.js
@@ -386,9 +386,7 @@ var layer = function (arg) {
m_canvas = m_renderer.canvas();
}
- if (!m_this.active()) {
- m_node.css('pointerEvents', 'none');
- }
+ m_node.toggleClass('active', m_this.active());
m_initialized = true;
@@ -481,10 +479,8 @@ var layer = function (arg) {
// Create top level div for the layer
m_node = $(document.createElement('div'));
+ m_node.addClass('geojs-layer');
m_node.attr('id', m_name);
- m_node.css('position', 'absolute');
- m_node.css('width', '100%');
- m_node.css('height', '100%');
m_this.opacity(m_opacity);
// set the z-index

ADD
src/main.styl
+@import '~nib/index.styl'
+
+.geojs-map
+ position relative
+
+ .geo-attribution
+ position absolute
+ right 0px
+ bottom 0px
+ padding-right 5px
+ cursor auto
+ font 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif
+ z-index 1001
+ background rgba(255,255,255,0.7)
+ clear both
+ display block
+ pointer-events auto
+
+ .geo-attribution-layer
+ padding-left 5px
+
+ .canvas-canvas
+ display block
+ transform-origin 0px 0px
+ .webgl-canvas
+ display block
+
+ .geojs-layer
+ position absolute
+ width 100%
+ height 100%
+ pointer-events none
+ &.active
+ pointer-events auto
+
+ .geo-tile-layer
+ transform-origin 0px 0px
+ line-height 0
+ font-size 0
+
+ &.annotation-input
+ cursor crosshair
+
+.geo-tile-container
+ position absolute
+ &.crop
+ overflow hidden

MODIFY
src/map.js
src/map.js
@@ -894,7 +894,7 @@ var map = function (arg) {
throw 'Map require DIV node';
}
- m_node.css('position', 'relative');
+ m_node.addClass('geojs-map');
return m_this;
};
@@ -1518,19 +1518,7 @@ var map = function (arg) {
// generate a new attribution node
var $a = $('<div/>')
.addClass('geo-attribution')
- .css({
- position: 'absolute',
- right: '0px',
- bottom: '0px',
- 'padding-right': '5px',
- cursor: 'auto',
- font: '11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif',
- 'z-index': '1001',
- background: 'rgba(255,255,255,0.7)',
- clear: 'both',
- display: 'block',
- 'pointer-events': 'auto'
- }).on('mousedown', function (evt) {
+ .on('mousedown', function (evt) {
evt.stopPropagation();
});
@@ -1540,9 +1528,6 @@ var map = function (arg) {
if (content) {
$('<span/>')
.addClass('geo-attribution-layer')
- .css({
- 'padding-left': '5px'
- })
.html(content)
.appendTo($a);
}

MODIFY
src/tileLayer.js
src/tileLayer.js
@@ -779,17 +779,15 @@ module.exports = (function () {
// apply a transform to place the image correctly
container.append(tile.image);
container.css({
- position: 'absolute',
left: (bounds.left - parseInt(div.attr('offsetx') || 0, 10)) + 'px',
top: (bounds.top - parseInt(div.attr('offsety') || 0, 10)) + 'px'
});
crop = this.tileCropFromBounds(tile);
if (crop) {
- container.css({
+ container.addClass('crop').css({
width: crop.x + 'px',
- height: crop.y + 'px',
- overflow: 'hidden'
+ height: crop.y + 'px'
});
}
@@ -1005,11 +1003,7 @@ module.exports = (function () {
if (!node) {
node = $(
'<div class=geo-tile-layer data-tile-layer="' + level.toFixed() + '"/>'
- ).css({
- 'transform-origin': '0px 0px',
- 'line-height': 0,
- 'font-size': 0
- }).get(0);
+ ).get(0);
this.canvas().append(node);
}
return node;

MODIFY
tests/cases/tileLayer.js
tests/cases/tileLayer.js
@@ -1332,7 +1332,7 @@ describe('geo.tileLayer', function () {
});
});
- describe('HTML renderering', function () {
+ describe('HTML rendering', function () {
function layer_html(opts) {
var node = $('<div class="geo-test-container" style="display: none"/>'), m, l;
opts = opts || {};

MODIFY
webpack-examples.config.js
webpack-examples.config.js
@@ -6,9 +6,6 @@ var external = require('./external.config');
require('./examples/build');
var loaders = base.module.loaders.concat([{
- test: /\.css$/,
- loader: 'style-loader!css-loader'
-}, {
test: /\.jade$/,
loader: 'jade'
}, {

MODIFY
webpack.config.js
webpack.config.js
@@ -55,6 +55,12 @@ module.exports = {
loaders: [{
test: /\.json$/,
loader: 'json-loader'
+ }, {
+ test: /\.styl$/,
+ loader: 'style-loader!css-loader!stylus-loader'
+ }, {
+ test: /\.css$/,
+ loader: 'style-loader!css-loader'
}, {
test: /vgl\.js$/,
loader: 'expose?vgl!imports?mat4=gl-mat4,vec4=gl-vec4,vec3=gl-vec3,vec2=gl-vec2,$=jquery'

Use a css file rather than inline styles.