I have x2 Collections: one called ‘Developments’ and one ‘Houses’. There are a number of houses within each Development, and they are linked via referencing. For each development, there’s a plan as shown. I need to be able to plot the individual houses on to the plan in their correct location, then give the client the option to set each house’s status via the CMS (as per the key: Reserved, sold etc.) I’d imagine plotting coloured numbers on to the map to correspond to the house plot number, which change colour when selected in the CMS.
The issue I’m having is that I just can’t find a way to overlay all the houses on to the plan!
Hi @ConnectCreativeDes, I built a section like this by using the Embed element. You can add a Top & Left value field on the CMS and use them as inline styles on a div.
Hi @dennyhartanto . Many thanks for the reply, this looks very interesting!
To help me understand it better, do you have a share link you could post please, so I can see exactly how it is achieved? You mentioned it was an embed - is this a third-party solution you’d embedded?
The Developments are a Collection.
The Houses are also a Collection.
I’m using the multi ref field in the Developments collection to reference the houses. The houses also have a ref field to reference their Development, but I’m not using it.
Now for the trick. I’m adding CSS on the fly, to target the house pin.
The house pin is placed in %age of the map on x and Y (cms values)
In order to have different values applied to each house, I need specificity. So I am using custom code to create a div class.slug, and css code that is targetting each .pin-area class object that has the .slug element inside of it.
Man, you’re injecting the coordinates as INLINE style… that’s good, I never thought about this, always tried by adding CSSn which, you figure, ends up only using the declaration for the last item, of course. So my current solutions still uses a css rule but I’m giving a specific thing to each item before. (see above)
Hi @vincent , thank you so much for taking the time to create and share this - much appreciated! I’ll take a look and see how I get on.
I did take a quick look and currently unable to nest my Houses Collection into my Developments Collection (WF states 'Collection Lists connected to CMS collections cannot be moved inside other Collection Lists." I need to read up on nested Collections first!
I checked your project, you’re using JS, so, that’s straight forward
i’ve always tried to find nocode solutions for those challenges.
If I do what you’ve just said, in a CMS list, then all the items have the same values, because the CSS rule always target the same elements, all of them, so the last one to be set is set on all.
hence my trick with defining a unique element using a class made from the item slug, then using this as an anchor for a rule that will target the parent, with :has. This way all the css declarations are unique to their items.
Hi @vincent apologies for the daft question, but can you confirm how I clone this please? I can click the link to view in Webflow to understand how it was created, but I can’t see where to clone.
I’m so close to making this work! But, it appears my houses are stacked on top of each other and ignoring the coordinates. Here’s my test page and my share link is Webflow - Copy of Rouse Homes It’s the page titled ‘Test’.
I’ve doubled-checked everything but assume I’ve missed something. Do you have any idea please?
Hi @vincent . I found that if I had a number at the start of my CMS Collection item, it doesn’t work. For example, ‘19 Adel’ wouldn’t work, but ‘Adel’ would. Not a problem, thankfully I didn’t need a naming convention like that anyway.
My bigger issue was getting it to work with Finsweet as some developments have over 20 houses. That was confusing (at least to my old brain, anyway). I paid a dev to sort it and its working great now!
Many thanks for your help though, much appreciated!
