Add our Map


Using a WordPress site?

Install our…

Map WordPress Plugin

If you are using WordPress, you can easily include the BigBarn Local Food Map on your website with our easy-to-use WordPress Plugin.

Just like on the BigBarn website, your visitors can interact and browse the map without leaving your website.

Download our Plugin

Download Plugin

Installing our Plugin

  1. Upload the plugin in WordPress by going to the WordPress side menu > Plugins > Add New > Upload Plugin
  2. Select the zip file you downloaded at the link above and click “Install Now”
  3. Click “Activate Plugin”
  4. Go to WordPress side menu > Settings > BigBarn Map to configure your map
  5. Include the [bigbarn_map] shortcode on the page where you would like to display the map

Options

A range of options can be set (Step 4 above) to configure the map. These include:

Width – of the Map on your page. This will be overwritten if the column in which you are inserting the Map is narrower than the setting you enter here.
Height – of the Map on your page.

You can set where the Map is centered when your visitors first see it, but setting the longitude and latitude of a centre point.

You can also set the zoom level for the map when it is first presented. The default is a scale large enough to see at least 10 icons, but the zoom on your map can be set between 1 (large scale) and 10 (very close in to the centre).

Latitude & Longitude * – to determine the centre of the Map when first presented on your page.
Zoom – if Latitude & Longitude are set, the scale of the initial map presented can be set.

* You can find the Latitude and Longitude of a PostCode by going here or an approximation but going to the location on Google Maps and with right click, choose “What’s here?”.

Non-WordPress site?

Enter our…

Map Code

The map widget enables you to easily embed the BigBarn Local Food Map on your website. This works for all websites that accept code.

Just like on the BigBarn website, your visitors can interact and browse the map without leaving your website.

To including the map on your website

Step 1 Obtain your Partner ID by contacting us on [email protected] or call 01480 890 970.

Step 2 Include this JavaScript on your page once.

<script src="https://d2kcsg7gwgf2xu.cloudfront.net/map.js"></script>

Step 3 Place this code wherever you want the widget to appear on your page.

<div class="bigbarn-map" data-width="900" data-height="800" data-partner="YOUR_PARTNER_ID"></div>

Options

A range of options can be passed to customise the map.

The information these pieces of code pass to your website include:

HTML Attribute Description Default Value
data-width Default width of the map 100% of parent container
data-height Default height of the map 100% of parent container
data-partner Your unique partner ID None

You can edit the values between the quote marks in order to adjust the size of the Map you display.
Optional other settings you can pass to the Map…

You can set where the Map is centered when your visitors first see it, but setting the longitude and latitude of a centre point.

You can also set the zoom level for the map when it is first presented. The default is a scale large enough to see at least 10 icons, but the zoom on your map can be set between 1 (large scale) and 10 (very close in to the centre).

HTML Attribute Description Default Value
data-lng Default longitude * PostCode, IP address or GeoLocate
data-lat Default latitude * PostCode, IP address or GeoLocate
data-zoom Default zoom level when data-lng and data-lat are set Minimum 10 icons showing

* You can find the Latitude and Longitude of a PostCode by going here or an approximation but going to the location on Google Maps and with right click, choose “What’s here?”.

Questions?

If you require any assistance using our Map WordPress plugin or Map Widget, contact us at [email protected] or call 01480 890 970.