muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 02:56:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

location button

Browse source
This commit is contained in:
muerwre 2018-08-27 18:07:58 +07:00
parent 40993e2dd0
commit e7960a6bf8
5 changed files with 81 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/UserLocation.jsx
View file

@ -1,6 +1,7 @@
import React from 'react';
import L, { marker } from 'leaflet';
import { DomMarker } from '$utils/DomMarker';
import { Icon } from '$components/panels/Icon';
export class UserLocation extends React.Component {
constructor(props) {
@ -61,7 +62,9 @@ export class UserLocation extends React.Component {
render() {
return (
<div className="locate-geo-button" onClick={this.centerMapOnLocation} />
<div className="locate-geo-button" onClick={this.centerMapOnLocation}>
<Icon icon="icon-locate" size={30} />
</div>
);
}
}

2
src/modules/Map.js
View file

@ -8,7 +8,7 @@ export class Map {
constructor({ container }) {
this.map = map(container, { editable: true }).setView([55.0153275, 82.9071235], 13);
this.tileLayer = tileLayer(providers.default, {
this.tileLayer = tileLayer(providers.dgis, {
attribution: 'Независимое Велосообщество',
maxNativeZoom: 18,
maxZoom: 18,

9
src/sprites/icon.svg
View file

@ -129,6 +129,15 @@
<path fill="none" stroke-width="2" stroke="#fff" d="M11.932 25.636l2.343-2.342"/>
</g>
</g>
<g id="icon-locate">
<path id="rect5819" stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" fill="black"/>
<circle id="path5839" cx="16" cy="16" r="5.127" fill="none" stroke="#fff" stroke-width="2.5"/>
<path id="path5841" fill="none" fill-rule="evenodd" stroke="#fff" stroke-width="2.5" d="M16.087 6.854v4.242"/>
<path id="path5843" fill="none" fill-rule="evenodd" stroke="#fff" stroke-width="2.5" d="M16.087 20.686v4.243"/>
<path id="path5845" fill="none" fill-rule="evenodd" stroke="#fff" stroke-width="2.5" d="M20.948 16.134h4.243"/>
<path id="path5847" fill="none" fill-rule="evenodd" stroke="#fff" stroke-width="2.5" d="M6.63 16.134h4.242"/>
</g>
</svg>
</defs>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Before After
Before After

108
src/sprites/icons_draft.svg
View file

@ -26,9 +26,9 @@
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="11.313708"
inkscape:cx="-2.2387215"
inkscape:cy="4.6847445"
inkscape:zoom="2.8284271"
inkscape:cx="-4.6277031"
inkscape:cy="14.448652"
inkscape:document-units="px"
inkscape:current-layer="svg8"
showgrid="false"
@ -66,49 +66,6 @@
preserveAspectRatio="none"
height="85.460419"
width="191.82292" />
<g
id="g4853"
transform="translate(-29.984674,30.508559)">
<rect
ry="0"
rx="0"
y="-28.416527"
x="16.494829"
height="1.7498444"
width="4.0352693"
id="rect4832"
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.11536483;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" />
<rect
y="-28.416527"
x="15.535068"
height="0.93293262"
width="5.6158781"
id="rect4834"
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.24673447;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" />
<path
inkscape:connector-curvature="0"
id="rect4836"
d="m 16.494829,-29.706371 v 1.289844 h 0.671392 v -0.760677 h 2.659039 v 0.760677 h 0.671392 v -1.289844 z"
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.29250789;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" />
<path
sodipodi:nodetypes="czc"
inkscape:connector-curvature="0"
id="path4841"
d="m 16.886139,-27.489105 c 0.09235,0.02913 -0.101567,1.170389 0.111157,2.498067 0.212724,1.327679 -0.477168,1.845719 -0.477168,1.845719"
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:0.75342119;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:0.75342119;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 18.496493,-27.489105 c 0.09235,0.02913 -0.101566,1.170389 0.111157,2.498067 0.212724,1.327679 -0.477168,1.845719 -0.477168,1.845719"
id="path4843"
inkscape:connector-curvature="0"
sodipodi:nodetypes="czc" />
<path
sodipodi:nodetypes="czc"
inkscape:connector-curvature="0"
id="path4845"
d="m 20.106847,-27.489105 c 0.09235,0.02913 -0.101566,1.170389 0.111158,2.498067 0.212723,1.327679 -0.477169,1.845719 -0.477169,1.845719"
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:0.75342119;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
id="g4909"
transform="translate(-0.0543344,0.88815665)">
@ -471,7 +428,8 @@
</g>
</g>
<g
id="icon-logo">
id="icon-logo"
transform="translate(-160)">
<rect
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647"
id="rect5611"
@ -515,4 +473,60 @@
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</g>
<g
id="g5817">
<g
transform="translate(-192)"
id="g5812">
<rect
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647"
id="rect5796"
width="32"
height="32"
x="0"
y="0" />
</g>
<path
sodipodi:nodetypes="cccccccc"
inkscape:connector-curvature="0"
id="path5794"
d="m -181.4375,15.109375 h 7.5 l 0.15625,-1.765625 3.21875,2.640625 -3.01562,2.671875 -0.3125,-1.765625 -7.54688,-0.03125 z"
style="fill:#ececec;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
<g
id="icon-locate">
<rect
y="0"
x="0"
height="32"
width="32"
id="rect5819"
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" />
<circle
style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path5839"
cx="16"
cy="16"
r="5.126524" />
<path
style="opacity:1;fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 16.086679,6.853515 v 4.242641"
id="path5841"
inkscape:connector-curvature="0" />
<path
inkscape:connector-curvature="0"
id="path5843"
d="m 16.086679,20.686291 v 4.242641"
style="opacity:1;fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
style="opacity:1;fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 20.948037,16.134291 h 4.242641"
id="path5845"
inkscape:connector-curvature="0" />
<path
inkscape:connector-curvature="0"
id="path5847"
d="M 6.6291246,16.134291 H 10.871766"
style="opacity:1;fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Before After
Before After

6
src/styles/map.less
View file

@ -70,6 +70,12 @@
z-index: 3;
box-shadow: @bar_shadow;
cursor: pointer;
padding: 1px;
box-sizing: border-box;
svg {
fill: white;
}
}
.location-marker {