metrpro

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

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}

 

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

Share this post


Link to post
Share on other sites
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}

 

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

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

Share this post


Link to post
Share on other sites
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}

 

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

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

Share this post


Link to post
Share on other sites
14 часа назад, doma сказал:

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

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

Share this post


Link to post
Share on other sites

Join the conversation

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

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  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.