ADD карта на странице точки - начало

ground/controllers/PageController.php

@@ -50,14 +50,21 @@ class PageController extends Controller
 			self::addScript('/js/jquery-2.1.0.min.js');
 			self::addScript('/js/jquery-ui-1.10.4.custom.min.js');
 			self::addScript('/js/bootstrap.min.js');
+			self::addScript('http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js');
+			self::addScript('http://api-maps.yandex.ru/2.0/?load=package.map&lang=ru-RU');
+			self::addScript('/js/leaflet.markercluster.js');
 
 			self::addScript('/js/app.js?ver=' . App::getConfig('version'));
+			self::addScript('/js/mapPoint.js?ver=' . App::getConfig('version'));
 			self::addScript('/js/fotorama.js');
 
 			self::addStyle('/css/style.css?ver=' . App::getConfig('version'));
 			self::addStyle('/css/bootstrap.min.css');
 			self::addStyle('/css/bootstrap-theme.min.css');
 			self::addStyle('/css/fotorama.css');
+			self::addStyle('http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css');
+			self::addStyle('/css/MarkerCluster.css');
+			self::addStyle('/css/MarkerCluster.Default.css');
 
 			if (App::$user && App::$user->id) {
 				self::addVar('user', App::$user->id);
@@ -75,6 +82,9 @@ class PageController extends Controller
 			$point->descriptionHtml = nl2br($point->description);
 			$point->name = htmlspecialchars($point->name);
 			App::setConfig('title', $point->name. ' - wikipoints.ru');
+			self::addVar('pointLat', $point->lat);
+			self::addVar('pointLng', $point->lng);
+			self::addVar('pointId', $point->id);
 
 			$categories = Category::model()->getAll(array('order' => 'ord ASC', 'asArray' => true));
 

ground/views/point.php

@@ -69,6 +69,9 @@
 			}
 			?>
 			</div>
+			<div style="text-align: center;">
+				<div id="map" style="width: 555px; height: 400px; position: relative; display: inline-block;"></div>
+			</div>
 
 			<p style="margin-top: 25px; text-align: right;">
 				<?php if (App::$user && App::$user->id): ?>

public/js/mapPoint.js

@@ -0,0 +1,109 @@
+/* 
+ * Let's GO!
+ */
+
+var myMap;
+var categories = Array();
+var points = Array();
+var markers; // Используется для кластеризации
+var layer;
+var layers = Array();
+var defaultZoom = 13;
+
+categories.simplepoint = L.icon({
+	iconUrl: '/ico/simplepoint.png',
+	iconSize: [13, 13],
+	iconAnchor: [7, 7],
+	popupAnchor: [7, 7]
+});
+
+categories.targetpoint = L.icon({
+	iconUrl: '/ico/infogreen.png',
+	iconSize: [32, 37],
+	iconAnchor: [16, 37],
+	popupAnchor: [0, 1]
+});
+
+
+// -----------------------------------------------------------------------------
+
+/**
+ * Инициализируем яндекс-карты и узнаём расположение пользователя.
+ */
+ymaps.ready(function () {
+	lat = ymaps.geolocation.latitude;
+	lng = ymaps.geolocation.longitude;
+
+	init(pointLat, pointLng);
+});
+
+/**
+ * Инициализируем переменные и подгружаем данные.
+ * @returns true
+ */
+function init(lat, lng) {
+	myMap = L.map('map', {zoomControl: false}).setView([lat, lng], defaultZoom);
+	markers = new L.MarkerClusterGroup({showCoverageOnHover: false, maxClusterRadius: 45});
+
+	layers['quest'] = L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', maxZoom: 18});
+
+	setLayer('quest');
+
+	initPoints()
+
+	myMap.on('click', function (e) {
+		if (!myMap._popup) {
+			closePopup();
+		}
+	});
+
+	return true;
+}
+
+/**
+ * Создаёт точку для карты - Placemark.
+ * @param {Array} data
+ * @returns {Array}
+ */
+function constructPoint(data)
+{
+	id = data['id'];
+
+	icon = (id == pointId)?categories.targetpoint:categories.simplepoint;
+
+	points[id] = L.marker(
+			[data['lat'], data['lng']], {icon: icon, title: data['name'], id: id, categoryId: data['categoryId']}
+	).on('click', function (e) {
+		window.location.href = "/page/point/id/"+e.target.options.id;
+	});
+
+	return points[id];
+}
+
+/**
+ * Загружает точки с сервера.
+ * @returns {Boolean}
+ */
+function initPoints()
+{
+	$.ajax({
+		url: "/json/points/",
+		success: function (data) {
+			for (var k in data) {
+				markers.addLayer(constructPoint(data[k]));
+			}
+			myMap.addLayer(markers);
+		}
+	});
+
+	return true;
+}
+
+function setLayer(name)
+{
+	if (layer)
+		myMap.removeLayer(layers[layer])
+
+	layer = name;
+	myMap.addLayer(layers[layer]);
+}