How to Create a Map Widget
Dan Macarie avatar
Written by Dan Macarie
Updated over a week ago

All content originates somewhere in the world and when the location context matters, Map provides you with a way to visualize it. Display content clusters on a range of fully customizable, interactive mapping solutions powered by Google Maps, Open Streetmaps, CartoDB, and Mapzen.

Show your audience where content is being posted in real-time. Go one step further and link this Map to a content Widget to provide a geolocation-based content filtering experience - as users drill down into map clusters, show them the content posted from that region.

Note: As you know, location data is sensitive information, and not all networks or users provide this. So, there are a few things to keep in mind when considering a Map widget:

  • The Map widget will only display posts that have location data.

  • Location data is only included in a post when the user has explicitly chosen to tag their location.

  • Learn how to manually set a tile's location from here.

Instructions

  • Go to Engage > Widgets > Create Widget > Map

  • Under the Settings, complete the below:

    • Name: Create a unique name for this Widget.

    • Select Filter: Select your preferred Filter from the drop-down menu. This will determine which content is displayed on the widget.

    • Disable Scroll Zoom: Disable the map zooming function via mouse/trackpad scroll.

    • Map Centre: locate the area that you wish to display. You can use the search bar to locate the area or manually drag your mouse around the map.

    • Display: There are two options; display the Map Only or display a Map + Feed. Note, when displaying a feed make sure that both Filters are the same.

    • Click Preview to view your map.

  • Under the Appearance settings, complete the below:

  • Custom Code Editor will allow you to further style your display using Custom CSS or Javascript

  • Save your changes

  • Click on Embed code to display your map.

    • NOTE: if using Map + Content Widget make sure to select this option in the embed code:

    • Screen_Shot_2019-06-04_at_4.44.06_PM.png

Map Only example below:

Map + Feed example below:

Did this answer your question?