1"use strict";(self.webpackChunkgeoapify_home=self.webpackChunkgeoapify_home||[]).push([[8099],{7695:function(n,a,e){e.r(a),e.d(a,{default:function(){return A}});var t=e(4506),s=e(8453),o=e(6540);function p(n){const a=Object.assign({p:"p",a:"a",em:"em",h2:"h2",ul:"ul",li:"li",strong:"strong",span:"span",code:"code",ol:"ol"},(0,s.RP)(),n.components);return o.createElement(o.Fragment,null,o.createElement(a.p,null,"Welcome to our comprehensive tutorial on accessing and visualizing administrative division boundaries with ",o.createElement(a.a,{href:"/boundaries-api/"},"Boundary API"),". In this step-by-step guide, we will walk you through the process of ",o.createElement(a.em,null,"fetching and displaying administrative division boundaries")," on an interactive Leaflet map."),"\n",o.createElement(a.p,null,"Administrative boundaries are essential geographical data that define the territorial extents of regions, such as countries, states, provinces, or municipalities. They are crucial in various applications, from geographical analysis to spatial planning and resource management. Geoapify's Boundary API simplifies the process of accessing this valuable information, allowing developers and map enthusiasts to integrate administrative division boundaries into their web applications quickly."),"\n",o.createElement(a.p,null,"Throughout this tutorial, we'll guide you through the steps of ",o.createElement(a.em,null,"setting up a Geoapify API key"),", ",o.createElement(a.em,null,"creating a Leaflet map, making API requests"),", and ",o.createElement(a.em,null,"visualizing the administrative division boundaries"),". We'll also explore a ",o.createElement(a.a,{href:"https://jsfiddle.net/Geoapify/4kwf8e6b/",target:"_blank",rel:"nofollow"},"live demo on JSFiddle"),", enabling you to experiment with the code and see the results in real time."),"\n",o.createElement(a.h2,null,"About Boundaries API"),"\n",o.createElement(a.p,null,"Geoapify's ",o.createElement(a.a,{href:"/boundaries-api/"},"Boundaries API")," is a geospatial tool designed to access boundary geometries programmatically. The API offers administrative division boundaries at different levels, such as countries, states, provinces, municipalities, etc."),"\n",o.createElement(a.p,null,"The API operates with OpenStreetMap's ",o.createElement(a.a,{href:"https://wiki.openstreetmap.org/wiki/Tag%3Aboundary%3Dadministrative",target:"_blank",rel:"nofollow"},"boundary=administrative")," objects and returns ",o.createElement(a.a,{href:"https://en.wikipedia.org/wiki/GeoJSON",target:"_blank",rel:"nofollow"},"GeoJSON objects"),", ensuring compatibility and consistency with widely used geographic data."),"\n",o.createElement(a.p,null,"Geoapify's Boundaries API includes two endpoints:"),"\n",o.createElement(a.ul,null,"\n",o.createElement(a.li,null,o.createElement(a.strong,null,"partOf"),": endpoint allows users to retrieve parent boundaries based on a specific set of latitude and longitude coordinates, establishing a hierarchical relationship within the boundaries. Here is an example of a URL:"),"\n"),"\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://api.geoapify.com/v1/boundaries/part-of?lon=1.4201154213592417&lat=43.503417968183584&geometry=geometry_1000&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">
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="js"><pre class="language-js"><code class="language-js"><span class="token literal-property property">https</span><span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>api<span class="token punctuation">.</span>geoapify<span class="token punctuation">.</span>com<span class="token operator">/</span>v1<span class="token operator">/</span>boundaries<span class="token operator">/</span>part<span class="token operator">-</span><span class="token keyword">of</span><span class="token operator">?</span>lon<span class="token operator">=</span><span class="token number">1.4201154213592417</span><span class="token operator">&</span>lat<span class="token operator">=</span><span class="token number">43.503417968183584</span><span class="token operator">&</span>geometry<span class="token operator">=</span>geometry_1000<span class="token operator">&</span>apiKey<span class="token operator">=</span><span class="token constant">YOUR_API_KEY</span></code></pre></div>'}})),"\n",o.createElement(a.ul,null,"\n",o.createElement(a.li,null,o.createElement(a.strong,null,"consistOf"),": the endpoint enables users to fetch child boundaries within a parent boundary. It allows you to specify the subdivision level and obtain lower-level administrative division boundaries. Here is an example of a URL:"),"\n"),"\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://api.geoapify.com/v1/boundaries/consists-of?id=51b1251e292527014059a5ef6791ebd94540f00101f901f3df3900000000009203094f63636974616e6965&geometry=geometry_1000&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="js"><pre class="language-js"><code class="language-js"><span class="token literal-property property">https</span><span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>api<span class="token punctuation">.</span>geoapify<span class="token punctuation">.</span>com<span class="token operator">/</span>v1<span class="token operator">/</span>boundaries<span class="token operator">/</span>consists<span class="token operator">-</span><span class="token keyword">of</span><span class="token operator">?</span>id<span class="token operator">=</span>51b1251e292527014059a5ef6791ebd94540f00101f901f3df3900000000009203094f63636974616e6965<span class="token operator">&</span>geometry<span class="token operator">=</span>geometry_1000<span class="token operator">&</span>apiKey<span class="token operator">=</span><span class="token constant">YOUR_API_KEY</span></code></pre></div>'}})),"\n",o.createElement(a.p,null,"A noteworthy aspect of the ",o.
1createElement(a.strong,null,"consistOf")," endpoint is that it requires using a ",o.createElement(a.code,null,"place_id")," as the ",o.createElement(a.code,null,"id")," parameter. This ",o.createElement(a.code,null,"place_id")," can be obtained by leveraging Geoapify's ",o.createElement(a.a,{href:"/geocoding-api/"},"Geocoding API")," to search for a specific country, state, county, or city."),"\n",o.createElement(a.p,null,"It's worth mentioning that Geoapify offers a ",o.createElement(a.a,{href:"https://apidocs.geoapify.com/playground/boundaries/",target:"_blank",rel:"nofollow"},"Boundary API Playground"),", a user-friendly environment where you can freely explore and test the API without the need for any coding or registration. This allows you to experiment with the API's capabilities and get hands-on experience before implementing it in your projects."),"\n",o.createElement(a.p,null,"Now, in this tutorial, we will guide you step-by-step on leveraging the consistOf endpoint to retrieve county divisions within California, US."),"\n",o.createElement(a.h2,null,"Code Sample: Fetching Administrative Division Boundaries"),"\n",o.createElement(a.p,null,"Below is a code sample demonstrating utilizing Geoapify's Boundary API to fetch administrative division boundaries. By default, the code fetches and displays county divisions for the state of ",o.createElement(a.em,null,"California, US"),". However, you can easily modify the location to any other place by adjusting the parameters in the JSFiddle environment."),"\n",o.createElement("div",{className:"width-default mb-10"},o.createElement("iframe",{width:"100%",height:"400",src:"//jsfiddle.net/Geoapify/4kwf8e6b/105/embedded/",allowFullScreen:"allowfullscreen",frameBorder:"0"})),"\n",o.createElement(a.p,null,"This code sample demonstrates how to utilize Geoapify's Boundary API to fetch and display administrative division boundaries on an interactive map using ",o.createElement(a.a,{href:"https://leafletjs.com/",target:"_blank",rel:"nofollow"},"Leaflet"),". Here are some comments to facilitate understanding and enable easy customization to suit your specific requirements:"),"\n",o.createElement(a.ol,null,"\n",o.createElement(a.li,null,o.createElement(a.strong,null,"Setting up the API Key:"),"\nTo access Geoapify's services, you must ",o.createElement(a.a,{href:"https://myprojects.geoapify.com/",target:"_blank",rel:"nofollow"},"sign in and obtain Geoapify's API key"),". The API key is essential for authenticating requests to Geoapify's API."),"\n"),"\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(`const myAPIKey = "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="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> myAPIKey <span class="token operator">=</span> <span class="token string">"YOUR_API_KEY"</span><span class="token punctuation">;</span></code></pre></div>'}})),"\n",o.createElement(a.p,null,"You can find more information about the Geoapify account on the ",o.
1createElement(a.a,{href:"/get-started-with-maps-api/"},"Getting started with Maps API")," page."),"\n",o.createElement(a.ol,{start:"2"},"\n",o.createElement(a.li,null,o.createElement(a.strong,null,"Creating the Map:")),"\n"),"\n",o.createElement(a.p,null,'We use an HTML container with the "my-map" id parameter as a map container:'),"\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(`<div id="my-map"></div>`, 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>div</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>my-map<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre></div>'}})),"\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(`#my-map {\n width: 100%;\n height: 100%;\n margin: 0;\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="css"><pre class="language-css"><code class="language-css"><span class="token selector">#my-map</span> <span class="token punctuation">{</span>\n <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>\n <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>\n <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre></div>'}})),"\n",o.createElement(a.p,null,"We start by creating a Leaflet map with an initial view centered at latitude 0 and longitude 0, and a zoom level of 1. You can modify the initial view by changing the latitude, longitude, and zoom level as needed."),"\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(`const map = L.map(\'my-map\').setView([0, 0], 1);`, 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="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> map <span class="token operator">=</span> <span class="token constant">L</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token string">\'my-map\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setView</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}})),"\n",o.createElement(a.p,null,"We define the URLs for the base map tiles, catering to both standard and retina displays. This ensures optimal rendering on different devices:"),"\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(`const isRetina = L.Browser.retina;\nconst baseUrl = "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}.png?apiKey={apiKey}";\nconst retinaUrl = "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}@2x.png?apiKey={apiKey}";`, 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="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> isRetina <span class="token operator">=</span> <span class="token constant">L</span><span class="token punctuation">.</span>Browser<span class="token punctuation">.</span>retina<span class="token punctuation">;</span>\n<span class="token keyword">const</span> baseUrl <span class="token operator">=</span> <span class="token string">"https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}.png?apiKey={apiKey}"</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> retinaUrl <span class="token operator">=</span> <span class="token string">"https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}@2x.png?apiKey={apiKey}"</span><span class="token punctuation">;</span></code></pre></div>'}})),"\n",o.createElement(a.p,null,"We add the base map layer to the Leaflet map using the defined base map URLs. The attribution text provides credit to Geoapify, OpenMapTiles, and OpenStreetMap contributors:"),"\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(`L.tileLayer(isRetina ? retinaUrl : baseUrl, {\n attribution: \'Powered by <a href="https://www.geoapify.com/" target="_blank">Geoapify</a> | <a href="http://openmaptiles.org/" target="_blank">© OpenMapTiles</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap</a> contributors\',\n apiKey: myAPIKey,\n maxZoom: 20,\n id: \'osm-bright\',\n}).addTo(map);`, 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="js"><pre class="language-js"><code class="language-js"><span class="token constant">L</span><span class="token punctuation">.</span><span class="token function">tileLayer</span><span class="token punctuation">(</span>isRetina <span class="token operator">?</span> retinaUrl <span class="token operator">:</span> baseUrl<span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">attribution</span><span class="token operator">:</span> <span class="token string">\'Powered by <a href="https://www.geoapify.com/" target="_blank">Geoapify</a> | <a href="http://openmaptiles.org/" target="_blank">© OpenMapTiles</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap</a> contributors\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">apiKey</span><span class="token operator">:</span> myAPIKey<span class="token punctuation">,</span>\n <span class="token literal-property property">maxZoom</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>\n <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">\'osm-bright\'</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addTo</span><span class="token punctuation">(</span>map<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}})),"\n",o.createElement(a.ol,{start:"3"},"\n",o.createElement(a.li,null,o.createElement(a.strong,null,"Default Location - California:"),"\nBy default, the function is set to fetch administrative division boundaries for California. You can change this location by modifying the ",o.createElement(a.code,null,"place")," variable in JSFiddle to explore different places:"),"\n"),"\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(`const place = "California, US";`, 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="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> place <span class="token operator">=</span> <span class="token string">"California, US"</span><span class="token punctuation">;</span></code></pre></div>'}})),"\n",o.createElement(a.ol,{start:"4"},"\n",o.createElement(a.li,null,o.createElement(a.strong,null,"Fetching Administrative Boundaries:"),"\nThe ",o.
1createElement(a.code,null,"getAdministrativeDivisions")," function is the heart of the code, responsible for fetching and displaying the administrative division boundaries."),"\n"),"\n",o.createElement(a.p,null,"We need to get a place_id to call the Boundaries API. We utilize Geoapify's Geocoding API to get the ",o.createElement(a.a,{href:"/place-details-api/"},"place details and a unique ",o.createElement(a.code,null,"place_id"))," for the specified location:"),"\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(`const placeData = await fetch(\\`https://api.geoapify.com/v1/geocode/search?text=\\${encodeURIComponent(place)}&limit=1&apiKey=\\${myAPIKey}\\`).then(result => result.json());\n\nif (placeData && placeData.features.length) {\n const placeId = placeData.features[0].properties.place_id;\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="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> placeData <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://api.geoapify.com/v1/geocode/search?text=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>place<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&limit=1&apiKey=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>myAPIKey<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">result</span> <span class="token operator">=></span> result<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">if</span> <span class="token punctuation">(</span>placeData <span class="token operator">&&</span> placeData<span class="token punctuation">.</span>features<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> placeId <span class="token operator">=</span> placeData<span class="token punctuation">.</span>features<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>properties<span class="token punctuation">.</span>place_id<span class="token punctuation">;</span>\n <span class="token operator">...</span>\n<span class="token punctuation">}</span></code></pre></div>'}})),"\n",o.createElement(a.p,null,"If the search was successful, we adjust the map view to fit the geographical boundaries of the specified location using the bounding box coordinates obtained from ",o.
1createElement(a.code,null,"placeData"),":"),"\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(`const bbox = placeData.features[0].bbox;\nmap.fitBounds([\n [bbox[1], bbox[0]],\n [bbox[3], bbox[2]]\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="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> bbox <span class="token operator">=</span> placeData<span class="token punctuation">.</span>features<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>bbox<span class="token punctuation">;</span>\nmap<span class="token punctuation">.</span><span class="token function">fitBounds</span><span class="token punctuation">(</span><span class="token punctuation">[</span>\n <span class="token punctuation">[</span>bbox<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> bbox<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span>bbox<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span> bbox<span class="token punctuation">[</span><span class="token number">2</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 punctuation">;</span></code></pre></div>'}})),"\n",o.createElement(a.p,null,"Additionally, we fetch the place boundary using Geoapify's Places API and store it in the ",o.createElement(a.code,null,"placeDetailsData")," variable. If the data contains valid features with ",o.createElement(a.code,null,"feature_type")," set to 'details', we use Leaflet's ",o.createElement(a.code,null,"L.geoJSON")," to display the boundary on the map:"),"\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(`const placeDetailsData = await fetch(\\`https://api.geoapify.com/v2/place-details?id=\\${placeId}&features=details&apiKey=\\${myAPIKey}\\`).then(result => result.json());\n\nif (placeDetailsData && placeDetailsData.features.find(feature => feature.properties.feature_type === \'details\')) {\n L.geoJSON(placeDetailsData, {\n style: (feature) => {\n return {\n stroke: true,\n fill: false,\n color: \'#3e3be3\',\n weight: 4,\n opacity: 0.7,\n smoothFactor: 0.5,\n interactive: false\n };\n }\n }).addTo(map);\n} else {\n console.log("Place Details are not found");\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="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> placeDetailsData <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://api.geoapify.com/v2/place-details?id=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>placeId<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&features=details&apiKey=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>myAPIKey<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">result</span> <span class="token operator">=></span> result<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">if</span> <span class="token punctuation">(</span>placeDetailsData <span class="token operator">&&</span> placeDetailsData<span class="token punctuation">.</span>features<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">feature</span> <span class="token operator">=></span> feature<span class="token punctuation">.</span>properties<span class="token punctuation">.</span>feature_type <span class="token operator">===</span> <span class="token string">\'details\'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token constant">L</span><span class="token punctuation">.</span><span class="token function">geoJSON</span><span class="token punctuation">(</span>placeDetailsData<span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token function-variable function">style</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">feature</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">stroke</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token literal-property property">fill</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">\'#3e3be3\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">weight</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>\n <span class="token literal-property property">opacity</span><span class="token operator">:</span> <span class="token number">0.7</span><span class="token punctuation">,</span>
1\n <span class="token literal-property property">smoothFactor</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">interactive</span><span class="token operator">:</span> <span class="token boolean">false</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 punctuation">)</span><span class="token punctuation">.</span><span class="token function">addTo</span><span class="token punctuation">(</span>map<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Place Details are not found"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre></div>'}})),"\n",o.createElement(a.p,null,"Next, we use Geoapify's Boundaries API's ",o.createElement(a.code,null,"consist-of")," endpoint to fetch administrative division boundaries based on the obtained ",o.createElement(a.code,null,"place_id"),". The API response is stored in the ",o.createElement(a.code,null,"divisionsData")," variable:"),"\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(`const divisionsData = await fetch(\\`https://api.geoapify.com/v1/boundaries/consists-of?id=\\${placeId}&geometry=geometry_1000&apiKey=\\${myAPIKey}\\`).then(result => result.json());`, 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="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> divisionsData <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://api.geoapify.com/v1/boundaries/consists-of?id=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>placeId<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&geometry=geometry_1000&apiKey=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>myAPIKey<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">result</span> <span class="token operator">=></span> result<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}
1)),"\n",o.createElement(a.p,null,"If the ",o.createElement(a.code,null,"divisionsData")," contains data, we use Leaflet's ",o.createElement(a.code,null,"L.geoJSON")," again to display the administrative division boundaries on the map."),"\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(`if (divisionsData && divisionsData.features) {\n const divisionsLayer = L.geoJSON(divisionsData, {\n style: (feature) => {\n return {\n stroke: true,\n fill: true,\n fillColor: \'#a4a3f0\',\n fillOpacity: 0.15,\n color: \'#3e3be3\',\n weight: 2,\n opacity: 0.7,\n smoothFactor: 0.5,\n interactive: false\n };\n }\n }).addTo(map);\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="js"><pre class="language-js"><code class="language-js"><span class="token keyword">if</span> <span class="token punctuation">(</span>divisionsData <span class="token operator">&&</span> divisionsData<span class="token punctuation">.</span>features<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> divisionsLayer <span class="token operator">=</span> <span class="token constant">L</span><span class="token punctuation">.</span><span class="token function">geoJSON</span><span class="token punctuation">(</span>divisionsData<span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token function-variable function">style</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">feature</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">stroke</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token literal-property property">fill</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token literal-property property">fillColor</span><span class="token operator">:</span> <span class="token string">\'#a4a3f0\'</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.15</span><span class="token punctuation">,</span>\n <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">\'#3e3be3\'</span><span class="token punctuation">,</span>
1\n <span class="token literal-property property">weight</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>\n <span class="token literal-property property">opacity</span><span class="token operator">:</span> <span class="token number">0.7</span><span class="token punctuation">,</span>\n <span class="token literal-property property">smoothFactor</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">interactive</span><span class="token operator">:</span> <span class="token boolean">false</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 punctuation">)</span><span class="token punctuation">.</span><span class="token function">addTo</span><span class="token punctuation">(</span>map<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre></div>'}})),"\n",o.createElement(a.p,null,"We hope these comments help you grasp the code's functionality and empower you to adapt it to your specific needs. This code sample serves as a practical foundation to seamlessly integrate Geoapify's Boundary API into your projects and create captivating interactive maps with administrative division boundaries. Enjoy exploring and customizing the possibilities with Geoapify and Leaflet!"),"\n",o.createElement(a.h2,null,"Conclusion"),"\n",o.createElement(a.p,null,"Congratulations! You have completed our step-by-step tutorial on utilizing Geoapify's Boundary API to access and visualize administrative division boundaries on an interactive map. This tutorial taught you how to leverage the ",o.createElement(a.strong,null,"consistOf")," endpoint to fetch hierarchical relationships within administrative boundaries, gaining valuable insights into regional structures and hierarchies."),"\n",o.createElement(a.p,null,"Remember, Geoapify's Boundary API offers more than just administrative boundaries. You can explore low-emission zone boundaries, postal code boundaries, and more to cater to diverse mapping and geospatial use cases."),"\n",o.createElement(a.p,null,"As you delve into the world of geospatial data, we encourage you to visit the Boundaries API ",o.createElement(a.a,{href:"https://apidocs.geoapify.com/docs/boundaries/",target:"_blank",rel:"nofollow"},"documentation page")," and ",o.createElement(a.a,{href:"/boundaries-api/#faq"},"Boundaries API FAQ")," to find answers to common questions and further enhance your understanding of the API's capabilities."))}var c=function(n){void 0===n&&(n={});const{wrapper:a}=Object.assign({},(0,s.RP)(),n.components);return a?o.createElement(a,n,o.createElement(p,n)):p(n)},l=e(4794),i=e(2532),r=e(8154),u=e(1574),m=e(7127),d=e(1543),g=e(3537),h=e(7339),f=e(2992),k=e(3481),y=e(9911),w=e(9856),v=e(529),b=e(8818),H=e(1435),E=e(2389),x=e(118),F=e(2833),I=e(9816),L=e(3960),V=e(5898);const M={Link:l.Link,SplitSection:k.A,BackgroundPanel:y.A,Card:w.A,Button:v.A,ButtonGroup:b.A,Banner:H.A,HowToStructuredData:E.A,FAQWithStructuredData:x.A,InputCheckbox:F.A,TryGeolocation:I.A,JSONTree:u.d,TableOfContent:L.A,PageList:V.A},_=n=>{let{data:{post:a,logo:e,siteData:p,postFormattedData:c},children:l,pageContext:{modifiedTime:u}}=n;const k=a.frontmatter.featuredImage?a.frontmatter.featuredImage.childImageSharp.original:{},y=a.frontmatter.twitterImage2x1?a.frontmatter.twitterImage2x1.childImageSharp.original:{},w=a.frontmatter.languages?a.frontmatter.languages.map((n=>g.A.find((a=>a.id===n)))):[],v=w?w.map((n=>n.label)):null,b=h.A.find((n=>n.id===a.frontmatter.group))||{label:"Geoapify"},H=[a.frontmatter.image1x1,a.frontmatter.image4x3,a.frontmatter.image16x9].filter((n=>!!n)).map((n=>n.childImageSharp.original.src)),E=c.frontmatter.featuredImage?c.frontmatter.featuredImage.childImageSharp.gatsbyImageData:null,x="home"===a.frontmatter.slug.split("/").join("")?"https://www.geoapify.com/":`https://www.geoapify.com/${a.frontmatter.slug}/`;return o.createElement(o.Fragment,null,o.createElement(r.m,null,o.createElement("link",{rel:"canonical",href:x,"data-baseprotocol":"https:","data-basehost":"www.geoapify.com"})),o.createElement(d.A,{webpageTitle:a.frontmatter.title_60,webpageDescription:a.frontmatter.description_120,slug:a.frontmatter.slug,imageSrc:k.src,imageWidth:k.width,imageHeight:k.height,imageAlt:a.frontmatter.featuredImageAlt_12
10,ogType:"article",twitterImageSrc:y.src,twitterTitle:a.frontmatter.twitterTitle_70,twitterImageAlt:a.frontmatter.twitterImageAlt_420,twitterDescription:a.frontmatter.twitterDescription_200,articleSection:"Geo information systems (GIS)",articleTags:["tutorial",b.label].concat((0,t.A)(v)),created:a.frontmatter.date,modified:u}),o.createElement(f.A,{geoapifySlogan:p.siteMetadata.slogan,companyName:p.siteMetadata.company,logoSrc:e.childImageSharp.gatsbyImageData.src,logoWidth:e.childImageSharp.gatsbyImageData.width,logoHeight:e.childImageSharp.gatsbyImageData.height,slug:a.frontmatter.slug,articleName:a.frontmatter.title_60,articleHeadline:a.frontmatter.headline_110,published:a.frontmatter.date,modified:u,images:H}),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,c.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,a.frontmatter.title),a.frontmatter.subtitle?o.createElement("h2",{className:"text-2xl text-gray-700 mx-2 font-light"},a.frontmatter.subtitle):null,E?o.createElement("div",{className:"geoapify-post-featured-image"},o.createElement(i.G,{image:E,alt:a.frontmatter.featuredImageAlt_120})):null,a.frontmatter.featuredImageAlt_120?o.createElement("div",{className:"text-center mt-2 mb-10 text-sm italic text-gray-700",dangerouslySetInnerHTML:{__html:a.frontmatter.featuredImageAlt_120}}):o.createElement("div",{className:"mb-10"})),o.createElement("section",{className:"geoapify-post-body"},o.createElement(s.xA,{components:M},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 A(n){return o.createElement(_,n,o.createElement(c,n))}},2389:function(n,a,e){var t=e(6540),s=e(8154);a.A=n=>{let{name:a,description:e,supplies:o,tools:p,steps:c}=n;const l={"@context":"https://schema.org","@type":"HowTo",name:a,description:e,steps:c.map((n=>({"@type":"HowToStep",name:n.name,url:n.url,itemListElement:n.items.map((n=>({"@type":"HowToTip",text:n})))})))};return o&&o.length&&(l.supply=o.map((n=>({"@type":"HowToSupply",name:n})))),p&&p.length&&(l.tools=p.map((n=>({"@type":"HowToTool",name:n})))),t.createElement(s.m,null,t.createElement("script",{type:"application/ld+json"},JSON.stringify(l)))}},2992:function(n,a,e){var t=e(6540),s=e(8154);a.A=n=>{let{companyName:a,geoapifySlogan:e,logoSrc:o,logoWidth:p,logoHeight:c,slug:l,articleName:i,articleHeadline:r,published:u,modified:m,images:d}=n;const g={"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.geoapify.com/#organization",name:a,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:o,width:p,height:c,caption:a},slogan:e,image:{"@id":"https://www.geoapify.com/#logo"}}]},h={"@type":"Article","@id":`https://www.geoapify.com/${l}/#article`,mainEntityOfPage:`https://www.geoapify.com/${l}/`,name:i,headline:r,inLanguage:"en-US",publisher:{"@id":"https://www.geoapify.com/#organization"},author:{"@id":"https://www.geoapify.com/#organization"},datePublished:u,dateModified:m};return d&&(h.image=d),g["@graph"].push(h),t.createElement(s.m,null,t.createElement("script",{type:"application/ld+json"},JSON.stringify(g)))}},9816:function(n,a,e){var t=e(6540);a.A=()=>{const{0:n,1:a}=(0,t.useState)(0),e=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."}e(`Error occured: ${a}`)},o=n=>{e(`Your geolocation: latitude: ${n.coords.latitude}, longitude: ${n.coords.longitude}`)};return t.createElement(t.Fragment,null,t.createElement("button",{onClick:()=>{const n={maximumAge:1e3,timeout:2e3,enableHighAccuracy:!0};navigator.geolocation?navigator.geolocation.getCurrentPosition(o,s,n):e("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?t.createElement("div",{className:"mt-2 text-indigo-700"},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"}]},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"}]}}]); 2//# sourceMappingURL=component---src-template-tutorial-post-js-content-file-path-src-tutorials-boundaries-getting-administrative-divisions-index-mdx-1f9ba86bf1d6fe4efce4.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.