Пилим бесплатную карту на Leaflet

[metrpro 42]

Добрый день! Все знают, что некоторое время назад корпорация добра решила заработать на сайтах, применяющих на своих страницах карты и панорамы 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}

 

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

[doma 22]

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}

 

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

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

[Realtor 47]

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}

 

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

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

[metrpro 42]

14 часа назад, doma сказал:

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

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