Clickable Floor Plan,

Clickable Floor Plan,

  

Hi, 

I am trying to import this into my Outsystems Mobile App, the Idea is to make the contents of the this plan clickable, I dont know if its possible with outsystems, can anyone please help?? Please see the attached picture.


Regards,

Tuwani

Well, I guess you could do something with the HTML map/area tags?

Kilian Hekhuis wrote:

Well, I guess you could do something with the HTML map/area tags?

I'll try that, Thanks Kilian.

Hi,

You can find on the internet several sites that help you generate the appropriate map/area tags.

One I used before and works ok is https://www.image-maps.com/

Regards,

Daniel

Take a look at the Floor Plan component in the forge, it's for web but you can easily get the clickable map working in a mobile app by getting the javascript that loads it into your app (I was able to get a working version of it for a project I was working on).


https://www.outsystems.com/forge/component/693/floor-plan

Daniël Kuhlmann wrote:

Hi,

You can find on the internet several sites that help you generate the appropriate map/area tags.

One I used before and works ok is https://www.image-maps.com/

Regards,

Daniel


Hi Daniel, 

How does the this site work, because right now I am only able to upload my map and I cant edit it. Can you please explain how it works?

João Almeida wrote:

Take a look at the Floor Plan component in the forge, it's for web but you can easily get the clickable map working in a mobile app by getting the javascript that loads it into your app (I was able to get a working version of it for a project I was working on).


https://www.outsystems.com/forge/component/693/floor-plan


Thanks Joao, I'll give it a try, will javascript gonna be extension code?

Hi Tuwani,

Extensions are server-side libraries written in .NET or Java. Mobile Apps don't use them. Search the documentation on how to use JavaScript on Mobile, there's plenty of information available.

Not planning on releasing anything to the Forge, at some point at a project there was the possibility of having a clickable plan for mobile, we did small PoC but that idea was abandoned so it was very rough on the edges.

But the floor plan is only javascript, you just have to load the same libraries, build a similar layout and execute the mapster javascript to load the map:

$(function() {
    $('#wt25_RichWidgets_wt7_block_wtMainContent_wtMainContent_wt13_wtFloor').mapster({
        mapKey: 'nameid',
        selected: true,
        staticState: true,
        fill: true,
        fillColor: '299a0b',
        fillOpacity: 0.3,
        stroke: true,
        strokeColor: '299a0b',
        strokeOpacity: 0.8,
        strokeWidth: 2,
        showToolTip:true,
        singleSelect: true,areas: [],
        onClick: function (e) {
            $('.floor-plan-key').val(e.key);
            $('.floor-plan-notify').click();
        }
    });
});

Take a look at the FloorPlanSampleData web app in the Floorplan component to see how the map is being loaded.


Thanks very much Guys, really appreciated.