Visitas: 1
En esta décima sexta parte vamos a mostrar como agregar un plugin a Leaflet. Este post realizo a petición de BigToño.
El plugin que vamos a usar es Leaflet.draw
Entramos al sitio y descargamos dos archivos:
![Descargar archivos necesarios para Leaflet.draw Descargar archivos necesarios para Leaflet.draw](http://proyectosbeta.net/wp-content/uploads/2016/09/Descargar-archivos-necesarios-para-Leaflet.draw_.png)
También es necesario descargar las tres imágenes. Para descargar cada imagen debemos de elegir la imagen y luego presionar el botón Download.
![Descargar imágenes necesarios para Leaflet.draw Descargar imágenes necesarios para Leaflet.draw](http://proyectosbeta.net/wp-content/uploads/2016/09/Descargar-imágenes-necesarios-para-Leaflet.draw_.png.png)
En la primera parte realizamos un mapa simple, ahora copiamos ese código y nombramos la carpeta por ejemplo_agregar_plugin_leaflet
![Ejemplo agregar plugin en Leaftlet Ejemplo agregar plugin en Leaftlet](http://proyectosbeta.net/wp-content/uploads/2016/09/Ejemplo-agregar-plugin-en-leaftlet.png)
Abrimos nuestro editor (en mi caso Atom) y modificamos algunas lineas.
![Modificaciones en el index.html Modificaciones en el index.html](http://proyectosbeta.net/wp-content/uploads/2016/09/Modificaciones-en-el-index.html-1.png)
Si se fijan modificamos el título y lo que está en el body. Ahora entramos a nuestro navegador favorito y tecleamos en la barra de direcciones: http://localhost/curso_mapas/ejemplo_agregar_plugin_leaflet/
![Mapa inicial Mapa inicial](http://proyectosbeta.net/wp-content/uploads/2016/09/Mapa-inicial.png)
Tenemos el mapa inicial!!!
Ahora los archivos que descargamos anteriormente deberíamos de colocar en una carpeta llamada plugins. Algo similar lo que se muestra en la imagen de abajo.
![Archivos del plugin Archivos del plugin](http://proyectosbeta.net/wp-content/uploads/2016/09/Archivos-del-plugin.png)
![Imágenes del plugin Imágenes del plugin](http://proyectosbeta.net/wp-content/uploads/2016/09/Imágenes-del-plugin.png)
Pueden observar que se creo una carpeta llamada plugins, y dentro una carpeta Leaflet.draw donde se encuentran los archivos css, js e imágenes.
![Archivos css, js e imágenes del plugin Leaftlet.draw Archivos css, js e imágenes del plugin Leaftlet.draw](http://proyectosbeta.net/wp-content/uploads/2016/09/Archivos-css-js-e-imágenes-del-plugin-Leaftlet.draw_.png)
Volvemos a entrar al editor Atom y nos dirigimos al archivo index.html para agregar el plugin.
Agregamos el css y el js.
![Se agregan los archivos css y js al index.html.png Se agregan los archivos css y js al index.html.png](http://proyectosbeta.net/wp-content/uploads/2016/09/Se-agregan-los-archivos-css-y-js-al-index.html.png.png)
Volvemos a entrar al editor Atom y nos dirigimos al archivo MapaOSM.js
// Agregamos para la edicion.
var drawnItems = new L.FeatureGroup();
mapa.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
mapa.addControl(drawControl);
![Usamos el plugin Leaflet.draw Usamos el plugin Leaflet.draw](http://proyectosbeta.net/wp-content/uploads/2016/09/Usamos-el-plugin-Leaflet.draw_.png)
Entramos a nuestro navegador y refrescamos el sitio.
![Mapa con el plugin Leaflet.draw Mapa con el plugin Leaflet.draw](http://proyectosbeta.net/wp-content/uploads/2016/09/Mapa-con-el-plugin-Leaflet.draw_.png)
Obs:
- Pueden observar que sale una barra de herramientas que trae el plugin Leaflet.draw
- Ahora pueden agregar cualquier plugin para Leaflet solo que deben de agregar en una carpeta y luego agregar sus archivos correspondientes en el index.hml
Si tienen dudas o comentarios, háganlo.
Curso de mapas
Demo: Ejemplo agregar plugin Leaflet
Código fuente: ejemplo_agregar_plugin_leaflet
Hola excelemte blog, como se podria guardar el vector que se crea en una base de datos?
Muchas gracias
Saludos
Hola. No entiendo tu pregunta. O vos te referís como guardar un vector en la base de datos?
Como puedo agregarle datos a un poligono generado con draw?
Eduardo:
Como estas?
Te referís con propiedades al polígono creado?
Saludos, jose