Popup para en los elementos

Controller/LeafletController.php

@@ -22,20 +22,9 @@ class LeafletController extends Controller
             $vectors = $em->getRepository("MapBundle\Entity\Vector")->findByLayer($layer);
         }
 
-        // print_r("<pre>");
-        // foreach($vectors as $k => $v) {
-        //     print_r($v->getData());
-        //     print_r("<br />");
-        //     print_r($v->getJsonDecodeData());
-        //     print_r("<br />");
-        //     print_r("<br />");
-
-        // }
-
-        // die;
-
         $adminPool = $this->get('sonata.admin.pool');
         $url_post = "admin_map_vector_create_ajax";
+        $url_delete = "admin_map_vector_delete_ajax";
 
         return $this->render('LeafletBundle:Leaflet:create_vector.html.twig', array(
             'base_template' => $adminPool->getTemplate('layout'),
@@ -43,6 +32,7 @@ class LeafletController extends Controller
             'admin' => $adminPool->getAdminByClass("MapBundle\Entity\Map"),
             'uuid' => time(),
             'url_post' => $url_post,
+            'url_delete' => $url_delete,
             'vectors' => $vectors,
             'layerId' => $layerId
             ));

Resources/public/plugins/Leaflet.label.js

@@ -0,0 +1,250 @@
+var LeafletLabel = L.Class.extend({
+
+	includes: L.Mixin.Events,
+
+	options: {
+		className: '',
+		clickable: false,
+		direction: 'right',
+		noHide: false,
+		offset: [12, -15], // 6 (width of the label triangle) + 6 (padding)
+		opacity: 1,
+		zoomAnimation: true
+	},
+
+	initialize: function (options, source) {
+		L.setOptions(this, options);
+
+		this._source = source;
+		this._animated = L.Browser.any3d && this.options.zoomAnimation;
+		this._isOpen = false;
+	},
+
+	onAdd: function (map) {
+		this._map = map;
+
+		this._pane = this.options.pane ? map._panes[this.options.pane] :
+			this._source instanceof L.Marker ? map._panes.markerPane : map._panes.popupPane;
+
+		if (!this._container) {
+			this._initLayout();
+		}
+
+		this._pane.appendChild(this._container);
+
+		this._initInteraction();
+
+		this._update();
+
+		this.setOpacity(this.options.opacity);
+
+		map
+			.on('moveend', this._onMoveEnd, this)
+			.on('viewreset', this._onViewReset, this);
+
+		if (this._animated) {
+			map.on('zoomanim', this._zoomAnimation, this);
+		}
+
+		if (L.Browser.touch && !this.options.noHide) {
+			L.DomEvent.on(this._container, 'click', this.close, this);
+			map.on('click', this.close, this);
+		}
+	},
+
+	onRemove: function (map) {
+		this._pane.removeChild(this._container);
+
+		map.off({
+			zoomanim: this._zoomAnimation,
+			moveend: this._onMoveEnd,
+			viewreset: this._onViewReset
+		}, this);
+
+		this._removeInteraction();
+
+		this._map = null;
+	},
+
+	setLatLng: function (latlng) {
+		this._latlng = L.latLng(latlng);
+		if (this._map) {
+			this._updatePosition();
+		}
+		return this;
+	},
+
+	setContent: function (content) {
+		// Backup previous content and store new content
+		this._previousContent = this._content;
+		this._content = content;
+
+		this._updateContent();
+
+		return this;
+	},
+
+	close: function () {
+		var map = this._map;
+
+		if (map) {
+			if (L.Browser.touch && !this.options.noHide) {
+				L.DomEvent.off(this._container, 'click', this.close);
+				map.off('click', this.close, this);
+			}
+
+			map.removeLayer(this);
+		}
+	},
+
+	updateZIndex: function (zIndex) {
+		this._zIndex = zIndex;
+
+		if (this._container && this._zIndex) {
+			this._container.style.zIndex = zIndex;
+		}
+	},
+
+	setOpacity: function (opacity) {
+		this.options.opacity = opacity;
+
+		if (this._container) {
+			L.DomUtil.setOpacity(this._container, opacity);
+		}
+	},
+
+	_initLayout: function () {
+		this._container = L.DomUtil.create('div', 'leaflet-label ' + this.options.className + ' leaflet-zoom-animated');
+		this.updateZIndex(this._zIndex);
+	},
+
+	_update: function () {
+		if (!this._map) { return; }
+
+		this._container.style.visibility = 'hidden';
+
+		this._updateContent();
+		this._updatePosition();
+
+		this._container.style.visibility = '';
+	},
+
+	_updateContent: function () {
+		if (!this._content || !this._map || this._prevContent === this._content) {
+			return;
+		}
+
+		if (typeof this._content === 'string') {
+			this._container.innerHTML = this._content;
+
+			this._prevContent = this._content;
+
+			this._labelWidth = this._container.offsetWidth;
+		}
+	},
+
+	_updatePosition: function () {
+		var pos = this._map.latLngToLayerPoint(this._latlng);
+
+		this._setPosition(pos);
+	},
+
+	_setPosition: function (pos) {
+		var map = this._map,
+			container = this._container,
+			centerPoint = map.latLngToContainerPoint(map.getCenter()),
+			labelPoint = map.layerPointToContainerPoint(pos),
+			direction = this.options.direction,
+			labelWidth = this._labelWidth,
+			offset = L.point(this.options.offset);
+
+		// position to the right (right or auto & needs to)
+		if (direction === 'right' || direction === 'auto' && labelPoint.x < centerPoint.x) {
+			L.DomUtil.addClass(container, 'leaflet-label-right');
+			L.DomUtil.removeClass(container, 'leaflet-label-left');
+
+			pos = pos.add(offset);
+		} else { // position to the left
+			L.DomUtil.addClass(container, 'leaflet-label-left');
+			L.DomUtil.removeClass(container, 'leaflet-label-right');
+
+			pos = pos.add(L.point(-offset.x - labelWidth, offset.y));
+		}
+
+		L.DomUtil.setPosition(container, pos);
+	},
+
+	_zoomAnimation: function (opt) {
+		var pos = this._map._latLngToNewLayerPoint(this._latlng, opt.zoom, opt.center).round();
+
+		this._setPosition(pos);
+	},
+
+	_onMoveEnd: function () {
+		if (!this._animated || this.options.direction === 'auto') {
+			this._updatePosition();
+		}
+	},
+
+	_onViewReset: function (e) {
+		/* if map resets hard, we must update the label */
+		if (e && e.hard) {
+			this._update();
+		}
+	},
+
+	_initInteraction: function () {
+		if (!this.options.clickable) { return; }
+
+		var container = this._container,
+			events = ['dblclick', 'mousedown', 'mouseover', 'mouseout', 'contextmenu'];
+
+		L.DomUtil.addClass(container, 'leaflet-clickable');
+		L.DomEvent.on(container, 'click', this._onMouseClick, this);
+
+		for (var i = 0; i < events.length; i++) {
+			L.DomEvent.on(container, events[i], this._fireMouseEvent, this);
+		}
+	},
+
+	_removeInteraction: function () {
+		if (!this.options.clickable) { return; }
+
+		var container = this._container,
+			events = ['dblclick', 'mousedown', 'mouseover', 'mouseout', 'contextmenu'];
+
+		L.DomUtil.removeClass(container, 'leaflet-clickable');
+		L.DomEvent.off(container, 'click', this._onMouseClick, this);
+
+		for (var i = 0; i < events.length; i++) {
+			L.DomEvent.off(container, events[i], this._fireMouseEvent, this);
+		}
+	},
+
+	_onMouseClick: function (e) {
+		if (this.hasEventListeners(e.type)) {
+			L.DomEvent.stopPropagation(e);
+		}
+
+		this.fire(e.type, {
+			originalEvent: e
+		});
+	},
+
+	_fireMouseEvent: function (e) {
+		this.fire(e.type, {
+			originalEvent: e
+		});
+
+		// TODO proper custom event propagation
+		// this line will always be called if marker is in a FeatureGroup
+		if (e.type === 'contextmenu' && this.hasEventListeners(e.type)) {
+			L.DomEvent.preventDefault(e);
+		}
+		if (e.type !== 'mousedown') {
+			L.DomEvent.stopPropagation(e);
+		} else {
+			L.DomEvent.preventDefault(e);
+		}
+	}
+});

Resources/views/Leaflet/create_vector.html.twig

@@ -22,7 +22,7 @@
     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.505, -0.04), zoom: 13 }),
+            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),
@@ -69,8 +69,21 @@
     map.on(L.Draw.Event.DELETED, function (event) {
 
         var layers = event.layers;
+        var deleteLayers = new Array();
         layers.eachLayer(function(layer) {
-            console.log("DELETE: " + layer._uuid + "=>" + layer._leaflet_id);
+            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) {}
         });
 
        
@@ -107,7 +120,6 @@ function saveData()  {
         dataType: "json",
         success: function(msg) {
             alert(msg.msg);
-            //console.log(msg);
         }
     });
 }
@@ -117,6 +129,7 @@ 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()}}"
@@ -134,10 +147,11 @@ function addElements() {
                 object = new L.Polygon({{vector.getPolylinePoints()}});
             }
 
+            object._id = _id;
             object.name = name;
             object._uuid = _uuid;
             object.layerType = type;
-            object.bindPopup("<b>" + name + "</b><br>");
+            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);
 
@@ -156,12 +170,12 @@ function addElements() {
             <div class="cms-block cms-block-element">
                 <div class="box">
                     <div class="box-header">
-                        <h3 class="box-title">Create Vector</h3>
+                        <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 vectores</button>
+                        <button onclick="saveData()" class="btn btn-block btn-primary" type="button">Guardar Elementos</button>
                         <br />
                         <div id="datamaps">
                         </div>
@@ -170,6 +184,7 @@ function addElements() {
             </div>
         </div>
     </div>
+    
 {% endblock %}
 
 

Resources/views/Leaflet/link_create_vector.html.twig

@@ -0,0 +1,4 @@
+<a target="_blank" href="{{path('admin_leaflet_vector_create',{layerId: object.getId()})}}" class="btn btn-sm btn-default view_link">
+<i class="fa fa-map" aria-hidden="true"></i>
+Map
+</a>

Resources/views/Leaflet/resources.html.twig

@@ -29,4 +29,5 @@
 <script type="text/javascript" src="{{ asset('bundles/leaflet/edit/handler/Edit.SimpleShape.js') }}" ></script>
 <script type="text/javascript" src="{{ asset('bundles/leaflet/edit/handler/Edit.Circle.js') }}" ></script>
 <script type="text/javascript" src="{{ asset('bundles/leaflet/edit/handler/Edit.Rectangle.js') }}" ></script>
-<script type="text/javascript" src="{{ asset('bundles/leaflet/edit/handler/Edit.Marker.js') }}" ></script>
+<script type="text/javascript" src="{{ asset('bundles/leaflet/edit/handler/Edit.Marker.js') }}" ></script>
+{#<script type="text/javascript" src="{{ asset('bundles/leaflet/plugins/Leaflet.label.js') }}" ></script>#}