Interactive map in Webflow

Hello,

Is it possible to make an interactive map such as this https://www.charitywater.org/projects in webflow?

Are there ways to do this with an embed?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

3 Likes

Hello @John_Merritt

Looks easy. You just need a map image (svg) set to position relative and some map pins set to position absolute. The map pins will have a tooltip on hover.

Piter :webflow_heart:

1 Like

If the screen size increases then the dimensions of the image will increase therefore the pixel position of the pin would move. How do I set dimensions so that nothing moves out of position even if the image becomes larger or smaller. Thanks

Use relative units. Percentages on the positioning will help.

1 Like

@Dids I’ve used custom code for this in the past. Essentially on page resize you have to recalculate the position of the markers:

  function mapMarkers() {
    var container_width = $("#map-container").outerWidth(),
        map_width = $("img", "#map-container").width(),
        offset = (container_width - map_width) / 2,
        anim_delay = 100,
        x_offset,
        y_offset;
    // console.log(container_width);
    // console.log(map_width);
    // console.log(offset);
    $(".map-marker__container", "#map-container").each(function () {
      var current_marker = $(this);
      var x_offset = Number($(this).attr("data-x")),
          y_offset = Number($(this).attr("data-y")),
          x_offset_lg = Number($(this).attr("data-x-lg")),
          y_offset_lg = Number($(this).attr("data-y-lg"));
      if($(".w-container").css("max-width") == '1170px')  {
      	$(this).css({"top": y_offset, "left": x_offset + offset});
      } else if ($(".w-container").css("max-width") == '940px') {
      	$(this).css({"top": y_offset_lg, "left": x_offset_lg + offset});
      }
      setTimeout(function() {
        current_marker.addClass('map-marker--animated');
      }, anim_delay);
      anim_delay += 100;
    });
  };

  $(window).resize(function() {
    mapMarkers();
  });

  $(function() {
    mapMarkers();
  }); 

Each marker needs four data attributes, data-x, data-y, data-x-lg, data-y-lg which adjust the position at different screen sizes. To set these I guessed and then went into the chrome inspector and moved them manually using the arrow keys to position them accurately.

This isn’t tailored to your map, but should point you in the right direction.

1 Like

You’re a g! I just tried that, tested and it works. Thanks

1 Like

What’s the advantage of this over simply using relative units and absolutely positioned elements?

1 Like

This also works but @dram hit the nail on the head - I set the image with pixels and set the pin absolute with pixels and it doesn’t move bcus why should it? With percentages I think it will move based on the parent units but pixels is the best way for me. Thanks guys

Theres no advantage in my opinion. Both will get you to the finish line but we would have got through a few pints by the time @sam-g gets the same results. But also nice to see different ways of doing the same thing.

Yea, I’m not sure there is a huge advantage to doing it my way. I first used that script 5+ years ago, and I honestly don’t remember what the use case for it was at the time. However, it’s possible that in a layout that wasn’t totally fluid it was necessary.

Probably easier to go @dram’s route and save the pints for later.