linbeistation/dashboard/templates/dashboard/vector.html

{% extends 'dashboard/common/base.html' %}
{% load static %}
{% block add_css %}
    <link rel="stylesheet" href="{% static 'dashboard/css/ol.css' %}">
    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
    <link rel="stylesheet" type="text/css" href="{% static 'dashboard/css/htmleaf-demo.css' %}">
    <link rel="stylesheet" href="{% static 'dashboard/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'dashboard/css/dashboard.css' %}">
    <link rel="stylesheet" href="{% static 'dashboard/css/popup.css' %}">
    <link href="{% static 'bootstrap.dropdown.cascade/css/bootstrap-cascader.min.css' %}" rel="stylesheet">
    <style>
        .share {
            position: absolute;
            top: 10px;
            right: 10px;
            border: 1px;
            border-color: #333;
            background-color: #339999;
            color: black;
            box-shadow: 0px 0px 2px #666;
            cursor: pointer;
            padding: 0 4px 0 4px;
            margin-right: 50px;


        }

        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
        }

        .ol-popup-closer:after {
            color: black;
            content: "✖";
        }

        {#==========================================================================#}

    </style>
{% endblock %}
{% block page_head %}{% endblock %}
{% block breadcrumb %}
{% endblock %}
{% block content %}


    <div id="wrapper">
        <div class="overlay"></div>

        <!-- Sidebar -->
        <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
            <div style="padding: 5px;position: relative" class="distribution-panel">
                <div class="input-group main-search">
                    <input type="text" class="form-control" placeholder="查中文名、学名"
                           style="height: 50px;width: 400px;margin-left: 50px;opacity: 1">
                    <div class="input-group-btn" style="display: none">
                        <button class="btn btn-default" type="button">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </div>
                </div>
                <div class="autocomplete-panel" style="margin-left: 50px">
                    <div style="padding: 10px; text-align: center">请输入名称</div>
                </div>
                <div class="result-panel">
                    <div class="panel panel-default">
                        <div style="padding: 10px; text-align: center">loading...</div>
                        <div style="color: black;z-index: 9999">
                            <p id="point_lat">{{ points.point_lat }}</p>
                            <p id="point_lon">{{ points.point_lon }}</p>
                        </div>
                    </div>
                </div>

            </div>
        </nav>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
            <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas"
                    style="margin-left: 50px;background-color: black">
                <span class="hamb-top"></span>
                <span class="hamb-middle"></span>
                <span class="hamb-bottom"></span>
            </button>
        </div>
        <!-- /#page-content-wrapper -->

    </div>
    <div class="ibox">

        <div class="col-md-12" style="padding: 0px;margin: 0px;">
            <div id="map" style="width:100%;height:100%;">
                <div id="popup" class="ol-popup">
                    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                    <div id="popup-content" style="width:300px; height:120px;z-index: 999999999999"></div>
                </div>


            </div>
        </div>
    </div>


{% endblock %}

{% block add_js %}
    <script src="{% static 'dashboard/js/ol.js' %}"></script>
    <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
    <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
    {#      <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>#}
    {#    <script src="{% static 'dashboard/js/leaflet.ChineseTmsProviders.js' %}"></script>#}
    {#    <script type="text/javascript" src="{% static 'dashboard/js/leaflet.NonTiledLayer.js' %}"></script>#}
    <script src="{% static 'dashboard/js/vector.js' %}"></script>


    <script type="text/javascript">
        $(document).ready(function () {
            var trigger = $('.hamburger'),
                overlay = $('.overlay'),
                isClosed = false;

            trigger.click(function () {
                hamburger_cross();
            });

            function hamburger_cross() {

                if (isClosed == true) {
                    overlay.hide();
                    trigger.removeClass('is-open');
                    trigger.addClass('is-closed');
                    isClosed = false;
                } else {
                    overlay.show();
                    trigger.removeClass('is-closed');
                    trigger.addClass('is-open');
                    isClosed = true;
                }
            }

            $('[data-toggle="offcanvas"]').click(function () {
                $('#wrapper').toggleClass('toggled');
            });


        });
    </script>
{% endblock %}