LeafletBundle/Resources/views/Leaflet/create_vector.html.twig

{% extends 'SonataAdminBundle:CRUD:base_list.html.twig' %}

{% block actions %}
{% endblock %}

{% block tab_menu %}
{#{{ knp_menu_render(admin.sidemenu(action), {'currentClass' : 'active', 'template': sonata_admin.adminPool.getTemplate('tab_menu_template')}, 'twig') }}#}
{% endblock %}

{% block list_table %}

{% include 'LeafletBundle:Leaflet:resources.html.twig' %}

<script type="text/javascript">
    window.SONATA_CONFIG.USE_ICHECK = false;

    var uuid = {{uuid}};
    var layerId = {{layerId}};
    
    //$( document ).ready(function() {});

    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib }),
            map = new L.Map('map', { center: new L.LatLng(51.509700680916, -0.056858360712795), zoom: 15 }),
            drawnItems = L.featureGroup().addTo(map);
    L.control.layers({
        'osm': osm.addTo(map),
        "google": L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
            attribution: 'google'
        })
    }, { 'drawlayer': drawnItems }, { position: 'topleft', collapsed: false }).addTo(map);
    
    addElements();


    map.addControl(new L.Control.Draw({
        edit: {
            featureGroup: drawnItems,
            poly: {
                allowIntersection: false
            }
        },
        draw: {
            polygon: {
                allowIntersection: false,
                showArea: true
            }
        }
    }));

    map.on(L.Draw.Event.CREATED, function (event) {
        
        var layer = event.layer;
        
        layer.layerType = event.layerType;
        drawnItems.addLayer(layer);
        
        drawnItems.eachLayer(function(layer) {
            if (typeof layer._uuid !== 'undefined') {
                // nada
            } else {
                layer._uuid = uuid + "_" + layer._leaflet_id;
            }
        });
        
    });
    
    map.on(L.Draw.Event.DELETED, function (event) {

        var layers = event.layers;
        var deleteLayers = new Array();
        layers.eachLayer(function(layer) {
            deleteLayers.push(layer._uuid);
        });

        sendData = {'layerId' : layerId, 'vectors' : deleteLayers};
        var json = JSON.stringify(sendData); 

        $.ajax({
            type: "POST",
            url: "{{ url (url_delete) }}",
            data: json,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {}
        });

       
    });

function saveData()  {
    var vectorData = new Array();

    drawnItems.eachLayer(function(layer) {

        if(layer.layerType == "marker") {
            data = [layer._latlng];
        } else if (layer.layerType == "circle") {
            data = [layer._latlng, layer._mRadius];
        } else if (layer.layerType == "polyline") {
            data = [layer._latlngs];
        } else {
            data = [layer._latlngs[0]];
        }

        object = {'_uuid': layer._uuid, 'layerType': layer.layerType, 'data': data, 'layerId': layerId};
        vectorData.push(object);
    });

    console.log(vectorData);
    sendData = {'layerId' : layerId, 'vectors' : vectorData};
    var json = JSON.stringify(sendData); 

    $.ajax({
        type: "POST",
        url: "{{ url (url_post) }}",
        data: json,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            alert(msg.msg);
        }
    });
}

function addElements() {

    console.log({{vectors|length}});
    {% if vectors|length > 0 %}
        {% for vector in vectors %}
            _id = {{vector.getId()}};
            name = "{{vector.getName()}}";
            type = "{{vector.getType()}}"
            _uuid = "{{vector.getUuid()}}"
            data = JSON.parse("{{vector.getData()}}".replace(/&quot;/g,'"'));

            if(type == "marker") {
                object = new L.marker([data[0]['lat'], data[0]['lng']]);
            } else if (type == "circle") {
                object = new L.circle([data[0]['lat'], data[0]['lng']], data[1]);
            } else if (type == "polyline") {
                object = new L.Polyline({{vector.getPolylinePoints()}});
            } else if (type == "rectangle"){
                object = new L.Rectangle({{vector.getPolylinePoints()}});
            } else {
                object = new L.Polygon({{vector.getPolylinePoints()}});
            }

            object._id = _id;
            object.name = name;
            object._uuid = _uuid;
            object.layerType = type;
            object.bindPopup("<b>" + name + "</b><br /><br /> <div style='text-align:center'><a target='_blank'href='{{path('admin_map_vector_edit',{id: vector.getId()})}}'>edit</a></div>");

            drawnItems.addLayer(object);

        {% endfor %}
    {% endif %}
    
}

</script>

{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-10">
            <div class="cms-block cms-block-element">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">Añadir elementos</h3>
                    </div>
                    <div class="box-body">
                        <div id="map" style="margin:0 auto; width: 80%; height: 600px; border: 1px solid #ccc"></div>
                        <br />
                        <button onclick="saveData()" class="btn btn-block btn-primary" type="button">Guardar Elementos</button>
                        <br />
                        <div id="datamaps">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
{% endblock %}


{% block list_filters_actions %}
{% endblock %}

{% block list_filters %}
{% endblock %}