Нужно добавить к форуму страницу с онлайн картой

[vitaliy83i]

Сейчас это у меня идея фикс)) нашел вот такой чудный проект: http://olegsmith.github.io/leaflet.geomanager/ и очень хочу добавить его к своему форуму, но пока не получается... пустую страницу создал по инструкции без особых проблем, но вставить в неё скрипт так, чтоб всё заработало пока не смог
Это максимум, что получилось:

[Viktor.Bakumtsev]

Там внизу зеленая кнопка, скачивай архив. Содержимое папки olegsmith-leaflet.geomanager-2e58d8c кинь в папку шаблонов своего стиля. Файл index.html переименуй, например в map.html. Его ты можешь поправить, убрать лишний код. В созданную страницу в стиле форума между хейдером и футером вставь

Код: выделить все

<!-- INCLUDE map.html -->

Вот пример правленного файла map.htm

map.rar

(4.7 KiB) Скачиваний: 258

[vitaliy83i]

Дак вот я хочу, чтоб на странице с картой остались полноценные "шапка" и "подвал" форума. Хотя, если не получится, придется делать так.

[Viktor.Bakumtsev]

Создай страницу в стиле конференции и вставляй туда чего хочешь.
Вот у меня например такая страница

[vitaliy83i]

Воот, мы уже понемногу подбираемся к тому вопросу, который я хотел задать в первом посте, но видать неправильно сформулировал))) Страницу в стле конференции я сделал (на скрине она и есть), взял часть кода из index.html и вставил:

Код: выделить все

<h1>Example</h1>
            </div>

            <div class="control-group">
              <div class="controls controls-row">


                <div class="btn-group" style="margin-bottom: 10px;">
                  <button id="layerdropdown" data-toggle="dropdownform" class="btn dropdownform-toggle">
                      <i class="icon-align-justify"></i>
                      <span class="caret">
                      </span>
                  </button>
                  <ul class="dropdown-form" style="width: 830px;">
                    <li>
                        <div class="row" style="">


  <!-- Layer Dialog begin -->
  <div class="span4" style="margin-left: 60px; max-height:360px; overflow-y: auto;">



  Interactive layers


  <ul class="nav nav-list bs-docs-sidenav geomanager-layers" style="width: auto; min-height:30px; border: 1px solid #DDDDDD; padding:8px; margin:0;" data-geomanager-interactivelayers="geoman0">

    <li data-geomanager-type="interactivelayers" data-geomanager-options='{"providername":"L.GeoManager.GoogleIdentify", "title":"Google Identify"}'>
        <a class="clearfix"  href="#" >Google Identify</a>
    </li>

  </ul>

  Overlays

  <ul class="nav nav-list bs-docs-sidenav geomanager-layers" style="width: auto; min-height:30px; border: 1px solid #DDDDDD; padding:8px; margin:0;" data-geomanager-overlays="geoman0">
  </ul>

  Base layers

  <ul class="nav nav-list bs-docs-sidenav geomanager-layers" style="width: auto; min-height:30px; border: 1px solid #DDDDDD; padding:8px; margin:0;"  data-geomanager-baselayers="geoman0">

    <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.OSM", "title":"OpenStreetMap"}'>
        <a class="clearfix" href="#">OpenStreetMap</a>
    </li>

  </ul>


  </div>

  <div class="span4">


<div style="min-height:60px; max-height:360px; overflow-y: auto;">

<div class="accordion" data-geomanager-sourcelayers="geoman0">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" href="#interactivelayers">
      Interactive layers
      </a>
    </div>
    <div id="interactivelayers" class="accordion-body collapse in">
      <div class="accordion-inner" style="padding:0;">

        <ul class="nav nav-list bs-docs-sidenav" style="width: auto; padding:8px; margin:0;" >

            <li data-geomanager-type="interactivelayers" data-geomanager-options='{"providername":"L.GeoManager.OSMIdentify", "title":"OpenStreetMap Identify"}'>
                <a class="clearfix"  href="#" >OpenStreetMap Identify</a>
            </li>
            <li data-geomanager-type="interactivelayers" data-geomanager-options='{"providername":"L.GeoManager.GoogleIdentify", "title":"Google Identify"}'>
                <a class="clearfix"  href="#" >Google Identify</a>
            </li>
            <li data-geomanager-type="interactivelayers" data-geomanager-options='{"providername":"L.GeoManager.BingIdentify", "title":"Bing Identify"}'>
                <a class="clearfix"  href="#" >Bing Identify</a>
            </li>
            <li data-geomanager-type="interactivelayers" data-geomanager-options='{"providername":"L.GeoManager.YandexIdentify", "title":"Yandex Identify"}'>
                <a class="clearfix"  href="#" >Yandex Identify</a>
            </li>
            <li data-geomanager-type="interactivelayers" data-geomanager-options='{"providername":"L.GeoManager.WikimapiaInteractive", "title":"Wikimapia Iteractive"}'>
                <a class="clearfix"  href="#" >Wikimapia Iteractive</a>
            </li>
            <li data-geomanager-type="interactivelayers" data-geomanager-options='{"providername":"L.GeoManager.RuCadastreIdentify", "title":"RuCadastre Identify"}'>
                <a class="clearfix"  href="#" >RuCadastre Identify</a>
            </li>


        </ul>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" href="#overlays">
      Overlays
      </a>
    </div>
    <div id="overlays" class="accordion-body collapse">
      <div class="accordion-inner" style="padding:0;">

        <ul class="nav nav-list bs-docs-sidenav" style="width: auto; padding:8px; margin:0;">

<!--             <li data-geomanager-provider="arcgis" data-geomanager-options='{"title":"White background", "sublayers":{"list":["0","1","2"]}}'>
                <a class="clearfix"  href="#" >ArcGIS WMS</a>
            </li> -->

            <li data-geomanager-type="overlays" data-geomanager-options='{"providername":"L.GeoManager.ArcGIS_EPSG900913_Overlay", "title":"RuCadastre Overlay", "url":"http://maps.rosreestr.ru/ArcGIS/rest/services/CadastreNew/Cadastre/MapServer"}'>
                <a class="clearfix"  href="#" >RuCadastre Overlay</a>
            </li>

            <li data-geomanager-type="overlays" data-geomanager-options='{"providername":"L.GeoManager.WikimapiaOverlay", "title":"Wikimapia Overlay"}'>
                <a class="clearfix" href="#">Wikimapia Overlay</a>
            </li>


        </ul>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" href="#baselayers">
      Base Layers
      </a>
    </div>
    <div id="baselayers" class="accordion-body collapse">
      <div class="accordion-inner" style="padding:0;">

        <ul class="nav nav-list bs-docs-sidenav" style="width: auto; padding:8px; margin:0;">
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"customProvider", "title":"Custom Provider"}'>
                <a class="clearfix" href="#">Custom Provider</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.White", "title":"White background"}'>
                <a class="clearfix" href="#">White background</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.Black", "title":"Black background"}'>
                <a class="clearfix" href="#">Black background</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.OSM", "title":"OpenStreetMap"}'>
                <a class="clearfix" href="#">OpenStreetMap</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.OSMBW", "title":"OpenStreetMap Black and White"}'>
                <a class="clearfix" href="#">OpenStreetMap Black and White</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.OSMCloudMade", "title":"OpenStreetMap CloudMade"}'>
                <a class="clearfix" href="#">OpenStreetMap CloudMade</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.OpenCycleMap", "title":"OpencycleMap"}'>
                <a class="clearfix" href="#">OpencycleMap</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.OpenCycleMapTransport", "title":"OpencycleMap Transport"}'>
                <a class="clearfix" href="#">OpencycleMap Transport</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.OpenCycleMapLandscape", "title":"OpencycleMap Landscape"}'>
                <a class="clearfix" href="#">OpencycleMap Landscape</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.MapQuest", "title":"Mapquest"}'>
                <a class="clearfix" href="#">Mapquest</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.MapQuestAerial", "title":"Mapquest Aerial"}'>
                <a class="clearfix" href="#">Mapquest Aerial</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.StamenToner", "title":"Stamen Toner"}'>
                <a class="clearfix" href="#">Stamen Toner</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.StamenTerrain", "title":"Stamen Terrain"}'>
                <a class="clearfix" href="#">Stamen Terrain</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.StamenWatercolor", "title":"Stamen Watercolor"}'>
                <a class="clearfix" href="#">Stamen Watercolor</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.ESRIStreetMap", "title":"ESRI Street Map"}'>
                <a class="clearfix" href="#">ESRI Street Map</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.ESRITopoMap", "title":"ESRI Topo Map"}'>
                <a class="clearfix" href="#">ESRI Topo Map</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.ESRIImagery", "title":"ESRI Imagery"}'>
                <a class="clearfix" href="#">ESRI Imagery</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.GoogleRoadmap", "title":"Google Roadmap"}'>
                <a class="clearfix" href="#">Google Roadmap</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.GoogleSatellite", "title":"Google Satellite"}'>
                <a class="clearfix" href="#">Google Satellite</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.GoogleHybrid", "title":"Google Hybrid"}'>
                <a class="clearfix" href="#">Google Hybrid</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.GoogleTerrain", "title":"Google Terrain"}'>
                <a class="clearfix" href="#">Google Terrain</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.BingRoad", "title":"Bing Road"}'>
                <a class="clearfix" href="#">Bing Road</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.BingAerial", "title":"Bing Aerial"}'>
                <a class="clearfix" href="#">Bing Aerial</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.BingAerialWithLabels", "title":"Bing Aerial with labels"}'>
                <a class="clearfix" href="#">Bing Aerial with labels</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.YandexMap", "title":"Yandex Map"}'>
                <a class="clearfix" href="#">Yandex Map</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.YandexSatellite", "title":"Yandex Satellite"}'>
                <a class="clearfix" href="#">Yandex Satellite</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.YandexHybrid", "title":"Yandex Hybrid"}'>
                <a class="clearfix" href="#">Yandex Hybrid</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.YandexPublicMap", "title":"Yandex PublicMap"}'>
                <a class="clearfix" href="#">Yandex PublicMap</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.YandexPublicMapHybrid", "title":"Yandex PublicMap Hybrid"}'>
                <a class="clearfix" href="#">Yandex PublicMap Hybrid</a>
            </li>
            <li data-geomanager-type="baselayers" data-geomanager-options='{"providername":"L.GeoManager.Wikimapia", "title":"Wikimapia"}'>
                <a class="clearfix" href="#">Wikimapia</a>
            </li>

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

</div>




</div>

</div>

  <!-- Layer Dialog end -->


  <ul id="geoman0drag" class="nav nav-list bs-docs-sidenav"></ul>


                        </div>
                    </li>
                  </ul>
                </div>


                <div class="input-prepend">

                  <button id="geocodebutton" class="btn" type="button">
                    <i class="icon-search"></i>
                  </button>

                  <input id="geocodeinput" type="text" placeholder="Search...">

                </div>

                <div class="input-prepend">

                  <button class="btn" type="button" data-select2-open="geocoder">
                    <i class="icon-globe"></i>
                  </button>

                  <select id="geocoder" class="select2" style="width:200px;">
                    <option value="L.GeoManager.OSMGeocode">OpenStreetMap</option>
                    <option value="L.GeoManager.GoogleGeocode">Google</option>
                    <option value="L.GeoManager.BingGeocode">Bing</option>
                    <option value="L.GeoManager.ESRIGeocode">ESRI</option>
                    <option value="L.GeoManager.GeonamesGeocode">Geonames</option>
                    <option value="L.GeoManager.MapQuestGeocode">MapQuest</option>
                    <option value="L.GeoManager.NokiaGeocode">Nokia</option>
                    <option value="L.GeoManager.YandexGeocode">Yandex</option>
                    <option value="L.GeoManager.RuCadastreGeocode">RuCadastre (parcel numbers)</option>
                  </select>
                </div>

              </div>
            </div>

            <div id="map" style="width:100%; height:600px; "></div>


А вот эту часть вставил в overall_header.html

Код: выделить все

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Leaflet Geo Manager</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->

    <!--
    Local resources
    -->

    <link href="components/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="components/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="components/leaflet/leaflet.css" rel="stylesheet" />
    <link href="components/prettify/prettify.css" rel="stylesheet" />


    <!--
    CDN resources

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" rel="stylesheet" />
    <link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet" />
    <link href="http://leaflet.github.com/Leaflet.label/leaflet.label.css" rel="stylesheet" />
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="http://twitter.github.com/bootstrap/assets/ico/favicon.png">

    -->

    <!--[if lte IE 8]>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.ie.css" />
    <![endif]-->

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->


    <link href="components/jquery.select2/select2.css" rel="stylesheet" />
    <link href="components/jquery.select2/select2-bootstrap.css" rel="stylesheet" />

    <link href="components/bootstrap.dropdownform/bootstrap.dropdownform.css" rel="stylesheet" />
    <link href="components/leaflet.geomanager/leaflet.geomanager.css" rel="stylesheet" />

    <style type="text/css">

Но ничего так и не работает - результат в первом посте.

[crash]

А вот эту часть вставил в overall_header.html

для чего?
Почитайте http://bb3x.ru/a_addfunc/new_page

[vitaliy83i]

для чего?

Это я у же метод "научного тыка" начал применять))
Crash, эту инструкцию я читал, по ней страницу в стиле форума и сделал, а вот сделать так, чтоб карта заработала пока никак

[crash]

@vitaliy83i
ну так зачем вставлять что-то в overall_header.html? Если шапка к вашему html файлу просто подключается

[vitaliy83i]

Убрал - результат тот-же

[Viktor.Bakumtsev]

Почитай, я тебе уже обо всем написал, почитай еще и еще....

Содержимое папки olegsmith-leaflet.geomanager-2e58d8c кинь в папку шаблонов своего стиля. Файл index.html переименуй, например в map.html. Его ты можешь поправить, убрать лишний код. В созданную страницу в стиле форума между хейдером и футером вставь

Код: выделить все
<!-- INCLUDE map.html -->