silverstripe-mapboxfield/README.md

102 lines
2.2 KiB
Markdown
Raw Normal View History

2018-11-29 18:38:20 +01:00
# SilverStripe Mapbox Field
2019-09-07 02:57:59 +02:00
Extends:
- Symbiote\Addressable\Geocodable
Replaces:
- dynamic/silverstripe-elemental-customer-service
- bigfork/silverstripe-mapboxfield
2018-11-29 18:38:20 +01:00
Adds a Mapbox map to the CMS with a draggable marker to allow content authors to add a location to a DataObject or Page.
2018-11-29 18:40:02 +01:00
<img src="docs/img/cms.png" alt="" />
2018-11-29 18:38:20 +01:00
2019-09-07 02:57:59 +02:00
Address will be geocoded automatically or manually using mapbox map.
Adds DataObject Extension to store and render GeoJSON data.
2018-11-29 18:38:20 +01:00
## Installation
2019-09-07 02:57:59 +02:00
`composer require a2nt/silverstripe-mapboxfield:*`
2018-11-29 18:38:20 +01:00
## Configuration
2019-09-07 02:57:59 +02:00
```yaml
2018-11-29 18:38:20 +01:00
---
2019-09-07 02:57:59 +02:00
Name: 'app-map'
After:
- 'silverstripe-mapboxfield'
- 'addressable'
2018-11-29 18:38:20 +01:00
---
2019-09-07 02:57:59 +02:00
SilverStripe\Core\Injector\Injector:
A2nt\SilverStripeMapboxField\MarkerExtension:
properties:
geocoder: %$Symbiote\Addressable\MapboxGeocodeService
Symbiote\Addressable\GeocodeServiceInterface:
class: Symbiote\Addressable\MapboxGeocodeService
Symbiote\Addressable\MapboxGeocodeService:
mapbox_api_key: 'your mapbox access token'
A2nt\SilverStripeMapboxField\MapboxField:
map_style: 'mapbox://styles/mapbox/light-v10'
2018-11-29 18:38:20 +01:00
```
## Usage
```php
2019-09-07 02:57:59 +02:00
class MyDataObjectMapPin extends DataObject
2018-11-29 18:38:20 +01:00
{
2019-09-07 02:57:59 +02:00
private static $extensions = [
Addressable::class,
MarkerExtension::class,
2018-11-29 18:38:20 +01:00
];
2019-09-07 02:57:59 +02:00
}
```
2018-11-29 18:38:20 +01:00
2019-09-07 02:57:59 +02:00
## Example
```php
class MyPage extends \Page
{
private static $db = [
'MapZoom' => 'Int',
];
public function MapPins()
2018-11-29 18:38:20 +01:00
{
2019-09-07 02:57:59 +02:00
return MyDataObjectMapPin::get();
}
2018-11-29 18:38:20 +01:00
2019-09-07 02:57:59 +02:00
public function getGeoJSON()
{
$pins = [];
foreach ($this->MapPins() as $pin) {
$pins[] = $pin->getGeo();
}
return json_encode([
'type' => 'MarkerCollection',
'features' => $pins
]);
2018-11-29 18:38:20 +01:00
}
}
```
2019-09-07 02:57:59 +02:00
create MyDataObjectMapPin.ss template to render popup content
MyPage.ss
```html
<div
class="mapAPI-map-container"
data-map-zoom="$MapZoom"
data-key="<% if $MapAPIKey %>$MapAPIKey<% else %>$SiteConfig.MapAPIKey<% end_if %>"
data-map-style="<% if $MapStyle %>$MapStyle<% else %>$SiteConfig.MapStyle<% end_if %>"
data-geojson="$GeoJSON.XML"
>
<div class="mapAPI-map"></div>
</div>
```
Process it with javascript on frontend, you can find an example at: https://github.com/a2nt/webpack-bootstrap-ui-kit/blob/master/src/js/_components/_ui.map.api.js