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 %}

<div id="popups" style="display:none">
    {% for vector in vectorsPopup %}
    <div id="desc_vector_{{vector.getId()}}">{{vector.getDescription()|raw}}</div>
    {% endfor %}
</div>

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

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

    var uuid = {{uuid}};
    var layerId = {{layerId}};

    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({{map['lat']}}, {{map['lng']}}), zoom: {{map['zoom']}} }),
            drawnItems = L.featureGroup().addTo(map);

    var controlLayers = 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'
        })
    }, { '{{layerName}}': drawnItems }, { position: 'topleft', collapsed: true }).addTo(map);

    addElements(drawnItems);

    addLayersMap();

    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;
            }
        });
        saveData();

    });

    map.on('draw:edited', function (e) {
        saveData();
    });

    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);

        saveData();


    });

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: "{{ path('admin_map_vector_create_ajax') }}",
        data: json,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        error: function(msg) {
            console.log(msg.msg);
        }
    });
}

function addElements(layer) {

    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") {
                style = JSON.parse('{{vector.getInlineStyle()}}'.replace(/&quot;/g,'"'));
                if (typeof style.icon !== 'undefined') {
                    icon = style.icon;
                } else {
                    icon = "miniBubbleBlueIcon";
                }
                object = new L.marker([data[0]['lat'], data[0]['lng']],{icon: eval(icon)});
            } else if (type == "circle") {
                object = new L.circle([data[0]['lat'], data[0]['lng']], data[1],{{vector.getInlineStyle()|raw}});
            } else if (type == "polyline") {
                object = new L.Polyline({{vector.getPolylinePoints()}},{{vector.getInlineStyle()|raw}});
            } else if (type == "rectangle"){
                object = new L.Rectangle({{vector.getPolylinePoints()}},{{vector.getInlineStyle()|raw}});
            } else {
                object = new L.Polygon({{vector.getPolylinePoints()}},{{vector.getInlineStyle()|raw}});
            }

            object._id = _id;
            object.name = name;
            object._uuid = _uuid;
            object.layerType = type;
            desc = $("#desc_vector_{{vector.getId()}}").html();
            object.bindPopup("<b>" + name + "</b> <br />" + desc + " <div style='text-align:center;margin-top:5px'><a target='_blank'href='{{path('admin_map_vector_edit',{id: vector.getId()})}}'>EDIT</a></div>");

            layer.addLayer(object);

        {% endfor %}
    {% endif %}

}

function addLayersMap() {

    {% if layers|length > 0 %}
        {% for layer in layers %}
            {% set vectors = layer['vectors'] %}
            {% set layerName = layer['name'] %}
            {% if vectors|length > 0 %}

                newLayer = L.featureGroup();

                {% 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") {
                        style = JSON.parse('{{vector.getInlineStyle()}}'.replace(/&quot;/g,'"'));
                        if (typeof style.icon !== 'undefined') {
                            icon = style.icon;
                        } else {
                            icon = "miniBubbleBlueIcon";
                        }
                        object = new L.marker([data[0]['lat'], data[0]['lng']],{icon: eval(icon)});
                    } else if (type == "circle") {
                        object = new L.circle([data[0]['lat'], data[0]['lng']], data[1],{{vector.getInlineStyle()|raw}});
                    } else if (type == "polyline") {
                        object = new L.Polyline({{vector.getPolylinePoints()}},{{vector.getInlineStyle()|raw}});
                    } else if (type == "rectangle"){
                        object = new L.Rectangle({{vector.getPolylinePoints()}},{{vector.getInlineStyle()|raw}});
                    } else {
                        object = new L.Polygon({{vector.getPolylinePoints()}},{{vector.getInlineStyle()|raw}});
                    }

                    object._id = _id;
                    object.name = name;
                    object._uuid = _uuid;
                    object.layerType = type;
                    desc = $("#desc_vector_{{vector.getId()}}").html();
                    object.bindPopup("<b>" + name + "</b> <br />" + desc + " <div style='text-align:center;margin-top:5px'><a target='_blank'href='{{path('admin_map_vector_edit',{id: vector.getId()})}}'>EDIT</a></div>");

                    newLayer.addLayer(object);

                {% endfor %}

                controlLayers.addOverlay(newLayer, "{{layerName}}");

            {% endif %}

        {% endfor %}
    {% endif %}
}

</script>

{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="cms-block cms-block-element">
                <div class="box">
                    <div class="box-body">
                        <div id="map" style="margin:0 auto; width: 100%; height: calc(100vh - 210px); border: 1px solid #ccc"></div>
                        <div id="datamaps">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}


{% block list_filters_actions %}
{% endblock %}

{% block list_filters %}
{% endblock %}