Attribution

کامپوننت <Attribution /> ارائه دهنده کنترل اطلاعات نقشه است که برای نمایش اطلاعاتی در مورد نقشه استفاده می‌شود و به عنوان یک child درون کامپوننت والد خود که <Parsimap /> است، قرار گرفته می‌شود.

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

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

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

تعیین محتوا

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

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

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

// `MapDetails` component is sample component for render into `Attribution`
// component. It's some information about map.
function MapDetails() {
    return (
        <div>
            <b>Map Details:</b> <span>2018 Map Data | Color Full | Iran</span>
        </div>
    );
}

export default class App extends Component {
    // Using `Attribution` 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 `html` option of `Attribution` component. */}
                <Attribution>
                    <MapDetails />
                </Attribution>

                {/* 
                    Using through a component.
                    <Attribution html="Something about map..." /> 
                */}
            </Parsimap>
        );
    }
}

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

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

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

import React, { Component } from 'react';
import { Parsimap, Attribution } 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 `Attribution` through define `html` option.
    render() {
        return (
            <Parsimap
                id="map"
                height="100%"
                center={{ lat: 35.7575, lng: 51.41 }}
            >
                <Attribution
                    style={{ className: 'my-attribution' }}
                    html="Something about map..."
                />
            </Parsimap>
        );
    }
}

وابستگی‌ها

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