<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
    <div class="next-map-container">
        <LeafletMap class="h-screen-65 w-full {{@options.mapClass}}" @lat={{this.latitude}} @lng={{this.longitude}} @zoom={{11}} @zoomControl={{false}} @onLoad={{this.setupMap}} ...attributes as |layers|>
            <layers.tile @url={{this.tileSourceUrl}} />
            {{#if @options.serviceArea}}
                <layers.polygon @id={{@options.serviceArea.id}} @record={{@options.serviceArea}} @locations={{@options.serviceArea.bounds}} @fillColor={{@options.serviceArea.color}} @color={{@options.serviceArea.stroke_color}} @onAdd={{fn this.onServiceAreaAdded @options.serviceArea}} as |polygon|>
                    <polygon.tooltip @permanent={{true}} @sticky={{true}}>{{@options.serviceArea.name}} {{t "fleet-ops.common.service-area"}}</polygon.tooltip>
                </layers.polygon>
            {{/if}}
        </LeafletMap>
    </div>
</Modal::Default>