Map.ir

https://help.map.ir/documentation
Admin
Map.ir is an Iranian mapping and location services platform providing APIs for routing, geocoding,...
Tokens:8,744
Snippets:24
Trust Score:8.6
Update:9 months ago
Show doc for...
Tokens:
Raw
### Geofence API Documentation

Source: https://help.map.ir/documentation/%d8%aa%d8%b9%d8%b1%db%8c%d9%81-%d8%b3%d8%b1%d9%88%db%8c%d8%b3-2

This section details the Geofence API, including its endpoints, parameters, and usage examples.

```APIDOC
## Geofence API Documentation

### Description
This API provides functionalities related to geofencing, allowing users to define and manage geographical boundaries for various applications.

### Endpoints
The API includes several endpoints for managing geofences, such as creating, retrieving, updating, and deleting geofences.

### Parameters
#### Path Parameters
- **geofenceId** (string) - Required - The unique identifier for a geofence.

#### Query Parameters
- **status** (string) - Optional - Filters geofences by their status (e.g., 'active', 'inactive').
- **radius** (number) - Optional - Specifies a radius for geofence searches.

#### Request Body
- **name** (string) - Required - The name of the geofence.
- **coordinates** (array) - Required - An array of geographical coordinates defining the geofence boundary.
- **metadata** (object) - Optional - Additional information associated with the geofence.

### Request Example
```json
{
  "name": "Office Area",
  "coordinates": [
    [35.6895, 51.3890],
    [35.6900, 51.3900],
    [35.6910, 51.3895]
  ],
  "metadata": {
    "owner": "Admin",
    "alert_level": "high"
  }
}
```

### Response
#### Success Response (200)
- **id** (string) - The unique identifier of the created geofence.
- **name** (string) - The name of the geofence.
- **createdAt** (string) - The timestamp when the geofence was created.

#### Response Example
```json
{
  "id": "geo_12345abc",
  "name": "Office Area",
  "createdAt": "2023-10-27T10:00:00Z"
}
```

### Swagger
Information on how to access and use the Swagger documentation for the Geofence API can be found [here](link_to_swagger_docs). Swagger provides an interactive interface for exploring and testing API endpoints.

### Postman
Collection files for Postman are available to help you easily import and test the Geofence API. You can download them [here](link_to_postman_collection).
```

--------------------------------

### Color Route on Map Click (JavaScript)

Source: https://help.map.ir/documentation/websdk-docs/draw-route

Paints the route again with new colors. This example demonstrates repainting the route when the map is clicked, allowing for dynamic color changes.

```javascript
$(document).ready(function() {
  var app = new Mapp({
    element: '#app',
    presets: {
      latlng: {
        lat: 32,
        lng: 52,
      },
      zoom: 6
    },
    apiKey: 'Your API Key'
  });
  app.addLayers();
  app.drawRoute({
    start: [35.732579, 51.456871],
    end: [35.661759, 51.300659],
    mode: 'car',
    draggable: true,
    fit: true,
  });
  app.map.on('click', function(){
    app.colorRoute({
      colors: ['#3F51B5', '#4CAF50'],
    });
  });
});
```

--------------------------------

### Basic HTML Structure for Map Integration

Source: https://help.map.ir/documentation/wsdk_examples/maxbound

This HTML snippet provides the basic structure required to host the map application. It includes a div with the ID 'app' which will be targeted by the JavaScript to render the map. This is a minimal setup for integrating the Web SDK.

```html
<div id="app"></div>

```

--------------------------------

### Map Core Functions

Source: https://help.map.ir/documentation/reactsdk-examples/reactsdk-basicmap

Core functions for interacting with the map view, including getting points, coordinates, bounds, and camera information.

```APIDOC
## getPointInView

### Description
Converts geographic coordinates to pixel coordinates within the map view.

### Method
GET

### Endpoint
`/websites/help_map_ir/docs/getPointInView`

### Parameters
#### Query Parameters
- **longitude** (number) - Required - The longitude of the geographic coordinate.
- **latitude** (number) - Required - The latitude of the geographic coordinate.

### Response
#### Success Response (200)
- **x** (number) - The x-coordinate in pixels.
- **y** (number) - The y-coordinate in pixels.

#### Response Example
```json
{
  "x": 100,
  "y": 200
}
```

## getCoordinateFromView

### Description
Converts pixel coordinates within the map view to geographic coordinates.

### Method
GET

### Endpoint
`/websites/help_map_ir/docs/getCoordinateFromView`

### Parameters
#### Query Parameters
- **x** (number) - Required - The x-coordinate in pixels.
- **y** (number) - Required - The y-coordinate in pixels.

### Response
#### Success Response (200)
- **longitude** (number) - The longitude of the geographic coordinate.
- **latitude** (number) - The latitude of the geographic coordinate.

#### Response Example
```json
{
  "longitude": -74.0060,
  "latitude": 40.7128
}
```

## getVisibleBounds

### Description
Retrieves the bounding box of the currently visible map area.

### Method
GET

### Endpoint
`/websites/help_map_ir/docs/getVisibleBounds`

### Response
#### Success Response (200)
- **southwest** (object) - The southwest corner of the bounds.
  - **longitude** (number) - The longitude of the southwest corner.
  - **latitude** (number) - The latitude of the southwest corner.
- **northeast** (object) - The northeast corner of the bounds.
  - **longitude** (number) - The longitude of the northeast corner.
  - **latitude** (number) - The latitude of the northeast corner.

#### Response Example
```json
{
  "southwest": {
    "longitude": -74.01,
    "latitude": 40.70
  },
  "northeast": {
    "longitude": -73.99,
    "latitude": 40.72
  }
}
```

## getZoom

### Description
Gets the current zoom level of the map.

### Method
GET

### Endpoint
`/websites/help_map_ir/docs/getZoom`

### Response
#### Success Response (200)
- **zoom** (number) - The current zoom level.

#### Response Example
```json
{
  "zoom": 12.5
}
```

## getCenter

### Description
Gets the geographic coordinates of the map's center.

### Method
GET

### Endpoint
`/websites/help_map_ir/docs/getCenter`

### Response
#### Success Response (200)
- **longitude** (number) - The longitude of the map center.
- **latitude** (number) - The latitude of the map center.

#### Response Example
```json
{
  "longitude": -74.0060,
  "latitude": 40.7128
}
```
```

--------------------------------

### Remove Multiple Polylines with Map.removePolylines() in JavaScript

Source: https://help.map.ir/documentation/websdk-docs/add-polyline

Shows how to remove all polylines within a specified group using the Map.removePolylines() function. This function takes a group name as input and is useful for clearing multiple related polylines at once, for example, when a user wants to reset the map.

```javascript
$(document).ready(function() {
	var app = new Mapp({
		element: '#app',
		presets: {
			latlng: {
				lat: 32,
				lng: 52,
			},
			zoom: 6
		},
		apiKey: 'Your API Key'
	});

	app.addLayers();

	app.addPolyline({
		name: 'polyline-1',
		coordinates: [
			[۳۵, ۴۸],
			[۳۷, ۵۱],
		],
		popup: false,
		on: {
			click: function(){
				app.removePolylines({
					group: app.groups.features.polylines,
				});
			},
		},
	});

	app.addPolyline({
		name: 'polyline-2',
		coordinates: [
			[۳۲, ۵۵],
			[۳۰, ۴۵],
		],
		popup: false,
		on: {
			click: function(){
				app.removePolylines({
					group: app.groups.features.polylines,
				});
			},
		},
	});
});
```

--------------------------------

### Map Interaction and Display

Source: https://help.map.ir/documentation/reactsdk-examples/reactsdk-basicmap

APIs for taking map snapshots, managing markers, and configuring map sources and layers.

```APIDOC
## takeSnap

### Description
Takes a snapshot of the current map view.

### Method
GET

### Endpoint
`/websites/help_map_ir/docs/takeSnap`

### Response
#### Success Response (200)
- **snapshotUrl** (string) - A URL or data URI representing the map snapshot.

#### Response Example
```json
{
  "snapshotUrl": "data:image/png;base64,iVBORw0KGgo..."
}
```

## Marker API

### Description
APIs for adding, removing, and updating markers on the map.

### Method
POST, DELETE

### Endpoint
`/websites/help_map_ir/docs/marker`

### Parameters
#### Request Body (for POST)
- **id** (string) - Required - Unique identifier for the marker.
- **coordinates** (object) - Required - The geographic coordinates of the marker.
  - **longitude** (number) - Required.
  - **latitude** (number) - Required.
- **properties** (object) - Optional - Custom properties for the marker.

### Request Example (Add Marker)
```json
{
  "id": "marker-1",
  "coordinates": {
    "longitude": -74.0060,
    "latitude": 40.7128
  },
  "properties": {
    "title": "My Location"
  }
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Marker added successfully."
}
```

## ShapeSource

### Description
Represents a data source for vector or raster tile data, or GeoJSON data.

*(Note: This is a concept for data sources and might not have a direct API endpoint for instantiation in this format. Its usage is typically within map configuration.)*

## Line Layer

### Description
Defines how line strings or polygons with the `line` interior ring are rendered.

*(Note: This is a layer definition concept and is typically configured within the map's style.)*

## Fill Layer

### Description
Defines how polygons are rendered.

*(Note: This is a layer definition concept and is typically configured within the map's style.)*

## Symbol Layer

### Description
Defines how points are rendered as symbols or text.

*(Note: This is a layer definition concept and is typically configured within the map's style.)*

## Map with Raster

### Description
Displays a map using raster tiles as the base layer.

*(Note: This refers to map configuration and setup, likely involving specifying a raster source and style.)*

## Camera API

### Description
APIs for controlling and querying the map's camera, including its position, zoom, pitch, and bearing.

*(Note: This is a conceptual API group. Specific endpoints for setting/getting camera properties would be detailed elsewhere.)*

## UserLocation

### Description
Provides information about the user's current location.

*(Note: This is a feature for accessing device location. Specific API calls would depend on the underlying platform integrations.)*
```

--------------------------------

### Routing API Endpoints Overview

Source: https://help.map.ir/documentation/postman

This section provides an overview of the available endpoints for the Routing API. Each endpoint is designed for specific routing-related functionalities.

```APIDOC
## Routing API Documentation

This document outlines the available endpoints, parameters, and examples for the Routing API.

### Endpoints
The Routing API offers several endpoints to facilitate various routing functionalities.

- `/route/directions`: Get driving directions between two points.
- `/route/matrix`: Calculate travel times and distances for multiple origins and destinations.
- `/route/elevation`: Get elevation data for a given path.
- `/route/ ஆதله`: Get information about points of interest along a route.

### Input Parameters
Refer to the specific endpoint documentation for detailed input parameter requirements.

### Output Parameters
Refer to the specific endpoint documentation for detailed output parameter specifications.

### Swagger
Access the Swagger documentation for interactive API exploration: [Link to Swagger Docs]

### Postman
Import the Postman collection for easy API testing: [Link to Postman Collection]
```

--------------------------------

### Routing API Endpoints

Source: https://help.map.ir/documentation/%d8%aa%d8%b9%d8%b1%db%8c%d9%81-%d8%b3%d8%b1%d9%88%db%8c%d8%b3

This section details the available endpoints for the Routing API, including their methods, parameters, and expected request/response formats.

```APIDOC
## Routing API Documentation

This document outlines the various endpoints available within the Routing API.

### Endpoints

This API provides several endpoints for routing-related functionalities. The specific endpoints and their functionalities are detailed below.

### Parameters

#### Input Parameters
- **param_name** (type) - Required/Optional - Description of the input parameter.

#### Output Parameters
- **param_name** (type) - Description of the output parameter.

### Swagger

Information regarding Swagger documentation for this API can be found [here](swagger_link).

### Postman

Collection files for Postman can be accessed [here](postman_link).
```

--------------------------------

### Add Clustered Markers to Map - JavaScript

Source: https://help.map.ir/documentation/wsdk_examples/marker-cluster

This snippet demonstrates how to add a cluster of markers to a map using the Web SDK. It requires an API key and utilizes Leaflet.markercluster for clustering functionality. The input is an array of marker data, and the output is markers displayed on the map, grouped into clusters.

```javascript
$(document).ready(function() {
    var app = new Mapp({
    element: '#app',
    presets: {
      latlng: {
        lat: 37,
        lng: 53,
      },
      zoom: 6,
    },
    apikey: 'Your API Key',
  });
  
  app.addVectorLayers();
    
    var markers = L.markerClusterGroup({ chunkedLoading: true });
    
    addressPoints.forEach(function(item, index) {
        var a = item;
    var title = a[2];
    var marker = app.addMarker({
      name: 'test-marker' + index,
      popup: {
        title: {
          html: title,
          i18n: '',
        },
        description: {
          html: 'Description',
          i18n: '',
        },
      },
      latlng: {
        lat: (a[0]*(-1)) - 5,
        lng: a[1]-122,
      },
      popupOpen: true,
            group: markers
    });
    markers.addLayer(marker);
    });
    
    app.map.addLayer(markers);
  
});
```

```html
<div id="app"></div>
<script src="https://leaflet.github.io/Leaflet.markercluster/example/realworld.10000.js"></script>
```

```css
@charset "utf-8";
html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
html {
    font-size: 10px;
}
body {
    overflow: hidden;
}
#app {
    width: 100%;
    height: 100%;
}
```

--------------------------------

### ایجاد HTML پاپ‌آپ سفارشی با Mapp و اتصال به نشانگر

Source: https://help.map.ir/documentation/websdk-docs/add-popup

این قطعه کد نحوه ایجاد یک پاپ‌آپ سفارشی با استفاده از تابع generatePopupHtml را نشان می‌دهد. این تابع برای تولید HTML پاپ‌آپ استفاده می‌شود که سپس با استفاده از متد bindPopup در Leaflet به یک نشانگر متصل می‌شود. این قابلیت امکان تعریف عنوان، توضیحات و کلاس‌های CSS سفارشی را فراهم می‌کند.

```javascript
$(document).ready(function() {
	var app = new Mapp({
		element: '#app',
		presets: {
			latlng: {
				lat: 32,
				lng: 52,
			},
			zoom: 6
		},
		i18n: {
			fa: {
				'custom-popup-title': 'پاپ‎آپ چند زبانه',
				'custom-popup-description': 'برای دیدن نتیجه زبان سایت را از منو عوض کنید.',
			},
			en: {
				'custom-popup-title': 'Multilingual popup',
				'custom-popup-description': 'Change app language from the menu to check the result.',
			},
		},
		locale: 'fa',
		apiKey: 'Your API Key'
	});

	app.addLayers();

	app.addMenu();

	app.addLocale();

	var marker = app.addMarker({
		name: 'marker',
		latlng: {
			lat: 37.375,
			lng: 49.759,
		},
		icon: app.icons.red,
		popup: false,
	});

	var popup = app.generatePopupHtml({
		title: {
			i18n: 'custom-popup-title',
		},
		description: {
			i18n: 'custom-popup-description',
		},
		class: 'custom-css-class',
	});

	marker.bindPopup(popup, {
		closeButton: false,
	});
});
```

--------------------------------

### Restrict Map Bounds using Web SDK (JavaScript)

Source: https://help.map.ir/documentation/wsdk_examples/maxbound

This JavaScript code snippet demonstrates how to initialize a map using the Mapp library and restrict its bounds to a specific geographic area. It utilizes the `setMaxBounds` method to enforce the defined `southWest` and `northEast` coordinates. Ensure you have a valid API key and have included the necessary Web SDK.

```javascript
$(document).ready(function() {
  const app = new Mapp({
    element: '#app',
    presets: {
      latlng: {
        lat: 32,
        lng: 52
      },
      zoom: 10
    },
    apiKey: 'your-api-key'
  });

  app.addLayers();

  const southWest = L.latLng(35.564629176277855, 51.065826416015625),
    northEast = L.latLng(35.81335872633348, 51.73187255859375),
    bounds = L.latLngBounds(southWest, northEast);

  //* Restrict to current bound
  // app.map.setMaxBounds(app.map.getBounds());

  // Restrict to other bounds
  app.map.setMaxBounds(bounds);
});

```

--------------------------------

### Draw Route on Map (JavaScript)

Source: https://help.map.ir/documentation/websdk-docs/draw-route

Draws possible routes between two locations on the map. It supports various modes (e.g., 'car'), allows routes to be draggable, and offers styling and color selection options. The function can also fit the map view to the drawn route.

```javascript
$(document).ready(function() {
  var app = new Mapp({
    element: '#app',
    presets: {
      latlng: {
        lat: 32,
        lng: 52,
      },
      zoom: 6
    },
    apiKey: 'Your API Key'
  });
  app.addLayers();
  app.drawRoute({
    start: [35.732579, 51.456871],
    end: [35.661759, 51.300659],
    mode: 'car',
    draggable: true,
    styles: {
      core: {
        weight: 3,
        opacity: 1,
      },
      shadow: {
        weight: 11,
        opacity: .3,
      },
    },
    colors: ['#F44336', '#FF9800', '#607D8B'],
    select: {
      enabled: true,
      color: '#2196F3',
    },
    fit: true,
  });
});
```

--------------------------------

### Feature Querying

Source: https://help.map.ir/documentation/reactsdk-examples/reactsdk-basicmap

Functions for querying features rendered on the map at specific points or within rectangular areas.

```APIDOC
## queryRenderedFeaturesAtPoint

### Description
Retrieves features that are rendered at a specific point on the map.

### Method
GET

### Endpoint
`/websites/help_map_ir/docs/queryRenderedFeaturesAtPoint`

### Parameters
#### Query Parameters
- **x** (number) - Required - The x-coordinate of the point.
- **y** (number) - Required - The y-coordinate of the point.
- **layerIds** (array) - Optional - An array of layer IDs to filter features by.

### Response
#### Success Response (200)
- **features** (array) - An array of GeoJSON feature objects.

#### Response Example
```json
{
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-74.0060, 40.7128]
      },
      "properties": {
        "name": "Example Point"
      }
    }
  ]
}
```

## queryRenderedFeaturesInRect

### Description
Retrieves features that are rendered within a specified rectangular area on the map.

### Method
GET

### Endpoint
`/websites/help_map_ir/docs/queryRenderedFeaturesInRect`

### Parameters
#### Query Parameters
- **camera** (object) - Required - The camera state defining the viewport.
  - **center** (object) - Required - The center of the viewport.
    - **longitude** (number) - Required.
    - **latitude** (number) - Required.
  - **zoom** (number) - Required - The zoom level.
  - **bearing** (number) - Required - The bearing of the camera.
  - **pitch** (number) - Required - The pitch of the camera.
- **bounds** (object) - Required - The bounding box of the area.
  - **southwest** (object) - Required.
    - **longitude** (number) - Required.
    - **latitude** (number) - Required.
  - **northeast** (object) - Required.
    - **longitude** (number) - Required.
    - **latitude** (number) - Required.
- **layerIds** (array) - Optional - An array of layer IDs to filter features by.

### Response
#### Success Response (200)
- **features** (array) - An array of GeoJSON feature objects.

#### Response Example
```json
{
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [[[-74.01, 40.70], [-73.99, 40.70], [-73.99, 40.72], [-74.01, 40.72], [-74.01, 40.70]]]
      },
      "properties": {
        "name": "Example Area"
      }
    }
  ]
}
```
```

--------------------------------

### Add Advanced Polyline with Customizations - JavaScript

Source: https://help.map.ir/documentation/websdk-docs/add-polyline

This snippet demonstrates how to add an advanced polyline using the Map.addPolyline() function. It configures coordinates, styles, popups with internationalization, event listeners for click and contextmenu, and specifies 'canvas' as the renderer. The polyline is set to fit the map view and has history disabled.

```javascript
$(document).ready(function() {
	var app = new Mapp({
		element: '#app',
		presets: {
			latlng: {
				lat: 32,
				lng: 52,
			},
			zoom: 6
		},
		i18n: {
			fa: {
				'polyline-title': 'عنوان',
				'polyline-description': 'توضیح',
			},
			en: {
				'polyline-title': 'Title',
				'polyline-description': 'Description',
			},
		},
		locale: 'en',
		apiKey: 'Your API Key'
	});

	app.addLayers();

	app.addPolyline({
		name: 'advanced-polyline',
		coordinates: [
			[۳۷.۲۷۲, ۴۹.۵۹۴],
			[۳۵.۶۷۸, ۵۱.۳۸۷],
		],
		style: app.styles.default.polyline,
		popup: {
			title: {
		apiKey: 'Your API Key'
		apiKey: 'Your API Key'
				i18n: 'polyline-title',
			},
			description: {
				i18n: 'polyline-description',
			},
			// custom: 'Custom popup',
			class: 'polyline-class',
			open: true,
		},
		fit: true,
		history: false,
		on: {
			click: function() {
				console.log('Click callback');
			},
			contextmenu: function() {
				console.log('Contextmenu callback');
			},
		},
		renderer: 'canvas',
	});
});
```

--------------------------------

### روش اول: مارکر ثابت با به‌روزرسانی موقعیت (JavaScript)

Source: https://help.map.ir/documentation/wsdk_examples/marker-static

این قطعه کد نحوه ایجاد یک مارکر ثابت در مرکز نقشه را با استفاده از Map IR توضیح می‌دهد. مارکر با هر تغییر مکان یا زوم نقشه به‌روز می‌شود. موقعیت مارکر با کلیک روی آن در کنسول مرورگر چاپ می‌شود. نیاز به کلید API مپ رو دارد.

```javascript
$(document).ready(function() {
  var app = new Mapp({
    element: "#app",
    presets: {
      latlng: {
        lat: 35.73249,
        lng: 51.42268
      },
      zoom: 10
    },
    apiKey: "Your API Key"
  });

  app.addVectorLayers();
  
  // Add in a crosshair for the map
  var crosshairIcon = L.icon({
    iconUrl: 'https://cloud.son.ir/index.php/s/qVUHj7HJSr1A7MK/download',
    iconSize:     [20, 20], // size of the icon
    iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
  });
  var crosshairMarker = new L.marker(app.map.getCenter(), {icon: crosshairIcon, clickable:false});
  crosshairMarker.addTo(app.map);
  
  // Move the crosshair to the center of the map when the user pans
  app.map.on('move', function(e) {
    crosshairMarker.setLatLng(app.map.getCenter());
  });
  
  crosshairMarker.on('click', function(event){
    console.log(event.latlng)
  });
});
```

```css
@charset "utf-8";
html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
html {
    font-size: 10px;
}
body {
    overflow: hidden;
}
#app {
    width: 100%;
    height: 100%;
}
```

```html
<div id="app"></div>
```

--------------------------------

### Remove Single Polyline with Map.removePolyline() in JavaScript

Source: https://help.map.ir/documentation/websdk-docs/add-polyline

Demonstrates how to remove a single polyline by its name using the Map.removePolyline() function. This function requires the polyline's name as an argument. It's useful for interactive maps where users can select and remove specific polylines.

```javascript
$(document).ready(function() {
	var app = new Mapp({
		element: '#app',
		presets: {
			latlng: {
				lat: 32,
				lng: 52,
			},
			zoom: 6
		},
		i18n: {
			fa: {
				'polyline-title': 'شکل پاک‎شدنی',
				'polyline-description': 'برای حذف شکل روی آن کلیک کنید.',
			},
			en: {
				'polyline-title': 'Removable polyline',
				'polyline-description': 'Click on the map icon to remove it from map.',
			},
		},
		locale: 'fa',
		apiKey: 'Your API Key'
	});

	app.addLayers();

	app.addPolyline({
		name: 'polyline',
		coordinates: [
			[۳۷.۲۷۲, ۴۹.۵۹۴],
			[۳۵.۶۷۸, ۵۱.۳۸۷],
		],
		popup: {
			title: {
				i18n: 'polyline-title',
			},
			description: {
				i18n: 'polyline-description',
			},
			open: true,
		},
		on: {
			click: function(){
				app.removePolyline({
					name: 'polyline',
				});
			},
		},
	});
});
```

--------------------------------

### روش دوم: مارکر ثابت با المان HTML (JavaScript)

Source: https://help.map.ir/documentation/wsdk_examples/marker-static

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

```javascript
import './api-key';

$(document).ready(function () {
  var app = new Mapp({
    element: '#app',
    presets: {
      latlng: {
        lat: 35.73249,
        lng: 51.42268,
      },
      zoom: 10,
    },
    apiKey: Your_API_Key,
  });

  app.addVectorLayers();

  // Add in a crosshair for the map
  var centerMarker = $('#center-marker');

  // Move the crosshair to the center of the map when the user pans
  app.map.on('dragend', function (e) {
    console.log(app.map.getCenter());
  });
});

```

```css
@charset "utf-8";
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
html {
  font-size: 10px;
}
body {
  overflow: hidden;
  position: relative;
}
#app {
  width: 100%;
  height: 100%;
}

#center-marker {
  width: 42px;
  height: 42px;
  background-image: url([image url or base64 string]);
  background-repeat: no-repeat;
  position: absolute;
  z-index: 99999;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  cursor: pointer;
}
```

```html
<div id="app"></div>
<div id="center-marker"></div>
```

--------------------------------

### CSS for Map Container

Source: https://help.map.ir/documentation/wsdk_examples/maxbound

This CSS code sets the basic styling for the HTML document and the map container. It ensures that the html, body, and the #app div occupy the full width and height of the viewport, making the map take up the entire screen. The `overflow: hidden;` on the body prevents scrollbars.

```css
@charset "utf-8";
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
html {
  font-size: 10px;
}
body {
  overflow: hidden;
}
#app {
  width: 100%;
  height: 100%;
}

```

--------------------------------

### Remove Route from Map (JavaScript)

Source: https://help.map.ir/documentation/websdk-docs/draw-route

Removes a previously drawn route from the map. This function takes no options and simply clears the route display.

```javascript
Map.removeRoute();
```
Tokens:
Raw