Skip to content

Commit

Permalink
jump to location functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
justenPalmer committed Apr 24, 2020
1 parent c40669d commit 14a9ed3
Show file tree
Hide file tree
Showing 9 changed files with 207 additions and 84 deletions.
13 changes: 7 additions & 6 deletions src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ label .badge{position:relative;top:2px;}
.drop-menu{position:absolute;background-color:#FFF;color:#273237;
padding:0.25rem;border-radius:0.25rem;z-index:999;border:1px solid #8FA3AE;
left:0;right:0;}
.drop-menu-locations{top:6px;right:45px;left:auto;width:140px;position:fixed;z-index:10000;}

.content-title-options .drop-menu{top:20px;right:0;}
.drop-item{color:#273237;white-space:nowrap;font-size:0.8rem;padding:0.25rem 0.5rem;cursor:pointer;}
Expand All @@ -115,11 +116,6 @@ label .badge{position:relative;top:2px;}

.dropdown-cover{position:fixed;top:0;bottom:0;left:0;right:0;background-color:transparent;}

.dropdown-menu{padding:0;}
.dropdown-menu a{padding:0.25rem 0.5rem;font-size:0.8rem;}
.dropdown-menu a.active{background-color:#EEEEEE;color:#273237;}
.dropdown-divider{margin:0.15rem 0;}

.exp-ml{margin-left:12px;}
.exp-arrow{left:-16px;top:10px;border-radius:4px;width:14px;height:14px;
position:relative;color:#FFFFFF;background-color:#273237;cursor:pointer;}
Expand Down Expand Up @@ -228,7 +224,7 @@ label .badge{position:relative;top:2px;}

.mapboxgl-ctrl-icon.active{background-color:#00ACC1;color:#FFF;}
.mapboxgl-ctrl-icon.active:hover{background-color:#0197A7!important;color:#FFF;}
.mapboxgl-ctrl-icon i{position:relative;top:-1px;}
.mapboxgl-ctrl-icon i{position:relative;top:1px;font-size:1rem;}

.mapboxgl-popup-close-button{color:#AEAEAE;}
.mapboxgl-popup-close-button:hover{color:#747474;}
Expand Down Expand Up @@ -312,6 +308,7 @@ label .badge{position:relative;top:2px;}

.tooltip{font-size:0.7rem;}
.tooltip-source{position:absolute;bottom:0;left:0;right:0;text-align:center;height:0;}
.tooltip-source.tooltip-origin-left{bottom:0;left:0;top:0;text-align:center;width:0;}
.tooltip-point{display:inline-block;position:relative;}

.tooltip-bubble{position:absolute;right:-11px;z-index:1000;top:-4px;
Expand All @@ -330,6 +327,10 @@ label .badge{position:relative;top:2px;}
.tooltip-trigger:hover .tooltip-source:hover .tooltip-bubble{display:none;}
.tooltip-trigger{position:relative;}

.tooltip-source.tooltip-origin-left .tooltip-bubble {right:11px;top:-15px;}
.tooltip-source.tooltip-origin-left .tooltip-bubble span:after{right:-8px;top:11px;width:6px;height:8px;
border-left:4px solid #1B2124;border-bottom:4px solid transparent;border-top:4px solid transparent;}

.w-max-500{max-width:500px;}

#map{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;}
Expand Down
66 changes: 33 additions & 33 deletions src/component/Field/FieldAC.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -159,39 +159,39 @@ class FieldAC extends React.Component {
<div className="form-group mb-2 position-relative">
{label && <label className="mb-0">{label}</label>}
<div className="position-relative">
<Dropdown handleClose={()=>this.handleBlur(false)} open={focused}>
<input type="text" className={inputClass? inputClass: 'form-control'} placeholder={placeholder}
onChange={this.handleInputChange}
onFocus={this.handleFocus}
onKeyUp={this.handleKeyUp}
autoFocus={autoFocus}
value={inputValue}
/>
{focused && (
<div className="drop-menu" data-boundary="window">
{options.map((exp,i)=>{

if (exp.value.indexOf(inputValue) === -1) return null
count++
if (count > maxDropdowns) return null

let className = 'drop-item'
if (selected === exp.value) className += ' active'

return (
<div
className={className}
onClick={(e)=>{this.handleSelect(exp.value)}}
key={exp.value}>

{exp.value}
</div>
)
})}
</div>
)}

</Dropdown>
<Dropdown handleClose={()=>this.handleBlur(false)} open={focused}>
<input type="text" className={inputClass? inputClass: 'form-control'} placeholder={placeholder}
onChange={this.handleInputChange}
onFocus={this.handleFocus}
onKeyUp={this.handleKeyUp}
autoFocus={autoFocus}
value={inputValue}
/>
{focused && (
<div className="drop-menu" data-boundary="window">
{options.map((exp,i)=>{
if (exp.value.indexOf(inputValue) === -1) return null
count++
if (count > maxDropdowns) return null

let className = 'drop-item'
if (selected === exp.value) className += ' active'

return (
<div
className={className}
onClick={(e)=>{this.handleSelect(exp.value)}}
key={exp.value}>

{exp.value}
</div>
)
})}
</div>
)}

</Dropdown>

</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion src/component/Icon/constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ const icons = {
'layer-line': 'fa-pen-nib',
'layer-raster': 'fa-satellite',
'layer-symbol': 'fa-text',
'layer-fill-extrusion': 'fa-text',
location: 'fa-location',

'map-focus': 'fa-map-marker',
refresh: 'fa-redo',
remove: 'fa-trash',
Expand Down
58 changes: 55 additions & 3 deletions src/component/Map/MapMapbox.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,17 @@ import modelStyle from '../../model/style'
import MapboxGl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'

import constants from './constants'
import utilUrl from '../../utility/utilUrl'

import Dropdown from '../Dropdown'
import MapMapboxControls from './MapMapboxControls'

class CustomControls {
handleLocationToggle = null
onAdd(map) {
this._container = document.createElement('div')
ReactDOM.render(<MapMapboxControls map={map}/>,this._container)
ReactDOM.render(<MapMapboxControls handleLocationToggle={this.handleLocationToggle} map={map}/>,this._container)
return this._container
}
onRemove() {
Expand Down Expand Up @@ -110,8 +113,10 @@ class MapMapbox extends React.Component {
hash:true
})

const Controls = new CustomControls({})
Controls.handleLocationToggle = this.handleLocationToggle

map.addControl(new CustomControls({}))
map.addControl(Controls)

map.addControl(new MapboxGl.AttributionControl({
compact: true
Expand Down Expand Up @@ -221,6 +226,7 @@ class MapMapbox extends React.Component {
this.state = {
debugLines: null,
mapLoaded: false,
locationShow: false,
}

this.container = null // node to put map in
Expand All @@ -238,6 +244,29 @@ class MapMapbox extends React.Component {
modelMap.actions.setFocus({point})
}

handleLocationSelect = (location)=>{
this.map.flyTo({
center: [location.lng, location.lat],
zoom: location.zoom
})
}

handleLocationClose = ()=>{
this.setState({
locationShow:false
})
}

handleLocationToggle = (show)=>{
const {locationShow} = this.state

if (locationShow){
this.setState({locationShow:false})
} else {
this.setState({locationShow:true})
}
}

handleMapError = (error)=>{
const {style} = this.props

Expand Down Expand Up @@ -288,8 +317,31 @@ class MapMapbox extends React.Component {
}

render (){
const {locationShow} = this.state

return (
<div id="map" ref={el => this.container = el}></div>
<React.Fragment>
<div id="map" ref={el => this.container = el}></div>
<Dropdown handleClose={()=>this.handleLocationClose()} open={locationShow}>
{locationShow && (
<div className="drop-menu drop-menu-locations">
{constants.locations.map((loc,i)=>{

const className = 'drop-item interactive'
return (
<div
className={className}
onClick={(e)=>{this.handleLocationSelect(loc)}}
key={i}>

{loc.label}
</div>
)
})}
</div>
)}
</Dropdown>
</React.Fragment>
)
}

Expand Down
75 changes: 39 additions & 36 deletions src/component/Map/MapMapboxControls.jsx
Original file line number Diff line number Diff line change
@@ -1,55 +1,58 @@
import React from 'react'
import PropTypes from 'prop-types'
import Icon from '../Icon'
import Tooltip from '../Tooltip'

export default class MapMapboxControls extends React.Component {
static propTypes = {
map:PropTypes.object
}
class MapMapboxControls extends React.Component {

constructor (props){
super(props)
const {map} = props

this.state = {
debugLines:false
}

this.handle = {
debugLinesToggle:()=>{
if (this.state.debugLines){
this.setState({debugLines:false})
map.showTileBoundaries = false
} else {
this.setState({debugLines:true})
map.showTileBoundaries = true
}
}
}

for (let i in this.handle){
this.handle[i] = this.handle[i].bind(this)
debugLines:false,
}
}

componentDidMount(){
this.tooltip()
}
handleDebugLinesToggle = ()=>{
const {map} = this.props,
{debugLines} = this.state

tooltip(){
//console.log('ref:',)
//window.$(this.tooltipsRef).children().tooltip()
if (debugLines){
this.setState({debugLines:false})
map.showTileBoundaries = false
} else {
this.setState({debugLines:true})
map.showTileBoundaries = true
}
}

render (){

const className = 'mapboxgl-ctrl-icon'+(this.state.debugLines? ' active': '')

return <div className="mapboxgl-ctrl mapboxgl-ctrl-group" ref={ref => this.tooltipsRef = ref}>
<button className={className} onClick={this.handle.debugLinesToggle} title="debug lines">
<Icon icon={'debug-lines'}/>
</button>
</div>
const {handleLocationToggle} = this.props,
{debugLines} = this.state

return (
<React.Fragment>
<div className="mapboxgl-ctrl mapboxgl-ctrl-group tooltip-trigger">
<button className={`mapboxgl-ctrl-icon`} onClick={handleLocationToggle}>
<Icon icon={'location'}/>
</button>
<Tooltip direction={'left'} message={'jump to location'} origin={'left'}/>
</div>
<div className="mapboxgl-ctrl mapboxgl-ctrl-group tooltip-trigger">
<button className={`mapboxgl-ctrl-icon ${debugLines? 'active': ''}`} onClick={this.handleDebugLinesToggle}>
<Icon icon={'debug-lines'}/>
</button>
<Tooltip direction={'left'} message={`debug lines ${debugLines? 'off': 'on'}`} origin={'left'}/>
</div>
</React.Fragment>
)
}

}

MapMapboxControls.propTypes = {
handleLocationToggle: PropTypes.func,
map:PropTypes.object,
}

export default MapMapboxControls
53 changes: 53 additions & 0 deletions src/component/Map/constants.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
const locations = [{
"key":"sd",
"label":"San Diego",
"lat":32.72,
"lng":-117.15,
"zoom":11
},{
"key":"la",
"label":"Los Angeles",
"lat":34.04,
"lng":-118.31,
"zoom":11
},{
"key":"sf",
"label":"San Francisco",
"lat":37.77,
"lng":-122.40,
"zoom":11
},{
"key":"ny",
"label":"New York",
"lat":40.74,
"lng":-74.0,
"zoom":11
},{
"key":"dc",
"label":"Washington, DC",
"lat":38.88,
"lng":-77.04,
"zoom":11
},{
"key":"bs",
"label":"Boston",
"lat":42.36,
"lng":-71.05,
"zoom":11
},{
"key":"br",
"label":"Berlin",
"lat":52.51,
"lng":13.36,
"zoom":11
},{
"key":"tk",
"label":"Tokyo",
"lat":35.69,
"lng":139.73,
"zoom":11
}]

export default {
locations,
}
4 changes: 3 additions & 1 deletion src/component/Map/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ class Map extends React.Component {
render (){
const {focus, style} = this.props

return <MapMapbox focus={focus} style={style}/>
return (
<MapMapbox focus={focus} style={style}/>
)
}
}

Expand Down
Loading

0 comments on commit 14a9ed3

Please sign in to comment.