@paperbits/core/map/ko/mapEditor.html

Paperbits core components.

<!-- ko if: showApiKeyInput -->
<details open>
    <summary>
        API key
    </summary>
    <div class="form-group">
        <label for="apiKey" class="form-label">Google Maps API key</label>
        <input id="apiKey" type="text" class="form-control" data-bind="textInput: apiKey" />
    </div>
</details>
<!-- /ko -->

<!-- ko if: apiKey -->
<details open>
    <summary>
        Map settings
    </summary>
    <div class="form-group">
        <label for="location" class="form-label">Location</label>
        <input type="text" id="location" class="form-control" placeholder="e.g. 400 Broad St, Seattle, WA 98109"
            data-bind="textInput: location" />
    </div>
    <div class="form-group">
        <label for="zoom" class="form-label">Zoom</label>
        <input id="zoom" type="range" class="form-control" min="1" max="22" data-bind="value: zoom" />
    </div>
    <div class="form-group">
        <label for="mapType" class="form-label">Map type</label>
        <dropdown id="mapType"
            params="{ options: mapTypeOptions, value: mapType, optionsText: 'label', optionsValue: 'value', heading: 'Map type' }">
        </dropdown>
    </div>
</details>

<details open>
    <summary>
        Marker
    </summary>

    <div class="dropzone">
        <label for="source" class="form-label">
            Icon
            <button class="btn btn-info" role="tooltip" aria-label="Error" aria-haspopup="true" aria-hidden="true"
                data-bind="tooltip: 'Source of the picture. To change, click on preview area below and select a picture from media libaray.'"></button>
        </label>
        <a href="#" id="source" role="img" class="dropzone-showbox"
            data-bind="balloon: { position: 'right', component: { name: 'media-selector', params: { mimeType: 'image/', onSelect: $component.onMarkerIconChange } } }, focus: true">
            <div class="fit" role="presentation" data-bind="background: background"></div>
        </a>
    </div>

    <div class="form-group">
        <label for="caption" class="form-label">Caption</label>
        <input type="text" id="caption" class="form-control" placeholder="e.g. Space Needle"
            data-bind="textInput: caption" maxlength="1000" />
    </div>

    <div class="form-group">
        <label id="hyperlinkSelector" class="form-label">
            Popup
            <button class="btn btn-info" role="tooltip" aria-hidden="true" role="tooltip"
                data-bind="tooltip: 'Popup associated with the marker. When specified, the marker caption gets ignored.'"></button>
        </label>
        <div class="input-group">
            <input id="hyperlinkSelector" class="form-control" readonly data-bind="value: hyperlinkTitle" />
            <button class="btn input-group-btn"
                data-bind="balloon: { position: 'right', component: { name: 'popup-selector', params: { hyperlink: $component.hyperlink, onHyperlinkSelect: $component.onHyperlinkChange } } }">
                <i aria-hidden="true" class="paperbits-icon paperbits-link-69-2"></i>
            </button>
        </div>
    </div>
</details>
<!-- /ko -->

<details open>
    <summary>
        Size
    </summary>
    <size-editor params="{ features: 'height,width', sizeConfig: sizeConfig, onUpdate: onSizeChange }">
    </size-editor>
</details>