63 lines
3.4 KiB
HTML
Executable File
63 lines
3.4 KiB
HTML
Executable File
{# Скрипт Yandex.Chart для отображения клястеров на карте #}{% load static %}
|
||
{% block Top_JS5 %}<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
|
||
{% if MAP_JS %}<script src="{% static '' %}{{ MAP_JS }}" charset="utf-8" type="text/javascript"></script>{% else %}<script type="text/javascript">
|
||
let points = [{% for count in DATA4GEO %}{% if forloop.last %}[{{ count.LONGITUDE|stringformat:"f" }},{{ count.LATITUDE|stringformat:"f" }}]{% else %}[{{ count.LONGITUDE|stringformat:"f" }},{{ count.LATITUDE|stringformat:"f" }}],{% endif %}{% endfor %}];
|
||
let forURL = [{% for count in DATA4GEO %}{ id: {{ count.ADDR_ID }} }{% if not forloop.last %},{% endif %}{% endfor %}];
|
||
|
||
ymaps.ready(function () {
|
||
let myMap = new ymaps.Map('SeriaMap', {
|
||
center: [55.75, 37.57],
|
||
zoom: 10,
|
||
behaviors: ['default', 'scrollZoom'],
|
||
controls: [ 'rulerControl', 'zoomControl', 'geolocationControl', 'fullscreenControl' ]
|
||
});
|
||
// Создадим кластеризатор, вызвав функцию-конструктор.
|
||
clusterer = new ymaps.Clusterer({
|
||
preset: 'islands#invertedGrayClusterIcons',
|
||
groupByCoordinates: false,
|
||
hasHint: false,
|
||
viewportMargin: 0,
|
||
zoomMargin: 16,
|
||
clusterDisableClickZoom: false,
|
||
gridSize: 80
|
||
});
|
||
geoObjects = [];
|
||
|
||
const linkText = 'Смотреть коммерческие предложения</a>';
|
||
const hintText = '<b>Здание серии {{ THIS_SERIA_NAME }}</b>';
|
||
const apartmentId = {{ first_apart_id|default:0 }};
|
||
const seriaId = {{ THIS_SERIA_ID }};
|
||
const seriaSlug = '{{ THIS_SERIA_NAME_T }}';
|
||
|
||
// Данные передаются в конструктор метки.
|
||
for(var i = 0, len = points.length; i < len; i++) {
|
||
const buildingId = forURL[i].id;
|
||
// Формируем SEO-URL для каждой метки
|
||
const balloonLink = `<a href="/price/seriaID${seriaId}--${seriaSlug}/appartID${apartmentId}/addressID${buildingId}--null">`;
|
||
|
||
geoObjects[i] = new ymaps.Placemark( points[i],
|
||
{ // Содержимое иконки, балуна и хинта.
|
||
balloonContent: balloonLink + linkText,
|
||
hintContent: hintText
|
||
},
|
||
{ preset:'islands#circleIcon',iconColor: 'silver'} );
|
||
geoObjects[i].events
|
||
.add('mouseenter', function (e) {
|
||
e.get('target').options.set('preset', 'islands#yellowCircleIcon');
|
||
})
|
||
.add('mouseleave', function (e) {
|
||
e.get('target').options.set('preset', 'islands#grayCircleIcon');
|
||
});
|
||
}
|
||
// Добавляем метки в кластеризатор.
|
||
clusterer.add(geoObjects);
|
||
myMap.geoObjects.add(clusterer);
|
||
// позиционирование карты так, чтобы на ней были видны все объекты кластера.
|
||
myMap.setBounds(clusterer.getBounds(), { checkZoomRange: true });
|
||
});
|
||
</script>{% endif %}{% endblock %}
|
||
<div id="SeriaMap" style="height:100%;width:100%;">
|
||
<noscript>
|
||
<p>Для отображения картографических данных по серии {{ THIS_SERIA_NAME }} с помощью «Яндекс.Карт» нужно включить поддержку JavaScript.</p>
|
||
</noscript>
|
||
</div> |