wikipoints/public/js/main.js

/* 
 * Let's GO!
 */

ymaps.ready(init);
var myMap;
var categories;
var points = Array();

function init() {
    myMap = new ymaps.Map("map", {
        center: [59.9, 30.3],
        zoom: 9,
        behaviors: ['default', 'scrollZoom']
    });

    myMap.controls.add('mapTools');
    myMap.controls.add('typeSelector');
    myMap.controls.add('smallZoomControl');
    myMap.controls.add('scaleLine');

    initCategories()
    getPoints();

    myMap.events.add('click', function (e) {
        if (!myMap.balloon.isOpen()) {
            if ( $('#addPointButton').hasClass('btn-success') )
            {
                coords = e.get('coordPosition');
                $('#addPointLat').val(coords[0].toPrecision(11));
                $('#addPointLng').val(coords[1].toPrecision(11));
                $('#addPointModal').modal('show');
            }
        }
        else {
            myMap.balloon.close();
        }
    });
}

function getPoints()
{
    $.ajax({
        url: "/json/points/",
        success: function(data){
            for(var k in data) {
                id = data[k]['id'];
                points[id] = new ymaps.Placemark(
                    [data[k]['lat'], data[k]['lng']], {
                        hintContent: data[k]['name'],
                        id: id
                    },{
                        iconImageHref: data[k]['categoryIcon'],
                        iconImageSize: [32, 37],
                        openEmptyBalloon: true,
                        balloonCloseButton: false
                    });

                points[id].events.add('click', function (e) {
                    showInfo(e.get('target').properties.get('id'));
                });
                myMap.geoObjects.add(points[id]);
            }
        }
    });

    return true;
}

function showInfo(id)
{
    if (!(id in points) || points[id].properties.get('balloonContent') == undefined)
    {
        points[id].properties.set('balloonContent', 'Загрузка...');
        $.ajax({
            url: "/json/point/id/" + id,
            success: function(data) {
                description = '<div class="infoCard">' +
                        '<h3>' + data.name + '</h3>' +
                        '<img src="' + data.img + '" />' +
                        data.description +
                        ' <a href="' + data.source + '" target="blank">Подробнее...</a></div>'
                points[id].properties.set('balloonContent', description);
            }
        });
    }
    return true;
}

function initCategories()
{
    $.ajax({
        url: "/json/categories/",
        success: function(data){
                categories = data;
        }
    });

    return true;
}

function searchAdderess()
{
    var myGeocoder = ymaps.geocode($('#addressField').val());
    myGeocoder.then(
        function (res) {
            myMap.setCenter(res.geoObjects.get(0).geometry.getCoordinates(), 13);
        },
        function (err) {}
    );
}

function showMeOnTheMap()
{
    var userLat = 0;
    var userLng = 0;
    navigator.geolocation.getCurrentPosition(function(pos) {
        userLat = pos.coords.latitude;
        userLng = pos.coords.longitude;

        myMap.geoObjects.add(
        new ymaps.Placemark(
            [userLat, userLng],
            {
                balloonContentHeader: ymaps.geolocation.country,
                balloonContent: ymaps.geolocation.city,
                balloonContentFooter: ymaps.geolocation.region
            },
            {
                iconImageHref: '/ico/man.png',
                iconImageSize: [32, 37]
            }
            )
        );
        myMap.setCenter([userLat, userLng]);
    }, function(){
        userLat = ymaps.geolocation.latitude;
        userLng = ymaps.geolocation.longitude;

        myMap.geoObjects.add(
        new ymaps.Placemark(
            [userLat, userLng],
            {
                balloonContentHeader: ymaps.geolocation.country,
                balloonContent: ymaps.geolocation.city,
                balloonContentFooter: ymaps.geolocation.region
            },
            {
                iconImageHref: '/ico/man.png',
                iconImageSize: [32, 37]
            }
            )
        );
        myMap.setCenter([userLat, userLng]);
    });
}

function tryAddPoint()
{
    $('#addPointButton').toggleClass('btn-success').toggleClass('btn-default');
    if ( $('#addPointButton').hasClass('btn-success') )
        myMap.cursors.push('crosshair');
    else
        myMap.cursors.push('arrow');
}

function addPoint()
{
    $('.form-group').removeClass('has-error');
    $.ajax({
        type: "POST",
        url: "/json/addpoint/",
        data: {
            name: $('#addPointName').val(),
            img: $('#addPointImg').val(),
            description: $('#addPointDescription').val(),
            categoryId: $('#addPointCategoryId').val(),
            source: $('#addPointSource').val(),
            lat: $('#addPointLat').val(),
            lng: $('#addPointLng').val()
        },
        success: function(data) {
            id = data;
            points[id] = new ymaps.Placemark(
                    [$('#addPointLat').val(), $('#addPointLng').val()], {
                hintContent: $('#addPointName').val(),
                id: id
            }, {
                iconImageHref: categories[$('#addPointCategoryId').val()].icon,
                iconImageSize: [32, 37],
                openEmptyBalloon: true,
                balloonCloseButton: false
            });

            points[id].events.add('click', function(e) {
                showInfo(e.get('target').properties.get('id'));
            });

            var balloon = myMap.balloon.open([$('#addPointLat').val(), $('#addPointLng').val()], {content: 'Точка успешно добавлена!'}, {closeButton: false});
            setTimeout(function() {
                balloon.close();
            }, 3000);

            setTimeout(function(){
                myMap.geoObjects.add(points[id]);
            }, 3000);

            $('#addPointModal').modal('hide');

            // Clear form
            $('#addPointForm input').val('');
            $('#addPointForm textarea').val('');
            $('.form-group').removeClass('has-error');
            $('#addPointButton').removeClass('btn-success').addClass('btn-default');
            myMap.cursors.push('arrow');
        },
        error: function(data) {
            response = data.responseJSON;
            message = '';
            for (var k in response) {
                if (typeof response[k] !== 'function') {
                    if (k == 1)
                        $('#addPointName').parent().addClass('has-error');
                    else
                    if (k == 2)
                        $('#addPointImg').parent().addClass('has-error');
                    else
                    if (k == 3)
                        $('#addPointDescription').parent().addClass('has-error');
                    else
                        message += response[k] + '; ';
                }
            }

            if (message != '')
                alert(message);
        }
    });
}