33
Views
2
Comments
Solved
[OutSystems Maps] Label Shape/Circle OutsystemsMaps
outsystems-maps
Reactive icon
Forge asset by OutSystems
Application Type
Reactive
Platform Version
11.31.0 (Build 43948)

Hello, I'm using shapes/circles in Leaflet maps. Is it possible to add a label when hovering over the circle? 

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hi @Francival, 

On a quick look at Leaflet's documentation, I've found the tooltip functionality that allows among other things to fulfill this exact use case.

You can have two scenarios:

  1. Using Shapes\Circle block:

    On the Map's block Initialized event handler add the following JS node:
    let circleShape = OutSystems.Maps.MapAPI.ShapeManager.GetShapeById($parameters.ShapeId);
    
    circleShape.provider.bindTooltip( "This is a circle shape!", {
        permanent: false,  // It will only show when hovering
        direction: "top"
    });
    
    
    // $parameters.ShapeId being the identifier of the Shapes\Circle block 
    		


  2. Using drawn circles (drawing tools):

    On the Map's block Initialize event handler add the following JS node:
    let shapes = OutSystems.Maps.MapAPI.MapManager.GetMapById($parameters.MapId).shapes;
    let circles = shapes.filter(shape => shape._type === "Circle");
    
    // Iterate over the filtered circles and bind a tooltip to each one
    circles.forEach(circleObj => {
            circleObj.provider.bindTooltip( "This is a circle shape from drawing tools!", {
            permanent: false,  // It will only show when hovering
            direction: "top"
        });
    });
    
    
    // $parameters.MapId being the identifier of the Map block  
                    
    Note: you can also use similar logic to apply on the event OnDrawingChange so you get this once you finish drawing the circle



Here's the result:

Hope it helps!

Cheers,
GM

2022-11-12 11-28-30
Gonçalo Martins
Staff

Hello @Francival 

To make this a more efficient and collaborative process, please share an oml with what you've tried so far, and, check on the associated provider documentation if that is a support use case sharing that sample.

Cheers,
GM


2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hi @Francival, 

On a quick look at Leaflet's documentation, I've found the tooltip functionality that allows among other things to fulfill this exact use case.

You can have two scenarios:

  1. Using Shapes\Circle block:

    On the Map's block Initialized event handler add the following JS node:
    let circleShape = OutSystems.Maps.MapAPI.ShapeManager.GetShapeById($parameters.ShapeId);
    
    circleShape.provider.bindTooltip( "This is a circle shape!", {
        permanent: false,  // It will only show when hovering
        direction: "top"
    });
    
    
    // $parameters.ShapeId being the identifier of the Shapes\Circle block 
    		


  2. Using drawn circles (drawing tools):

    On the Map's block Initialize event handler add the following JS node:
    let shapes = OutSystems.Maps.MapAPI.MapManager.GetMapById($parameters.MapId).shapes;
    let circles = shapes.filter(shape => shape._type === "Circle");
    
    // Iterate over the filtered circles and bind a tooltip to each one
    circles.forEach(circleObj => {
            circleObj.provider.bindTooltip( "This is a circle shape from drawing tools!", {
            permanent: false,  // It will only show when hovering
            direction: "top"
        });
    });
    
    
    // $parameters.MapId being the identifier of the Map block  
                    
    Note: you can also use similar logic to apply on the event OnDrawingChange so you get this once you finish drawing the circle



Here's the result:

Hope it helps!

Cheers,
GM

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.