Cerrando gráficas creadas en HERE

Hoy les traigo un pequeño truco para luego de dibujar figuras en formas de círculos, rectángulos, polígonos, líneas en here, pueda cerrarlas, o sea, cuando usted dibuja en el mapa y ya no desea seguir y sin querer da un click en otro lugar, el grafico se deforma, pues hoy les enseñare como darle solución a este detalle.

Este pequeño artículo es para aquellos que tienen conocimiento básico para trabajo con here, teniendo lo básico en nuestra página solo nos queda seguir los siguientes paso:

Crear un script y dentro colocar las variables inicializadas en false que nos ayudarán activar o desactivar el evento para dibujar en el mapa, luego registrar el evento y crear la función:

Inciando disparadores:

var activeCirculo = false;

var activeCloseCircle = false;

Iniciando jquery:

$(function(){

Registrando función que estará escuchando el evento para dibujar en el mapa:

mapa.addEventListener('tap', function (evt) {

            if (!activeCirculo) return;

Declarando cordenadas de donde se cargara el grafico

var coords =  mapa.screenToGeo

(

             evt.currentPointer.viewportX,

            evt.currentPointer.viewportY

);

Declarando dimensión del radio

           radio = 600000;

Creando circulo:

circle = new H.map.Circle(coords, radio);

            markerRadius = new H.map.DomMarker({

                lat: shapeToAdd.getStrip().getLatLngAltArray()[45],

                lng: shapeToAdd.getStrip().getLatLngAltArray()[46]

            });

Esta variable nos permite redimensionar nuestro grafico

            markerRadius.draggable = true;

Con esta función agregamos el grafico en el mapa para visualizarlo

            mapa.addObject(markerRadius);

        }, false);

Registrando el evento que permitirá cerrar o dejar de dibujar en el mapa:

mapa.addEventListener('tap',function(e){

if(activeCirculo){

                if(activeCloseCircle) {

                    return;

                }

Declarando función para activar botón en el mapa para cerrar o desactivar que se siga graficando:

    actionCloseCircle ();

            Reseteando la variable que muestra el botón para cerrar gráfico:

                activeCloseCircle = true;

})

function actionCloseCircle(){

        $('#canvas > div').append(

            $('<div>').addClass('closeCircle').append(

                $('<div>').css({

  marginTop:'50%', borderRadius: ‘13px’, width: ‘28px’, height: ‘50px’,

  backgroundColor: ‘#1F262A’, cursor: ‘pointer’, color:’#fcfcfc’,

  fontSize:’18px’, fontWeight: ‘700’, textShadow: ‘1px 1px 10px #333’,

  bottom: ‘330px’, zIndex: ‘1’, position: ‘absolute’, textAlign: ‘center’

}).text('X').attr({

                        title: 'Cerrar grafica'

                }).click(function(){

                    activeCircle= false;

                    activeCloseCircle = false;

                    $('.closeCircle').remove();

                })

            )

        )}

En forma de resumen, luego de dibujarse el gráfico en forma de circulo, en la parte derecha del mapa le saldrá un botón con un signo de X, y mientras este dibujando estará ahí, para cuando termine de colocar o redimensionar el circulo, y desea no seguir de clic en el botón X y automáticamente el botón no se muestra más y al dar clic en otro lado del mapa ya el grafico no se mostrará más. Si desea conocer más sobre el artículo o necesita aclarar algunas dudas, pues solo comente y deje sus datos en nuestro sitio.