schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2025-01-14 20:03:33 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Moved from magnify icon to 'zoom:' label. Also increased contrast on compass arrow.

Browse source
This commit is contained in:
orangemug 2020-02-18 18:50:30 +00:00
parent 0f6708d9d4
commit 4ef6ecb7eb
3 changed files with 5 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,7 +11,6 @@ import {Map, View, Proj, Overlay} from 'ol';
import {toLonLat} from 'ol/proj'; import {toLonLat} from 'ol/proj';
import {toStringHDMS} from 'ol/coordinate'; import {toStringHDMS} from 'ol/coordinate';
import {mdiMagnify} from '@mdi/js';
function renderCoords (coords) { function renderCoords (coords) {
@ -159,17 +158,7 @@ export default class OpenLayersMap extends React.Component {
/> />
</div> </div>
<div className="maputnik-ol-zoom"> <div className="maputnik-ol-zoom">
<svg Zoom: {this.state.zoom}
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> </div>
{this.props.debugToolbox && {this.props.debugToolbox &&
<div className="maputnik-ol-debug"> <div className="maputnik-ol-debug">

11
src/libs/zoomcontrol.js
View file

@ -1,19 +1,10 @@
import {mdiMagnify} from '@mdi/js';
export default class ZoomControl { export default class ZoomControl {
onAdd(map) { onAdd(map) {
this._map = map; this._map = map;
this._container = document.createElement('div'); this._container = document.createElement('div');
this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group mapboxgl-ctrl-zoom'; this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group mapboxgl-ctrl-zoom';
this._container.innerHTML = ` this._container.innerHTML = `
<svg Zoom: <span></span>
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._textEl = this._container.querySelector("span");

5
src/mapboxgl.css
View file

@ -76,8 +76,9 @@
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") 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-compass .mapboxgl-ctrl-icon { .mapboxgl-ctrl button.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") 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%23545454%27%20points%3D%276%2C11%2010%2C19%2014%2C11%20%27%2F%3E%0A%3C%2Fsvg%3E");
background-size: 18px;
} }
.mapboxgl-ctrl-inspect { .mapboxgl-ctrl-inspect {