diff --git a/config/webpack.rules.js b/config/webpack.rules.js index 08338f8..b93553d 100644 --- a/config/webpack.rules.js +++ b/config/webpack.rules.js @@ -17,9 +17,15 @@ module.exports = [ use: 'file-loader?name=[name].[ext]' }, { - test: /\.(svg|gif|jpg|png)$/, + test: /\.(gif|jpg|png)$/, use: 'file-loader?name=img/[name].[ext]' }, + { + test: /\.svg$/, + use: [ + 'svg-inline-loader' + ] + }, { test: /[\/\\](node_modules|global|src)[\/\\].*\.scss$/, use: [ diff --git a/package-lock.json b/package-lock.json index d93bea8..4c860f6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1017,6 +1017,12 @@ "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz", "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==" }, + "@mdi/js": { + "version": "4.9.95", + "resolved": "https://registry.npmjs.org/@mdi/js/-/js-4.9.95.tgz", + "integrity": "sha512-6zKTCqZUCuDWJThdRcjdFTqp2BXfYwXI1UlYa68A1/kmCcy1ijpbpRbrJcUdZ+9WojencCh1DOGFqhj/x8I/eQ==", + "dev": true + }, "@mrmlnc/readdir-enhanced": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz", @@ -10320,6 +10326,12 @@ "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true }, + "simple-html-tokenizer": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz", + "integrity": "sha1-BcLuxXn//+FFoDCsJs/qYbmA+r4=", + "dev": true + }, "simple-swizzle": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", @@ -11332,6 +11344,17 @@ "has-flag": "^3.0.0" } }, + "svg-inline-loader": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/svg-inline-loader/-/svg-inline-loader-0.8.2.tgz", + "integrity": "sha512-kbrcEh5n5JkypaSC152eGfGcnT4lkR0eSfvefaUJkLqgGjRQJyKDvvEE/CCv5aTSdfXuc+N98w16iAojhShI3g==", + "dev": true, + "requires": { + "loader-utils": "^1.1.0", + "object-assign": "^4.0.1", + "simple-html-tokenizer": "^0.1.1" + } + }, "svg-tags": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz", diff --git a/package.json b/package.json index 46abd12..fd6f04b 100644 --- a/package.json +++ b/package.json @@ -107,6 +107,7 @@ "@babel/preset-env": "^7.6.3", "@babel/preset-flow": "^7.0.0", "@babel/preset-react": "^7.6.3", + "@mdi/js": "^4.9.95", "@wdio/cli": "^5.14.5", "@wdio/local-runner": "^5.14.5", "@wdio/mocha-framework": "^5.14.4", @@ -139,6 +140,7 @@ "stylelint": "^11.0.0", "stylelint-config-recommended-scss": "^4.0.0", "stylelint-scss": "^3.11.1", + "svg-inline-loader": "^0.8.2", "transform-loader": "^0.2.4", "uuid": "^3.3.3", "webdriverio": "^5.14.5", diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 8917935..b31c496 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -182,7 +182,7 @@ export default class Toolbar extends React.Component { target="_blank" className="maputnik-toolbar-logo" > - Maputnik +

{pkgJson.name} v{pkgJson.version} diff --git a/src/components/map/OpenLayersMap.jsx b/src/components/map/OpenLayersMap.jsx index 446096a..981584e 100644 --- a/src/components/map/OpenLayersMap.jsx +++ b/src/components/map/OpenLayersMap.jsx @@ -11,6 +11,7 @@ import {Map, View, Proj, Overlay} from 'ol'; import {toLonLat} from 'ol/proj'; import {toStringHDMS} from 'ol/coordinate'; +import {mdiMagnify} from '@mdi/js'; function renderCoords (coords) { @@ -158,7 +159,17 @@ export default class OpenLayersMap extends React.Component { />
- Zoom level: {this.state.zoom} + + Zoom level + + {this.state.zoom}
{this.props.debugToolbox &&
diff --git a/src/libs/zoomcontrol.js b/src/libs/zoomcontrol.js index 2f7900d..6ab7711 100644 --- a/src/libs/zoomcontrol.js +++ b/src/libs/zoomcontrol.js @@ -1,8 +1,21 @@ +import {mdiMagnify} from '@mdi/js'; + + export default class ZoomControl { onAdd(map) { this._map = map; this._container = document.createElement('div'); this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group mapboxgl-ctrl-zoom'; + this._container.innerHTML = ` + + Zoom level + + + `; + this._textEl = this._container.querySelector("span"); this.addEventListeners(); @@ -10,7 +23,7 @@ export default class ZoomControl { } updateZoomLevel() { - this._container.innerHTML = `Zoom level: ${this._map.getZoom().toFixed(2)}`; + this._textEl.innerHTML = this._map.getZoom().toFixed(2); } addEventListeners (){ diff --git a/src/mapboxgl.css b/src/mapboxgl.css index 799a7ba..4de354a 100644 --- a/src/mapboxgl.css +++ b/src/mapboxgl.css @@ -32,7 +32,6 @@ .mapboxgl-popup-content { background-color: rgb(28, 31, 36); - border-radius: 0px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 5px 0px; padding: 0px; } @@ -57,20 +56,28 @@ border-color: rgb(28, 31, 36); } -.mapboxgl-ctrl-group > button:hover { +.mapboxgl-ctrl button:not(:disabled):hover { background-color: rgb(86, 83, 83); } -.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in { +.mapboxgl-ctrl-zoom-in { + border-radius: 4px 4px 0 0; +} + +.mapboxgl-ctrl-compass { + border-radius: 0 0 4px 4px; +} + +.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23a4a4a4%3B%27%20d%3D%27M%2010%206%20C%209.446%206%209%206.4459904%209%207%20L%209%209%20L%207%209%20C%206.446%209%206%209.446%206%2010%20C%206%2010.554%206.446%2011%207%2011%20L%209%2011%20L%209%2013%20C%209%2013.55401%209.446%2014%2010%2014%20C%2010.554%2014%2011%2013.55401%2011%2013%20L%2011%2011%20L%2013%2011%20C%2013.554%2011%2014%2010.554%2014%2010%20C%2014%209.446%2013.554%209%2013%209%20L%2011%209%20L%2011%207%20C%2011%206.4459904%2010.554%206%2010%206%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A") } -.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out { +.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23a4a4a4%3B%27%20d%3D%27m%207%2C9%20c%20-0.554%2C0%20-1%2C0.446%20-1%2C1%200%2C0.554%200.446%2C1%201%2C1%20l%206%2C0%20c%200.554%2C0%201%2C-0.446%201%2C-1%200%2C-0.554%20-0.446%2C-1%20-1%2C-1%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A") } -.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > .mapboxgl-ctrl-compass-arrow { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%0A%09%3Cpolygon%20fill%3D%27%23a4a4a4%27%20points%3D%276%2C9%2010%2C1%2014%2C9%27%2F%3E%0A%09%3Cpolygon%20fill%3D%27%23f0f0f0%27%20points%3D%276%2C11%2010%2C19%2014%2C11%20%27%2F%3E%0A%3C%2Fsvg%3E") +.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%0A%09%3Cpolygon%20fill%3D%27%23a4a4a4%27%20points%3D%276%2C9%2010%2C1%2014%2C9%27%2F%3E%0A%09%3Cpolygon%20fill%3D%27%23a4a4a4%27%20points%3D%276%2C11%2010%2C19%2014%2C11%20%27%2F%3E%0A%3C%2Fsvg%3E") } .mapboxgl-ctrl-inspect { diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss index e54c1e7..9e0296d 100644 --- a/src/styles/_toolbar.scss +++ b/src/styles/_toolbar.scss @@ -30,7 +30,7 @@ line-height: 26px; } - img { + svg { width: 30px; padding-right: $margin-2; vertical-align: top;