{"id":95020,"date":"2025-01-28T23:15:57","date_gmt":"2025-01-28T19:45:57","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/integrer-une-map-avec-leaflet-sur-un-projet-next-3l4o\/"},"modified":"2025-01-28T23:15:57","modified_gmt":"2025-01-28T19:45:57","slug":"integrer-une-map-avec-leaflet-sur-un-projet-next-3l4o","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/integrer-une-map-avec-leaflet-sur-un-projet-next-3l4o\/","title":{"rendered":"\u06cc\u06a9 \u0646\u0642\u0634\u0647 \u0631\u0627 \u0628\u0627 \u062c\u0632\u0648\u0647 \u062f\u0631 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0628\u0639\u062f\u06cc \u0627\u062f\u063a\u0627\u0645 \u06a9\u0646\u06cc\u062f"},"content":{"rendered":"<div data-article-id=\"2246098\" id=\"article-body\">\n<p>\u062f\u0631 \u0647\u0641\u062a\u0647 \u0647\u0627\u06cc \u0627\u062e\u06cc\u0631 \u0645\u0646 \u0631\u0648\u06cc \u067e\u0631\u0648\u0698\u0647 \u0627\u06cc \u06a9\u0627\u0631 \u06a9\u0631\u062f\u0647 \u0627\u0645 \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u062f\u063a\u0627\u0645 \u06a9\u0627\u0631\u062a \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062c\u063a\u0631\u0627\u0641\u06cc\u0627\u06cc\u06cc \u062f\u0627\u0631\u062f. \u0645\u0646 \u0642\u0628\u0644\u0627\u064b \u0627\u0632 \u06a9\u062a\u0627\u0628\u0641\u0631\u0648\u0634\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647 \u0628\u0648\u062f\u0645 <strong>\u062c\u0632\u0648\u0647<\/strong> \ud83c\udf43 \u062f\u0631 \u0637\u0648\u0644 \u0622\u0645\u0648\u0632\u0634 \u0648 \u0645\u0646 \u0628\u0647 \u0637\u0648\u0631 \u0637\u0628\u06cc\u0639\u06cc \u0628\u0647 \u0627\u06cc\u0646 \u0631\u0627\u0647 \u062d\u0644 \u0633\u0627\u062f\u0647 \u0648 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0631\u0648\u06cc \u0622\u0648\u0631\u062f\u0645.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/integrer-une-map-avec-leaflet-sur-un-projet-next-3l4o\/#%DA%86%D8%B1%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D9%86%D9%85%DB%8C_%D8%B4%D9%88%D8%AF_react-leaflet_%D8%9F\" >\u0686\u0631\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0645\u06cc \u0634\u0648\u062f react-leaflet \u061f<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/integrer-une-map-avec-leaflet-sur-un-projet-next-3l4o\/#1_%D8%A7%D9%88%D9%84%DB%8C%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D9%86%D9%82%D8%B4%D9%87_%F0%9F%97%BA\" >1. \u0627\u0648\u0644\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0646\u0642\u0634\u0647 \ud83d\uddfa<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/integrer-une-map-avec-leaflet-sur-un-projet-next-3l4o\/#%D9%86%D8%B5%D8%A8_%DA%A9%D8%AA%D8%A7%D8%A8%D9%81%D8%B1%D9%88%D8%B4%DB%8C_%D8%A8%D8%A7_%D8%AF%D8%B3%D8%AA%D9%88%D8%B1_%D8%B2%DB%8C%D8%B1\" >\u0646\u0635\u0628 \u06a9\u062a\u0627\u0628\u0641\u0631\u0648\u0634\u06cc \u0628\u0627 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/integrer-une-map-avec-leaflet-sur-un-projet-next-3l4o\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DB%8C%DA%A9_%D8%AC%D8%B2%D8%A1\" >\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062c\u0632\u0621<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/integrer-une-map-avec-leaflet-sur-un-projet-next-3l4o\/#2_%D8%AE%D8%B7%D8%A7%D9%87%D8%A7%DB%8C_%D9%85%D8%B1%D8%A8%D9%88%D8%B7_%D8%A8%D9%87_DOM_%D8%B1%D8%A7_%D8%AF%D8%B1_Nextjs_%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%DA%A9%D9%86%DB%8C%D8%AF\" >2. \u062e\u0637\u0627\u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 DOM \u0631\u0627 \u062f\u0631 Next.js \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u06cc\u062f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/integrer-une-map-avec-leaflet-sur-un-projet-next-3l4o\/#%D8%A8%D8%B1%D8%A7%DB%8C_%DA%86%D9%87_%22use_client%22_%DA%A9%D8%A7%D9%81%DB%8C_%D9%86%DB%8C%D8%B3%D8%AA%D8%9F\" >\u0628\u0631\u0627\u06cc \u0686\u0647 \"use client\" \u06a9\u0627\u0641\u06cc \u0646\u06cc\u0633\u062a\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/integrer-une-map-avec-leaflet-sur-un-projet-next-3l4o\/#%E2%9C%85_%D8%B1%D8%A7%D9%87_%D8%AD%D9%84_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AD%D9%84_%D8%A7%DB%8C%D9%86_%D9%85%D8%B4%DA%A9%D9%84_%D9%88%D8%A7%D8%B1%D8%AF%D8%A7%D8%AA_%D9%BE%D9%88%DB%8C%D8%A7\" >\u2705 \u0631\u0627\u0647 \u062d\u0644 \u0628\u0631\u0627\u06cc \u062d\u0644 \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644: \u0648\u0627\u0631\u062f\u0627\u062a \u067e\u0648\u06cc\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/integrer-une-map-avec-leaflet-sur-un-projet-next-3l4o\/#%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D8%A8%D8%A7%D8%B1%DA%AF%D8%B0%D8%A7%D8%B1%DB%8C_%D9%85%D8%B4%D8%B1%D9%88%D8%B7\" >\u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u0634\u0631\u0648\u0637<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/integrer-une-map-avec-leaflet-sur-un-projet-next-3l4o\/#%D8%B3%D8%A8%DA%A9_%D9%87%D8%A7%DB%8C_%D8%B3%D9%85%D8%AA_%D9%85%D8%B4%D8%AA%D8%B1%DB%8C_%D8%B1%D8%A7_%D8%A8%D8%A7%D8%B1%DA%AF%DB%8C%D8%B1%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0633\u0628\u06a9 \u0647\u0627\u06cc \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u0631\u0627 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/integrer-une-map-avec-leaflet-sur-un-projet-next-3l4o\/#3_%D9%86%D8%B4%D8%A7%D9%86%DA%AF%D8%B1%D9%87%D8%A7_%D8%B1%D8%A7_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\" >3. \u0646\u0634\u0627\u0646\u06af\u0631\u0647\u0627 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/integrer-une-map-avec-leaflet-sur-un-projet-next-3l4o\/#%DB%8C%DA%A9_%D9%86%D8%B4%D8%A7%D9%86%DA%AF%D8%B1_%D8%B3%D8%A7%D8%AF%D9%87_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\" >\u06cc\u06a9 \u0646\u0634\u0627\u0646\u06af\u0631 \u0633\u0627\u062f\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/integrer-une-map-avec-leaflet-sur-un-projet-next-3l4o\/#%DB%8C%DA%A9_%D9%86%D8%B4%D8%A7%D9%86%DA%AF%D8%B1_%D8%B4%D8%AE%D8%B5%DB%8C_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\" >\u06cc\u06a9 \u0646\u0634\u0627\u0646\u06af\u0631 \u0634\u062e\u0635\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/integrer-une-map-avec-leaflet-sur-un-projet-next-3l4o\/#4_%F0%9F%8E%A8_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_%D8%B3%D8%A7%D8%B2%DB%8C_%D9%86%D9%82%D8%B4%D9%87\" >4. \ud83c\udfa8 \u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc \u0646\u0642\u0634\u0647<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/integrer-une-map-avec-leaflet-sur-un-projet-next-3l4o\/#%D8%A8%D8%A7_%DA%A9%D8%A7%D8%B4%DB%8C_%D8%A8%D8%A7%D8%B2%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0628\u0627 \u06a9\u0627\u0634\u06cc \u0628\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/integrer-une-map-avec-leaflet-sur-un-projet-next-3l4o\/#%D9%86%D9%82%D8%B4%D9%87_%D8%B1%D8%A7_%D8%B4%DA%A9%D9%84_%D8%AF%D9%87%DB%8C%D8%AF_%D8%AF%DA%A9%D9%85%D9%87_%D9%87%D8%A7%DB%8C_%D8%A8%D8%B2%D8%B1%DA%AF%D9%86%D9%85%D8%A7%DB%8C%DB%8C_%D8%8C_%D8%B8%D8%B1%D9%81\" >\u0646\u0642\u0634\u0647 \u0631\u0627 \u0634\u06a9\u0644 \u062f\u0647\u06cc\u062f (\u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0628\u0632\u0631\u06af\u0646\u0645\u0627\u06cc\u06cc \u060c \u0638\u0631\u0641 ..)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/integrer-une-map-avec-leaflet-sur-un-projet-next-3l4o\/#%DA%AF%D9%81%D8%AA%DB%8C_%D9%BE%D8%A7%D9%BE_%D8%A2%D9%BE%D8%9F\" >\u06af\u0641\u062a\u06cc \u067e\u0627\u067e \u0622\u067e\u061f<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h4><span class=\"ez-toc-section\" id=\"%DA%86%D8%B1%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D9%86%D9%85%DB%8C_%D8%B4%D9%88%D8%AF_react-leaflet_%D8%9F\"><\/span>\n<p>  \u0686\u0631\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0645\u06cc \u0634\u0648\u062f <code>react-leaflet<\/code> \u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0627\u06af\u0631\u0686\u0647 \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0645\u062d\u0627\u0635\u0631\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a <strong>\u062c\u0632\u0648\u0647<\/strong> \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc React \u060c \u0627\u0648 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u0645\u0646 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0628\u0631\u0622\u0648\u0631\u062f\u0647 \u0646\u06a9\u0631\u062f. \u0646\u0627\u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0646\u0633\u062e\u0647 \u0647\u0627 (React \u060c Ts \u060c Next) \u0648 \u0633\u0627\u062f\u06af\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0645\u0633\u062a\u0642\u06cc\u0645 <strong>\u062c\u0632\u0648\u0647<\/strong> \u0645\u0646 \u0631\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u06cc\u0646\u06cc\u0645\u0627\u0644\u06cc\u0633\u062a\u06cc \u0633\u0648\u0642 \u062f\u0627\u062f.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"1_%D8%A7%D9%88%D9%84%DB%8C%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D9%86%D9%82%D8%B4%D9%87_%F0%9F%97%BA\"><\/span>\n<p>1. \u0627\u0648\u0644\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0646\u0642\u0634\u0647 \ud83d\uddfa<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%D9%86%D8%B5%D8%A8_%DA%A9%D8%AA%D8%A7%D8%A8%D9%81%D8%B1%D9%88%D8%B4%DB%8C_%D8%A8%D8%A7_%D8%AF%D8%B3%D8%AA%D9%88%D8%B1_%D8%B2%DB%8C%D8%B1\"><\/span>\n<p>  \u0646\u0635\u0628 \u06a9\u062a\u0627\u0628\u0641\u0631\u0648\u0634\u06cc \u0628\u0627 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><code>yarn add leaflet<\/code><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DB%8C%DA%A9_%D8%AC%D8%B2%D8%A1\"><\/span>\n<p>  \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062c\u0632\u0621 <code><\/p>\n<map\/><\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u0645\u0627 \u0645\u0647\u0645 \u0647\u0633\u062a\u06cc\u0645 <strong>\u062c\u0632\u0648\u0647<\/strong> \u0648 \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc \u0644\u0627\u0632\u0645<\/li>\n<li>\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>useRef<\/code> \u0628\u0631\u0627\u06cc \u0646\u0633\u0628\u062a \u062f\u0627\u062f\u0646 \u0645\u0631\u062c\u0639 \u0628\u0647 \u0646\u0642\u0634\u0647 \u0645\u0627 \u060c \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0646\u0645\u0648\u0646\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u062a \u0631\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0631\u062f\u0647 \u0648 \u0627\u0632 \u062f\u0631\u06af\u06cc\u0631\u06cc \u0647\u0627 \u062f\u0631 \u0645\u0648\u0646\u062a\u0627\u0698\/\u062c\u062f\u0627\u0633\u0627\u0632\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f.\n<\/li>\n<li>\u0645\u0627 \u06a9\u0627\u0631\u062a \u0631\u0627 \u0628\u0627 \u0622\u0646 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>L.map()<\/code> : \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc\u06cc \u0627\u0632 \u0642\u0628\u06cc\u0644 \u0633\u0637\u062d \u0628\u0632\u0631\u06af\u0646\u0645\u0627\u06cc\u06cc \u060c \u0645\u062e\u062a\u0635\u0627\u062a \u0645\u0631\u06a9\u0632 \u06cc\u0627 \u0641\u0639\u0627\u0644 \u0633\u0627\u0632\u06cc \u0628\u0632\u0631\u06af\u0646\u0645\u0627\u06cc\u06cc \u0628\u0647 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u062f\u06cc\u062f\u0646 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0631\u0627\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0627\u0633\u0646\u0627\u062f \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u0645\u0627 \u06cc\u06a9 \u06a9\u0627\u0634\u06cc \u0634\u062e\u0635\u06cc \u0628\u0627 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>L.tileLayer()<\/code> \u0628\u062f\u0648\u0646 \u0641\u0631\u0627\u0645\u0648\u0634 \u06a9\u0631\u062f\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062a\u062e\u0635\u06cc\u0635 \u0627\u062c\u0628\u0627\u0631\u06cc \u0628\u0631\u0627\u06cc \u0627\u062d\u062a\u0631\u0627\u0645 \u0628\u0647 \u062d\u0642\u0648\u0642 \u0646\u0648\u06cc\u0633\u0646\u062f\u06af\u0627\u0646.<\/li>\n<li>\u0633\u0631\u0627\u0646\u062c\u0627\u0645 \u060c \u0645\u0627 \u062d\u0630\u0641 \u0646\u0645\u0648\u0646\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u062a \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0632 \u0628\u06cc\u0646 \u0628\u0631\u062f\u0646 \u0645\u0624\u0644\u0641\u0647 \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0628\u0631\u062e\u0648\u0631\u062f \u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u06cc\u0645.\n<\/li>\n<\/ul>\n<pre class=\"highlight jsx\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useRef<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">L<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">leaflet<\/span><span class=\"dl\">\"<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">mapRef<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useRef<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">L<\/span><span class=\"p\">.<\/span><span class=\"nb\">Map<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">)<\/span>\n\n<span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">mapRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">mapRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">remove<\/span><span class=\"p\">()<\/span>\n      <span class=\"nx\">mapRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">null<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">map<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">L<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">map<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">center<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"mf\">48.8566<\/span><span class=\"p\">,<\/span> <span class=\"mf\">2.3522<\/span><span class=\"p\">],<\/span> <span class=\"c1\">\/\/ coordonn\u00e9es de Paris<\/span>\n      <span class=\"na\">zoom<\/span><span class=\"p\">:<\/span> <span class=\"mi\">10<\/span><span class=\"p\">,<\/span> \n      <span class=\"na\">scrollWheelZoom<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">})<\/span>\n\n    <span class=\"nx\">L<\/span><span class=\"p\">.<\/span><span class=\"nf\">tileLayer<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">https:\/\/tiles.stadiamaps.com\/tiles\/stamen_toner_lite\/{z}\/{x}\/{y}{r}.png<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">{<\/span><span class=\"na\">attribution<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\u00a9Stamen Design, \u00a9OpenStreetMap contributors<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,}).<\/span><span class=\"nf\">addTo<\/span><span class=\"p\">(<\/span><span class=\"nx\">map<\/span><span class=\"p\">)<\/span>\n\n    <span class=\"nx\">mapRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">map<\/span>\n\n    <span class=\"k\">return <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">mapRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">mapRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">remove<\/span><span class=\"p\">()<\/span>\n            <span class=\"nx\">mapRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">null<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"p\">},<\/span> <span class=\"p\">[])<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">id<\/span><span class=\"p\">=<\/span><span class=\"s\">\"map\"<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"w-full h-full\"<\/span><span class=\"p\">&gt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<p><\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"2_%D8%AE%D8%B7%D8%A7%D9%87%D8%A7%DB%8C_%D9%85%D8%B1%D8%A8%D9%88%D8%B7_%D8%A8%D9%87_DOM_%D8%B1%D8%A7_%D8%AF%D8%B1_Nextjs_%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>2. \u062e\u0637\u0627\u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 DOM \u0631\u0627 \u062f\u0631 Next.js \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 <strong>\u062c\u0632\u0648\u0647<\/strong> \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u06a9\u0631\u062f\u0646 \u0627\u0632 DOM (\u0633\u0646\u062f \u0645\u062f\u0644 Object Model) \u062f\u0631 \u0686\u0646\u062f\u06cc\u0646 \u0633\u0637\u062d \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f (\u0627\u0648\u0644\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0646\u0642\u0634\u0647 \u060c \u0646\u0634\u0627\u0646\u06af\u0631\u0647\u0627 \u0648 \u063a\u06cc\u0631\u0647) \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u062e\u0637\u0627\u0647\u0627\u06cc \u0646\u0648\u0639 \u060c \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0622\u0646 \u062f\u0631 \u0633\u0645\u062a SSR (\u0633\u0631\u0648\u0631) \u0645\u0647\u0645 \u0627\u0633\u062a: <strong>\u274c ReferenceError: \u067e\u0646\u062c\u0631\u0647 \u062a\u0639\u0631\u06cc\u0641 \u0646\u0634\u062f\u0647 \u0627\u0633\u062a<\/strong>\u0628\u0634\u0631<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A8%D8%B1%D8%A7%DB%8C_%DA%86%D9%87_%22use_client%22_%DA%A9%D8%A7%D9%81%DB%8C_%D9%86%DB%8C%D8%B3%D8%AA%D8%9F\"><\/span>\n<p>  \u0628\u0631\u0627\u06cc \u0686\u0647 <code>\"use client\"<\/code> \u06a9\u0627\u0641\u06cc \u0646\u06cc\u0633\u062a\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062e\u0648\u0628 <code>\"use client\"<\/code> \u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0631\u0627 \u0645\u062c\u0628\u0648\u0631 \u0628\u0647 \u0627\u0646\u062c\u0627\u0645 \u0645\u0634\u062a\u0631\u06cc \u0627\u0632 \u0637\u0631\u0641 \u0645\u0634\u062a\u0631\u06cc \u06a9\u0646\u062f \u060c \u0627\u06cc\u0646 \u062a\u0636\u0645\u06cc\u0646 \u0646\u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0647\u0645\u0647 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627 \u0627\u0632 \u0627\u06cc\u0646 \u0642\u0627\u0646\u0648\u0646 \u067e\u06cc\u0631\u0648\u06cc \u06a9\u0646\u0646\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u0648\u0627\u0631\u062f\u0627\u062a \u062c\u0647\u0627\u0646\u06cc \u0645\u0627\u0646\u0646\u062f <code>import L from 'leaflet'<\/code> \u0628\u0647 \u0645\u062d\u0636 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u067e\u0631\u0648\u0646\u062f\u0647 \u060c \u062d\u062a\u06cc \u0642\u0628\u0644 \u0627\u0632 \u0633\u0627\u062e\u062a \u0645\u0624\u0644\u0641\u0647 \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f. \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646 \u060c \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u06cc\u0627 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u062e\u0627\u0635\u06cc \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062f\u0631 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u062f\u062e\u0627\u0644\u062a \u06a9\u0646\u062f <strong>\u062c\u0632\u0648\u0647<\/strong> \u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u060c \u06a9\u0647 \u0628\u0627\u0639\u062b \u0627\u0634\u062a\u0628\u0627\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%E2%9C%85_%D8%B1%D8%A7%D9%87_%D8%AD%D9%84_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AD%D9%84_%D8%A7%DB%8C%D9%86_%D9%85%D8%B4%DA%A9%D9%84_%D9%88%D8%A7%D8%B1%D8%AF%D8%A7%D8%AA_%D9%BE%D9%88%DB%8C%D8%A7\"><\/span>\n<p>  \u2705 \u0631\u0627\u0647 \u062d\u0644 \u0628\u0631\u0627\u06cc \u062d\u0644 \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644: \u0648\u0627\u0631\u062f\u0627\u062a \u067e\u0648\u06cc\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0648\u0627\u0631\u062f\u0627\u062a \u067e\u0648\u06cc\u0627 \u0627\u0632 <strong>\u0628\u0639\u062f. js<\/strong> \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0631\u0627 \u0641\u0642\u0637 \u062f\u0631 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f \u060c \u06a9\u0627\u0645\u0644\u0627\u064b \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0627\u0631\u0627\u0626\u0647 \u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 <code>(ssr: false)<\/code>\u0628\u0634\u0631 \u0627\u06cc\u0646 \u0645\u0627\u0646\u0639 \u0645\u06cc \u0634\u0648\u062f <strong>\u062c\u0632\u0648\u0647 \u0648 \u0633\u0627\u062e\u062a \u0648 \u0633\u0627\u0632\u0647\u0627\u06cc \u0622\u0646<\/strong> \u062f\u0631 \u062c\u0627\u06cc\u06cc \u06a9\u0647 DOM \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f \u0627\u0639\u062f\u0627\u0645 \u0634\u0648\u062f.<br \/>stonchation \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0631\u0633\u0645\u06cc \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0627\u0631\u062f\u0627\u062a \u067e\u0648\u06cc\u0627.<\/p>\n<p>\u062f\u0631 \u06cc\u06a9 \u062c\u062f\u06cc\u062f <u>\u0645\u0624\u0644\u0641\u0647 \u0645\u0634\u062a\u0631\u06cc<\/u> \u06a9\u0647 \u0645\u0627 \u062a\u0645\u0627\u0633 \u0645\u06cc \u06af\u06cc\u0631\u06cc\u0645 <code><mapcontainer\/><\/code>\u060c \u0645\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0645\u0624\u0644\u0641\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code><\/p>\n<map\/><\/code> \u0628\u0647 \u0634\u0631\u062d \u0632\u06cc\u0631:<\/p>\n<pre class=\"highlight jsx\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">dynamic<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next\/dynamic<\/span><span class=\"dl\">\"<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nb\">Map<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">dynamic<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">import<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">.\/Map<\/span><span class=\"dl\">\"<\/span><span class=\"p\">).<\/span><span class=\"nf\">then<\/span><span class=\"p\">((<\/span><span class=\"nx\">mod<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">mod<\/span><span class=\"p\">.<\/span><span class=\"nb\">Map<\/span><span class=\"p\">),<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">ssr<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">})<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">MapContainer<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"md:flex-1 w-[30rem] h-[30rem] border-2 border-black mb-6\"<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">Map<\/span> <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n\n<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D8%A8%D8%A7%D8%B1%DA%AF%D8%B0%D8%A7%D8%B1%DB%8C_%D9%85%D8%B4%D8%B1%D9%88%D8%B7\"><\/span>\n<p>\u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u0634\u0631\u0648\u0637<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062d\u062a\u06cc \u0628\u0627 <code>{ ssr: false }<\/code>\u060c \u0627\u06af\u0631 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u0634\u06a9\u0644\u0627\u062a \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0648\u062c\u0648\u062f \u0628\u06cc\u0627\u06cc\u062f <strong>\u062c\u0632\u0648\u0647<\/strong> \u0642\u0628\u0644 \u0627\u0632 \u0622\u0645\u0627\u062f\u0647 \u0634\u062f\u0646 DOM \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc \u0634\u0648\u062f. \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0647\u0631\u06af\u0648\u0646\u0647 \u062f\u0631\u06af\u06cc\u0631\u06cc \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u062a\u0623\u06cc\u06cc\u062f\u06cc\u0647 \u0631\u0627 \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 <strong>\u0646\u0642\u0634\u0647<\/strong>\u060c \u062f\u0631 \u0622\u063a\u0627\u0632 <code>useEffect<\/code> \u06a9\u0647 \u0646\u0642\u0634\u0647 \u0631\u0627 \u0622\u063a\u0627\u0632 \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<pre class=\"highlight jsx\"><code>  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"k\">typeof<\/span> <span class=\"nb\">window<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">undefined<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n       <span class=\"k\">return<\/span>\n    <span class=\"p\">}<\/span>\n\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">mapRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">mapRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">remove<\/span><span class=\"p\">()<\/span>\n      <span class=\"nx\">mapRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">null<\/span>\n    <span class=\"p\">}<\/span>\n\n<span class=\"p\">...<\/span>\n<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A8%DA%A9_%D9%87%D8%A7%DB%8C_%D8%B3%D9%85%D8%AA_%D9%85%D8%B4%D8%AA%D8%B1%DB%8C_%D8%B1%D8%A7_%D8%A8%D8%A7%D8%B1%DA%AF%DB%8C%D8%B1%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>\u0633\u0628\u06a9 \u0647\u0627\u06cc \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u0631\u0627 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0645\u0631\u062d\u0644\u0647 \u0622\u062e\u0631 \u0627\u0646\u062a\u0642\u0627\u0644 \u0648\u0627\u0631\u062f\u0627\u062a CSS \u0628\u0647 \u0637\u0648\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0647 \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u0633\u062a <code>global.css<\/code> (\u062f\u0631 \u0634\u0631\u0648\u0639 \u067e\u0631\u0648\u0646\u062f\u0647) \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u062a\u0645\u0631\u06a9\u0632:<\/p>\n<pre class=\"highlight css\"><code><span class=\"k\">@import<\/span> <span class=\"s1\">\"leaflet\/dist\/leaflet.css\"<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"3_%D9%86%D8%B4%D8%A7%D9%86%DA%AF%D8%B1%D9%87%D8%A7_%D8%B1%D8%A7_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>3. \u0646\u0634\u0627\u0646\u06af\u0631\u0647\u0627 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%DB%8C%DA%A9_%D9%86%D8%B4%D8%A7%D9%86%DA%AF%D8%B1_%D8%B3%D8%A7%D8%AF%D9%87_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u06cc\u06a9 \u0646\u0634\u0627\u0646\u06af\u0631 \u0633\u0627\u062f\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre class=\"highlight jsx\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">marker<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">L<\/span><span class=\"p\">.<\/span><span class=\"nf\">marker<\/span><span class=\"p\">([<\/span><span class=\"mf\">48.8566<\/span><span class=\"p\">,<\/span> <span class=\"mf\">2.3522<\/span><span class=\"p\">]).<\/span><span class=\"nf\">addTo<\/span><span class=\"p\">(<\/span><span class=\"nx\">map<\/span><span class=\"p\">);<\/span>\n<span class=\"nx\">marker<\/span><span class=\"p\">.<\/span><span class=\"nf\">bindPopup<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Welcome to Paris \ud83e\udd56!<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n<p>\u0628\u0647 \u062c\u0632 \u0622\u0646 .. \u06a9\u0646\u0633\u0648\u0644 \u0634\u0645\u0627 \u0645\u0637\u0645\u0626\u0646\u0627\u064b \u062e\u0637\u0627\u06cc 404 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u0646 \u0628\u0647 \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc \u0622\u0646 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f <strong>\u062c\u0632\u0648\u0647<\/strong> \u0646\u0648\u0639:<\/p>\n<pre class=\"highlight shell\"><code>GET \/marker-icon-2x.png 404 <span class=\"k\">in <\/span>4113ms\nGET \/marker-shadow.png 404 <span class=\"k\">in <\/span>4106ms\n<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Funogahk60t70vkbl4zgg.png\" alt=\"\u0628\u0631\u06af\u0647 \u0646\u0634\u0627\u0646\u06af\u0631 \u062e\u0637\u0627\" loading=\"lazy\" width=\"631\" height=\"616\" title=\"\"><\/p>\n<p>\u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u060c <strong>\u062c\u0632\u0648\u0647<\/strong> \u0633\u0639\u06cc \u06a9\u0646\u06cc\u062f \u062a\u0635\u0627\u0648\u06cc\u0631 \u0646\u0634\u0627\u0646\u06af\u0631\u0647\u0627\u06cc \u062e\u0648\u062f (marker-icon.png \u060c marker-shadow.png \u0648 \u063a\u06cc\u0631\u0647) \u0631\u0627 \u0627\u0632 \u06cc\u06a9 \u0645\u0633\u06cc\u0631 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f <code>node_modules<\/code>\u060c \u06a9\u0647 \u0627\u063a\u0644\u0628 \u0628\u0627 \u0633\u0627\u0632\u0645\u0627\u0646 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062f\u0631 \u0645\u062d\u06cc\u0637\u06cc \u0645\u0627\u0646\u0646\u062f Next.js \u06cc\u0627 \u0633\u0627\u06cc\u0631 \u0686\u0627\u0631\u0686\u0648\u0628 \u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0645\u0637\u0627\u0628\u0642\u062a \u0646\u062f\u0627\u0631\u062f. <\/p>\n<p>\u2705 \u0631\u0627\u0647 \u062d\u0644 LA: <\/p>\n<ul>\n<li>\u0645\u0627 \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627 \u0631\u0627 \u062f\u0631 \u0631\u0627\u0647 \u06a9\u067e\u06cc\/\u0645\u06cc \u0686\u0633\u0628\u0627\u0646\u06cc\u0645 <code>node_modules\/leaflet\/dist\/images<\/code> \u062f\u0631 \u06cc\u06a9 \u067e\u0631\u0648\u0646\u062f\u0647 \u062c\u062f\u06cc\u062f <code>leaflet<\/code> \u06a9\u0647 \u062f\u0631 \u067e\u0631\u0648\u0646\u062f\u0647 \u067e\u06cc\u062f\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>public<\/code>:<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fchsjufmqmtcy7w3renjt.png\" alt=\"\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u062c\u0632\u0648\u0647 \u0646\u0645\u0627\u062f \u0646\u0634\u0627\u0646\u06af\u0631 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f\" loading=\"lazy\" width=\"374\" height=\"566\" title=\"\"><\/p>\n<ul>\n<li>\u0648 \u0645\u0627 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0648\u0636\u0648\u062d \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u06cc\u0645:\n<\/li>\n<\/ul>\n<pre class=\"highlight jsx\"><code>\n    <span class=\"nx\">L<\/span><span class=\"p\">.<\/span><span class=\"nx\">Icon<\/span><span class=\"p\">.<\/span><span class=\"nx\">Default<\/span><span class=\"p\">.<\/span><span class=\"nf\">mergeOptions<\/span><span class=\"p\">({<\/span>\n           <span class=\"na\">iconRetinaUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/leaflet\/marker-icon-2x.png<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n       <span class=\"na\">iconUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/fealflet\/marker-icon.png<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n       <span class=\"na\">shadowUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/leaflet\/marker-shadow.png<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">})<\/span>\n<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F59004xlkgpu444fjh3ld.png\" alt=\"\u062c\u0632\u0648\u0647 \u0646\u0634\u0627\u0646\u06af\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636\" loading=\"lazy\" width=\"630\" height=\"623\" title=\"\"><\/p>\n<p>\u0627\u0645\u0627 \u0631\u0627\u0647 \u062d\u0644 \u0645\u0648\u0631\u062f \u0639\u0644\u0627\u0642\u0647 \u0645\u0646 \u0647\u0645\u0686\u0646\u0627\u0646 \u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc \u0627\u0633\u062a.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%DB%8C%DA%A9_%D9%86%D8%B4%D8%A7%D9%86%DA%AF%D8%B1_%D8%B4%D8%AE%D8%B5%DB%8C_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u06cc\u06a9 \u0646\u0634\u0627\u0646\u06af\u0631 \u0634\u062e\u0635\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u0645\u0627 \u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u0646\u0645\u0627\u062f\u0647\u0627\u06cc \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0627\u0632 \u062a\u0648\u0644\u06cc\u062f \u0622\u0646\u0647\u0627 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0634\u0648\u062f \u0648 \u0628\u0647 \u067e\u0627\u06cc\u0627\u0646 \u0628\u0631\u0633\u062f <strong>\u062e\u0637\u0627\u0647\u0627\u06cc 404<\/strong>\u0628\u0634\u0631<\/li>\n<li>\u0633\u067e\u0633 \u062a\u0635\u0648\u06cc\u0631 \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u060c \u0646\u0645\u0627\u062f \u0634\u062e\u0635\u06cc \u0633\u0627\u0632\u06cc \u0634\u062f\u0647 \u0627\u06cc \u0631\u0627 \u06a9\u0647 \u0628\u0627 \u0622\u0646 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>L.marker()<\/code>\u0628\u0634\u0631<\/li>\n<li>\u0633\u0631\u0627\u0646\u062c\u0627\u0645 \u060c \u0645\u0627 \u0646\u0634\u0627\u0646\u06af\u0631 \u0634\u062e\u0635\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0646\u0642\u0634\u0647 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 (\u062f\u0631 \u0635\u0648\u0631\u062a \u062a\u0645\u0627\u06cc\u0644 \u0628\u0627 \u067e\u0627\u067e \u0622\u067e):\n<\/li>\n<\/ul>\n<pre class=\"highlight jsx\"><code>   <span class=\"nx\">L<\/span><span class=\"p\">.<\/span><span class=\"nx\">Icon<\/span><span class=\"p\">.<\/span><span class=\"nx\">Default<\/span><span class=\"p\">.<\/span><span class=\"nf\">mergeOptions<\/span><span class=\"p\">({<\/span>\n           <span class=\"na\">iconRetinaUrl<\/span><span class=\"p\">:<\/span> <span class=\"kc\">null<\/span><span class=\"p\">,<\/span>\n       <span class=\"na\">iconUrl<\/span><span class=\"p\">:<\/span> <span class=\"kc\">null<\/span><span class=\"p\">,<\/span>\n       <span class=\"na\">shadowUrl<\/span><span class=\"p\">:<\/span> <span class=\"kc\">null<\/span><span class=\"p\">,<\/span>\n   <span class=\"p\">})<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">customIcon<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">L<\/span><span class=\"p\">.<\/span><span class=\"nf\">icon<\/span><span class=\"p\">({<\/span>\n       <span class=\"na\">iconUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\/map-pin2.png<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n       <span class=\"na\">iconSize<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"mi\">30<\/span><span class=\"p\">,<\/span> <span class=\"mi\">30<\/span><span class=\"p\">],<\/span>\n       <span class=\"na\">iconAnchor<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"mi\">15<\/span><span class=\"p\">,<\/span> <span class=\"mi\">30<\/span><span class=\"p\">],<\/span>\n       <span class=\"na\">popupAnchor<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"o\">-<\/span><span class=\"mi\">30<\/span><span class=\"p\">],<\/span>\n    <span class=\"p\">})<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">marker<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">L<\/span><span class=\"p\">.<\/span><span class=\"nf\">marker<\/span><span class=\"p\">([<\/span><span class=\"mf\">48.8566<\/span><span class=\"p\">,<\/span> <span class=\"mf\">2.3522<\/span><span class=\"p\">],<\/span> <span class=\"p\">{<\/span> <span class=\"na\">icon<\/span><span class=\"p\">:<\/span> <span class=\"nx\">customIcon<\/span><span class=\"p\">}).<\/span><span class=\"nf\">addTo<\/span><span class=\"p\">(<\/span><span class=\"nx\">map<\/span><span class=\"p\">)<\/span>\n    <span class=\"nx\">marker<\/span><span class=\"p\">.<\/span><span class=\"nf\">bindPopup<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Welcome to Paris \ud83e\udd56!<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu8r8yp58ulee1rq0gl6o.png\" alt=\"\u0646\u0634\u0627\u0646\u06af\u0631 \u0633\u0641\u0627\u0631\u0634\u06cc \u0631\u0648\u06cc \u062c\u0632\u0648\u0647\" loading=\"lazy\" width=\"630\" height=\"617\" title=\"\"><\/p>\n<p>\u0633\u067e\u0633 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f Geoloc \u0631\u0627 \u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u062f \u060c \u0646\u0642\u0637\u0647 \u06a9\u0627\u0631\u0628\u0631 \u06cc\u0627 \u0647\u0631 \u062f\u0627\u062f\u0647 \u062a\u0639\u0627\u0645\u0644\u06cc \u062f\u06cc\u06af\u0631\u06cc \u0631\u0627 \u06a9\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0634\u0645\u0627 \u0645\u0631\u0628\u0648\u0637 \u0645\u06cc \u0634\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f!<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"4_%F0%9F%8E%A8_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_%D8%B3%D8%A7%D8%B2%DB%8C_%D9%86%D9%82%D8%B4%D9%87\"><\/span>\n<p>4. \ud83c\udfa8 \u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc \u0646\u0642\u0634\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0634\u062e\u0635\u06cc \u0633\u0627\u0632\u06cc \u06cc\u06a9 \u06a9\u0627\u0631\u062a \u062c\u0632\u0648\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0645\u0637\u0627\u0628\u0642 \u0628\u0627 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u06cc\u062f: \u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0634\u06cc \u0647\u0627 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u0645 \u060c \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0632\u0648\u0645 \u0631\u0627 \u0628\u0627 \u0637\u0631\u0627\u062d\u06cc \u062e\u0648\u062f \u0633\u0627\u0632\u06af\u0627\u0631 \u06a9\u0646\u06cc\u062f \u0648 \u067e\u0646\u062c\u0631\u0647 \u0647\u0627\u06cc \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A8%D8%A7_%DA%A9%D8%A7%D8%B4%DB%8C_%D8%A8%D8%A7%D8%B2%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>\u0628\u0627 \u06a9\u0627\u0634\u06cc \u0628\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u06a9\u0627\u0634\u06cc \u0647\u0627 \u067e\u0627\u06cc\u0647 \u0628\u0635\u0631\u06cc \u06a9\u0627\u0631\u062a \u0634\u0645\u0627 \u0647\u0633\u062a\u0646\u062f. \u06cc\u06a9 \u06a9\u0627\u0634\u06cc \u0686\u0627\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0647\u0648\u06cc\u062a \u0628\u0635\u0631\u06cc \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u062a\u0642\u0648\u06cc\u062a \u06a9\u0646\u062f.<br \/>\u0622\u06cc\u0627 \u0686\u06cc\u0632\u06cc \u0627\u0635\u0644\u06cc \u060c \u0634\u06cc\u0631\u06cc\u0646 \u062a\u0631 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f\u061f \u0627\u0646\u062a\u062e\u0627\u0628 \u0628\u0631\u0627\u06cc <code>tile<\/code> <em>\u0622\u0628\u0631\u0646\u06af<\/em> \u0645\u0631\u0627\u062d\u0644!<br \/>\u0628\u0631\u0627\u06cc \u06cc\u0627\u0641\u062a\u0646 \u06a9\u0627\u0634\u06cc \u0647\u0627\u06cc \u0631\u0627\u06cc\u06af\u0627\u0646 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062f\u0648 \u0645\u0646\u0628\u0639 \u0645\u0641\u06cc\u062f \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f: <\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%86%D9%82%D8%B4%D9%87_%D8%B1%D8%A7_%D8%B4%DA%A9%D9%84_%D8%AF%D9%87%DB%8C%D8%AF_%D8%AF%DA%A9%D9%85%D9%87_%D9%87%D8%A7%DB%8C_%D8%A8%D8%B2%D8%B1%DA%AF%D9%86%D9%85%D8%A7%DB%8C%DB%8C_%D8%8C_%D8%B8%D8%B1%D9%81\"><\/span>\n<p>\u0646\u0642\u0634\u0647 \u0631\u0627 \u0634\u06a9\u0644 \u062f\u0647\u06cc\u062f (\u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0628\u0632\u0631\u06af\u0646\u0645\u0627\u06cc\u06cc \u060c \u0638\u0631\u0641 ..)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u067e\u0631\u0648\u0646\u062f\u0647 \ud83d\udcc1 <code>global.css<\/code> \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0686\u06cc\u0632\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0631\u0627 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0631\u062f\u0647 \u0648 \u06a9\u0627\u0631\u062a \u0631\u0627 \u0628\u0647 \u0647\u0648\u06cc\u062a \u0628\u0635\u0631\u06cc \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0646\u0632\u062f\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<br \/>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u062b\u0627\u0644\u06cc \u0627\u0632 \u06a9\u0627\u0631\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645 \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<pre class=\"highlight css\"><code><span class=\"o\">\/*<\/span> <span class=\"nt\">styles<\/span> <span class=\"nt\">g\u00e9n\u00e9raux<\/span> <span class=\"o\">\/*<\/span>\n<span class=\"nc\">.leaflet-container<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">50%<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">overflow<\/span><span class=\"p\">:<\/span> <span class=\"nb\">hidden<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">relative<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.leaflet-control-container<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">absolute<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">top<\/span><span class=\"p\">:<\/span> <span class=\"m\">11rem<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">left<\/span><span class=\"p\">:<\/span> <span class=\"m\">1rem<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"o\">\/*<\/span> <span class=\"nt\">styles<\/span> <span class=\"nt\">des<\/span> <span class=\"nt\">boutons<\/span> <span class=\"nt\">li\u00e9s<\/span> <span class=\"nt\">au<\/span> <span class=\"nt\">zoom<\/span> <span class=\"o\">\/*<\/span>\n<span class=\"nc\">.leaflet-control-zoom<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">absolute<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span> <span class=\"cp\">!important<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">top<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">left<\/span><span class=\"p\">:<\/span> <span class=\"m\">-10px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">flex-direction<\/span><span class=\"p\">:<\/span> <span class=\"n\">column<\/span><span class=\"p\">;<\/span>\n    <span class=\"py\">gap<\/span><span class=\"p\">:<\/span> <span class=\"m\">8px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.leaflet-touch<\/span> <span class=\"nc\">.leaflet-bar<\/span> <span class=\"nt\">a<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">40px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">40px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">line-height<\/span><span class=\"p\">:<\/span> <span class=\"m\">40px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span> <span class=\"cp\">!important<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"no\">white<\/span> <span class=\"cp\">!important<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">22px<\/span> <span class=\"cp\">!important<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">50%<\/span> <span class=\"cp\">!important<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.673<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">5px<\/span> <span class=\"m\">7px<\/span> <span class=\"n\">rgba<\/span><span class=\"p\">(<\/span><span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"m\">0.3<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">40px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">40px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">cursor<\/span><span class=\"p\">:<\/span> <span class=\"nb\">pointer<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">all<\/span> <span class=\"m\">0.3s<\/span> <span class=\"n\">ease<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"o\">\/*<\/span> <span class=\"nt\">styles<\/span> <span class=\"nt\">des<\/span> <span class=\"nt\">boutons<\/span> <span class=\"nt\">au<\/span> <span class=\"nt\">survol<\/span> <span class=\"nt\">de<\/span> <span class=\"nt\">la<\/span> <span class=\"nt\">souris<\/span> <span class=\"o\">\/*<\/span>\n<span class=\"nc\">.leaflet-control-zoom-in<\/span><span class=\"nd\">:hover<\/span><span class=\"o\">,<\/span>\n<span class=\"nc\">.leaflet-control-zoom-out<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#6f00ff<\/span><span class=\"n\">b3<\/span> <span class=\"cp\">!important<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"no\">white<\/span> <span class=\"cp\">!important<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border-color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#6f00ff<\/span><span class=\"n\">b3<\/span> <span class=\"cp\">!important<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fehrs12q008gzuuy48gdj.png\" alt=\"\u062c\u0632\u0648\u0647 \u0646\u0642\u0634\u0647 \u0633\u0641\u0627\u0631\u0634\u06cc \u0632\u06cc\u0628\u0627 \u0628\u0627 CSS\" loading=\"lazy\" width=\"696\" height=\"671\" title=\"\"><\/p>\n<p>\u0628\u062f \u0646\u06cc\u0633\u062a \u060c \u062f\u0631\u0633\u062a \u0627\u0633\u062a\u061f \u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0645\u0646 \u062a\u062e\u0635\u06cc\u0635 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0631\u0627 \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0645 (\u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>attributionControl: false,<\/code> \u0628\u0647 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0646\u0642\u0634\u0647 \u0634\u0645\u0627) \u0648 \u0627\u06cc\u0646\u06a9\u0647 \u0645\u0646 \u0634\u062e\u0635\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%DA%AF%D9%81%D8%AA%DB%8C_%D9%BE%D8%A7%D9%BE_%D8%A2%D9%BE%D8%9F\"><\/span>\n<p>\u06af\u0641\u062a\u06cc \u067e\u0627\u067e \u0622\u067e\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0631\u06cc\u062e\u062a\u0647 \u0634\u062f\u0647 \u0633\u0641\u0627\u0631\u0634\u06cc SA: <\/p>\n<ul>\n<li>\u0645\u0627 \u0628\u0647 \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0633\u0628\u06a9 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0627\u0632 \u0637\u0631\u06cc\u0642 CSS \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <\/li>\n<li>\u0648 \u0633\u067e\u0633 \u067e\u0646\u062c\u0631\u0647 \u062c\u062f\u06cc\u062f \u0631\u0627 \u0628\u0647 \u0646\u0634\u0627\u0646\u06af\u0631 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645\n<\/li>\n<\/ul>\n<pre class=\"highlight jsx\"><code>    <span class=\"kd\">const<\/span> <span class=\"nx\">customPopup<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">``<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">marker<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">L<\/span><span class=\"p\">.<\/span><span class=\"nf\">marker<\/span><span class=\"p\">([<\/span><span class=\"mf\">48.875335693359375<\/span><span class=\"p\">,<\/span> <span class=\"mf\">2.3433215618133545<\/span><span class=\"p\">],<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">icon<\/span><span class=\"p\">:<\/span> <span class=\"nx\">customIcon<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">}).<\/span><span class=\"nf\">addTo<\/span><span class=\"p\">(<\/span><span class=\"nx\">map<\/span><span class=\"p\">)<\/span>\n        <span class=\"nx\">marker<\/span><span class=\"p\">.<\/span><span class=\"nf\">bindPopup<\/span><span class=\"p\">(<\/span><span class=\"nx\">customPopup<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">closeButton<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span> <span class=\"p\">})<\/span>\n\n<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fprib15vy68f7iv6jaw9d.png\" alt=\"\u067e\u0646\u062c\u0631\u0647 \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0627 \u062c\u0632\u0648\u0647\" loading=\"lazy\" width=\"722\" height=\"670\" title=\"\"><\/p>\n<hr\/>\n<p>\u0648\u0644\u0627\u06cc\u062a <strong>\u0631\u0641\u06cc\u0642<\/strong>\u060c \u0634\u0645\u0627 \u0645\u06cc \u062f\u0627\u0646\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u06a9\u0627\u0631\u062a \u062a\u0639\u0627\u0645\u0644\u06cc \u0631\u0627 \u0628\u0627 \u0627\u062f\u063a\u0627\u0645 \u0648 \u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f <strong>\u062c\u0632\u0648\u0647<\/strong> \ud83d\ude0a<\/p>\n<p><em>\u0648 \u0627\u06af\u0631 \u0627\u06cc\u0646\u0637\u0648\u0631 \u0646\u06cc\u0633\u062a \u060c \u0627\u0632 \u0686\u0647 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0631\u062a \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u061f<\/em><\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u062f\u0631 \u0647\u0641\u062a\u0647 \u0647\u0627\u06cc \u0627\u062e\u06cc\u0631 \u0645\u0646 \u0631\u0648\u06cc \u067e\u0631\u0648\u0698\u0647 \u0627\u06cc \u06a9\u0627\u0631 \u06a9\u0631\u062f\u0647 \u0627\u0645 \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u062f\u063a\u0627\u0645 \u06a9\u0627\u0631\u062a \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062c\u063a\u0631\u0627\u0641\u06cc\u0627\u06cc\u06cc \u062f\u0627\u0631\u062f. \u0645\u0646 \u0642\u0628\u0644\u0627\u064b \u0627\u0632 \u06a9\u062a\u0627\u0628\u0641\u0631\u0648\u0634\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647 \u0628\u0648\u062f\u0645 \u062c\u0632\u0648\u0647 \ud83c\udf43 \u062f\u0631 \u0637\u0648\u0644 \u0622\u0645\u0648\u0632\u0634 \u0648 \u0645\u0646 \u0628\u0647 \u0637\u0648\u0631 \u0637\u0628\u06cc\u0639\u06cc \u0628\u0647 \u0627\u06cc\u0646 \u0631\u0627\u0647 \u062d\u0644 \u0633\u0627\u062f\u0647 \u0648 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0631\u0648\u06cc \u0622\u0648\u0631\u062f\u0645. \u0686\u0631\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0645\u06cc \u0634\u0648\u062f react-leaflet &hellip;<\/p>\n","protected":false},"author":2,"featured_media":95021,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-95020","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/95020","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=95020"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/95020\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/95021"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=95020"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=95020"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=95020"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}