Point

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

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

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

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

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

export default class App extends Component {
    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 }} />
                </Layer>
            </Parsimap>
        );
    }
}

استثنائات

هنگام استفاده از عارضه نقطه‌ای به عنوان نشانگر در کامپوننت‌های <Geocode />، <Tracker /> و <Selector /> نیازی به اختصاص latlng نخواهد بود و مختصات توسط کامپوننت‌ها برحسب عملکرد به صورت خودکار تعیین می‌گردد.

بکارگیری پاپ آپ

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

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');

// 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 {
    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 }}
            >
                <Layer id="using-popup">
                    <Point latlng={{ lat: 35.7575, lng: 51.41 }}>
                        <Popup visible={true}>
                            <PointDetails />
                        </Popup>
                    </Point>
                </Layer>
            </Parsimap>
        );
    }
}

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

عارضه نقطه‌ای می‌تواند به صورت پیشرفته نیز بکارگرفته شود. با استفاده از استایل‌بندی می‌توان ، آدرس تصویر، حاشیه، اندازه، کلاس CSS و زاویه آیکون را برای عارضه تعیین نموده و یا element مربوط به آیکون را به صورت custom ایجاد کرد. بوسیله اعمال گزینه‌ها می‌توان قابلیت‌های drag شدن و تمرکزی روی آیکون، دریافت آدرس از طریق کلیک بروی عارضه و popup را تعیین نمود. توسط رخدادها می‌توان event خاصی را به عارضه اختصاص داده و یا حین کلیک بروی عارضه با استفاده از کامپوننت <Popup /> پاپ آپی را بروی آن نشان داد. ایجاد عارضه نقطه‌ای اطلاعاتی از نحوه بکارگیری گزینه‌ها و استایل‌بندی را در بر دارد.

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 `style` set image src, margin, size, CSS class, angle of point icon
    // or use html for using a custom html element as point icon. The `options`
    // make icon draggable, focusable, return address by click on it or can use
    // popup as a option. Handling specify event through `events` or show popup
    // through `Popup` component.
    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 }}
                        style={{
                            // src: 'IMAGE_SRC',
                            margin: { top: 0, left: 0 },
                            size: { height: 25, width: 25 },
                            className: 'my-point',
                            angle: 25,
                            // html: string - Use custom html tag.
                        }}
                        options={{
                            draggable: true,
                            focusable: true,
                            areaInfo: true,
                            // popup: string|Element - Also can use popup here.
                        }}
                        events={{
                            click: event => {},
                            drag: event => {},
                            dragend: event => {},
                        }}
                    >
                        <Popup visible={true}>
                            <PointDetails />
                        </Popup>
                    </Point>
                </Layer>
            </Parsimap>
        );
    }
}

وابستگی‌ها

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