Parsimap

کامپوننت <Parsimap /> ارائه دهنده نقشه است که برای نمایش نقشه و بکارگیری اجزاء آن استفاده می‌شود و به عنوان parent سایر کامپوننت‌های دیگر در داخل آن قرار می‌گیرند.

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

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

import React, { Component } from 'react';
import { Parsimap } 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" center={{ lat: 35.7575, lng: 51.41 }} />;
    }
}

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

نقشه می‌تواند به صورت پیشرفته نیز بکارگرفته شود. با استفاده از گزینه‌های نقشه می‌توان رنج بزرگنمائی نقشه را که شامل سطح بزرگنمائی، حداقل و حداکثر zoom است، را تعیین کرد. توسط رخدادها می‌توان event خاصی را به عارضه اختصاص داد.

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

export default class App extends Component {
    //  Set zoom range of map including minimum and maximum or zoom level.
    //  Handling specify event through `events`.
    render() {
        return (
            <Parsimap
                id="map"
                height="100%"
                center={{ lat: 35.7575, lng: 51.41 }}
                zoom={18}
                minZoom={15}
                maxZoom={18}
                events={{
                    ready: map => {},
                    click: event => {},
                    mousedown: event => {},
                    mousemove: event => {},
                    movestart: event => {},
                    moveend: event => {},
                    zoomstart: event => {},
                    zoomend: event => {},
                }}
            />
        );
    }
}

وابستگی‌ها

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