LeafletBundle/Resources/public/js/leaflet-map.js

window.SONATA_CONFIG.USE_ICHECK = false;

var map,
        defaultCoords,
        drawnItems,
        marker,
        loc,
        dataValue;

$(document).ready(function () {
    defaultCoords = new L.latLng(39.791312, -2.6949709); // España
    map = new L.Map('map', {zoom: getZoomLevel(), center: getDataCoords()});
    drawnItems = L.featureGroup().addTo(map);

    drawMarker();

    L.control.layers(
            {
                'openstreetmap': L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                        {
                            maxZoom: 18,
                            attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                        }).addTo(map),
                "google": L.tileLayer('http://www.google.com.ar/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}',
                        {
                            maxZoom: 18,
                            attribution: 'google'
                        })
            },
            {
                'drawlayer': drawnItems
            },
            {
                position: 'topleft',
                collapsed: false
            }).addTo(map);

    map.on('zoomend', function () {
        setDataValue();
    });
    
});

// Espera que el tab mostrado tenga la clase CSS 'active' y hace un refresh del mapa
// debido a que al estar oculto en un tab no se muestra con el tamaño correcto
var tab_id;
$('.nav-tabs a').on('click', function() {
    tab_id = $(this).attr('href');
    checkForChanges();
});

function checkForChanges()
{
    if ($(tab_id).hasClass('active')) {
        map._onResize();
    } else {
        setTimeout(checkForChanges, 500);
    }
}

function getDataCoords()
{
    var jsonParseData = {};
    if ($('[name$="[extraData]"]').val()) {
        dataValue = $('[name$="[extraData]"]').val();
    }
    if (dataValue) {
        jsonParseData = JSON.parse(dataValue);
    }
    loc = defaultCoords;
    if (jsonParseData.lat && jsonParseData.lng) {
        loc = new L.latLng(jsonParseData.lat, jsonParseData.lng);
    }

    return loc;
}

function drawMarker()
{
    if (marker) {
        drawnItems.removeLayer(marker);
    }
    map.panTo(loc);
    marker = L.marker([loc.lat, loc.lng]);
    drawnItems.addLayer(marker);
}

function getZoomLevel()
{
    var jsonParseData = {};
    var zoomLevel = 18;
    if ($('[name$="[extraData]"]').val()) {
        dataValue = $('[name$="[extraData]"]').val();
    }
    if (dataValue) {
        jsonParseData = JSON.parse(dataValue);
    }
    if (jsonParseData.zoom) {
        zoomLevel = jsonParseData.zoom;
    }

    return zoomLevel;
}