
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
    <head>
        <meta charset='utf-8'>
        <script src='lib/esl.js'></script>
        <script src='lib/config.js'></script>
        <script src='lib/jquery.min.js'></script>
        <script src='http://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu'></script>
        <meta name='viewport' content='width=device-width, initial-scale=1' />
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
                margin: 0;
            }
        </style>
        <div id='main'></div>
        <script>

            require([
                'echarts',

                // 'echarts/chart/lines',
                // 'echarts/component/legend',
                'extension/bmap'
            ], function (echarts) {

                var myChart = echarts.init(document.getElementById('main'));

                $.get('data/hangzhou-tracks.json', function (data) {
                    var lines = data.map(function (track) {
                        return {
                            coords: track.map(function (seg, idx) {
                                return seg.coord;
                            })
                        };
                    });
                    // var lines = [].concat.apply([], data.map(function (track) {
                    //     return track.slice(1).map(function (seg, idx) {
                    //         return [track[idx], track[idx + 1]];
                    //     });
                    // }));
                    // lines = lines.concat(lines);
                    myChart.setOption({
                        animation: false,
                        bmap: {
                            center: [120.13066322374, 30.240018034923],
                            zoom: 14,
                            roam: true,
                            mapStyle: {
                                styleJson: [
                                      {
                                           'featureType': 'water',
                                           'elementType': 'all',
                                           'stylers': {
                                                'color': '#d1d1d1'
                                           }
                                      },
                                      {
                                           'featureType': 'land',
                                           'elementType': 'all',
                                           'stylers': {
                                                'color': '#f3f3f3'
                                           }
                                      },
                                      {
                                           'featureType': 'railway',
                                           'elementType': 'all',
                                           'stylers': {
                                                'visibility': 'off'
                                           }
                                      },
                                      {
                                           'featureType': 'highway',
                                           'elementType': 'all',
                                           'stylers': {
                                                'color': '#fdfdfd'
                                           }
                                      },
                                      {
                                           'featureType': 'highway',
                                           'elementType': 'labels',
                                           'stylers': {
                                                'visibility': 'off'
                                           }
                                      },
                                      {
                                           'featureType': 'arterial',
                                           'elementType': 'geometry',
                                           'stylers': {
                                                'color': '#fefefe'
                                           }
                                      },
                                      {
                                           'featureType': 'arterial',
                                           'elementType': 'geometry.fill',
                                           'stylers': {
                                                'color': '#fefefe'
                                           }
                                      },
                                      {
                                           'featureType': 'poi',
                                           'elementType': 'all',
                                           'stylers': {
                                                'visibility': 'off'
                                           }
                                      },
                                      {
                                           'featureType': 'green',
                                           'elementType': 'all',
                                           'stylers': {
                                                'visibility': 'off'
                                           }
                                      },
                                      {
                                           'featureType': 'subway',
                                           'elementType': 'all',
                                           'stylers': {
                                                'visibility': 'off'
                                           }
                                      },
                                      {
                                           'featureType': 'manmade',
                                           'elementType': 'all',
                                           'stylers': {
                                                'color': '#d1d1d1'
                                           }
                                      },
                                      {
                                           'featureType': 'local',
                                           'elementType': 'all',
                                           'stylers': {
                                                'color': '#d1d1d1'
                                           }
                                      },
                                      {
                                           'featureType': 'arterial',
                                           'elementType': 'labels',
                                           'stylers': {
                                                'visibility': 'off'
                                           }
                                      },
                                      {
                                           'featureType': 'boundary',
                                           'elementType': 'all',
                                           'stylers': {
                                                'color': '#fefefe'
                                           }
                                      },
                                      {
                                           'featureType': 'building',
                                           'elementType': 'all',
                                           'stylers': {
                                                'color': '#d1d1d1'
                                           }
                                      },
                                      {
                                           'featureType': 'label',
                                           'elementType': 'geometry.fill',
                                           'stylers': {
                                                'color': '#848484'
                                           }
                                      },
                                      {
                                           'featureType': 'label',
                                           'elementType': 'geometry',
                                           'stylers': {
                                                'visibility': 'off'
                                           }
                                      }
                                ]
                            }
                        },
                        series: [{
                            type: 'lines',
                            coordinateSystem: 'bmap',
                            data: lines,
                            polyline: true,
                            lineStyle: {
                                normal: {
                                    color: 'purple',
                                    opacity: 0.4,
                                    width: 1
                                }
                            }
                        }]
                    });

                });
            });

        </script>
    </body>
</html>