{"id":143,"date":"2026-05-21T11:52:47","date_gmt":"2026-05-21T11:52:47","guid":{"rendered":"https:\/\/geo.edesma.org\/blog\/?p=143"},"modified":"2026-05-31T14:18:18","modified_gmt":"2026-05-31T14:18:18","slug":"a-bridge-between-qgis-and-the-web-built-with-ai-and-gis-expertise","status":"publish","type":"post","link":"https:\/\/geo.edesma.org\/blog\/?p=143&lang=en","title":{"rendered":"A Bridge Between QGIS and the Web, Built with AI and GIS Expertise"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Several years ago, I built my first interactive GIS web applications in ActionScript, when Flex still competed on equal footing with other technologies for building rich web applications \u2014 comparable to desktop apps \u2014 including GIS viewers. Later, I migrated to OpenLayers and the HTML\/JS ecosystem.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"849\" height=\"528\" src=\"https:\/\/geo.edesma.org\/blog\/wp-content\/uploads\/2026\/05\/QGISLayerViewer_1.png\" alt=\"\" class=\"wp-image-22\" style=\"aspect-ratio:1.607976071784646;width:341px;height:auto\" srcset=\"https:\/\/geo.edesma.org\/blog\/wp-content\/uploads\/2026\/05\/QGISLayerViewer_1.png 849w, https:\/\/geo.edesma.org\/blog\/wp-content\/uploads\/2026\/05\/QGISLayerViewer_1-300x187.png 300w, https:\/\/geo.edesma.org\/blog\/wp-content\/uploads\/2026\/05\/QGISLayerViewer_1-768x478.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Now, having retired, I have decided to dedicate my time to humanitarian and community initiatives, supporting the development of open data and non-profit GIS tools.<\/p>\n\n\n\n<!--more Continue reading-->\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Claude as a development tool<\/strong><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">To tackle these projects efficiently, I turned to <strong>Claude<\/strong> (Anthropic&#8217;s family of language models) as a development assistant. My role was clear: <strong>architect and project director<\/strong>. I defined the requirements, made design decisions, contributed specialized knowledge in QGIS and cartography, provided test files, identified bugs, and validated each feature against real QGIS behavior. Claude, for its part, was responsible for writing the code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The distinction is key: <strong>Claude generated the implementation<\/strong>, but without my direction \u2014 grounded in years of GIS and web development experience \u2014 it would not have known <em>what<\/em> to build, <em>how<\/em> to structure it, or whether the result was correct. In practice, the process was an <strong>iterative technical conversation<\/strong>: I posed the problems, evaluated the solutions, and guided the adjustments.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>QGIS Layer Viewer: a bridge between QGIS and the web<\/strong><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">QGIS Layer Viewer is a <strong>lightweight, serverless web map viewer<\/strong> that reads QGIS Layer Definition files (<code>.qlr<\/code>) and GeoJSON data <strong>directly in the browser<\/strong>, rendering them on an OpenLayers map with styling that faithfully replicates the original QGIS project.<\/p>\n\n\n\n<ul class=\"wp-block-list lista-indentada has-custom-css wp-custom-css-7c56d93e\">\n<li class=\"has-custom-css wp-custom-css-de195035\"><strong>No backend<\/strong>, no server-side processing, no dependency on cloud services.<\/li>\n\n\n\n<li>Files are loaded locally or from a URL.<\/li>\n\n\n\n<li><strong>Everything runs in the browser<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Who is it for?<\/strong> GIS professionals who work in QGIS and need to <strong>share styled maps on the web without rebuilding the symbology from scratch<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What problem does it solve?<\/strong> The gap between a styled QGIS layer and a publishable web map:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Export the <code>.qlr<\/code>, pair it with a GeoJSON, drop both into the viewer \u2014 done.<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What is it <em>not<\/em>?<\/strong> It is not a full GIS editor. It does not support raster layers, WMS, or complex QGIS expressions. It is a <strong>read-only<\/strong> tool, designed for quick preview and sharing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>For web developers<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The QGIS Layer Viewer source code is not only functional, but also offers concrete solutions to poorly documented problems, such as:<\/p>\n\n\n\n<ul class=\"wp-block-list lista-indentada has-custom-css wp-custom-css-6719b933\">\n<li>Translating QGIS symbology to OpenLayers.<\/li>\n\n\n\n<li>Paginating ArcGIS services.<\/li>\n\n\n\n<li>Detecting features on polygons with transparent fill.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">In my next post, I will go deeper into this application and its technical details.<\/p>\n\n\n\n<div class=\"wp-block-jetpack-related-posts\">\n<h2 class=\"wp-block-heading has-medium-gray-color has-text-color has-link-color wp-elements-4850faf1e94646f53f24c3b5794f2b37\">Related Posts<\/h2>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Several years ago, I built my first interactive GIS web applications in ActionScript, when Flex still competed on equal footing with other technologies for building rich web applications \u2014 comparable to desktop apps \u2014 including GIS viewers. Later, I migrated to OpenLayers and the HTML\/JS ecosystem. Now, having retired, I have decided to dedicate my &hellip; <a href=\"https:\/\/geo.edesma.org\/blog\/?p=143&#038;lang=en\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;A Bridge Between QGIS and the Web, Built with AI and GIS Expertise&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wikipediapreview_detectlinks":true,"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[35,37,39,41],"tags":[46,59,54,62,50],"class_list":["post-143","post","type-post","status-publish","format-standard","hentry","category-ai-en","category-applications","category-openlayers-en","category-qgis-en","tag-qlr-en","tag-claude-en","tag-geojson-en","tag-openlayers-en","tag-qgis-en"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":93,"url":"https:\/\/geo.edesma.org\/blog\/?p=93&lang=en","url_meta":{"origin":143,"position":0},"title":"QGIS Layer Viewer","author":"Eduardo Escalona","date":"May 29, 2026","format":false,"excerpt":"QGIS Layer Viewer is a lightweight, serverless web map viewer that reads QGIS Layer Definition files (.qlr) and GeoJSON data directly in the browser, rendering them on an OpenLayers map with styling that closely matches the original QGIS project \u2014 including categorized and graduated symbology, dash patterns, glow effects, SVG\u2026","rel":"","context":"In &quot;Applications&quot;","block_context":{"text":"Applications","link":"https:\/\/geo.edesma.org\/blog\/?cat=37&lang=en"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/geo.edesma.org\/blog\/wp-content\/uploads\/2026\/05\/QGISLayerViewer_1-1.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/geo.edesma.org\/blog\/wp-content\/uploads\/2026\/05\/QGISLayerViewer_1-1.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/geo.edesma.org\/blog\/wp-content\/uploads\/2026\/05\/QGISLayerViewer_1-1.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/geo.edesma.org\/blog\/wp-content\/uploads\/2026\/05\/QGISLayerViewer_1-1.png?resize=700%2C400&ssl=1 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geo.edesma.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geo.edesma.org\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geo.edesma.org\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geo.edesma.org\/blog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/geo.edesma.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=143"}],"version-history":[{"count":1,"href":"https:\/\/geo.edesma.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/143\/revisions"}],"predecessor-version":[{"id":144,"href":"https:\/\/geo.edesma.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/143\/revisions\/144"}],"wp:attachment":[{"href":"https:\/\/geo.edesma.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geo.edesma.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=143"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geo.edesma.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}