Recommended Posts

Добрый день! Все знают, что некоторое время назад корпорация добра решила заработать на сайтах, применяющих на своих страницах карты и панорамы google. И если в России и, возможно, странах СНГ эта проблема не так критична благодаря присутствию там карт Яндекса, то для зарубежных проектов остро стоит необходимость альтернативных решений, таких как Leaflet.

Итак... Здесь и далее - решение на примере шаблона Realia с картами google.

1. В файл шаблона header.tpl добавляем стили leaflet:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>

Если у вас там же болтаются api-скрипты карт google, можете смело их грохнуть:

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3&amp;sensor=true"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing"></script>

2. Переходим в файл шаблона realty_view.tpl:

Ищем следующую строку:

<div id="property-map" data-geo="{$data.geo.value.lat};{$data.geo.value.lng}"></div>

И меняем её на:

<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>

<div id="mapid" style="width:100%;height:300px;"></div>

<script>var pobj_lat={$data.geo.value.lat};var pobj_lng={$data.geo.value.lng};</script>

{literal}
<script>
	var mymap = L.map('mapid').setView([pobj_lat, pobj_lng], 16);
	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox.streets'
	}).addTo(mymap);

  	L.marker([pobj_lat, pobj_lng]).addTo(mymap)
		.bindPopup("Описалка объекта");
</script>
{/literal}

 

В принципе, это всё. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
5 часов назад, metrpro сказал:

Добрый день! Все знают, что некоторое время назад корпорация добра решила заработать на сайтах, применяющих на своих страницах карты и панорамы google. И если в России и, возможно, странах СНГ эта проблема не так критична благодаря присутствию там карт Яндекса, то для зарубежных проектов остро стоит необходимость альтернативных решений, таких как Leaflet.

Итак... Здесь и далее - решение на примере шаблона Realia с картами google.

1. В файл шаблона header.tpl добавляем стили leaflet:


<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>

Если у вас там же болтаются api-скрипты карт google, можете смело их грохнуть:


<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3&amp;sensor=true"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing"></script>

2. Переходим в файл шаблона realty_view.tpl:

Ищем следующую строку:


<div id="property-map" data-geo="{$data.geo.value.lat};{$data.geo.value.lng}"></div>

И меняем её на:


<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>

<div id="mapid" style="width:100%;height:300px;"></div>

<script>var pobj_lat={$data.geo.value.lat};var pobj_lng={$data.geo.value.lng};</script>

{literal}
<script>
	var mymap = L.map('mapid').setView([pobj_lat, pobj_lng], 16);
	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox.streets'
	}).addTo(mymap);

  	L.marker([pobj_lat, pobj_lng]).addTo(mymap)
		.bindPopup("Описалка объекта");
</script>
{/literal}

 

В принципе, это всё. 

работает на отлично? а на сетке объявлений как работает ? 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
8 часов назад, metrpro сказал:

Добрый день! Все знают, что некоторое время назад корпорация добра решила заработать на сайтах, применяющих на своих страницах карты и панорамы google. И если в России и, возможно, странах СНГ эта проблема не так критична благодаря присутствию там карт Яндекса, то для зарубежных проектов остро стоит необходимость альтернативных решений, таких как Leaflet.

Итак... Здесь и далее - решение на примере шаблона Realia с картами google.

1. В файл шаблона header.tpl добавляем стили leaflet:


<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>

Если у вас там же болтаются api-скрипты карт google, можете смело их грохнуть:


<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3&amp;sensor=true"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing"></script>

2. Переходим в файл шаблона realty_view.tpl:

Ищем следующую строку:


<div id="property-map" data-geo="{$data.geo.value.lat};{$data.geo.value.lng}"></div>

И меняем её на:


<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>

<div id="mapid" style="width:100%;height:300px;"></div>

<script>var pobj_lat={$data.geo.value.lat};var pobj_lng={$data.geo.value.lng};</script>

{literal}
<script>
	var mymap = L.map('mapid').setView([pobj_lat, pobj_lng], 16);
	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox.streets'
	}).addTo(mymap);

  	L.marker([pobj_lat, pobj_lng]).addTo(mymap)
		.bindPopup("Описалка объекта");
</script>
{/literal}

 

В принципе, это всё. 

Что скажет по этому поводу гуру геолокаций Абушик Костянтин?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
14 часа назад, doma сказал:

работает на отлично? а на сетке объявлений как работает ? 

ХЗ, надо делать кластеры, еще не занимался. Хорошо бы, если Костя решение предложил

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Гость
Ответить в тему...

×   Вы вставили отформатированное содержимое.   Удалить форматирование

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Похожие публикации

    • Автор: TopRaN
      В sitebill есть кластерная карта которую можно подключить через iframe
      <iframe src="{$estate_folder}/js/ajax.php?action=iframe_map&{$QUERY_STRING}" style="border: 0px;" border="0" width="100%" height="500px"></iframe> Карта просто замечательная.
      но в данной карте цена выводится целиком. Задача разделить саму цену на тысячи и добавить валюту.
      Решение.
      идем по адресу /apps/system/js файл activemap.js .  примерно 256 строка. находим содержимое
      block.find('.ActiveMapListBlock-item-price').text(data.price); и заменяем на 
      block.find('.ActiveMapListBlock-item-price').text(data.price.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ')); сразу после нее добавляем следующее
      block.find('.ActiveMapListBlock-item-currency').text(data.currency_name); теперь карта понимает валюту и делит цену на тысячи. Осталось все это вывести в шаблон
      идем по адресу /apps/system/template файл iframe_map.tpl
      содержимое 
      <a class="ActiveMapListBlock-item-link" target="_blank" href=""> <div class="ActiveMapListBlock-item-image"> <img src="{$estate_folder}/img/no_foto.jpg"> <div class="ActiveMapListBlock-item-id"></div> </div> <div class="ActiveMapListBlock-item-description"> <h3 class="ActiveMapListBlock-item-title"></h3> <div class="ActiveMapListBlock-item-price"></div> <div class="ActiveMapListBlock-item-address"></div> <div class="ActiveMapListBlock-item-text"></div> </div> </a> меняем на это
      <a class="ActiveMapListBlock-item-link" target="_blank" href=""> <div class="ActiveMapListBlock-item-image"> <img src="{$estate_folder}/img/no_foto.jpg"> <div class="ActiveMapListBlock-item-id"></div> </div> <div class="ActiveMapListBlock-item-description"> <h3 class="ActiveMapListBlock-item-title"></h3> <div class="ActiveBlockHalf"> <div class="ActiveMapListBlock-item-price"></div> <div class="ActiveMapListBlock-item-currency"></div> </div> <div class="ActiveMapListBlock-item-address"></div> <div class="ActiveMapListBlock-item-text"></div> </div> </a> далее в конце файла добавляем стили
      .ActiveMapListBlock-item-price, .ActiveMapListBlock-item-currency { float:left; } .ActiveBlockHalf { display:inline-block; font-size: 18px; font-weight: 700; } .ActiveMapListBlock-item-price { padding-right: 5px; } и все результатом будет
       

    • Автор: Илья.Юриков
      Всем привет! Такое дело, когда выбираюсь фильтры, к примеру, 2 комн., то в поиске отображаются только подходящие под это квартиры, а на карте остаются абсолютно все. Как мне это исправить можно? Может, сталкивался кто с таким? На скриншоте видно, что выбрано и что отображаются даже 1 комн.

    • Автор: Realtor
      Работает ли mapviewer на карте Яндекса?
      Если да, то как подключить?
    • Автор: ImobilPalace
      нужно сделать так чтоб наш шаблон был таким как на скринах


    • Автор: ImobilPalace
      Помогите переделать стандартный шаблон Realia ---нужно чтоб выглядело так http://preview.themeforest.net/item/realia-responsive-real-estate-wordpress-theme/full_screen_preview/4789838?ref=kern8&clickthrough_id=1054899612&redirect_back=true только может карту чуть по меньше размером