jimblue/mapbox

This package is abandoned and no longer maintained. No replacement package was suggested.

Statamic addon that offer a simple way to add amazing map to your website

README

Mapbox for Statamic 3.

Main Features

• change map style
• change map aspect ratio
• change search result locale
• filter search result by type
• filter search result by location
• create marker with legend and color
• save information about current location
• 3 Antlers tags with 1 plug and play template
• configurable at global and fieltype level

Installation

Install Mapbox from the Tools > Addons section of your control panel, or via composer, from your site folder run:

composer require jimblue/mapbox

Mapbox Access Token

To enable Mapbox you need a Mapbox access token. If you don't already have one, you can sign up for Mapbox, it's free!

You can then add your Mapbox access token to your .env file:

MAPBOX_ACCESS_TOKEN="your_mapbox_access_token"

Configuration

The config file will automatically be published during the installation process.

In case of updates, you need to change the config file manually:

php artisan vendor:publish --tag="mapbox-config"

Usage

Add a Mapbox fieltype

To add a Mapbox in your content you still need to add a Mapbox fieltype in your content blueprint. The Mapbox fieltype can be found under the category Media. Yu can use the default option or adapt your Mapbox fieldtype to your need, each option is documented in the fieltype creation form.

Create an entry with a Mapbox fieltype

If you've correctly follow the previous step you should be able to see the Mapbox fieltype when editing/creating an entry. You can try to search for a location, change the style of map, add markers for exemple and much more. Once your happy with your map just save your entry.

Display the map on you website

The easiest way to display your map is to use the plug and play mapbox tag in your template and load mapbox library from a CDN:

{{ mapbox :config="my_mapbox_fieltype_name" }}
<link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>

For more advance usage you can use the the json tag :

{{ mapbox:json :config="my_mapbox_fieltype_name" }}

or the tag pair:

{{ mapbox:parts :config="my_mapbox_fieltype_name" }}
<script>
 mapboxgl.accessToken = '{{ accessToken }}';

 var map = new mapboxgl.Map({
   container: 'map',
   style: '{{ style }}',
   center: {{ center | to_json }},
   zoom: {{ zoom }},
   minZoom: {{ minZoom }},
   maxZoom: {{ maxZoom }},
   bearing: {{ bearing }},
   pitch: {{ pitch }},
   marker: {{ marker | to_json }},
 });
</script>
{{ /mapbox:parts }}
{{ /if }}