MarkupLeafletMap.module

<?php namespace ProcessWire;

/**
 * ProcessWire Leaflet Map Markup
 * Port of Google Map Markup by Ryan Cramer
 * Renders maps for the FieldtypeMapMarker module
 *
 * ProcessWire 3.x
 * Copyright (C) 2013 by Ryan Cramer
 * Copyright (C) 2015 by Mats Neander
 * Licensed under GNU/GPL v2, see LICENSE.TXT
 *
 * http://processwire.com
 *
 * USAGE:
 * ======
 *
 * Add this somewhere before your closing </head> tag:
 *
 *     <link rel="stylesheet" href="https://unpkg.com/leaflet@0.7.3/dist/leaflet.css" />
 *     <script src="https://unpkg.com/leaflet@0.7.3/dist/leaflet.js"></script>
 *
 * In the location where you want to output your map, do the following in your template file:
 *
 *    $map = $modules->get('MarkupLeafletMap');
 *    echo $map->render($page, 'map'); // replace 'map' with the name of your LeafletFieldtypeMap field
 *
 * To render a map with multiple markers on it, specify a PageArray rather than a single $page:
 *
 *    $items = $pages->find("template=something, map!='', sort=title");
 *    $map = $modules->get('MarkupLeafletMap');
 *    echo $map->render($items, 'map');
 *
 * To specify options, provide a 3rd argument with an options array:
 *
 *    $map = $modules->get('MarkupLeafletMap');
 *    echo $map->render($items, 'map', array('height' => '500px'));
 *
 *
 * OPTIONS
 * =======
 * Here is a list of all possible options (with defaults shown):
 *
 * // default width of the map
 * 'width' => '100%'
 *
 * // default height of the map
 * 'height' => '300px'
 *
 * // zoom level
 * 'zoom' => 12 (or $field->defaultZoom)
 *
 * // set to true to automatically adjust maximum zoom level to default zoom
 * 'maxZoom' => true
 *
 * // set to false to disable the scroll wheel zoom
 * 'scrollWheelZoom' => true
 *
 * // map ID attribute
 * 'id' => "mgmap"
 *
 * // map class attribute
 * 'class' => "MarkupGoogleMap"
 *
 * // center latitude
 * 'lat' => $field->defaultLat
 *
 * // center longitude
 * 'lng' => $field->defaultLng
 *
 * // set to false only if you will style the map <div> yourself
 * 'useStyles' => true
 *
 * // field to use for the marker link, or blank to not link
 * 'markerLinkField' => 'url'
 *
 * // field to use for the marker title
 * 'markerTitleField' => 'title'
 *
 * // map will automatically adjust to fit to the given markers (when multiple markers)
 * 'fitToMarkers' => true
 *
 *
 * // Any extra javascript initialization code you want to occur before the map itself is drawn
 * 'init' => '',
 *
 */

class MarkupLeafletMap extends WireData implements Module {

    public static function getModuleInfo() {
        return array(
            'title' => 'LeafletMap Markup',
            'version' => '3.0.2',
            'summary' => 'Renders Leaflet Maps for the LealetMapMarker Fieldtype',
            'requires' => 'ProcessWire>=3.0.0, FieldtypeLeafletMapMarker',
            'installs' => 'MarkupAddInlineScript',
        );
    }

    /**
     * Include our MapMarker class, which serves as the value for fields of type FieldtypeMapMarker
     *
     */
    public function init() {
        $class = $this->classname();
        $assetPath = $this->config->urls->$class;

        $this->config->styles->add('https://unpkg.com/leaflet@0.7.3/dist/leaflet.css');
        $this->config->styles->add($assetPath . "assets/leaflet-markercluster/MarkerCluster.css");
        $this->config->styles->add($assetPath . "assets/leaflet-markercluster/MarkerCluster.Default.css");
        $this->config->scripts->add('https://unpkg.com/leaflet@0.7.3/dist/leaflet.js');
        $this->config->scripts->add($assetPath . 'assets/leaflet-markercluster/leaflet.markercluster.js');
        $this->config->scripts->add($assetPath . 'assets/leaflet-providers/leaflet-providers.js');
        $this->config->scripts->add($assetPath . 'MarkupLeafletMap.js');

        require_once(dirname(__FILE__) . '/LeafletMapMarker.php');
    }

    public function getOptions($fieldName) {
        static $n = 0;
        $field = $this->fields->get($fieldName);
        if(!$field) throw new WireException("Unknown field: $fieldName");

        return array(
            'useStyles' => true,
            'fitToMarkers' => true,
            'useMarkerSettings' => true,
            'useHoverBox' => false,
            'hoverBoxMarkup' => "<div data-top='-10' data-left='15' style='background: #000; color: #fff; padding: 0.25em 0.5em; border-radius: 3px;'></div>",
            'markerLinkField' => 'url',
            'markerTitleField' => 'title',
            'width' => '100%',
            'height' => $field->height,
            'zoom' => $field->defaultZoom ? (int) $field->defaultZoom : 12,
            'type' => $field->defaultType ? $field->defaultType : 'HYBRID',
            'id' => "mleafletmap" . (++$n),
            'class' => "MarkupLeafletMap",
            'lat' => $field->defaultLat,
            'lng' => $field->defaultLng,
            'provider' => $field->defaultProvider,
            'maxZoom' => false,
            'scrollWheelZoom' => true,
            'icon' => '', // url to icon (blank=use default)
            'iconHover' => '', // url to icon when hovered (default=none)
            'shadow' => '', // url to icon shadow (blank=use default)
            'init' => '', // additional javascript code to insert in map initialization
            'n' => $n,
            'popupFormatter' => '',

            // See https://github.com/lvoogdt/Leaflet.awesome-markers#properties
            // for documentation on what values can go in the two lines above (look at the icon and markerColor setting in the docs)
            'markerIcon'       => 'home',
            'markerColour'     => 'darkblue',
            'markerIconColour' => 'white',
            'markerFormatter'  => '',
        );
    }


    /**
     * Call this method when constucting the HTML header, to inject all the script and style files needed for Leaflet maps.
     */
    public function getLeafletMapHeaderLines($fontawesome = true) {
        $url = $this->config->urls->siteModules. 'FieldtypeLeafletMapMarker/';
        $lines = '';
        if ($fontawesome) {
            $lines .= "<link rel=\"stylesheet\" type=\"text/css\" href=\"{$url}assets/font-awesome-4.6.3/css/font-awesome.min.css\">";
        }
        $lines .= <<<LINES
        <!-- Styles supporting the use of Leaflet.js -->
        <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@0.7.7/dist/leaflet.css" />
        <link rel="stylesheet" type="text/css" href="{$url}assets/leaflet-markercluster/MarkerCluster.css" />
        <link rel="stylesheet" type="text/css" href="{$url}assets/leaflet-markercluster/MarkerCluster.Default.css" />

        <!-- Scripts supporting the use of Leaflet.js -->
        <script type="text/javascript" src="https://unpkg.com/leaflet@0.7.7/dist/leaflet.js"></script>
        <script type="text/javascript" src="{$url}assets/leaflet-markercluster/leaflet.markercluster.js"></script>
        <script type="text/javascript" src="{$url}assets/leaflet-providers/leaflet-providers.js"></script>
        <script type="text/javascript" src="{$url}MarkupLeafletMap.js"></script>

        <!-- Extend Leaflet with Awesome.Markers -->
        <link rel="stylesheet" type="text/css" href="{$url}assets/leaflet-awesome-markers/leaflet.awesome-markers.css" />
        <script type="text/javascript" src="{$url}assets/leaflet-awesome-markers/leaflet.awesome-markers.min.js"></script>
LINES;

        return $lines;
    }


    public function render($pageArray, $fieldName, array $options = array()) {
        static $n = 0;
        $n++;

        $defaultOptions = $this->getOptions($fieldName);
        $options = array_merge($defaultOptions, $options);
        if($pageArray instanceof Page) {
            $page = $pageArray;
            $pageArray = new PageArray();
            $pageArray->add($page);
        }

        $height = $options['height'];
        $width = $options['width'];
        if(empty($height)) $height = 300;
        if(ctype_digit("$height")) $height .= "px";
        if(ctype_digit("$width")) $width .= "px";

        $style = '';
        if($options['useStyles'] && !empty($height) && !empty($width)) {
            $style = " style='width: $width; height: $height;'";
        }

        $lat = $options['lat'];
        $lng = $options['lng'];
        $zoom = $options['zoom'] > 0 ? (int) $options['zoom'] : $defaultOptions['zoom'];
        //$type = in_array($options['type'], array('ROADMAP', 'SATELLITE', 'HYBRID')) ? $options['type'] : 'HYBRID';
        $provider = ($options['provider'] == "") ? 'OpenStreetMap.Mapnik' : $options['provider'];

        if($options['useMarkerSettings'] && (count($pageArray) == 1 || !$lat)) {
            // single marker overrides lat, lng and zoom settings
            $marker = $pageArray->first()->get($fieldName);
            $lat = $marker->lat;
            $lng = $marker->lng;
            if($marker->zoom > 0) $zoom = (int) $marker->zoom;
        }

        $id = $options['id'];
        $out = '';

        $out .= "<div id='$id' class='$options[class]'$style></div>";

        $inlineScript = "<script type='text/javascript'>\n$(function() {\n" .
            "var $id = new jsMarkupLeafletMap();\n" .
            "$id.setOption('zoom', $zoom);\n" .
            "$id.setOption('scrollWheelZoom', {$options['scrollWheelZoom']});\n" .
            $options['init'] . "\n" .
            "$id.init('$id', $lat, $lng, '$provider');\n" .
            "var default_marker_icon = L.AwesomeMarkers.icon({ icon: '{$options['markerIcon']}', iconColor: '{$options['markerIconColour']}', prefix: 'fa', markerColor: '{$options['markerColour']}' });\n";

        foreach($pageArray as $page) {
            $marker = $page->get($fieldName);
            if(!$marker instanceof LeafletMapMarker) continue;
            if(!$marker->lat) continue;
            $url   = $options['markerLinkField']  ? $page->get($options['markerLinkField'])  : '';
            $title = $options['markerTitleField'] ? $page->get($options['markerTitleField']) : '';

            $popup = '';
            if (isset($options['popupFormatter']) && is_callable($options['popupFormatter'])) {
                // Need to escape returned single quotes and turn newlines into HTML breaks as this is going into a JS string
                $popup = str_replace("'", "\\'", call_user_func($options['popupFormatter'], $page));
                $popup = str_replace("\n", '<br/>', $popup);
            }

            $marker_icon = 'default_marker_icon';
            if (isset($options['markerFormatter']) && is_callable($options['markerFormatter'])) {
                $marker_options = array(
                    'prefix'      => 'fa',
                    'icon'        => $options['markerIcon'],
                    'markerColor' => $options['markerColour'],
                    'iconColor'   => $options['markerIconColour'],
                );
                $marker_options = call_user_func($options['markerFormatter'], $page, $marker_options);
                $obj = array();
                foreach ($marker_options as $k => $v) {
                    $obj[] = "$k: '$v'";
                }
                $marker_options = implode(', ', $obj);
                $marker_icon = 'L.AwesomeMarkers.icon({'.$marker_options.'})';

            }

            $inlineScript .= "$id.addMarkerIcon($marker_icon, $marker->lat, $marker->lng, '$url', '$title', '$popup');\n";
        }

        if(count($pageArray) > 1) {
            if ($options['fitToMarkers']) $inlineScript .= "$id.fitToMarkers();\n";
            if ($options['maxZoom']) $inlineScript .= "$id.setMaxZoom();\n";
        }

        $inlineScript .= "});\n</script>";

        $this->page->inlineScript = $inlineScript;

        return $out;
    }
}