Control

کامپوننت <Control /> ارائه دهنده کنترل نقشه است که برای قرار یافتن یک کنترل یا element خاص بروی نقشه استفاده می‌شود و به عنوان یک child درون کامپوننت والد خود که <Parsimap /> است، قرار یافته و یا به صورت مستقل یا parentless با تعیین mapId مربوط به نقشه مورد نظر، بکار گرفته می‌شود. کنترل‌ها اغلب با نقشه تعامل داشته و ارتباط برقرار می‌کنند.

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

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

import React, { Component } from 'react';
import { Parsimap, Control } 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 `Control` through define `html` option.
    render() {
        return (
            <Parsimap
                id="map"
                height="100%"
                center={{ lat: 35.7575, lng: 51.41 }}
            >
                <Control
                    html="Control content..."
                    options={{ position: 'right-middle' }}
                />
            </Parsimap>
        );
    }
}

تعیین محتوا

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

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

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

// Sample style for control container.
const controlStyle = {
    direction: 'ltr',
    background: '#fff',
    padding: '5px',
    outline: '1px solid #ccc',
};

// `TodoList` component is sample component for render into `Control`
// component, often interacted with the map.
function TodoList() {
    return (
        <div style={controlStyle}>
            <b>Todo List</b>
            <br />
            <input type="checkbox" id="check-tehran" />
            <label htmlFor="check-tehran">Check Tehran</label>
            <br />
            <input type="checkbox" id="show-isfahan" />
            <label htmlFor="show-isfahan">Show Isfahan</label>
            <br />
            <input type="checkbox" id="search-mashhad" />
            <label htmlFor="search-mashhad">Search Mashhad</label>
        </div>
    );
}

export default class App extends Component {
    // Using `Control` through define `html` option as html string, html
    // element or using a component or text as child of this component.
    render() {
        return (
            <Parsimap
                id="map"
                height="100%"
                center={{ lat: 35.7575, lng: 51.41 }}
            >
                {/* Using through a component. */}
                <Control options={{ position: 'left-middle' }}>
                    <TodoList />
                </Control>

                {/* Using through `html` option of `Control` component.*/}
                <Control
                    html="Something about map..."
                    options={{ position: 'left-bottom' }}
                />
            </Parsimap>
        );
    }
}

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

بکارگیری مستقل

کنترل نقشه می‌تواند به صورت مستقل نیز بکارگرفته شود. در این حالت <Control /> خارج از والد خود که <Parsimap /> است، قرار یافته و mapId مقدار شناسه نقشه که در <Parsimap /> به عنوان id تعیین شده است قرار می‌یابد، با این کار مشخص می‌شود که نقشه مربوط به آن چه است. در کنترل نقشه که به صورت مستقل استفاده شده است با هر تغییر در کامپوننت که منجر به آپدیت آن شود، برای نمونه تغییر state که پس از آن تابع render یا خروجی کامپوننت صدا زده می‌شود، کنترل نقشه مجدداً ایجاد می‌گردد. ولی زمانی که کنترل نقشه داخل والد خود قرار یابد تنها در اولین بار و حین ایجاد شدن نقشه بروی نقشه ایجاد می‌گردد. مستقل بودن <Control /> این امکان را فراهم می‌آورد تا به صورت مکرر logهای مربوط به فعالیت روی نقشه را بروی نقشه نمایش داده و یا هنگامی که کنترل روی نقشه باید حذف شود، مجدداً با آپدیت شدن کامپوننت اصلی که نقشه در آن است کنترل حذف شده را بروی نقشه با محتوای جدیدی قرار داد.

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

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

// Sample style for control container.
const controlStyle = {
    direction: 'ltr',
    background: '#fff',
    padding: '5px',
    outline: '1px solid #ccc',
};

// `LastDateNow` component is sample component for render into `Control`
// component, often interacted with the map.
function LastDateNow() {
    return (
        <div style={controlStyle}>
            <b>Last Date Now:</b> {Date.now()}
        </div>
    );
}

export default class App extends Component {
    // Using `Control` through a component outside Parsimap component as parent
    // (parentless) and mapId must define as target `Parsimap` id. By changing
    // the "state" and updating the component, create control over the map.
    // Usage can include the display of logs and the last clicked points, used
    // as controls that should be deleted and re-created.
    render() {
        return (
            <div>
                <Parsimap
                    id="map"
                    height="100%"
                    center={{ lat: 35.7575, lng: 51.41 }}
                />

                <Control mapId="map" options={{ position: 'left-middle' }}>
                    <LastDateNow />
                </Control>
            </div>
        );
    }
}

وابستگی‌ها

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