<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: dbauzus-glx</title>
    <description>The latest articles on DEV Community by dbauzus-glx (@dbauszusglx).</description>
    <link>https://dev.to/dbauszusglx</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F257979%2F76116f82-ffb3-45a1-b4a8-e1ef493ba11d.jpeg</url>
      <title>DEV Community: dbauzus-glx</title>
      <link>https://dev.to/dbauszusglx</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/dbauszusglx"/>
    <language>en</language>
    <item>
      <title>NEON MAPP - XYZ Spatial Data Interfaces for 🌩 PostGIS</title>
      <dc:creator>dbauzus-glx</dc:creator>
      <pubDate>Wed, 28 Aug 2024 16:50:57 +0000</pubDate>
      <link>https://dev.to/dbauszusglx/neon-mapp-xyz-spatial-data-interfaces-for-postgis-4g53</link>
      <guid>https://dev.to/dbauszusglx/neon-mapp-xyz-spatial-data-interfaces-for-postgis-4g53</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/neon"&gt;Neon Open Source Starter Kit Challenge &lt;/a&gt;: Ultimate Starter Kit&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  XYZ/MAPP
&lt;/h2&gt;

&lt;p&gt;Open Source presentation, controller, domain and service layers for cloud native spatial data and application interfaces. XYZ being the Node application domain and service layer for a RESTful API which provides secure gateways for spatial data sources and 3rd party service providers. MAPP is an ES6 JS library which acts as application control and presentation layers. MAPP utilizes the Openlayers map engine for mapviews and provides an interface to the XYZ API. The library abstracts away the complexities of handling spatial data objects such as layers and locations.&lt;/p&gt;

&lt;p&gt;The project is under an &lt;a href="https://github.com/GEOLYTIX/xyz/blob/main/LICENSE" rel="noopener noreferrer"&gt;MIT License&lt;/a&gt; as a public repository on Github.&lt;br&gt;
⚡️&lt;a href="https://github.com/GEOLYTIX/xyz" rel="noopener noreferrer"&gt;https://github.com/GEOLYTIX/xyz&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  My Journey
&lt;/h2&gt;

&lt;p&gt;I have been working with proprietary Web Mapping Services in the noughties and dabbled with Python (&lt;a href="https://docs.djangoproject.com/en/5.1/ref/contrib/gis/" rel="noopener noreferrer"&gt;GeoDjango&lt;/a&gt;) and Java (&lt;a href="https://geoserver.org/" rel="noopener noreferrer"&gt;GeoServer&lt;/a&gt;) prior to the emergence of Node.js. Being a fullstack dev I was immediately hooked by the idea of using only Javacsript and SQL. I joined Geolytix in 2015 and have been working on XYZ/MAPP ever since.&lt;/p&gt;

&lt;p&gt;The project has been conceived as Open Source since its inception. My employer being extremely progressive by letting us work OS at all times.🤲&lt;/p&gt;

&lt;p&gt;Over the years many talented developer have joined MAPP team.&lt;br&gt;
👩‍💻&lt;a href="https://github.com/cityremade" rel="noopener noreferrer"&gt;https://github.com/cityremade&lt;/a&gt;&lt;br&gt;
👨‍💻&lt;a href="https://github.com/RobAndrewHurst" rel="noopener noreferrer"&gt;https://github.com/RobAndrewHurst&lt;/a&gt;&lt;br&gt;
👨‍💻&lt;a href="https://github.com/simon-leech" rel="noopener noreferrer"&gt;https://github.com/simon-leech&lt;/a&gt;&lt;br&gt;
👨‍💻&lt;a href="https://github.com/AlexanderGeere" rel="noopener noreferrer"&gt;https://github.com/AlexanderGeere&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We are currently applying to bring the project under the &lt;a href="https://www.osgeo.org/" rel="noopener noreferrer"&gt;OSGEO&lt;/a&gt; umbrella as a community project. &lt;/p&gt;

&lt;p&gt;*Disclaimer. I am on a paid NEON Launch plan and have been using NEON since early access. I am using NEON on a daily basis for the ease of quickly creating cloud hosted dev databases.&lt;/p&gt;
&lt;h2&gt;
  
  
  Your Journey...
&lt;/h2&gt;

&lt;p&gt;Will be an abridged version of the &lt;a href="https://github.com/GEOLYTIX/xyz/wiki/Getting-started" rel="noopener noreferrer"&gt;Getting Started&lt;/a&gt; / &lt;a href="https://github.com/GEOLYTIX/mapp/blob/main/foss4g_workshop/getting_started.md" rel="noopener noreferrer"&gt;Workshop&lt;/a&gt; to create an XYZ/MAPP instance with access to an editable spatial dataset in a NEON PostGIS extended database.&lt;/p&gt;

&lt;p&gt;tl;dr; &lt;a href="https://neon-dev-challenge-hzro47z37-dbauszus-projects.vercel.app/" rel="noopener noreferrer"&gt;Here&lt;/a&gt; is the link for the Vercel deployment for the Neon Dev Challenge which I created while writing following notes.&lt;/p&gt;
&lt;h3&gt;
  
  
  Create a table in the Neon Dashboard
&lt;/h3&gt;

&lt;p&gt;Following script can be run in the NEON SQL Editor to create an empty table with a serial ID for new records and spatial indexed geometry. New locations [records] added to this table have fields to store textual, numeric, and boolean values.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;CREATE&lt;/span&gt; &lt;span class="k"&gt;TABLE&lt;/span&gt; &lt;span class="n"&gt;IF&lt;/span&gt; &lt;span class="k"&gt;NOT&lt;/span&gt; &lt;span class="k"&gt;EXISTS&lt;/span&gt; &lt;span class="n"&gt;dev_challenge&lt;/span&gt;
&lt;span class="p"&gt;(&lt;/span&gt;
   &lt;span class="n"&gt;id&lt;/span&gt; &lt;span class="nb"&gt;SERIAL&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
   &lt;span class="n"&gt;char_field&lt;/span&gt; &lt;span class="nb"&gt;character&lt;/span&gt; &lt;span class="nb"&gt;varying&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
   &lt;span class="n"&gt;textarea&lt;/span&gt; &lt;span class="nb"&gt;text&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
   &lt;span class="n"&gt;numeric_field&lt;/span&gt; &lt;span class="nb"&gt;numeric&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
   &lt;span class="n"&gt;integer_field&lt;/span&gt; &lt;span class="nb"&gt;integer&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
   &lt;span class="n"&gt;json_field&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
   &lt;span class="n"&gt;bool_field&lt;/span&gt; &lt;span class="nb"&gt;boolean&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
   &lt;span class="n"&gt;datetime_integer&lt;/span&gt; &lt;span class="nb"&gt;integer&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
   &lt;span class="n"&gt;geom_3857&lt;/span&gt; &lt;span class="n"&gt;geometry&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="k"&gt;CREATE&lt;/span&gt; &lt;span class="k"&gt;INDEX&lt;/span&gt; &lt;span class="n"&gt;IF&lt;/span&gt; &lt;span class="k"&gt;NOT&lt;/span&gt; &lt;span class="k"&gt;EXISTS&lt;/span&gt; &lt;span class="n"&gt;dev_challenge_geom_3857&lt;/span&gt;
   &lt;span class="k"&gt;ON&lt;/span&gt; &lt;span class="n"&gt;dev_challenge&lt;/span&gt; &lt;span class="k"&gt;USING&lt;/span&gt; &lt;span class="n"&gt;gist&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;geom_3857&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  XYZ/MAPP local
&lt;/h3&gt;

&lt;p&gt;Clone the XYZ/MAPP repository.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git clone https://github.com/GEOLYTIX/xyz
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Open the repository folder in an IDE, like VSCode. Install the node_modules and &lt;em&gt;esbuild the mapp libraries&lt;/em&gt; with the provided script.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install
npm run _build
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You are now able to run the XYZ as an Express application with &lt;code&gt;node express.js&lt;/code&gt;. We recommend to create a node launch.json to Run and Debug the application with VSCode.&lt;/p&gt;

&lt;p&gt;Copy the connection details from your NEON dashboard as value for the DBS_NEON environment variable.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"version"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"0.2.0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"configurations"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"type"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"node"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"request"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"launch"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Neon Dev.to Challenge"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"program"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"express.js"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"env"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"WORKSPACE"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"https://geolytix.github.io/mapp/workspaces/neon_dev_challenge.json"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"__WORKSPACE"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"file:./public/workspace.json"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"DBS_NEON"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"postgresql://dbauszus-glx:************@ep-curly-base-242741.eu-central-1.aws.neon.tech/neondb?sslmode=require"&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You should now be able to access the MAPP default view on &lt;a href="http://localhost:3000" rel="noopener noreferrer"&gt;http://localhost:3000&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here you should be able to create locations stored in the NEON PostGIS table created earlier and modify the field values.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5wal7s7jo7stkyj01yyw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5wal7s7jo7stkyj01yyw.png" alt="Image description" width="800" height="493"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Workspace
&lt;/h3&gt;

&lt;p&gt;The workspace is a JSON configuration for locales and layers hosted in an XYZ application. You are more than welcome to use the &lt;a href="https://geolytix.github.io/mapp/workspaces/neon_dev_challenge.json" rel="noopener noreferrer"&gt;example workspace&lt;/a&gt; from the GitHub pages for geolytix/mapp repository. You may also copy the content into a workspace.json file in the public directory of your XYZ clone.&lt;/p&gt;

&lt;h3&gt;
  
  
  Deploy to Vercel
&lt;/h3&gt;

&lt;p&gt;You can deploy your instance as a cloud function via Vercel. This is available for free as part of the &lt;a href="https://vercel.com/docs/accounts/plans/hobby" rel="noopener noreferrer"&gt;Hobby Plan&lt;/a&gt;. Please refer to the &lt;a href="https://github.com/GEOLYTIX/xyz/wiki/VERCEL" rel="noopener noreferrer"&gt;XYZ wiki in regards to Vercel&lt;/a&gt; manifest. You need to create a vercel.json file with your &lt;code&gt;env&lt;/code&gt; object from the launch.json before you can deploy through the vercel cli.&lt;/p&gt;

&lt;p&gt;All of the cli configs are still default as of today.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fakdshyeqe3sj844kxi57.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fakdshyeqe3sj844kxi57.png" alt="Image description" width="800" height="485"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can access the deployed instance here.&lt;br&gt;
👉&lt;a href="https://neon-dev-challenge-hzro47z37-dbauszus-projects.vercel.app/" rel="noopener noreferrer"&gt;https://neon-dev-challenge-hzro47z37-dbauszus-projects.vercel.app/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>neonchallenge</category>
      <category>postgres</category>
      <category>database</category>
    </item>
  </channel>
</rss>
