راهنمای استفاده از سرویس نقشه می‌مپس

یاد بگیرید چگونه از سرویس نقشه می‌مپس در پروژه‌های خود استفاده کنید - API نقشه رستری ایرانی

فهرست مطالب

1
معرفی سرویس
2
استفاده با Leaflet
3
استفاده با OpenLayers
4
صفحه‌نمایش رتینا
5
مرجع API
6
موبایل (اندروید/iOS)
7
سوالات متداول
8
حالت تاریک (Dark Mode)

معرفی سرویس می‌مپس

سرویس نقشه می‌مپس یک سرویس رایگان برای ارائه نقشه‌های رستری با کیفیت بالا است

ویژگی‌های کلیدی

رایگان و بدون محدودیت

استفاده کاملاً رایگان بدون نیاز به ثبت‌نام یا کلید API

کیفیت بالا

نقشه‌های با کیفیت بالا و جزئیات دقیق

سازگاری کامل

سازگار با تمام کتابخانه‌های نقشه موجود

سرعت بالا

بهینه‌سازی شده برای سرعت بارگذاری بالا

استفاده با Leaflet

نحوه استفاده از سرویس می‌مپس با کتابخانه Leaflet

کد کامل HTML
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</head>
<body>
    <div id="map" style="height: 400px;"></div>
    <script>
        var map = L.map('map').setView([32.4279, 53.6880], 6);
        
        L.tileLayer('https://memaps.ir/hot/{z}/{x}/{y}.png', {
            attribution: '© می‌مپس',
            maxZoom: 18
        }).addTo(map);
    </script>
</body>
</html>
تنظیمات پیشرفته
// تنظیمات پیشرفته
L.tileLayer('https://memaps.ir/hot/{z}/{x}/{y}.png', {
    attribution: '© می‌مپس',
    maxZoom: 18,
    minZoom: 1,
    tileSize: 256,
    zoomOffset: 0,
    detectRetina: true
}).addTo(map);

// برای صفحه‌نمایش‌های رتینا (تشخیص خودکار)
L.tileLayer('https://memaps.ir/hot/{z}/{x}/{y}@2x.png', {
    attribution: '© می‌مپس',
    maxZoom: 18,
    detectRetina: true
}).addTo(map);

// اضافه کردن مارکر
L.marker([35.6892, 51.3890])
    .bindPopup('تهران')
    .addTo(map);

صفحه‌نمایش رتینا

بهینه‌سازی برای صفحه‌نمایش‌های با تراکم پیکسل بالا

روش اول: استفاده از ret

با استفاده از ret به جای hot، کاشی‌های 512 پیکسلی دریافت می‌کنید که برای صفحه‌نمایش‌های رتینا بهینه هستند. 

// برای صفحه‌نمایش‌های رتینا
L.tileLayer('https://memaps.ir/ret/{z}/{x}/{y}.png', {
    attribution: '© می‌مپس',
    maxZoom: 18,
    tileSize: 512,
    zoomOffset: -1
}).addTo(map);
روش دوم: تشخیص خودکار با @2x

سرویس می‌مپس به صورت هوشمند تشخیص می‌دهد و در صورت نیاز تایل‌های 512 پیکسلی ارسال می‌کند. 

// تشخیص خودکار رتینا
L.tileLayer('https://memaps.ir/hot/{z}/{x}/{y}@2x.png', {
    attribution: '© می‌مپس',
    maxZoom: 18,
    detectRetina: true
}).addTo(map);
مقایسه کیفیت
نوع اندازه تایل کیفیت کاربرد
hot 256px استاندارد عمومی
ret 512px عالی رتینا
hot@2x 512px عالی تشخیص خودکار
مثال‌های عملی
// OpenLayers با تشخیص خودکار
var layer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'https://memaps.ir/hot/{z}/{x}/{y}@2x.png',
        crossOrigin: 'anonymous'
    })
});

// Mapbox GL JS
map.addSource('memaps', {
    type: 'raster',
    tiles: ['https://memaps.ir/hot/{z}/{x}/{y}@2x.png'],
    tileSize: 256
});
نکات مهم:
روش ret:
  • ✅ tileSize: 512 - اندازه تایل را 512 پیکسل تنظیم کنید
  • ✅ zoomOffset: -1 - سطح زوم را یک واحد کاهش دهید
  • ✅ maxZoom: 18 - حداکثر سطح زوم
روش @2x:
  • ✅ detectRetina: true - تشخیص خودکار رتینا
  • ✅ بدون تنظیمات اضافی - سرویس خودکار تشخیص می‌دهد
  • ✅ سازگاری بهتر - با تمام کتابخانه‌ها

حالت تاریک (Dark Mode)

لایه‌های تاریک برای محیط‌های کم‌نور با دو کیفیت استاندارد و رتینا

Leaflet – استفاده از لایه‌های تاریک
// ایجاد نقشه
const map = L.map('map').setView([32.4279, 53.6880], 6);

// لایه‌های روشن
const hot = L.tileLayer('https://memaps.ir/hot/{z}/{x}/{y}.png', {
  maxZoom: 18
});
const ret = L.tileLayer('https://memaps.ir/ret/{z}/{x}/{y}.png', {
  maxZoom: 18,
  tileSize: 512,
  zoomOffset: -1
});

// لایه‌های تاریک
const dark = L.tileLayer('https://memaps.ir/dark/{z}/{x}/{y}.png', {
  maxZoom: 18
});
const darkRetina = L.tileLayer('https://memaps.ir/dark-retina/{z}/{x}/{y}.png', {
  maxZoom: 18,
  tileSize: 512,
  zoomOffset: -1
});

// لایه پیش‌فرض
hot.addTo(map);

// کنترل سوییچ لایه‌ها
L.control.layers(
  {
    'روشن (استاندارد)': hot,
    'روشن (رتینا)': ret,
    'تاریک (استاندارد)': dark,
    'تاریک (رتینا)': darkRetina
  },
  null,
  { collapsed: false }
).addTo(map);
OpenLayers – استفاده از لایه تاریک
// لایه تاریک استاندارد
const darkLayer = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: 'https://memaps.ir/dark/{z}/{x}/{y}.png',
    crossOrigin: 'anonymous'
  })
});

// لایه تاریک رتینا
const darkRetinaLayer = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: 'https://memaps.ir/dark-retina/{z}/{x}/{y}.png',
    crossOrigin: 'anonymous',
    tileGrid: ol.tilegrid.createXYZ({
      maxZoom: 18,
      tileSize: 512
    })
  })
});

const map = new ol.Map({
  target: 'map',
  layers: [darkLayer], // یا darkRetinaLayer
  view: new ol.View({
    center: ol.proj.fromLonLat([53.6880, 32.4279]),
    zoom: 6
  })
});
URLهای حالت تاریک
تاریک (استاندارد):
https://memaps.ir/dark/{z}/{x}/{y}.png
تاریک (رتینا):
https://memaps.ir/dark-retina/{z}/{x}/{y}.png

استفاده با OpenLayers

نحوه استفاده از سرویس می‌مپس با کتابخانه OpenLayers

کد کامل HTML
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.4.0/ol.css">
    <script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"></script>
</head>
<body>
    <div id="map" style="height: 400px;"></div>
    <script>
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'https://memaps.ir/hot/{z}/{x}/{y}.png'
            })
        });
        
        var map = new ol.Map({
            target: 'map',
            layers: [layer],
            view: new ol.View({
                center: ol.proj.fromLonLat([53.6880, 32.4279]),
                zoom: 6
            })
        });
    </script>
</body>
</html>
تنظیمات پیشرفته
// تنظیمات پیشرفته
var layer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'https://memaps.ir/hot/{z}/{x}/{y}.png',
        crossOrigin: 'anonymous',
        tileGrid: ol.tilegrid.createXYZ({
            maxZoom: 18,
            minZoom: 1
        })
    })
});

// برای صفحه‌نمایش‌های رتینا
var retinaLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'https://memaps.ir/ret/{z}/{x}/{y}.png',
        crossOrigin: 'anonymous',
        tileGrid: ol.tilegrid.createXYZ({
            maxZoom: 18,
            minZoom: 1,
            tileSize: 512
        })
    })
});

// تشخیص خودکار رتینا
var autoRetinaLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'https://memaps.ir/hot/{z}/{x}/{y}@2x.png',
        crossOrigin: 'anonymous',
        tileGrid: ol.tilegrid.createXYZ({
            maxZoom: 18,
            minZoom: 1
        })
    })
});

// اضافه کردن کنترل‌ها
var map = new ol.Map({
    target: 'map',
    layers: [layer],
    controls: ol.control.defaults().extend([
        new ol.control.FullScreen(),
        new ol.control.ScaleLine()
    ]),
    view: new ol.View({
        center: ol.proj.fromLonLat([53.6880, 32.4279]),
        zoom: 6,
        maxZoom: 18,
        minZoom: 1
    })
});

توسعه موبایل

نحوه استفاده از سرویس می‌مپس در اپلیکیشن‌های اندروید و iOS

📱 اندروید (Android)

استفاده با MapView
// در layout XML
<com.google.android.gms.maps.MapView
    android:id="@+id/mapView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

// در Activity
MapView mapView = findViewById(R.id.mapView);
mapView.onCreate(savedInstanceState);

mapView.getMapAsync(googleMap -> {
    // تنظیم نوع نقشه به None
    googleMap.setMapType(GoogleMap.MAP_TYPE_NONE);
    
    // اضافه کردن TileOverlay
    TileProvider tileProvider = new UrlTileProvider(256, 256) {
        @Override
        public URL getTileUrl(int x, int y, int zoom) {
            String url = String.format(
                "https://memaps.ir/hot/%d/%d/%d.png",
                zoom, x, y
            );
            try {
                return new URL(url);
            } catch (MalformedURLException e) {
                return null;
            }
        }
    };
    
                googleMap.addTileOverlay(new TileOverlayOptions()
                    .tileProvider(tileProvider));
            });
حالت تاریک
// تغییر URL به لایه تاریک (استاندارد)
String url = String.format(
    "https://memaps.ir/dark/%d/%d/%d.png",
    zoom, x, y
);

// برای رتینا تاریک (512px)
String url = String.format(
    "https://memaps.ir/dark-retina/%d/%d/%d.png",
    zoom, x, y
);
استفاده با WebView
// در layout XML
<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

// در Activity
WebView webView = findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);

String html = "<!DOCTYPE html>" +
    "<html><head>" +
    "<link rel='stylesheet' href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css' />" +
    "<script src='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'></script>" +
    "</head><body>" +
    "<div id='map' style='height: 100vh;'></div>" +
    "<script>" +
    "var map = L.map('map').setView([32.4279, 53.6880], 6);" +
    "L.tileLayer('https://memaps.ir/hot/{z}/{x}/{y}.png', {" +
    "attribution: '© می‌مپس'" +
    "}).addTo(map);" +
    "</script></body></html>";

webView.loadDataWithBaseURL(null, html, "text/html", "UTF-8", null);

// حالت تاریک با WebView
String htmlDark = "<!DOCTYPE html>" +
    "<html><head>" +
    "<link rel='stylesheet' href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css' />" +
    "<script src='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'></script>" +
    "</head><body>" +
    "<div id='map' style='height: 100vh;'></div>" +
    "<script>" +
    "var map = L.map('map').setView([32.4279, 53.6880], 6);" +
    "L.tileLayer('https://memaps.ir/dark/{z}/{x}/{y}.png', {" +
    "attribution: '© می‌مپس'" +
    "}).addTo(map);" +
    "</script></body></html>";
webView.loadDataWithBaseURL(null, htmlDark, "text/html", "UTF-8", null);

🍎 iOS

استفاده با MapKit
import MapKit

class MapViewController: UIViewController {
    @IBOutlet weak var mapView: MKMapView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // تنظیم مرکز نقشه
        let center = CLLocationCoordinate2D(
            latitude: 32.4279,
            longitude: 53.6880
        )
        let region = MKCoordinateRegion(
            center: center,
            span: MKCoordinateSpan(
                latitudeDelta: 10,
                longitudeDelta: 10
            )
        )
        mapView.setRegion(region, animated: false)
        
        // اضافه کردن TileOverlay
        let tileOverlay = CustomTileOverlay()
        mapView.addOverlay(tileOverlay, level: .aboveLabels)
    }
}

class CustomTileOverlay: MKTileOverlay {
    override init(urlTemplate: String?) {
        // حالت تاریک استاندارد
        super.init(urlTemplate: "https://memaps.ir/dark/{z}/{x}/{y}.png")
    }
}

// حالت تاریک رتینا
class CustomTileOverlayRetina: MKTileOverlay {
    override init(urlTemplate: String?) {
        super.init(urlTemplate: "https://memaps.ir/dark-retina/{z}/{x}/{y}.png")
    }
}
استفاده با WKWebView
import WebKit

class WebMapViewController: UIViewController {
    @IBOutlet weak var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let html = """
        <!DOCTYPE html>
        <html>
        <head>
            <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
            <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
        </head>
        <body>
            <div id="map" style="height: 100vh;"></div>
            <script>
                var map = L.map('map').setView([32.4279, 53.6880], 6);
                L.tileLayer('https://memaps.ir/hot/{z}/{x}/{y}.png', {
                    attribution: '© می‌مپس'
                }).addTo(map);
            </script>
        </body>
        </html>
        """
        
        webView.loadHTMLString(html, baseURL: nil)
    }
}

🦋 فلاتر (Flutter)

استفاده با flutter_map
// pubspec.yaml
dependencies:
  flutter_map: ^6.1.0
  latlong2: ^0.9.0

// در widget
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

class MapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('نقشه می‌مپس')),
      body: FlutterMap(
        options: MapOptions(
          center: LatLng(32.4279, 53.6880),
          zoom: 6.0,
        ),
        children: [
          TileLayer(
            urlTemplate: 'https://memaps.ir/dark/{z}/{x}/{y}.png',
            userAgentPackageName: 'com.example.app',
            attribution: '© می‌مپس',
          ),
        ],
      ),
    );
  }
}
استفاده با WebView
// pubspec.yaml
dependencies:
  webview_flutter: ^4.4.2

// در widget
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebMapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final html = '''
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    </head>
    <body>
        <div id="map" style="height: 100vh;"></div>
        <script>
            var map = L.map('map').setView([32.4279, 53.6880], 6);
            L.tileLayer('https://memaps.ir/dark/{z}/{x}/{y}.png', {
                attribution: '© می‌مپس'
            }).addTo(map);
        </script>
    </body>
    </html>
    ''';

    return Scaffold(
      appBar: AppBar(title: Text('نقشه وب')),
      body: WebView(
        initialData: WebViewData(
          data: html,
          mimeType: 'text/html',
          encoding: 'utf-8',
        ),
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

⚛️ React Native

استفاده با react-native-maps
// package.json
npm install react-native-maps

// در component
import React from 'react';
import { View, StyleSheet } from 'react-native';
import MapView, { UrlTile } from 'react-native-maps';

const MapScreen = () => {
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        initialRegion={{{
          latitude: 32.4279,
          longitude: 53.6880,
          latitudeDelta: 10,
          longitudeDelta: 10,
        }}}
        mapType="none"
      >
        <UrlTile
          urlTemplate="https://memaps.ir/dark/{z}/{x}/{y}.png"
        />
      </MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
});

export default MapScreen;
استفاده با WebView
// package.json
npm install react-native-webview

// در component
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';

const WebMapScreen = () => {
  const html = `
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    </head>
    <body>
        <div id="map" style="height: 100vh;"></div>
        <script>
            var map = L.map('map').setView([32.4279, 53.6880], 6);
            L.tileLayer('https://memaps.ir/dark/{z}/{x}/{y}.png', {
                attribution: '© می‌مپس'
            }).addTo(map);
        </script>
    </body>
    </html>
  `;

  return (
    <View style={styles.container}>
      <WebView
        source={{{ html }}}
        style={styles.webview}
        javaScriptEnabled={true}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    flex: 1,
  },
});

export default WebMapScreen;

💚 Vue.js

استفاده با Leaflet
// package.json
npm install leaflet vue-leaflet

// در component
<template>
  <div id="map" style="height: 400px;"></div>
</template>

<script>
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

export default {
  name: 'MapComponent',
  mounted() {
    // ایجاد نقشه
    this.map = L.map('map').setView([32.4279, 53.6880], 6);
    
    // اضافه کردن لایه نقشه
    L.tileLayer('https://memaps.ir/dark/{z}/{x}/{y}.png', {
      attribution: '© می‌مپس',
      maxZoom: 18,
    }).addTo(this.map);
  },
  beforeUnmount() {
    if (this.map) {
      this.map.remove();
    }
  },
};
</script>

<style scoped>
#map {
  width: 100%;
  border-radius: 8px;
}
</style>
استفاده با OpenLayers
// package.json
npm install ol

// در component
<template>
  <div id="map" style="height: 400px;"></div>
</template>

<script>
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { fromLonLat } from 'ol/proj';
import 'ol/ol.css';

export default {
  name: 'OpenLayersMap',
  mounted() {
    // ایجاد نقشه
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new XYZ({
            url: 'https://memaps.ir/dark/{z}/{x}/{y}.png',
            attributions: '© می‌مپس',
          }),
        }),
      ],
      view: new View({
        center: fromLonLat([53.6880, 32.4279]),
        zoom: 6,
        maxZoom: 18,
      }),
    });
  },
  beforeUnmount() {
    if (this.map) {
      this.map.setTarget(undefined);
    }
  },
};
</script>

<style scoped>
#map {
  width: 100%;
  border-radius: 8px;
}
</style>
نکات مهم برای توسعه موبایل و وب:
  • ✅ اندروید: نیاز به Google Play Services
  • ✅ iOS: نیاز به MapKit framework
  • ✅ فلاتر: استفاده از flutter_map یا WebView
  • ✅ React Native: react-native-maps یا WebView
  • ✅ Vue.js: Leaflet یا OpenLayers
  • ✅ WebView: ساده‌ترین روش برای موبایل
  • ✅ کش: برای بهبود عملکرد از کش محلی استفاده کنید
  • ✅ اینترنت: بررسی اتصال اینترنت قبل از بارگذاری
  • ✅ خطا: مدیریت خطاهای شبکه
  • ✅ حافظه: مدیریت حافظه برای نقشه‌های بزرگ
  • ✅ بهینه‌سازی: تنظیم سطح زوم مناسب
  • ✅ Responsive: طراحی واکنش‌گرا برای همه سایزها

مرجع API

اطلاعات کامل درباره API سرویس می‌مپس

URL Templates

استاندارد:
https://memaps.ir/hot/{z}/{x}/{y}.png
رتینا:
https://memaps.ir/ret/{z}/{x}/{y}.png
تشخیص خودکار:
https://memaps.ir/hot/{z}/{x}/{y}@2x.png
تاریک (استاندارد):
https://memaps.ir/dark/{z}/{x}/{y}.png
تاریک (رتینا):
https://memaps.ir/dark-retina/{z}/{x}/{y}.png

پارامترها

پارامتر توضیح محدوده
{z} سطح زوم 1 تا 20
{x} مختصات X تایل 0 تا 2^z-1
{y} مختصات Y تایل 0 تا 2^z-1

قابلیت‌ها

  • ✅ استفاده رایگان و بدون محدودیت
  • ✅ بدون نیاز به کلید API
  • ✅ پشتیبانی از CORS
  • ✅ بهینه‌سازی شده برای سرعت بالا
  • ✅ تشخیص خودکار صفحه‌نمایش‌های رتینا
  • ✅ پشتیبانی از تایل‌های 512 پیکسلی

سوالات متداول

پاسخ سوالات رایج درباره سرویس می‌مپس

بله، استفاده از سرویس می‌مپس کاملاً رایگان است و هیچ محدودیتی ندارد.

خیر، هیچ نیازی به ثبت‌نام یا دریافت کلید API ندارید.

سرویس با تمام کتابخانه‌های نقشه مانند Leaflet، OpenLayers، Mapbox GL JS و غیره سازگار است.

حداکثر سطح زوم 20 است که برای اکثر کاربردها کافی است.