diff --git a/ground/controllers/PageController.php b/ground/controllers/PageController.php index 5e32c70..43987ae 100644 --- a/ground/controllers/PageController.php +++ b/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)); diff --git a/ground/views/point.php b/ground/views/point.php index bb0ad04..8e8f00d 100644 --- a/ground/views/point.php +++ b/ground/views/point.php @@ -69,6 +69,9 @@ } ?> +
+
+

id): ?> diff --git a/public/ico/infogreen.png b/public/ico/infogreen.png new file mode 100644 index 0000000..e565634 Binary files /dev/null and b/public/ico/infogreen.png differ diff --git a/public/ico/simplepoint.png b/public/ico/simplepoint.png new file mode 100644 index 0000000..a5449b2 Binary files /dev/null and b/public/ico/simplepoint.png differ diff --git a/public/js/mapPoint.js b/public/js/mapPoint.js new file mode 100644 index 0000000..a908ccf --- /dev/null +++ b/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 © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', 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]); +}