Install our…
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.
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?”.
Enter our…
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.
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>
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?”.
If you require any assistance using our Map WordPress plugin or Map Widget, contact us at [email protected] or call 01480 890 970.