Curso sobre creación y desarrollo de mapas – Parte 16: Agregar plugins en Leaflet

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

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

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

Abrimos nuestro editor (en mi caso Atom) y modificamos algunas lineas.

Modificaciones en el index.html
Modificaciones en el index.html

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

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
Imágenes del plugin
Imágenes del plugin

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

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

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

Entramos a nuestro navegador y refrescamos el sitio.

Mapa con el plugin Leaflet.draw
Mapa con el plugin Leaflet.draw

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

(Visited 500 times, 1 visits today)

Comments

comments


Post Relacionados

Be the first to comment

Leave a Reply

Tu dirección de correo no será publicada.


*