Map widget provides a visualisation of where content is happening.
In this tutorial, we will show you how to create a Map Widget and overlay it on top of your existing Google Map.
Creating your first Map widget
Once the Maps plugin is installed, you will see a new widget type in the widget creation page.
Simply choose Map and click Create Widget
And don't forget to name your widget.
Connecting to a content widget
By default, Map is simply a map that shows where the content is created. However, you can connect the Map widget with one of our content widgets, e.g. a Waterfall widget. To do so, change the display type from [Map only] to [Map + Feed] then select a content widget to connect with.
Once the widgets are connected, the content widget gets notified when a user clicks on the pin on the Map widget.
Previewing the connected widgets
To view the connected widgets, save your current settings first then go to the Embed Code tab. If you chose to use an existing widget as content widget, you might have already got the widget embed code running in your page. If that's the case, simply choose [Map Only] and copy and paste the embed code to your page. If the content isn't in your page yet, then choose [Map + Content Widget] and copy and paste the embed code to your page.
Changing the look and feel
Choosing a different layer provider
The Map widget uses Leaflet as map rendering service and currently supports various map layer providers. The current out-of-box providers and Open Street Maps, Carto DB, Mapzen and Google Maps.
For example, instead of using the default layer, you can use the Dark Matter theme from CartoDB.
Fine tuning look and feel
After a provider is selected, you can change the look and feel such as pin colour or map color. Different map providers might have slightly different options.
Previewing the modified map
The map layer has changed to CartoDB Dark Matters and the pin colour is also changed.
Overlaying the map on your existing Google Map
If you have already got a Google Map running on your site, you can also make the map feature overlay on top of your existing Google Map.
Below is the sample code to
<!DOCTYPEhtml><html><head> <metacharset="utf-8"> <metaname="viewport"content="width=device-width"> <title>JS Bin</title></head><body><!-- Google Map element --><divid="map"style="height: 500px"></div><!-- Change the inline style to hide the map widget --><divclass="stackla-widget"data-id="10811"data-hash="579ab61508113"data-ct="" data-alias="georgezhao.stackla.com" data-ttl="30" style="width: 100%; overflow: hidden; height: 500px; display: none;"></div>
<script type="text/javascript"> (function (d, id) { if (d.getElementById(id)) return; var t = d.createElement('script'); t.type = 'text/javascript'; t.src = '//assetscdn.stackla.com/media/js/widget/fluid-embed.js'; t.id = id; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(t); }(document, 'stackla-widget-js'));</script><divclass="stackla-widget"data-id="10243"data-hash="577b624a5b11d"data-ct=""data-alias="georgezhao.stackla.com"data-ttl="30"style="width: 100%; overflow: hidden;"></div><scripttype="text/javascript"> (function (d, id) {if (d.getElementById(id)) return;var t =d.createElement('script');t.type ='text/javascript';t.src ='//assetscdn.stackla.com/media/js/widget/fluid-embed.js';t.id = id; (document.getElementsByTagName('head')[0] ||document.getElementsByTagName('body')[0]).appendChild(t); }(document,'stackla-widget-js'));</script><script>// Custom code to overlay Map widget with Google Mapfunctioninit() {if (!window.Stackla) {// wait until the Nosto's UGC object is readysetTimeout(init,100);return; }initMap(); }functioninitMap() {var coordinateSydney = {lat:-33.8568, lng:151.2153};var map =newgoogle.maps.Map(document.getElementById('map'), {zoom:11, center: coordinateSydney});var options = {/** * @param{HTMLElement} dom * @param statistics * @returns{*} */decoratePin:function (dom, statistics) {// you can access the following statistics before a pin is renderedvar avgLocation =statistics.avg_location;var quantity =statistics.quantity;var geohash =statistics.geohash;// you can modify or add listeners before a pin is renderedreturn dom; }// please see the table below for all available options };// Nosto's UGC codevar mapWidget =Stackla.WidgetManager.getWidgetInstances()[0];mapWidget.bindGoogleMap(map, options); }</script><scriptsrc="https://maps.googleapis.com/maps/api/js?callback=init"></script></body></html>
Available Options
Option Name
Type
Description
decoratePin
Function (pin:HTMLElement, statistics:Object):HTMLElement
A function provided by the developer to modify the pin DOM before it is rendered. It accepts the pre-generated DOM and developer can return a modified DOM.
pinOnClick
Function (geohash:String):void
A function provided by the developer to override the on-click behaviour. If this function is provided, the click action on the pin will no longer trigger the Change-Geohash action.
Final Demo
<script type="text/javascript">(function (d, id) { if (d.getElementById(id)) return; var t = d.createElement('script'); t.type = 'text/javascript'; t.src = '//assetscdn.stackla.com/media/js/widget/fluid-embed.js'; t.id = id; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(t); }(document, 'stackla-widget-js'));</script>
<script type="text/javascript">(function (d, id) { if (d.getElementById(id)) return; var t = d.createElement('script'); t.type = 'text/javascript'; t.src = '//assetscdn.stackla.com/media/js/widget/fluid-embed.js'; t.id = id; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(t); }(document, 'stackla-widget-js')); </script>
<script>function init() { if (!window.Stackla) { setTimeout(init, 100); return; } initMap(); } <div></div> function initMap() { var coordinateSydney = {lat: -33.8568, lng: 151.2153}; var map = new google.maps.Map(document.getElementById('map'), {zoom: 11, center: coordinateSydney}); <div></div> // Nosto's UGC code var mapWidget = Stackla.WidgetManager.getWidgetInstances()[0]; mapWidget.bindGoogleMap(map); }</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZmmYJnG5-kRdV95bN-JFTTeOIyV_5Op8&callback=init"></script>