\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u06cc\u06a9 \u0645\u0627\u0631\u06a9\u0631 \u0628\u0627 \u0627\u0645\u06a9\u0627\u0646\u0627\u062a \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0631\u0648 \u0628\u0647 \u0646\u0642\u0634\u0645\u0648\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645. \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a\u060c \u0627\u0645\u06a9\u0627\u0646\u0627\u062a\u06cc \u0646\u0638\u06cc\u0631 \u062c\u0627\u0628\u0647\u200c\u062c\u0627 \u06a9\u0631\u062f\u0646\u060c \u062a\u0639\u0631\u06cc\u0641 \u0639\u0645\u0644\u06cc\u0627\u062a\u200c\u0647\u0627\u06cc \u06a9\u0644\u06cc\u06a9 \u0648 \u0631\u0627\u0633\u062a\u200c\u06a9\u0644\u06cc\u06a9 \u0648 \u0645\u0648\u0627\u0631\u062f \u062f\u06cc\u06af\u0631 \u0645\u06cc\u200c\u062a\u0648\u0646\u0647 \u062a\u0639\u0631\u06cc\u0641 \u0628\u0634\u0647. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0632 \u06a9\u062f\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0647\u200c\u0627\u06cc\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0628\u0627\u06cc\u062f \u06a9\u0644\u06cc\u062f API \u0646\u0642\u0634\u0647\u0654 \u0645\u067e \u0631\u0648 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u062f\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n\n\n\n

\u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a WebSDK\u0647\u0627\u06cc \u0646\u0642\u0634\u0647\u200c\u06cc \u0645\u067e \u0628\u0647 \u0627\u06cc\u0646\u062c\u0627<\/a> \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f. \ud83c\udf0d<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n

$(document).ready(function() {\n  var app = new Mapp({\n    element: \"#app\",\n    presets: {\n      latlng: {\n        lat: 32,\n        lng: 52\n      },\n      zoom: 6\n    },\n    i18n: {\n      fa: {\n        \"marker-title\": \"\u0639\u0646\u0648\u0627\u0646\",\n        \"marker-description\": \"\u062a\u0648\u0636\u06cc\u062d\"\n      },\n      en: {\n        \"marker-title\": \"Title\",\n        \"marker-description\": \"Description\"\n      }\n    },\n    locale: \"en\",\n    apiKey: 'your-api-key'\n  });\n\n  \/\/leaflet-like feature group\n  var markers = L.featureGroup();\n\n  app.addLayers();\n  var marker = app.addMarker({\n    name: \"advanced-marker\",\n    latlng: {\n      lat: 37.375,\n      lng: 49.759\n    },\n    icon: app.icons.red,\n    popup: {\n      title: {\n        i18n: \"marker-title\"\n      },\n      description: {\n        i18n: \"marker-description\"\n      },\n      \/\/ custom: 'Custom popup',\n      class: \"marker-class\",\n      open: true\n    },\n    pan: false,\n    draggable: true,\n    history: false,\n    on: {\n      click: function() {\n        console.log(\"Click callback\");\n      },\n      contextmenu: function() {\n        console.log(\"Contextmenu callback\");\n      }\n    },\n\n    before: function() {\n      console.log(\"marker has not been created yet\");\n    },\n\n    after: function() {\n      console.log(\"marker has been created yet\");\n    },\n\n    group: markers,\n\n    \/\/ types: 'marker' , 'cricle' , 'circle-marker'\n    type: \"circle-marker\",\n\n    \/\/ radius of circle-marker\n    radius: 20,\n\n    \/\/ renderer would be 'svg' or 'canvas'\n    renderer: \"canvas\"\n  });\n});\n<\/pre>\n\n\n\n@charset \"utf-8\";\nhtml, body {\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n}\nhtml {\n    font-size: 10px;\n}\nbody {\n    overflow: hidden;\n}\n#app {\n    width: 100%;\n    height: 100%;\n}<\/pre>\n\n\n\n<div id=\"app\"><\/div><\/pre>\n\n\n