基于React和mapbox的位置跟踪器

React Location Tracker 本例需要能访问mapbox的api。

react, map

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2916
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var Location = React.createClass({
    displayName: 'Location',

getInitialState: function getInitialState() {
        return {
            loaded: false,
            city: '',
            country: '',
            latLong: [121.52159, 31.2999]
        };
    },
    componentDidMount: function componentDidMount() {
        var that = this;

var latLong = [121.52159, 31.2999];

that.setState({
            city: 'shanghai',
            country: 'china',
            latLong: latLong
        });
    },
    render: function render() {

var UI = React.createClass({
    displayName: 'UI',

getInitialState: function getInitialState() {
        return {
            loaded: false
        };
    },
    componentDidMount: function componentDidMount() {
        this.setState({
            loaded: true
        });
    },
    render: function render() {
        return React.createElement(
            'div', {
                className: 'UI',
                'data-loaded': this.state.loaded
            },
            React.createElement(
                'div', {
                    className: 'Status'
                },
                'Status ',
                React.createElement(
                    'strong',
                    null,
                    this.props.status
                )
            ),
            React.createElement(
                'div', {
                    className: 'LocationText'
                },
                'Location ',
                React.createElement(
                    'strong',
                    null,
                    this.props.locationName
                )
            ),
            React.createElement('div', {
                className: 'Blip'
            })
        );
    }
});

var Map = React.createClass({
    displayName: 'Map',

getInitialState: function getInitialState() {
        return {
            loaded: false
        };
    },
    componentDidMount: function componentDidMount() {
        mapboxgl.accessToken = 'pk.eyJ1IjoidGVjaGJyb29kIiwiYSI6ImNrbjQxbnB3ZzFkYnIydm1oOGQyNndzYm4ifQ.drJx0ylPsqQUzmQnCLCtAw';
        var map = new mapboxgl.Map({
            container: this.refs.map,
            style: 'mapbox://styles/mapbox/light-v9',
            center: this.props.latLong,
            zoom: 12
        });

this.map = map;
        this.setState({
            loaded: true
        });
    },
    componentDidUpdate: function componentDidUpdate() {
        var latLong = this.props.latLong;
        var map = this.map;
        map.panTo(this.props.latLong, {
            zoom: 12,
            duration: 500
        });
    },
    render: function render() {

return React.createElement('div', {
            'data-loaded': this.state.loaded,
            ref: 'map',
            className: 'Map',
            id: 'map'
        });
    }
});

// Render
ReactDOM.render(React.createElement(Location, null), document.getElementById("app"));

编译

CSS

@import "https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700";
body {
    margin: 0;
}
#app {
    height: 100vh;
    background: #100f1c;
    overflow: hidden;
    font-family: 'Open Sans', sans-serif;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-weight: 300;
    font-size: 14px;
    text-transform: uppercase;
}
#app strong {
    font-weight: 600;
}
.Location {
    width: 420px;
    height: 680px;
    background: #2E294E;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
@media screen and (max-width: 420px) {
    .Location {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}
.Location .Map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    mix-blend-mode: multiply;
    border-radius: 10px;
    background: #2E294E;
    opacity: 0;
    -webkit-transition: opacity 1s ease 1s;
    transition: opacity 1s ease 1s;
}
@media screen and (max-width: 420px) {
    .Location .Map {
        border-radius: 0;
    }
}
.Location .Map[data-loaded="true"] {
    opacity: 1;
}
.Location .UI {
    position: relative;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #EADEDA;
    border: 2px solid #cb0852;
    box-sizing: border-box;
    border-radius: 10px;
}
@media screen and (max-width: 420px) {
    .Location .UI {
        border-radius: 0;
        border: 5px solid #cb0852;
    }
}
.Location .UI .Status {
    position: absolute;
    left: 40px;
    top: 0px;
    opacity: 0;
    -webkit-transition: top 1s ease 1s, opacity 1s ease 1s;
    transition: top 1s ease 1s, opacity 1s ease 1s;
}
.Location .UI .LocationText {
    position: absolute;
    bottom: 80px;
    left: 40px;
    opacity: 0;
    opacity: 0;
    -webkit-transition: bottom 1s ease 1s, opacity 1s ease 1.5s;
    transition: bottom 1s ease 1s, opacity 1s ease 1.5s;
}
.Location .UI .Blip {
    width: 20px;
    height: 20px;
    background: #F61067;
    border-radius: 20px;
    box-shadow: 0 0 20px 20px rgba(246, 16, 103, 0.5);
    -webkit-animation: pulse 5s infinite ease-in-out;
    animation: pulse 5s infinite ease-in-out;
    opacity: 0;
    -webkit-transition: opacity 1s ease 2s;
    transition: opacity 1s ease 2s;
}
.Location .UI[data-loaded="true"] .Blip {
    opacity: 1;
}
.Location .UI[data-loaded="true"] .LocationText {
    bottom: 40px;
    opacity: 1;
}
.Location .UI[data-loaded="true"] .Status {
    top: 40px;
    opacity: 1;
}
@-webkit-keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(246, 16, 103, 0);
    }
    50% {
        box-shadow: 0 0 10px 0 #f61067;
    }
    75%,
    100% {
        box-shadow: 0 0 20px 20px rgba(246, 16, 103, 0);
    }
}
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(246, 16, 103, 0);
    }
    50% {
        box-shadow: 0 0 10px 0 #f61067;
    }
    75%,
    100% {
        box-shadow: 0 0 20px 20px rgba(246, 16, 103, 0);
    }
}

HTML

React Location Tracker 本例需要能访问mapbox的api。

react, map

编辑器支持Emmet

快捷键

React Location Tracker 本例需要能访问mapbox的api。

react, map

基于ReactJS和Bootstrap实现的移动图表应用

基于WebGL和ReactMotion实现的一款3D条形图表插件（在线演示）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：