How do I plot CMS 'Houses' on to a plan?

This has me completely stumped!

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!


Here is my site Read-Only: [LINK](Webflow - Rouse Homes)
(how to share your site Read-Only link)

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.

If you want to reference: Malaysia SDG Cities by URBANICE Malaysia you can scroll to the section under Initiatives.

The cities are all plotted by numerical values input in the CMS so the client can edit as they need to

1 Like

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?

Just made a cloneable for you.

https://preview.webflow.com/preview/place-cms-items-on-a-map-plan?utm_medium=preview_link&utm_source=designer&utm_content=place-cms-items-on-a-map-plan&preview=ccb8b7d8b54587884bc1bafa5795e15b&workflow=preview

It’s simple but it has specificities.

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.

I figured that out a few weeks ago and you gave me an occasion to practice and make a shareable.

1 Like

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)

1 Like

@ConnectCreativeDes looks like @vincent has provided the comprehensive answer and a cloneable!

1 Like

I’d like to know how you inject those inline styles on that element though…

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!

Oh @vincent I just checked my project file again and realise the inline isn’t on Webflow!

But I now that I started thinking, this is how I would do it inline:

  1. Set the Collection item to width & height 100%, pointer-events: none, position: relative.
  2. Then have an embed with something like this <div style="pointer-events: auto; left: {{Left Coordinate}}; top: {{Top Coordinate}}"></div>

Pointer events is there to make sure not only the top most item is interactable.

I checked your project, you’re using JS, so, that’s straight forward :slight_smile:

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, here is an example. the setup needed some tweaking but roughly the same idea.

<div style="width: 20px; height:20px; background:black; pointer-events: auto; position: absolute; left: {{X coordinates}}%; top: {{Y coordinates}}%"></div>

https://prototype-density.webflow.io/maps-test