Popup

کامپوننت <Popup /> ارائه دهنده پاپ آپ است که جهت قرار یافتن بروی عارضه‌ای خاص استفاده می‌شود و به عنوان یک child درون کامپوننت والد خود که می‌تواند یکی از عارضه‌های <Point />، <Line />، <Polygon /> و <Circle /> باشد، بکار گرفته می‌شود. پاپ آپ‌ها اغلب در برگیرنده اطلاعاتی در مورد عارضه هستند.

طریقه استفاده پایه

پاپ آپ برای افزوده شدن به عارضه نیاز به تعیین گزینه html دارد و برای تعامل با آن، لازم است از گزینه‌ها و استایل مدنظر آن با توجه به نیاز، استفاده نمود.

import React, { Component } from 'react';
import { Parsimap, Popup, Layer, Point } from 'react-parsimap';

// Set API Key via static `setKey` method of imported `Parsimap` class.
Parsimap.setKey('API_KEY');

export default class App extends Component {
    // Using `Popup` through define `html` option.
    render() {
        return (
            <Parsimap
                id="map"
                height="100%"
                center={{ lat: 35.7575, lng: 51.41 }}
            >
                <Layer id="basic-usage">
                    <Point latlng={{ lat: 35.7575, lng: 51.41 }}>
                        <Popup html="Popup content..." />
                    </Point>
                </Layer>
            </Parsimap>
        );
    }
}

تعیین محتوا

محتوای پاپ آپ می‌تواند شامل یک رشته متنی، رشته به صورت html، یک element ایجاد شده و یا یک کامپوننت باشد. که به منظور استفاده از یک نوع محتوا نیاز به قرار دادن گزینه html در کامپوننت <Popup /> است. در حالت دیگر می‌توان به صورت مستقیم نوع محتوا را به عنوان child درون پاپ آپ قرار داد و دیگر نیازی به استفاده از گزینه html نخواهد بود.

import React, { Component } from 'react';
import { Parsimap, Point, Layer, Popup } from 'react-parsimap';

// Set API Key via static `setKey` method of imported `Parsimap` class.
Parsimap.setKey('API_KEY');

function PointDetails() {
    return (
        <div>
            <b>Point Details:</b> The Vanak Square of Tehran.
        </div>
    );
}

export default class App extends Component {
    render() {
        // Assign a popup that contains the component to the point and display
        // when the marker is displayed on the map by the `visible` option.
        return (
            <Parsimap
                id="map"
                height="100%"
                center={{ lat: 35.7575, lng: 51.41 }}
            >
                {/* Using through a component. */}
                <Layer id="component-content">
                    <Point latlng={{ lat: 35.7575, lng: 51.41 }}>
                        <Popup>
                            <PointDetails />
                        </Popup>
                    </Point>
                </Layer>

                {/* Using through `html` option of `Control` component.*/}
                <Layer id="html-content">
                    <Point latlng={{ lat: 35.7576, lng: 51.412 }}>
                        <Popup html="Something about marker..." />
                    </Point>
                </Layer>
            </Parsimap>
        );
    }
}

کامپوننت <PointDetails /> درون پاپ آپ نقشه استفاده شده است.

بکارگیری پیشرفته

پاپ آپ می‌تواند به صورت پیشرفته نیز بکارگرفته شود. بوسیله اعمال گزینه‌ها می‌توان هنگام نمایش عارضه کادر پاپ آپ هم بروی آن نمایش یابد، همچنین کلاس و minWidth مربوط به آنرا تعیین نمود.

import React, { Component } from 'react';
import { Parsimap, Point, Popup, Layer } from 'react-parsimap';

// Set API Key via static `setKey` method of imported `Parsimap` class.
Parsimap.setKey('API_KEY');

// Sample component for use as `Popup` content.
function PointDetails() {
    return (
        <div>
            <b>Point Details:</b> The Vanak Square of Tehran.
        </div>
    );
}

export default class App extends Component {
    // The options of popup including: display when the marker is displayed on
    // the map by the `visible` option, The `style` set CSS class, define
    // minWidth and use html for set content of popup.
    render() {
        return (
            <Parsimap
                id="map"
                height="100%"
                center={{ lat: 35.7575, lng: 51.41 }}
            >
                <Layer id="advanced-usage">
                    <Point latlng={{ lat: 35.7575, lng: 51.41 }}>
                        {/* html: string - use for set content of popup. */}
                        <Popup
                            visible={true}
                            style={{ minWidth: 100, className: 'my-popup' }}
                        >
                            <PointDetails />
                        </Popup>
                    </Point>
                </Layer>
            </Parsimap>
        );
    }
}

وابستگی‌ها

بکارگیری کامپوننت نیازمند وابستگی‌هایی است که به طور کامل در بخش نصب و راه‌اندازی شرح داده شده است. همچنین در بخش نحوه صحیح بکارگیری درصد می‌توان اطلاعاتی کاملی را جهت تعیین ارتفاع نقشه کسب نمود.