Skip to content

Commit

Permalink
fix(icon): Fix icon anchoring positiion
Browse files Browse the repository at this point in the history
  • Loading branch information
trevorgerhardt committed Apr 5, 2018
1 parent 179ca9c commit a7b6abc
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 14 deletions.
10 changes: 4 additions & 6 deletions src/components/application.js
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,10 @@ export default class Application extends Component<Props, State> {
label: qs.start,
position: startCoordinate
})
} else if (qs.centerCoordinates) {
this.props.updateMap({
centerCoordinates: lonlat.toLeaflet(qs.centerCoordinates)
})
}

if (qs.endCoordinate) {
Expand All @@ -131,12 +135,6 @@ export default class Application extends Component<Props, State> {
this.props.updateMap({zoom: parseInt(qs.zoom, 10)})
}

if (qs.centerCoordinates) {
this.props.updateMap({
centerCoordinates: lonlat.toLeaflet(qs.centerCoordinates)
})
}

this.props.initialize(startCoordinate)
}

Expand Down
15 changes: 10 additions & 5 deletions src/components/map.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,18 +34,23 @@ if (Leaflet.Browser.retina) {
}

const iconWidth = 20
const iconHeight = 26
const iconHeight = 20
const iconSize = [iconWidth, iconHeight]
const iconAnchor = [iconWidth / 2, iconHeight + 13] // height plus the pointer size
const iconHTML = '' // <div className="innerMarker"></div>'

const startIcon = Leaflet.divIcon({
className: 'LeafletIcon Start',
html: '<div className="innerMarker"></div>',
iconSize: [iconWidth, iconHeight]
html: iconHTML,
iconAnchor,
iconSize
})

const endIcon = Leaflet.divIcon({
className: 'LeafletIcon End',
html: '<div className="innerMarker"></div>',
iconSize: [iconWidth, iconHeight]
html: iconHTML,
iconAnchor,
iconSize
})

type Props = {
Expand Down
6 changes: 3 additions & 3 deletions src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -326,7 +326,7 @@ body {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
bottom: -10px;
bottom: -13px;
left: 50%;
margin-left: -10px;
}
Expand All @@ -342,7 +342,7 @@ body {
.LeafletIcon.Start:after {
content: '';
position: absolute;
top: 7px;
top: 5px;
left: 7px;
border-left: solid 8px #fff;
border-bottom: solid 6px transparent;
Expand All @@ -360,7 +360,7 @@ body {
.LeafletIcon.End:after {
content: '';
position: absolute;
top: 7px;
top: 5px;
left: 5px;
border: solid 5px #fff;
}

0 comments on commit a7b6abc

Please sign in to comment.