Untitled

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <style type="text/css">
    body { padding-top: 42px; }
    /*    @media screen and (max-width: 768px) {
        body { padding-top: 0px; }
    }*/
  </style>
  <link rel="stylesheet" href="css/leaflet.css" />
</head>
<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="brand" href="#">Test Site</a>
        <div class="nav-collapse">
          <ul class="nav">
            <li class="active"><a href="#">Главная</a></li>
            <li><a href="#about">Карты</a></li>
            <li><a href="#contact">Контакты</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>
  <div class="container">
    <!-- <div class="row main-row">
        <div class="span12"> -->
          <div class="row">
            <div id="data" class="span6 pull-left">
              <div class="overview">
                <h2>Welcome</h2>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam faucibus eleifend aliquet. Fusce euismod lorem lacus, vitae tristique justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum cursus elementum risus lobortis vestibulum. Maecenas in ligula massa, in dignissim augue. Sed neque massa, egestas quis auctor in, feugiat vestibulum tellus. Sed nec sapien sollicitudin ipsum venenatis aliquam. Nunc condimentum, est quis molestie suscipit, libero mauris egestas turpis, vitae pretium lorem nibh ac sem.
                </p>
                <p>
                 Vivamus non sapien urna. Sed eu ipsum odio, eget congue ipsum. Ut faucibus tortor sit amet urna hendrerit et consectetur odio molestie. Vivamus ut ornare elit. Phasellus id dui odio, sed consequat nisl. Praesent id odio et est aliquet congue a sed nulla. Ut massa magna, tincidunt non hendrerit et, condimentum et augue. Phasellus non accumsan nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vel felis urna.
                </p>
              </div>
            </div>

            <div id="map-area" class="span6 pull-right">
              <div id="map"></div>
            </div>
          </div>
      <!-- </div>
    </div> -->
  </div>

  <script src="js/jquery-2.0.2.js"></script>
  <script src="js/leaflet.js"></script>
  <script type="text/javascript">
    var map;
    $(window).load(function() {
      map = new L.Map('map', {
          center: [35.260, -80.827],
          zoom: 10,
          minZoom: 9,
          maxZoom: 18
      });
      map.attributionControl.setPrefix(false).setPosition("bottomleft");

      //  Add Base Layer
      L.tileLayer("http://maps.co.mecklenburg.nc.us/mbtiles/mbtiles-server.php?db=meckbase.mbtiles&z={z}&x={x}&y={y}", {}).addTo(map);
    });
  </script>
</body>