Recibí ayuda para crear un control personalizado para el folleto, pero todavía tengo problemas para actualizar a los estilos CSS utilizados por las últimas versiones de Folleto. Básicamente, todo lo que necesito es un ícono en el cuadro blanco, con la sombra a su alrededor.
Esto es lo que he trabajado hasta ahora, eche un vistazo y siéntase libre de bifurcarlo:
Sí, el botón fácil también es una buena idea. Revisé esto recientemente, y creé este módulo RequireJS (AMD) que permite parametrizar la ubicación (no solo en la esquina, sino en una ubicación exacta) y también extrae el contenido HTML del documento HTML, y luego lo extrae del DOM y lo coloca en el control. Puede simplificar esto si lo desea.
Invocar ejecutar algo como esto y creará una nueva instancia:
var zoomIn =newButton(map);
zoomIn.setup('zControl','zoomInCtrl',Config.ZinTop,Config.ZinLeft,"zoomIn");
Parece que Leaflet.EasyButton se mencionó anteriormente, pero aquí hay un código de ejemplo:
var myImage ='<img class="button-image" src="image-for-icon.jpg"/>';
L.easyButton( myImage,function(btn,map){// your stuff to do 'on click' },'title for the button').addTo(map);
Como la respuesta del Dr.YSG pero usando las clases CSS de Leaflet.draw:
fuente
Sí, el botón fácil también es una buena idea. Revisé esto recientemente, y creé este módulo RequireJS (AMD) que permite parametrizar la ubicación (no solo en la esquina, sino en una ubicación exacta) y también extrae el contenido HTML del documento HTML, y luego lo extrae del DOM y lo coloca en el control. Puede simplificar esto si lo desea.
Invocar ejecutar algo como esto y creará una nueva instancia:
...
fuente
Parece que Leaflet.EasyButton se mencionó anteriormente, pero aquí hay un código de ejemplo:
y algunos css:
y un montón de demos si buscas más.
fuente