1"use strict";(self.webpackChunkgeoapify_home=self.webpackChunkgeoapify_home||[]).push([[3798],{2389:function(n,a,t){var e=t(6540),s=t(8154);a.A=({name:n,description:a,supplies:t,tools:o,steps:p})=>{const l={"@context":"https://schema.org","@type":"HowTo",name:n,description:a,steps:p.map((n=>({"@type":"HowToStep",name:n.name,url:n.url,itemListElement:n.items.map((n=>({"@type":"HowToTip",text:n})))})))};return t&&t.length&&(l.supply=t.map((n=>({"@type":"HowToSupply",name:n})))),o&&o.length&&(l.tools=o.map((n=>({"@type":"HowToTool",name:n})))),e.createElement(s.m,null,e.createElement("script",{type:"application/ld+json"},JSON.stringify(l)))}},2992:function(n,a,t){var e=t(6540),s=t(8154);a.A=({companyName:n,geoapifySlogan:a,logoSrc:t,logoWidth:o,logoHeight:p,slug:l,articleName:c,articleHeadline:r,published:i,modified:u,images:m})=>{const k={"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.geoapify.com/#organization",name:n,url:"https://www.geoapify.com/",email:"[email protected]",brand:"Geoapify Location Platform",sameAs:["https://www.facebook.com/pg/Geoapify","https://www.linkedin.com/company/geoapify","https://twitter.com/Geoapify"],logo:{"@type":"ImageObject","@id":"https://www.geoapify.com/#logo",url:t,width:o,height:p,caption:n},slogan:a,image:{"@id":"https://www.geoapify.com/#logo"}}]},g={"@type":"Article","@id":`https://www.geoapify.com/${l}/#article`,mainEntityOfPage:`https://www.geoapify.com/${l}/`,name:c,headline:r,inLanguage:"en-US",publisher:{"@id":"https://www.geoapify.com/#organization"},author:{"@id":"https://www.geoapify.com/#organization"},datePublished:i,dateModified:u};return m&&(g.image=m),k["@graph"].push(g),e.createElement(s.m,null,e.createElement("script",{type:"application/ld+json"},JSON.stringify(k)))}},3537:function(n,a){a.A=[{id:"javascript",label:"JavaScript"},{id:"angular",label:"Angular"},{id:"react",label:"React JS"},{id:"java",label:"Java"},{id:"c#",label:"C#"},{id:"r",label:"R language"},{id:"python",label:"Python"},{id:"nocode",label:"No code"}]},5494:function(n,a,t){t.r(a),t.d(a,{default:function(){return B}});var e=t(4506),s=t(8453),o=t(6540);function p(n){const a=Object.assign({p:"p",a:"a",h2:"h2",code:"code",strong:"strong",ul:"ul",li:"li",span:"span",h3:"h3",ol:"ol",h4:"h4",h5:"h5",h6:"h6",br:"br"},(0,s.RP)(),n.components);return o.createElement(o.Fragment,null,o.createElement(a.p,null,"The ",o.createElement(a.a,{href:"/static-maps-api/"},"Static Maps API")," provides a simple and efficient way to generate map images for embedding in websites, applications, or reports. However, when working with complex geometriesâsuch as polygons, polylines, or other advanced shapesâHTTP GET requests can become problematic due to URL length limitations. To address this challenge, HTTP POST requests offer a robust and effective solution, allowing for the efficient handling of large data payloads."),"\n",o.createElement(a.p,null,"In this guide, weâll show you how to use POST requests with the Static Maps API to efficiently render complex data. Youâll learn how to send data using POST requests and display the resulting map images in HTML."),"\n",o.createElement(a.h2,null,"Understanding the Problem with GET Requests"),"\n",o.createElement(a.p,null,"The Static Maps API commonly uses HTTP GET requests to generate maps, encoding parameters such as location, geometry, and style directly into the URL.\nThis method is especially convenient when adding map images directly to an HTML page, as the URL can be easily embedded in an ",o.createElement(a.code,null,"<img>")," tag."),"\n",o.createElement(a.p,null,"While effective for simpler use cases, GET requests are ",o.createElement(a.strong,null,"limited by a maximum URL length of 2,048 characters"),". This constraint poses significant challenges when working with:"),"\n",o.createElement(a.ul,null,"\n",o.createElement(a.li,null,"Large or complex geometries (e.g., polygons with many vertices)."),"\n",o.createElement(a.li,null,"Multiple markers or shapes on the same map."),"\n",o.createElement(a.li,null,"Detailed or extensive styling options."),"\n"),"\n",o.createElement(a.p,null,o.createElement(a.strong,null,"Example of a URL for a GET Request:")),"\n",o.createElement("div",{className:"width-default"},o.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`https://maps.geoapify.com/v1/staticmap?style=osm-bright&width=600&height=400&area=rect:2.2158050537109375,48.8032455364465,2.470550537109375,48.911218476584025&geojson=%7B%22type%22%3A%22Feature%22%2C%22properties%22%3A%7B%22fillcolor%22%3A%22%23000%22%2C%22fillopacity%22%3A0.7%7D%2C%22geometry%22%3A%7B%22type%22%3A%22Polygon%22%2C%22coordinates%22%3A%5B%5B%5B2.19142913%2C48.7822111%
15D%2C%5B2.50350952%2C48.7822111%5D%2C%5B2.50350952%2C48.9441512%5D%2C%5B2.19142913%2C48.9441512%5D%2C%5B2.19142913%2C48.7822111%5D%5D%2C%5B%5B2.30781%2C48.8956%5D%2C%5B2.29373%2C48.89022%5D%2C%5B2.2837%2C48.882%5D%2C%5B2.25254%2C48.8522%5D%2C%5B2.25528%2C48.8466%5D%2C%5B2.2539%2C48.8389%5D%2C%5B2.2607%2C48.8355%5D%2C%5B2.271%2C48.8351%5D%2C%5B2.3263%2C48.8202%5D%2C%5B2.3359%2C48.8174%5D%2C%5B2.35107%2C48.8177%5D%2C%5B2.36309%2C48.8172%5D%2C%5B2.3778%2C48.82266%5D%2C%5B2.4094%2C48.8355%5D%2C%5B2.41458%2C48.8516%5D%2C%5B2.41081%2C48.8651%5D%2C%5B2.4132%2C48.8692%5D%2C%5B2.40772%2C48.87961%5D%2C%5B2.39776%2C48.8843%5D%2C%5B2.3912%2C48.9006%5D%2C%5B2.3191%2C48.8999%5D%2C%5B2.30781%2C48.8956%5D%5D%5D%7D%7D&marker=lonlat:2.3494655661542367,48.85774273910704;type:awesome;color:%2319b8fc;size:large&apiKey=YOUR_API_KEY`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),o.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="plaintext"><pre class="language-plaintext"><code class="language-plaintext">https://maps.geoapify.com/v1/staticmap?style=osm-bright&width=600&height=400&area=rect:2.2158050537109375,48.8032455364465,2.470550537109375,48.911218476584025&geojson=%7B%22type%22%3A%22Feature%22%2C%22properties%22%3A%7B%22fillcolor%22%3A%22%23000%22%2C%22fillopacity%22%3A0.7%7D%2C%22geometry%22%3A%7B%22type%22%3A%22Polygon%22%2C%22coordinates%22%3A%5B%5B%5B2.19142913%2C48.7822111%5D%2C%5B2.50350952%2C48.7822111%5D%2C%5B2.50350952%2C48.9441512%5D%2C%5B2.19142913%2C48.9441512%5D%2C%5B2.19142913%2C48.7822111%5D%5D%2C%5B%5B2.30781%2C48.8956%5D%2C%5B2.29373%2C48.89022%5D%2C%5B2.2837%2C48.882%5D%2C%5B2.25254%2C48.8522%5D%2C%5B2.25528%2C48.8466%5D%2C%5B2.2539%2C48.8389%5D%2C%5B2.2607%2C48.8355%5D%2C%5B2.271%2C48.8351%5D%2C%5B2.3263%2C48.8202%5D%2C%5B2.3359%2C48.8174%5D%2C%5B2.35107%2C48.8177%5D%2C%5B2.36309%2C48.8172%5D%2C%5B2.3778%2C48.82266%5D%2C%5B2.4094%2C48.8355%5D%2C%5B2.41458%2C48.8516%5D%2C%5B2.41081%2C48.8651%5D%2C%5B2.4132%2C48.8692%5D%2C%5B2.40772%2C48.87961%5D%2C%5B2.39776%2C48.8843%5D%2C%5B2.3912%2C48.9006%5D%2C%5B2.3191%2C48.8999%5D%2C%5B2.30781%2C48.8956%5D%5D%5D%7D%7D&marker=lonlat:2.3494655661542367,48.85774273910704;type:awesome;color:%2319b8fc;size:large&apiKey=YOUR_API_KEY</code></pre></div>'}})),"\n",o.createElement(a.p,null,"As geometries or styling parameters grow more intricate, the URL can quickly exceed the length limit, leading to errors and rendering failures."),"\n",o.createElement(a.h2,null,"How to Solve URL Length Limitations with POST Requests"),"\n",o.createElement(a.p,null,"To overcome the limitations of HTTP GET requests, we can use HTTP POST requests, which allow parameters to be sent in the request body instead of the URL. While this approach requires a bit more work compared to GET requestsâespecially when adding a map image directly to an HTML pageâit works perfectly for handling complex data. Hereâs why itâs effective:"),"\n",o.createElement(a.ul,null,"\n",o.createElement(a.li,null,o.createElement(a.strong,null,"Support for Large and Complex Data"),": Easily include detailed geometries, such as intricate GeoJSON objects, without worrying about URL length limits."),"\n",o.createElement(a.li,null,o.createElement(a.strong,null,"Advanced Customization"),": Add extensive styling or multiple features without compromising readability or functionality."),"\n",o.createElement(a.li,null,o.createElement(a.strong,null,"Improved Code Readability"),": Keep your code
1cleaner and more organized by separating parameters from the URL."),"\n"),"\n",o.createElement(a.p,null,"In this guide, weâll show you how to implement POST requests with the Static Maps API to render complex maps smoothly and efficiently."),"\n",o.createElement(a.h2,null,"Static Maps API POST Request Examples"),"\n",o.createElement(a.p,null,"Here are detailed examples demonstrating how to use POST requests with the Static Maps API to add geometries, place markers, and apply custom styles."),"\n",o.createElement(a.h3,null,"Adding Geometries"),"\n",o.createElement(a.p,null,"When working with POST requests in the Static Maps API, you can add various geometric shapes to your maps using the ",o.createElement(a.code,null,"geometries")," parameter. This parameter accepts an array of geometry objects, each specifying the type of shape and its properties."),"\n",o.createElement(a.ol,null,"\n",o.createElement(a.li,null,"\n",o.createElement(a.p,null,o.createElement(a.strong,null,"General Structure of the ",o.createElement(a.code,null,"geometries")," Parameter"),"\nThe ",o.createElement(a.code,null,"geometries")," parameter is an array where each object defines a geometry type, its coordinates, and optional styling attributes like line color, fill color, and opacity."),"\n"),"\n",o.createElement(a.li,null,"\n",o.createElement(a.p,null,o.createElement(a.strong,null,"Common Styling Attributes")),"\n",o.createElement(a.p,null,"All geometry types support these optional attributes for customization:"),"\n",o.createElement(a.ul,null,"\n",o.createElement(a.li,null,o.createElement(a.code,null,"linecolor"),": Color of the outline (e.g., ",o.createElement(a.code,null,"#000000"),")."),"\n",o.createElement(a.li,null,o.createElement(a.code,null,"lineopacity"),": Opacity of the outline (0 to 1)."),"\n",o.createElement(a.li,null,o.createElement(a.code,null,"linewidth"),": Width of the outline in pixels."),"\n",o.createElement(a.li,null,o.createElement(a.code,null,"linestyle"),": Style of the line (",o.createElement(a.code,null,"solid"),", ",o.createElement(a.code,null,"dotted"),", ",o.createElement(a.code,null,"dashed"),", ",o.createElement(a.code,null,"longdash"),")."),"\n",o.createElement(a.li,null,o.createElement(a.code,null,"fillcolor"),": Fill color for closed shapes."),"\n",o.createElement(a.li,null,o.createElement(a.code,null,"fillopacity"),": Opacity of the fill (0 to 1)."),"\n"),"\n"),"\n",o.createElement(a.li,null,"\n",o.createElement(a.p,null,o.createElement(a.strong,null,"Using GeoJSON"),"\nYou can include a GeoJSON object directly in the POST request body to define complex geometries, such as polygons, multipolygons, and lines. This approach allows for detailed spatial data representation with customizable styling options."),"\n"),"\n"),"\n",o.createElement(a.h4,null,"Examples Of Geometry Objects"),"\n",o.createElement(a.h5,null,o.createElement(a.strong,null,"Circle")),"\n",o.createElement(a.p,null,"Draws a circle based on the center coordinates and radius."),"\n",o.createElement("div",{className:"width-default"},o.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`{\n "type": "circle",\n "linecolor": "#FF0000",\n "lineopacity": 0.8,\n "linewidth": 2,\n "fillcolor": "#00FF00",\n "fillopacity": 0.5,\n "value": {\n "lat": 40.693664,\n "lon": -74.044724,\n "radius": 50\n }\n}`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
1<path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),o.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="json"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span>\n <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"circle"</span><span class="token punctuation">,</span>\n <span class="token property">"linecolor"</span><span class="token operator">:</span> <span class="token string">"#FF0000"</span><span class="token punctuation">,</span>\n <span class="token property">"lineopacity"</span><span class="token operator">:</span> <span class="token number">0.8</span><span class="token punctuation">,</span>\n <span class="token property">"linewidth"</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>\n <span class="token property">"fillcolor"</span><span class="token operator">:</span> <span class="token string">"#00FF00"</span><span class="token punctuation">,</span>\n <span class="token property">"fillopacity"</span><span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>\n <span class="token property">"value"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"lat"</span><span class="token operator">:</span> <span class="token number">40.693664</span><span class="token punctuation">,</span>\n <span class="token property">"lon"</span><span class="token operator">:</span> <span class="token number">-74.044724</span><span class="token punctuation">,</span>\n <span class="token property">"radius"</span><span class="token operator">:</span> <span class="token number">50</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span></code></pre></div>'}})),"\n",o.createElement(a.h5,null,o.createElement(a.strong,null,"Rectangle (Rect)")),"\n",o.createElement(a.p,null,"Defines a rectangle using two opposite corners."),"\n",o.createElement("div",{className:"width-default"},o.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`{\n "type": "rect",\n "linecolor": "#0000FF",\n "linewidth": 3,\n "fillcolor": "#FFFF00",\n "fillopacity": 0.4,\n "value": {\n "lat1": 40.696645,\n "lon1": -74.044724,\n "lat2": 40.692664,\n "lon2": -74.041724\n }\n}`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),o.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="json"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span>\n <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"rect"</span><span class="token punctuation">,</span>\n <span class="token property">
1"linecolor"</span><span class="token operator">:</span> <span class="token string">"#0000FF"</span><span class="token punctuation">,</span>\n <span class="token property">"linewidth"</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>\n <span class="token property">"fillcolor"</span><span class="token operator">:</span> <span class="token string">"#FFFF00"</span><span class="token punctuation">,</span>\n <span class="token property">"fillopacity"</span><span class="token operator">:</span> <span class="token number">0.4</span><span class="token punctuation">,</span>\n <span class="token property">"value"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"lat1"</span><span class="token operator">:</span> <span class="token number">40.696645</span><span class="token punctuation">,</span>\n <span class="token property">"lon1"</span><span class="token operator">:</span> <span class="token number">-74.044724</span><span class="token punctuation">,</span>\n <span class="token property">"lat2"</span><span class="token operator">:</span> <span class="token number">40.692664</span><span class="token punctuation">,</span>\n <span class="token property">"lon2"</span><span class="token operator">:</span> <span class="token number">-74.041724</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span></code></pre></div>'}})),"\n",o.createElement(a.h5,null,o.createElement(a.strong,null,"Polyline")),"\n",o.createElement(a.p,null,"Connects multiple coordinates with lines."),"\n",o.createElement("div",{className:"width-default"},o.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`{\n "type": "polyline",\n "linecolor": "#FF00FF",\n "linewidth": 4,\n "linestyle": "dotted",\n "value": [\n {"lat": 52.521661, "lon": 13.410189},\n {"lat": 52.519263, "lon": 13.412529},\n {"lat": 52.517903, "lon": 13.407814},\n ...\n ]\n}`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),o.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="json"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span>\n <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"polyline"</span><span class="token punctuation">,</span>\n <span class="token property">"linecolor"</span><span class="token operator">:</span> <span class="token string">"#FF00FF"</span><span class="token punctuation">,</span>\n <span class="token property">"linewidth"</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>\n <span class="token property">"linestyle"</span><span class="token operator">:</span> <span class="token string">"dotted"</span><span class="token punctuation">,</span>\n <span class="token property">"value"</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span><span class="token property">"lat"</span><span class="token operator">:</span> <span class="token number">52.521661</span><span class="token punctuation">,</span> <span class="token property">"lon"</span><span class="token operator">:</span> <span class="token number">13.410189</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span><span class="token property">"lat"</span><span class="token operator">:</span> <span class="token number">52.519263</span><span class="token punctuation">,</span> <span class="token property">"lon"</span><span class="token operator">:</span> <span class="token number">13.412529</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span><span class="token property">"lat"</span><span class="token operator">:</span> <span class="token number">52.517903</span><span class="token punctuation">,</span> <span class="token property">"lon"</span><span class="token operator">:</span> <span class="token number">13.407814</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n ...\n <span class="token punctuation">]</span>\n<span class="token punctuation">}</span></code></pre></div>'}})),"\n",o.createElement(a.h5,null,o.createElement(a.strong,null,"Polyline with Precision 6 (polyline6)")),"\n",o.createElement(a.p,null,"For optimized paths using an encoded polyline."),"\n",o.createElement("div",{className:"width-default"},o.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`{\n "type": "polyline6",\n "linecolor": "#FFA500",\n "linewidth": 2,\n "value": "k}n{nAnxoefDvdMkxs@b~YomRz}QjvGj~..."\n}`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
1<path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),o.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="json"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span>\n <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"polyline6"</span><span class="token punctuation">,</span>\n <span class="token property">"linecolor"</span><span class="token operator">:</span> <span class="token string">"#FFA500"</span><span class="token punctuation">,</span>\n <span class="token property">"linewidth"</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>\n <span class="token property">"value"</span><span class="token operator">:</span> <span class="token string">"k}n{nAnxoefDvdMkxs@b~YomRz}QjvGj~..."</span>\n<span class="token punctuation">}</span></code></pre></div>'}})),"\n",o.createElement(a.h5,null,o.createElement(a.strong,null,"Polygon")),"\n",o.createElement(a.p,null,"Creates closed shapes with fill options."),"\n",o.createElement("div",{className:"width-default"},o.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`{\n "type": "polygon",\n "linecolor": "#008000",\n "lineopacity": 0.9,\n "linewidth": 2,\n "fillcolor": "#FF6347",\n "fillopacity": 0.6,\n "value": [\n {"lat": 52.521661, "lon": 13.410189},\n {"lat": 52.519263, "lon": 13.412529},\n {"lat": 52.517903, "lon": 13.407814},\n ...\n ]\n}`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),o.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="json"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span>\n <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"polygon"</span><span class="token punctuation">,</span>\n <span class="token property">"linecolor"</span><span class="token operator">:</span> <span class="token string">"#008000"</span><span class="token punctuation">,</span>\n <span class="token property">"lineopacity"</span><span class="token operator">:</span> <span class="token number">0.9</span><span class="token punctuation">,</span>\n <span class="token property">"linewidth"</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>\n <span class="token property">"fillcolor"</span><span class="token operator">:</span> <span class="token string">"#FF6347"</span><span class="token punctuation">,</span>\n <span class="token property">"fillopacity"</span><span class="token operator">:</span> <span class="token number">0.6</span><span class="token punctuation">,</span>\n <span class="token property">"value"</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span><span class="token property">"lat"</span><span class="token operator">:</span> <span class="token number">52.521661</span><span class="token punctuation">,</span> <span class="token property">"lon"</span><span class="token operator">:</span> <span class="token number">13.410189</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span><span class="token property">"lat"</span><span class="token operator">:</span> <span class="token number">52.519263</span><span class="token punctuation">,</span> <span class="token property">"lon"</span><span class="token operator">:</span> <span class="token number">13.412529</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span><span class="token property">"lat"</span><span class="token operator">:</span> <span class="token number">52.517903</span><span class="token punctuation">,</span> <span class="token property">"lon"</span><span class="token operator">:</span> <span class="token number">13.407814</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n ...\n <span class="token punctuation">]</span>\n<span class="token punctuation">}</span></code></pre></div>'}})),"\n",o.createElement(a.h5,null,o.createElement(a.strong,null,"GeoJSON Example:")),"\n",o.createElement("div",{className:"width-default"},o.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`{\n "type": "Feature",\n "properties": {\n "linecolor": "#21430B",\n "fillcolor": "#00FF00",\n "fillopacity": 0.4\n },\n "geometry": {\n "type": "Polygon",\n "coordinates": [\n [[35, 10], [45, 45], [15, 40], [10, 20], [35, 10]],\n [[20, 30], [35, 35], [30, 20], [20, 30]]\n ]\n }\n}`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
1<path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),o.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="json"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span>\n <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"Feature"</span><span class="token punctuation">,</span>\n <span class="token property">"properties"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"linecolor"</span><span class="token operator">:</span> <span class="token string">"#21430B"</span><span class="token punctuation">,</span>\n <span class="token property">"fillcolor"</span><span class="token operator">:</span> <span class="token string">"#00FF00"</span><span class="token punctuation">,</span>\n <span class="token property">"fillopacity"</span><span class="token operator">:</span> <span class="token number">0.4</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token property">"geometry"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"Polygon"</span><span class="token punctuation">,</span>\n <span class="token property">"coordinates"</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">35</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">45</span><span class="token punctuation">,</span> <span class="token number">45</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">35</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">35</span><span class="token punctuation">,</span> <span class="token number">35</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">]</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span></code></pre></div>'}})),"\n",o.createElement(a.ul,null,"\n",o.createElement(a.li,null,o.createElement(a.strong,null,"Visualization Options:")," You can define ",o.
1createElement(a.code,null,"linecolor"),", ",o.createElement(a.code,null,"lineopacity"),", ",o.createElement(a.code,null,"linewidth"),", ",o.createElement(a.code,null,"linestyle")," (",o.createElement(a.code,null,"solid"),", ",o.createElement(a.code,null,"dotted"),", ",o.createElement(a.code,null,"dashed"),", ",o.createElement(a.code,null,"longdash"),"), ",o.createElement(a.code,null,"fillcolor"),", and ",o.createElement(a.code,null,"fillopacity")," within the GeoJSON ",o.createElement(a.code,null,"properties")," object."),"\n"),"\n",o.createElement(a.h3,null,"Adding Stylings and Markers"),"\n",o.createElement(a.p,null,"In addition to geometries, you can enhance your static maps by adding custom ",o.createElement(a.strong,null,"markers")," and applying various ",o.createElement(a.strong,null,"styling options"),". These features allow you to highlight specific locations and adjust the visual appearance of your maps."),"\n",o.createElement(a.p,null,"For detailed information on how to add markers, customize styles, and explore all available options, please refer to the ",o.createElement(a.a,{href:"https://apidocs.geoapify.com/docs/maps/static/#post-requests",target:"_blank",rel:"nofollow"},"Static Maps API Documentation"),"."),"\n",o.createElement(a.h2,null,"Sending the POST Request"),"\n",o.createElement(a.p,null,"Hereâs how to send a POST request with geometries using ",o.createElement(a.code,null,"fetch")," in JavaScript:"),"\n",o.createElement("div",{className:"width-default"},o.createElement(a.h6,null,"HTML"),o.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`<img id="map" alt="Static Map with Geometries" style="width: 600px; height: 400px;">`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),o.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="html"><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>map<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Static Map with Geometries<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span></code></pre></div>'}}),o.createElement(a.h6,null,"JavaScript"),o.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`fetch(\'https://maps.geoapify.com/v1/staticmap?apiKey=YOUR_API_KEY\', {\n method: \'POST\',\n headers: {\n \'Content-Type\': \'application/json\'\n },\n body: JSON.stringify({\n width: 600,\n height: 400,\n geometries: [\n {\n type: "circle",\n linecolor: "#FF0000",\n fillcolor: "#00FF00",\n fillopacity: 0.5,\n value: { lat: 48.858844, lon: 2.294351, radius: 50 } // Eiffel Tower, Paris\n },\n {\n type: "polygon",\n linecolor: "#0000FF",\n fillcolor: "#FFFF00",\n fillopacity: 0.4,\n value: [\n { lat: 48.8566, lon: 2.3522 }, // Paris\n { lat: 48.5734, lon: 7.7521 }, // Strasbourg\n { lat: 45.7640, lon: 4.8357 } // Lyon\n ]\n }\n ],\n geojson: {\n type: "Feature",\n properties: {\n linecolor: "#21430B",\n fillcolor: "#00FF00",\n fillopacity: 0.4\n },\n geometry: {\n type: "Polygon",\n coordinates: [\n [\n [1.858, 48.856], // Near Paris\n [3.058, 50.629], // Lille\n [5.369, 43.296], // Marseille\n [4.8357, 45.764], // Lyon\n [1.858, 48.856] // Closing the polygon\n ],\n [\n [2.2137, 46.2276], // Central France (hole)\n [2.5735, 46.7276],\n [1.8537, 46.9276],\n [2.2137, 46.2276] // Closing the hole\n ]\n ]\n }\n }\n })\n})\n .then(response => response.blob())\n .then(imageBlob => {\n const reader = new FileReader();
1\n reader.onload = function() {\n const mapPreview = document.getElementById("map");\n mapPreview.src = this.result;\n };\n reader.readAsDataURL(imageBlob);\n });`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),o.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">\'https://maps.geoapify.com/v1/staticmap?apiKey=YOUR_API_KEY\'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">\'POST\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token string-property property">\'Content-Type\'</span><span class="token operator">:</span> <span class="token string">\'application/json\'</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">body</span><span class="token operator">:</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">600</span><span class="token punctuation">,</span>\n <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span>\n <span class="token literal-property property">geometries</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"circle"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">linecolor</span><span class="token operator">:</span> <span class="token string">"#FF0000"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">fillcolor</span><span class="token operator">:</span> <span class="token string">"#00FF00"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">fillopacity</span><span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">lat</span><span class="token operator">:</span> <span class="token number">48.858844</span><span class="token punctuation">,</span> <span class="token literal-property property">lon</span><span class="token operator">:</span> <span class="token number">2.294351</span><span class="token punctuation">,</span> <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token number">50</span> <span class="token punctuation">}</span> <span class="token comment">// Eiffel Tower, Paris</span>
1\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"polygon"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">linecolor</span><span class="token operator">:</span> <span class="token string">"#0000FF"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">fillcolor</span><span class="token operator">:</span> <span class="token string">"#FFFF00"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">fillopacity</span><span class="token operator">:</span> <span class="token number">0.4</span><span class="token punctuation">,</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">lat</span><span class="token operator">:</span> <span class="token number">48.8566</span><span class="token punctuation">,</span> <span class="token literal-property property">lon</span><span class="token operator">:</span> <span class="token number">2.3522</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// Paris</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">lat</span><span class="token operator">:</span> <span class="token number">48.5734</span><span class="token punctuation">,</span> <span class="token literal-property property">lon</span><span class="token operator">:</span> <span class="token number">7.7521</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// Strasbourg</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">lat</span><span class="token operator">:</span> <span class="token number">45.7640</span><span class="token punctuation">,</span> <span class="token literal-property property">lon</span><span class="token operator">:</span> <span class="token number">4.8357</span> <span class="token punctuation">}</span> <span class="token comment">// Lyon</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">geojson</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"Feature"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">linecolor</span><span class="token operator">:</span> <span class="token string">"#21430B"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">fillcolor</span><span class="token operator">:</span> <span class="token string">"#00FF00"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">fillopacity</span><span class="token operator">:</span> <span class="token number">0.4</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">geometry</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"Polygon"</span><span class="token punctuation">,</span>
1\n <span class="token literal-property property">coordinates</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">[</span>\n <span class="token punctuation">[</span><span class="token number">1.858</span><span class="token punctuation">,</span> <span class="token number">48.856</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// Near Paris</span>\n <span class="token punctuation">[</span><span class="token number">3.058</span><span class="token punctuation">,</span> <span class="token number">50.629</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// Lille</span>\n <span class="token punctuation">[</span><span class="token number">5.369</span><span class="token punctuation">,</span> <span class="token number">43.296</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// Marseille</span>\n <span class="token punctuation">[</span><span class="token number">4.8357</span><span class="token punctuation">,</span> <span class="token number">45.764</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// Lyon</span>\n <span class="token punctuation">[</span><span class="token number">1.858</span><span class="token punctuation">,</span> <span class="token number">48.856</span><span class="token punctuation">]</span> <span class="token comment">// Closing the polygon</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span>\n <span class="token punctuation">[</span><span class="token number">2.2137</span><span class="token punctuation">,</span> <span class="token number">46.2276</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// Central France (hole)</span>\n <span class="token punctuation">[</span><span class="token number">2.5735</span><span class="token punctuation">,</span> <span class="token number">46.7276</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span><span class="token number">1.8537</span><span class="token punctuation">,</span> <span class="token number">46.9276</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span><span class="token number">2.2137</span><span class="token punctuation">,</span> <span class="token number">46.2276</span><span class="token punctuation">]</span> <span class="token comment">// Closing the hole</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">imageBlob</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> reader <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FileReader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n reader<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
1\n <span class="token keyword">const</span> mapPreview <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"map"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n mapPreview<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>result<span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n reader<span class="token punctuation">.</span><span class="token function">readAsDataURL</span><span class="token punctuation">(</span>imageBlob<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}})),"\n",o.createElement(a.ol,null,"\n",o.createElement(a.li,null,"\n",o.createElement(a.p,null,o.createElement(a.strong,null,"Sending the POST Request"),o.createElement(a.br),"\n","The ",o.createElement(a.code,null,"fetch")," function sends a POST request to the Geoapify Static Maps API with your ",o.createElement(a.code,null,"apiKey"),". The request body contains map configuration data in JSON format."),"\n"),"\n",o.createElement(a.li,null,"\n",o.createElement(a.p,null,o.createElement(a.strong,null,"Headers"),o.createElement(a.br),"\n","The ",o.createElement(a.code,null,"Content-Type: application/json")," header specifies that the request body is in JSON format."),"\n"),"\n",o.createElement(a.li,null,"\n",o.createElement(a.p,null,o.createElement(a.strong,null,"Map Settings")),"\n",o.createElement(a.ul,null,"\n",o.createElement(a.li,null,o.createElement(a.code,null,"width")," and ",o.createElement(a.code,null,"height")," define the map size (600x400 pixels)."),"\n",o.createElement(a.li,null,o.createElement(a.code,null,"geometries")," is an array of shapes:","\n",o.createElement(a.ul,null,"\n",o.createElement(a.li,null,"A ",o.createElement(a.strong,null,"circle")," centered on the Eiffel Tower with red borders and green fill."),"\n",o.createElement(a.li,null,"A ",o.createElement(a.strong,null,"polygon")," connecting Paris, Strasbourg, and Lyon with blue borders and yellow fill."),"\n"),"\n"),"\n",o.createElement(a.li,null,o.createElement(a.code,null,"geojson")," defines a complex ",o.createElement(a.strong,null,"polygon")," with an inner hole, styled in green."),"\n"),"\n"),"\n",o.createElement(a.li,null,"\n",o.createElement(a.p,null,o.createElement(a.strong,null,"Handling the Response"),o.createElement(a.br),"\n","The response is converted into a ",o.createElement(a.code,null,"Blob"),", which represents the image data."),"\n"),"\n",o.createElement(a.li,null,"\n",o.createElement(a.p,null,o.createElement(a.strong,null,"Displaying the Map"),o.createElement(a.br),"\n","A ",o.createElement(a.code,null,"FileReader")," converts the image blob to a base64-encoded URL, which is assigned to the ",o.createElement(a.code,null,"src")," of an ",o.createElement(a.code,null,"<img>")," element with the ID ",o.createElement(a.code,null,"map"),", displaying the static map on the webpage."),"\n"),"\n"),"\n",o.createElement(a.p,null,"This guide helps you efficiently add complex geometries to static maps using POST requests. Let me know if youâd like more examples or further assistance!"),"\n",o.createElement(a.h2,null,"Conclusion"),"\n",o.createElement(a.p,null,"Using POST requests with the Static Maps API opens up new possibilities for creating detailed, visually rich maps. Unlike GET requests, POST requests help you:"),"\n",o.createElement(a.ul,null,"\n",o.createElement(a.li,null,"Effortlessly handle complex geometries and large datasets."),"\n",o.createElement(a.li,null,"Apply advanced styling and customizations for a unique look."),"\n",o.createElement(a.li,null,"Keep your code clean, organized, and scalable."),"\n"),"\n",o.createElement(a.p,null,"Whether you're mapping intricate routes, adding dynamic markers, or customizing styles to match your brand, POST requests offer the flexibility and control needed for seamless map rendering. With the examples and code from this guide, youâre ready to integrate static maps into your projects with ease."),"\n",o.createElement(a.p,null,o.createElement(a.a,{href:"/get-started-with-ma
1ps-api/"},"Start exploring today")," and make the most of the Static Maps API in your applications!"),"\n",o.createElement(a.p,null,"Want to see it in action? Try it in the ",o.createElement(a.a,{href:"https://apidocs.geoapify.com/playground/static-maps/",target:"_blank",rel:"nofollow"},"Geoapify Playground")," to experiment with different parameters, geometries, and styles in real-time."))}var l=function(n={}){const{wrapper:a}=Object.assign({},(0,s.RP)(),n.components);return a?o.createElement(a,n,o.createElement(p,n)):p(n)},c=t(4794),r=t(5588),i=t(8154),u=t(1574),m=t(7127),k=t(1543),g=t(3537),d=t(7339),h=t(2992),y=t(3481),f=t(9911),w=t(9856),b=t(529),E=t(8818),v=t(1435),q=t(2389),C=t(118),F=t(2833),H=t(9816),x=t(3960),T=t(5898);const S={Link:c.Link,SplitSection:y.A,BackgroundPanel:f.A,Card:w.A,Button:b.A,ButtonGroup:E.A,Banner:v.A,HowToStructuredData:q.A,FAQWithStructuredData:C.A,InputCheckbox:F.A,TryGeolocation:H.A,JSONTree:u.d,TableOfContent:x.A,PageList:T.A},L=({data:{post:n,logo:a,siteData:t,postFormattedData:p},children:l,pageContext:{modifiedTime:c}})=>{const u=n.frontmatter.featuredImage?n.frontmatter.featuredImage.childImageSharp.original:{},y=n.frontmatter.twitterImage2x1?n.frontmatter.twitterImage2x1.childImageSharp.original:{},f=n.frontmatter.languages?n.frontmatter.languages.map((n=>g.A.find((a=>a.id===n)))):[],w=f?f.map((n=>n.label)):null,b=d.A.find((a=>a.id===n.frontmatter.group))||{label:"Geoapify"},E=[n.frontmatter.image1x1,n.frontmatter.image4x3,n.frontmatter.image16x9].filter((n=>!!n)).map((n=>n.childImageSharp.original.src)),v=p.frontmatter.featuredImage?p.frontmatter.featuredImage.childImageSharp.gatsbyImageData:null,q="home"===n.frontmatter.slug.split("/").join("")?"https://www.geoapify.com/":`https://www.geoapify.com/${n.frontmatter.slug}/`;return o.createElement(o.Fragment,null,o.createElement(i.m,null,o.createElement("link",{rel:"canonical",href:q,"data-baseprotocol":"https:","data-basehost":"www.geoapify.com"})),o.createElement(k.A,{webpageTitle:n.frontmatter.title_60,webpageDescription:n.frontmatter.description_120,slug:n.frontmatter.slug,imageSrc:u.src,imageWidth:u.width,imageHeight:u.height,imageAlt:n.frontmatter.featuredImageAlt_120,ogType:"article",twitterImageSrc:y.src,twitterTitle:n.frontmatter.twitterTitle_70,twitterImageAlt:n.frontmatter.twitterImageAlt_420,twitterDescription:n.frontmatter.twitterDescription_200,articleSection:"Geo information systems (GIS)",articleTags:["tutorial",b.label].concat((0,e.A)(w)),created:n.frontmatter.date,modified:c}),o.createElement(h.A,{geoapifySlogan:t.siteMetadata.slogan,companyName:t.siteMetadata.company,logoSrc:a.childImageSharp.gatsbyImageData.src,logoWidth:a.childImageSharp.gatsbyImageData.width,logoHeight:a.childImageSharp.gatsbyImageData.height,slug:n.frontmatter.slug,articleName:n.frontmatter.title_60,articleHeadline:n.frontmatter.headline_110,published:n.frontmatter.date,modified:c,images:E}),o.createElement(m.A,null,o.createElement("article",{className:"geoapify-post"},o.createElement("header",{className:"geoapify-post-header"},o.createElement("div",{className:"geoapify-post-meta"},o.createElement("span",null,p.frontmatter.date),o.createElement("span",{className:"mx-1"}," / "),o.createElement("span",null,"by Geoapify"),o.createElement("span",{className:"ml-1"}," / in "),o.createElement("span",null,o.createElement("a",{href:"/tutorials/"},"Tutorials"))),o.createElement("h1",null,n.frontmatter.title),n.frontmatter.subtitle?o.createElement("h2",{className:"text-2xl text-gray-700 mx-2 font-light"},n.frontmatter.subtitle):null,v?o.createElement("div",{className:"geoapify-post-featured-image"},o.createElement(r.G,{image:v,alt:n.frontmatter.featuredImageAlt_120})):null,n.frontmatter.featuredImageAlt_120?o.createElement("div",{className:"text-center mt-2 mb-10 text-sm italic text-gray-700",dangerouslySetInnerHTML:{__html:n.frontmatter.featuredImageAlt_120}}):o.createElement("div",{className:"mb-10"})),o.createElement("section",{className:"geoapify-post-body"},o.createElement(s.xA,{components:S},l))),o.createElement("div",{className:"post-navigation"},o.createElement("div",{className:"post-navigation-buttons flex flex-col md:flex-row"},o.createElement("div",{className:"previous-post"},o.createElement("a",{href:"/tutorials/",rel:"prev"},o.createElement("div",{className:"previous"},o.createElement("span",{className:"chevron lnr lnr-chevron-left"}),o.createElement("div",{className:"title"},o.createElement("span",{className:"meta"},"Back to"),o.createElement("span",{className:"post-title"},"How-tos and Tutorials")))))))))};function B(n){return o.createElement(L,n,o.createElement(l,n))}},7339:function(n,a){a.A=[{id:"maps",label:"Maps"},{id:"geocoding",label:"Geocoding & Geolocation"},{id:"routing",label:"Routes & Optimization"},{id:"isoline",label:"Isochrones & isodistances"},{id:"places",label:"Places & Details"}]},9816:function(n,a,t){var e=t(6540);a.A=()=>{const{0:n,1:a}=(0,e.useState)(0),t=n=>{a(n)},s=n=>{let a;switch(n.code){case n.PERMISSION_DENIED:a="User denied the request for Geolocation.";break;case n.POSITION_UNAVAILABLE:a="Location information is unavailable.";break;case n.TIMEOUT:a="The request to get user location timed out.";break;case n.UNKNOWN_ERROR:default:a="An unknown error occurred."}t(`Error occured: ${a}`)},o=n=>{t(`Your geolocation: latitude: ${n.coords.latitude}, longitude: ${n.coords.longitude}`)};return e.createElement(e.Fragment,null,e.createElement("button",{onClick:()=>{const n={maximumAge:1e3,timeout:2e3,enableHighAccuracy:!0};navigator.geolocation?navigator.geolocation.getCurrentPosition(o,s,n):t("Geolocation is not supported by this browser.")},className:"border-solid border-2 border-indigo-300 rounded p-3 text-gray-800",type:"button"},"Try Geolocation API"),n?e.createElement("div",{className:"mt-2 text-indigo-700"},n):"")}}}]); 2//# sourceMappingURL=component---src-template-tutorial-post-js-content-file-path-src-tutorials-static-maps-
2how-to-use-post-requests-with-static-maps-api-index-mdx-5a4320ebe0dacc59028c.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.