schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-26 06:20:36 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improved zoom styling and fixed zoom in/out button styling.

Browse source
This commit is contained in:
orangemug 2020-02-17 15:39:54 +00:00
parent f268f09ca2
commit 0f6708d9d4
8 changed files with 73 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
config/webpack.rules.js
View file

@ -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: [

23
package-lock.json generated
View file

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

2
package.json
View file

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

2
src/components/Toolbar.jsx
View file

@ -182,7 +182,7 @@ export default class Toolbar extends React.Component {
target="_blank"
className="maputnik-toolbar-logo"
>
<img src={logoImage} alt="Maputnik" />
<span dangerouslySetInnerHTML={{__html: logoImage}} />
<h1>
<span className="maputnik-toolbar-name">{pkgJson.name}</span>
<span className="maputnik-toolbar-version">v{pkgJson.version}</span>

13
src/components/map/OpenLayersMap.jsx
View file

@ -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 {
/>
</div>
<div className="maputnik-ol-zoom">
Zoom level: {this.state.zoom}
<svg
style={{
width: "14px",
height: "14px",
verticalAlign: "middle",
}}
viewBox="0 0 24 24"
>
<title>Zoom level</title>
<path fill="currentColor" d={mdiMagnify} />
</svg> {this.state.zoom}
</div>
{this.props.debugToolbox &&
<div className="maputnik-ol-debug">

15
src/libs/zoomcontrol.js
View file

@ -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 = `
<svg
style="width: 14px; height: 14px; vertical-align: middle;"
viewBox="0 0 24 24"
>
<title>Zoom level</title>
<path fill="currentColor" d="${mdiMagnify}" />
</svg> <span></span>
`;
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 (){

19
src/mapboxgl.css
View file

@ -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 {

2
src/styles/_toolbar.scss
View file

@ -30,7 +30,7 @@
line-height: 26px;
}
img {
svg {
width: 30px;
padding-right: $margin-2;
vertical-align: top;