https://mapsproject.it/component---src-templates-contents-jsx-cont…s-local-geojson-mdx-e1894dc99c3a97b22092.js

1"use strict";(self.webpackChunk_lad_sapienza_scms=self.webpackChunk_lad_sapienza_scms||[]).push([[6325],{65790:function(a,n,s){var t=s(28453),e=s(96540),p=s(12931);function o(a){const n=Object.assign({h3:"h3",a:"a",span:"span",p:"p"},(0,t.R)(),a.components);return e.createElement(e.Fragment,null,e.createElement(n.h3,{id:"adding-a-vector-layer-from-a-local-geojson-file",style:{position:"relative"}},e.createElement(n.a,{href:"#adding-a-vector-layer-from-a-local-geojson-file","aria-label":"adding a vector layer from a local geojson file permalink",className:"anchor before"},e.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Adding a vector layer from a local GeoJSON file"),"\n",e.createElement("div",{className:"row mt-3 mb-5 border-top border-bottom py-3"},e.createElement("div",{className:"col-6"},e.createElement(p.$1,{center:"37.00416,37.48551,9",baseLayers:["EsriSatellite","CAWM"]},e.createElement(p.fA,{name:"Sites",source:{path2data:{path:"/data/ksa.geojson"}},checked:!0,searchInFields:{Item_Label:"Label",Site_Name:"Site name",Site_Description:"Site description"},style:{id:"ksaSites",type:"circle",paint:{"circle-radius":4,"circle-color":"#007cbf","circle-stroke-width":1.5,"circle-stroke-color":"#000000"}},popupTemplate:"<h4>${Site_Name}</h4><p>${Site_Description}</p><small>${Item_Label}</small>"})),e.createElement("div",{className:"text-muted small mt-3"},e.createElement(n.p,null,"Data from ",e.createElement(n.a,{href:"https://opencontext.org/projects/ca4f4719-f2a5-4119-99fa-b04573c8929a"},"Kahramanmaraş Survey")," created by ",e.createElement(n.a,{href:"http://opencontext.org/persons/3208923d-69d0-70e9-9cc1-23ad97770aec"},"Elizabeth Carter")," and published on ",e.createElement(n.a,{href:"https://opencontext.org/projects/ca4f4719-f2a5-4119-99fa-b04573c8929a"},"OpenContext")," add distributed with ",e.createElement(n.a,{href:"https://creativecommons.org/licenses/by/4.0"},"CC BY 4.0 International")," license."))),e.createElement("div",{className:"col-6"},e.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span>\r\n  MapLibre<span class="token punctuation">,</span>\r\n  VectorLayerLibre\r\n<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"../../../modules/scms.js"</span>\r\n\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MapLibre</span></span> \r\n  <span class="token attr-name">center</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>37.00416,37.48551,9<span class="token punctuation">"</span></span>\r\n  <span class="token attr-name">baseLayers</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">"EsriSatellite"</span><span class="token punctuation">,</span> <span class="token string">"CAWM"</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>\r\n<span class="token punctuation">></span></span><span class="token plain-text">\r\n  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">VectorLayerLibre</span></span>\r\n    <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Sites<span class="token punctuation">"</span></span>\r\n    <span class="token attr-name">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>

1\r\n      <span class="token literal-property property">path2data</span><span class="token operator">:</span> <span class="token punctuation">{</span>\r\n        <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"/data/ksa.geojson"</span>\r\n      <span class="token punctuation">}</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\r\n    <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span>\r\n    <span class="token attr-name">searchInFields</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\r\n      <span class="token string-property property">"Item_Label"</span><span class="token operator">:</span> <span class="token string">"Label"</span><span class="token punctuation">,</span>\r\n      <span class="token string-property property">"Site_Name"</span><span class="token operator">:</span> <span class="token string">"Site name"</span><span class="token punctuation">,</span>\r\n      <span class="token string-property property">"Site_Description"</span><span class="token operator">:</span> <span class="token string">"Site description"</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\r\n    <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\r\n      <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">"ksaSites"</span><span class="token punctuation">,</span>\r\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>\r\n      <span class="token literal-property property">paint</span><span class="token operator">:</span> <span class="token punctuation">{</span>\r\n        <span class="token string-property property">"circle-radius"</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>\r\n        <span class="token string-property property">"circle-color"</span><span class="token operator">:</span> <span class="token string">"#007cbf"</span><span class="token punctuation">,</span>\r\n        <span class="token string-property property">"circle-stroke-width"</span><span class="token operator">:</span> <span class="token number">1.5</span><span class="token punctuation">,</span>\r\n        <span class="token string-property property">"circle-stroke-color"</span><span class="token operator">:</span> <span class="token string">"#000000"</span>\r\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\r\n    <span class="token attr-name">popupTemplate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>&lt;h4>${Site_Name}&lt;/h4>&lt;p>${Site_Description}&lt;/p>&lt;small>${Item_Label}&lt;/small><span class="token punctuation">"</span></span>\r\n  <span class="token punctuation">/></span></span><span class="token plain-text">\r\n \r\n</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MapLibre</span></span><span class="token punctuation">></span></span></code></pre></div>'}}))))}n.A=function(a){void 0===a&&(a={});const{wrapper:n}=Object.assign({},(0,t.R)(),a.components);return n?e.createElement(n,a,e.createElement(o,a)):o(a)}},59026:function(a,n,s){s.r(n),s.d(n,{Head:function(){return u},default:function(){return i}});

1var t=s(65790),e=s(96540),p=s(26846),o=s(43048),c=s(28453),r=s(15);function l(a){let{data:n,children:s}=a;return e.createElement(p.A,null,e.createElement(o.A,null,e.createElement(c.x,null,s)))}function i(a){return e.createElement(l,a,e.createElement(t.A,a))}const u=a=>{let{data:n}=a;return e.createElement(r.A,{title:n.mdx.frontmatter.title,description:n.mdx.frontmatter.description})}}}]);
2//# sourceMappingURL=component---src-templates-contents-jsx-content-file-path-src-usr-contents-maplibre-examples-local-geojson-mdx-e1894dc99c3a97b22092.js.map