Pargo Map

Something... something... something...

Installation

Pull the package using npm npm install pargo-map. And using it as you would normally do like most other node package. All though keep in mind your bundler needs to be able to bundle VueJS and sass content.
Embed the bundled javascript/css files as script tag into your page:
- https://unpkg.com/pargo-map/dist/pargo-map.full.min.js includes all libraries needed to be able to run.
- https://unpkg.com/pargo-map/dist/pargo-map.min.js excludes axios / mapbox-gl / vue libraries and will need to be embedded separately.
- In either cases embed the stylesheet: https://unpkg.com/browse/pargo-map/dist/pargo-map.min.css

Usage

Once you have loaded the package with one of the methods above you should be able to instantiate map using the following procedure: new PargoMap(HTMLElement, options = {}). For example:

<html>
    <head>
        <style>
            .container {
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div id="map"></div>
        </div>
        <script>
            var map = new PargoMap(document.getElementById('map'), config);
    
            map.events.on('pup.select', function (pickupPoint) {
                alert('pickup point selected: ' + pickupPoint.code);        
            });
        </script>
    </body>
</html>

Keep in mind the map will scale itself to the width and height of the container it is bound too.

Configuration Options

The following options can be passed in the config object when instantiating:

options - object Contains all configuration.
- options.customCss - boolean Styling given in options.styling will be applied (default: true).
- options.api - object Contains source api configuration.
  - options.api.url - string Url of source (default: null).
  - options.api.headers - object Additional headers to append when querying source api (default: {}).
- options.sourceMap - function Function pickup points fetched from source will be mapped through, must return object (default: pup => pup).
- options.askInitialLocation - boolean Ask for geolocation when map is loaded (default: true).
- options.focusQuery - boolean Attempt to focus on given location in url query parameters (default: true).
- options.layout - object Contains layout configurations.
  - options.layout.header - boolean Display header component (default: true).
  - options.layout.geocoder - boolean Display geocoder. Not visible if header is false (default: true).
  - options.layout.locator - boolean Display locator button. Not visible if header is false (default: true).
  - options.layout.logo - boolean Display logo (given in options.assets.logo) Not visible if header is false (default: true).
  - options.layout.sidebar - boolean Display sidebar component (default: true).
  - options.layout.map - boolean Display map (default: true).
  - options.layout.listItemDivider - boolean Display divider between every list item (default: true).
  - options.layout.toolsReverse - boolean Reverse header tools (geocoder/locator/mobile switch) (default: false).
  - options.layout.sidebarAlign - string Sidebar alignment on map (valid options are: 'left' 'right') (default: 'left').
  - options.layout.logoAlign - string Logo alignment on header (valid options are: 'left' 'right') (default: 'left').
  - options.layout.toolsAlign - string Tools (geocoder/locator/mobile switch) alignment on header (valid options are: 'left' 'center' 'right') (default: 'center').
- options.styling - object Contains styling configuration (all options require valid css values, unless noted).
  - options.styling.headerBgColor - string Header background color (default: '#ffffff').
  - options.styling.headerBorder - string Header bottom border (default: '4px solid #1a75bc').
  - options.styling.headerBoxShadow - string Header box shadow (default: '0 0 8px 2px rgba(0, 0, 0, .3)').
  - options.styling.sidebarBgColor - string Sidebar background color (default: '#ffffff').
  - options.styling.sidebarBorder - string Sidebar left or right border (depending on options.layout.sidebarAlign) (default: null).
  - options.styling.sidebarBoxShadow - string Sidebar box shadow (default: '0 0 8px 2px rgba(0, 0, 0, .3)').
  - options.styling.pointRadius - number Geocoder point radius. Must be integer in pixels (default: 10).
  - options.styling.pointColor - string Geocoder point color. Must be valid hex color (default: '#1b75bc').
  - options.styling.pointBorderColor - string Geocoder point border color. Must be valid hex color (default: '#ffffff').
  - options.styling.pointBorder - number Geocoder point border width. Must be integer in pixels (default: 2).
  - options.styling.locatorBgColor - string Locator button background color (default: '#ffffff').
  - options.styling.locatorColor - string Locator button icon color (default: '#1b75bc').
  - options.styling.locatorBorderRadius - string Locator button border radius (default: null).
  - options.styling.mobileSwitchBgColor - string Mobile switch button background color (default: '#ffffff').
  - options.styling.mobileSwitchColor - string Mobile switch button icon color (default: '#1b75bc').
  - options.styling.mobileSwitchBorderRadius - string Mobile switch button border radius (default: null).
  - options.styling.clusterBgColor - string Map marker cluster background color. Must be valid hex color (default: '#1b75bc').
  - options.styling.clusterColor - string Map marker cluster count color. Must be valid hex color (default: '#ffffff').
  - options.styling.listBgColor - string Sidebar list background color (default: null).
  - options.styling.listColor - string Sidebar list text color (default: '#000000').
  - options.styling.listDividerBorder - string List item divider border (default: '1px solid #dddddd').
  - options.styling.listDividerWidth - string List item divider width (default: 'calc(100% - 20px)').
  - options.styling.listSelectBgColor - string List item select button background color (default: '#1a75bc').
  - options.styling.listSelectColor - string List item select button text color (default: '#ffffff').
  - options.styling.listSelectBorderRadius - string List item select button border radius (default: '4px').
  - options.styling.geocoderBorder - string Geocoder input border (default: '2px solid #a5a5a5').
  - options.styling.geocoderBoxShadow - string Geocoder input box shadow (default: null).
  - options.styling.geocoderBorderRadius - string Geocoder input border radius (default: '4px').
  - options.styling.detailsRatingColor - string Details pickup point rating color (default: '#1a75bc').
  - options.styling.detailsRatingBgColor - string Details pickup point rating background color (default: '#dddddd').
- options.assets - object Contains location to assets.
  - options.assets.logo - string Location to logo (default: '/assets/logo.png').
- options.map - object Contains map related configurations.
  - options.map.accessToken - string Mapbox access token (default: null).
  - options.map.style - string|object Valid mapbox style definition. (default: 'mapbox://styles/mapbox/streets-v10?optimize=true').
  - options.map.defaultCamera - object Contains default camera configurations.
    - options.map.defaultCamera.center - LngLatLike Default center of the map (default: [24.724684462423852, -28.79644925049451]).
    - options.map.defaultCamera.zoom - number Default zoom of the map between 1 to 20 (default: 5.73).
    - options.map.defaultCamera.bounds - LngLatBoundsLike Default map bounds overrides zoom/center when set (default: [16.04851978824172, -35.00989923831986, 33.11422842474812, -21.90284614713424]).
  - options.map.focusZoom - number Map zoom when focusing pickup point. (default: 13).
  - options.map.disablePopups - boolean Display pickup point popup when focused. (default: false).
  - options.map.markers - array<object> Contains map marker configurations.
    - options.map.markers.*.id - string Unique ID for map marker.
    - options.map.markers.*.icon - string Location of icon.
    - options.map.markers.*.selectedIcon - string Location of icon when focused.
    - options.map.markers.*.anchor - string Anchor of the icon (info).
    - options.map.markers.*.filter - array Filter applied to icon (info).
    - options.map.markers.*.raw - object Additional configurations applied to icon (info).
  - options.map.mapboxConfig - object Additional options applied when instantiating mapbox (info) (default: {}).
  - options.map.sourceConfig - object Additional options applied to GeoJSON source (info) (default: {cluster: true, clusterMaxZoom: 12, clusterRadius: 50}).
  - options.map.popupConfig - object Additional options applied to map popups (info) (default: {closeButton: false, offset: [0, -63], className: 'pmap__popup'}).
- options.list - object Contains list related configurations.
  - options.list.itemsPerLoad - number Number of items per load when scrolling (default: 30).
  - options.list.scopeByMapBounds - boolean Scope list by visible pickup points on map (default: false).
- options.templates - object Contains templates for various components (info).
  - options.templates.listItem - string HTML template for list items (default: null).
  - options.templates.details - string HTML template for pickup point details (default: null).
  - options.templates.popup - string HTML template for pickup point focus popup (default: null).
- options.geocoder - object Contains geocoder related configurations.
  - options.geocoder.accessToken - string Access token used to retrieve geo information (default: null).
  - options.geocoder.countries - string Limit results to the given countries, comma separated (default: 'za,bw,ls,na,sz').
  - options.geocoder.placeholder - string Placeholder text in input field (default: 'Search location').

Templates

TODO

pargo-map

Pargo Map

Installation

Usage

Configuration Options

Templates

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

pargo-map

Pargo Map

Installation

Usage

Configuration Options

Templates

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads