diff --git a/README.md b/README.md index 409be2c..6007069 100644 --- a/README.md +++ b/README.md @@ -1,44 +1,101 @@ # SilverStripe Mapbox Field +Extends: + - Symbiote\Addressable\Geocodable + +Replaces: + - dynamic/silverstripe-elemental-customer-service + - bigfork/silverstripe-mapboxfield + Adds a Mapbox map to the CMS with a draggable marker to allow content authors to add a location to a DataObject or Page. +Address will be geocoded automatically or manually using mapbox map. + +Adds DataObject Extension to store and render GeoJSON data. + ## Installation -`composer require bigfork/silverstripe-mapboxfield:*` +`composer require a2nt/silverstripe-mapboxfield:*` ## Configuration -```yml +```yaml + --- -Name: 'app-mapbox' -After: 'silverstripe-mapboxfield' +Name: 'app-map' +After: + - 'silverstripe-mapboxfield' + - 'addressable' --- -Bigfork\SilverStripeMapboxField\MapboxField: - access_token: '' +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' + ``` ## Usage ```php -class MyDataObject extends DataObject + +class MyDataObjectMapPin extends DataObject +{ + private static $extensions = [ + Addressable::class, + MarkerExtension::class, + ]; +} +``` + +## Example +```php +class MyPage extends \Page { private static $db = [ - 'Latitude' => 'Decimal(10, 8)', - 'Longitude' => 'Decimal(11, 8)' + 'MapZoom' => 'Int', ]; - - public function getCMSFields() + + public function MapPins() { - // ... + return MyDataObjectMapPin::get(); + } - $fields->addFieldToTab( - 'Root.Map', - MapboxField::create('LocationMap', 'Choose a location', 'Latitude', 'Longitude') - ); - - // ... + public function getGeoJSON() + { + $pins = []; + foreach ($this->MapPins() as $pin) { + $pins[] = $pin->getGeo(); + } + return json_encode([ + 'type' => 'MarkerCollection', + 'features' => $pins + ]); } } ``` + +create MyDataObjectMapPin.ss template to render popup content + +MyPage.ss +```html +
+
+
+``` + +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 diff --git a/_config/config.yml b/_config/config.yml index 60c3aab..bd2ac08 100644 --- a/_config/config.yml +++ b/_config/config.yml @@ -1,6 +1,18 @@ --- Name: silverstripe-mapboxfield --- + +SilverStripe\Core\Injector\Injector: + A2nt\SilverStripeMapboxField\MarkerExtension: + properties: + geocoder: %$Symbiote\Addressable\MapboxGeocodeService + Symbiote\Addressable\GeocodeServiceInterface: + class: Symbiote\Addressable\MapboxGeocodeService + +SilverStripe\SiteConfig\SiteConfig: + extensions: + - A2nt\SilverStripeMapboxField\SiteConfigExtension + A2nt\SilverStripeMapboxField\MapboxField: access_token: '' map_style: 'mapbox://styles/mapbox/basic-v9' diff --git a/src/LeftAndMainExtension.php b/src/LeftAndMainExtension.php index d71a534..a0828fb 100644 --- a/src/LeftAndMainExtension.php +++ b/src/LeftAndMainExtension.php @@ -5,19 +5,19 @@ namespace A2nt\SilverStripeMapboxField; use SilverStripe\Core\Config\Config; use SilverStripe\Core\Extension; use SilverStripe\View\Requirements; +use Symbiote\Addressable\MapboxGeocodeService; class LeftAndMainExtension extends Extension { public function onAfterInit() { $config = MapboxField::config(); + $token = MapboxField::getAccessToken(); + Requirements::css($config->api_css_url); Requirements::javascript($config->api_javascript_url); Requirements::css($config->geocoder_css_url); Requirements::javascript($config->geocoder_javascript_url); - Requirements::customScript(<<access_token + ?: Config::inst()->get(MapboxGeocodeService::class, 'mapbox_api_key'); + } + /** * @param string $name * @param string $title @@ -28,8 +38,8 @@ class MapboxField extends CompositeField { $cfg = self::config(); // check access_token - if(!$cfg->get('access_token')) { - return new \ErrorException(self::class.': Please set Mapbox.com Access token'); + if (!self::getAccessToken()) { + return user_error(self::class.': Please set Mapbox.com Access token'); } $this->curr_style = $cfg->get('map_style'); diff --git a/src/MarkerExtension.php b/src/MarkerExtension.php index 0461a1e..663971c 100644 --- a/src/MarkerExtension.php +++ b/src/MarkerExtension.php @@ -3,13 +3,15 @@ namespace A2nt\SilverStripeMapboxField; - use SilverStripe\Forms\CheckboxField; use SilverStripe\Forms\FieldList; use Symbiote\Addressable\Geocodable; class MarkerExtension extends Geocodable { + private static $icon = ''; + private $curr_icon = null; + public function updateCMSFields(FieldList $fields) { parent::updateCMSFields($fields); @@ -17,6 +19,7 @@ class MarkerExtension extends Geocodable $record = $this->getOwner(); $fields->removeByName(['LatLngOverride', 'Lng','Lat']); + $fields->addFieldsToTab('Root.Map', [ CheckboxField::create('LatLngOverride', 'Override Latitude and Longitude?') ->setDescription('Check this box and save to be able to edit the latitude and longitude manually.'), @@ -31,6 +34,40 @@ class MarkerExtension extends Geocodable .$obj->getField('Lat').',' .$obj->getField('Lng'); } + public function getIcon() + { + $obj = $this->owner; + $class = get_class($obj); + return $this->curr_icon ?: $class::config()->get('icon'); + } + + public function setIcon($icon) + { + $this->curr_icon = $icon; + return $this; + } + + public function getGeo() + { + $obj = $this->owner; + + return [ + 'id' => $obj->ID, + 'type' => 'Feature', + 'icon' => $obj->getIcon(), + 'properties' => [ + 'content' => $obj->forTemplate()->RAW(), + ], + 'geometry' => [ + 'type' => 'Point', + 'coordinates' => [ + $obj->getField('Lng'), + $obj->getField('Lat') + ], + ], + ]; + } + public function forTemplate() { $obj = $this->owner; diff --git a/src/SiteConfigExtension.php b/src/SiteConfigExtension.php new file mode 100644 index 0000000..ee0e2ee --- /dev/null +++ b/src/SiteConfigExtension.php @@ -0,0 +1,19 @@ +get('map_style'); + } +}