<!DOCTYPE html> <html lang="en" > <!-- Mirrored from geohelm.docs.acugis.com/en/latest/apps/choropleth.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 13 Jul 2023 23:23:19 GMT --> <!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack --> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Leaflet Choropleth App — AcuGIS GeoHelm 0.4.3 documentation</title> <!-- AcuGIS 1 --> <!--[if lt IE 9]> <script src="../_static/js/html5shiv.min.js"></script> <![endif]--> <script type="text/javascript" id="documentation_options" data-url_root="../" src="../_static/documentation_options.js"></script> <script type="text/javascript" src="../_static/jquery.js"></script> <script type="text/javascript" src="../_static/underscore.js"></script> <script type="text/javascript" src="../_static/doctools.js"></script> <script type="text/javascript" src="../_static/language_data.js"></script> <script async="async" type="text/javascript" src="../../../_/static/javascript/readthedocs-doc-embed.js"></script> <script type="text/javascript" src="../_static/js/theme.js"></script> <link rel="stylesheet" href="../_static/css/theme.css" type="text/css" /> <link rel="stylesheet" href="../_static/pygments.css" type="text/css" /> <link rel="stylesheet" href="../_static/custom.css" type="text/css" /> <link rel="index" title="Index" href="../genindex.html" /> <link rel="search" title="Search" href="../search.html" /> <link rel="next" title="Leaflet GeoJson" href="geojson.html" /> <link rel="prev" title="Publish Styles Only" href="../qgis/style-only.html" /> <!-- RTD Extra Head --> <link rel="stylesheet" href="../../../_/static/css/readthedocs-doc-embed.css" type="text/css" /> <script type="application/json" id="READTHEDOCS_DATA">{"ad_free": false, "api_host": "https://readthedocs.org", "builder": "sphinx", "canonical_url": null, "docroot": "/docs/", "features": {"docsearch_disabled": false}, "global_analytics_code": "UA-17997319-1", "language": "en", "page": "apps/choropleth", "programming_language": "perl", "project": "geohelm", "proxied_api_host": "/_", "source_suffix": ".rst", "subprojects": {}, "theme": "sphinx_rtd_theme", "user_analytics_code": "", "version": "latest"}</script> <!-- Using this variable directly instead of using `JSON.parse` is deprecated. The READTHEDOCS_DATA global variable will be removed in the future. --> <script type="text/javascript"> READTHEDOCS_DATA = JSON.parse(document.getElementById('READTHEDOCS_DATA').innerHTML); </script> <script type="text/javascript" src="../../../_/static/javascript/readthedocs-analytics.js" async="async"></script> <!-- end RTD <extrahead> --> </head> <div id="header" style="position: fixed; height: 70px; padding-bottom: 20px; overflow: hidden; background-color: #28728d; display: block; z-index: 1000; width: 100%;"> <div class="acugis_geosuite" style="color:#fff!important; padding-left:30px; font-size:26px; padding-top: 20px;"><a href="https://geohelm.docs.acugis.com/" style="color:#fff!important; text-decoration:none!important">AcuGIS GeoHelm</a></div> </div> </div> <body class="wy-body-for-nav"> <div class="wy-grid-for-nav"> <nav data-toggle="wy-nav-shift" class="wy-nav-side"> <div class="wy-side-scroll"> <div id="header2"> </div> <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation" style="padding-top: 45px;"> <p class="caption"><span class="caption-text">Getting Started</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../intro.html">Intro</a></li> <li class="toctree-l1"><a class="reference internal" href="../installing.html">Installation</a></li> <li class="toctree-l1"><a class="reference internal" href="../layout.html">Layout</a></li> <li class="toctree-l1"><a class="reference internal" href="../webmin.html">Control Panel</a></li> <li class="toctree-l1"><a class="reference internal" href="../webmin.html#removing-the-control-panel">Removing the Control Panel</a></li> </ul> <p class="caption"><span class="caption-text">PostGIS</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../components/createdb/index.html">Create Database</a></li> <li class="toctree-l1"><a class="reference internal" href="../components/postgresql/index.html">PostgreSQL</a></li> <li class="toctree-l1"><a class="reference internal" href="../components/postgis/index.html">PostGIS</a></li> <li class="toctree-l1"><a class="reference internal" href="../components/pgrouting/index.html">PgRouting</a></li> <li class="toctree-l1"><a class="reference internal" href="../components/shp2pgsql/index.html">shp2pgsql</a></li> <li class="toctree-l1"><a class="reference internal" href="../components/osm2pgsql/index.html">osm2pgsql</a></li> <li class="toctree-l1"><a class="reference internal" href="../components/raster2pgsql/index.html">raster2pgsql</a></li> </ul> <p class="caption"><span class="caption-text">GeoServer</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../geoserver/admin/index.html">Access</a></li> <li class="toctree-l1"><a class="reference internal" href="../geoserver/geoservers/index.html">Overview</a></li> <li class="toctree-l1"><a class="reference internal" href="../geoserver/tomcat/index.html">Apache Tomcat</a></li> <li class="toctree-l1"><a class="reference internal" href="../geoserver/workspace/index.html">Create a Workspace</a></li> <li class="toctree-l1"><a class="reference internal" href="../geoserver/store/index.html">Create Store</a></li> <li class="toctree-l1"><a class="reference internal" href="../geoserver/layer/index.html">Add Layer</a></li> <li class="toctree-l1"><a class="reference internal" href="../geoserver/shp/index.html">Load ESRI Shapefile</a></li> <li class="toctree-l1"><a class="reference internal" href="../geoserver/styles/index.html">Styles</a></li> </ul> <p class="caption"><span class="caption-text">pg_tileserv</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../components/pgtileserv/index.html">pg_tileserv</a></li> <li class="toctree-l1"><a class="reference internal" href="../components/pgfeatureserv/index.html">pg_featureserv</a></li> </ul> <p class="caption"><span class="caption-text">Database Operations</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../database/snapshot/index.html">Database Snapshots</a></li> <li class="toctree-l1"><a class="reference internal" href="../database/clone/index.html">Clone Database</a></li> <li class="toctree-l1"><a class="reference internal" href="../database/restore/index.html">Restore Database</a></li> </ul> <p class="caption"><span class="caption-text">QGIS</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../qgis/home.html">Introduction</a></li> <li class="toctree-l1"><a class="reference internal" href="../qgis/pgservice.html">pg_service.conf</a></li> <li class="toctree-l1"><a class="reference internal" href="../qgis/qgis.html">Create a QGIS Project</a></li> <li class="toctree-l1"><a class="reference internal" href="../qgis/publish.html">Publish Layers</a></li> <li class="toctree-l1"><a class="reference internal" href="../qgis/style-only.html">Publish Styles Only</a></li> </ul> <p class="caption"><span class="caption-text">LeafletJS</span></p> <ul class="current"> <li class="toctree-l1 current"><a class="current reference internal" href="#">Leaflet Choropleth App</a><ul> <li class="toctree-l2"><a class="reference internal" href="#intro">Intro</a></li> <li class="toctree-l2"><a class="reference internal" href="#choropleth-maps">Choropleth Maps</a></li> <li class="toctree-l2"><a class="reference internal" href="#featuresrv-url">featuresrv URL</a></li> <li class="toctree-l2"><a class="reference internal" href="#querying-features">Querying Features</a></li> <li class="toctree-l2"><a class="reference internal" href="#relative-values">Relative Values</a></li> <li class="toctree-l2"><a class="reference internal" href="#print">Print</a></li> <li class="toctree-l2"><a class="reference internal" href="#using-geoserver">Using GeoServer</a></li> <li class="toctree-l2"><a class="reference internal" href="#documentation">Documentation</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="geojson.html">Leaflet GeoJson</a></li> <li class="toctree-l1"><a class="reference internal" href="php.html">Leaflet and PHP</a></li> </ul> <p class="caption"><span class="caption-text">Resources</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../resources/documents.html">Documentation</a></li> <li class="toctree-l1"><a class="reference internal" href="../resources/css.html">CSS</a></li> <li class="toctree-l1"><a class="reference internal" href="../resources/security.html">Security</a></li> <li class="toctree-l1"><a class="reference internal" href="../resources/nagios.html">Nagios</a></li> <li class="toctree-l1"><a class="reference internal" href="../resources/support.html">Project Support</a></li> <li class="toctree-l1"><a class="reference internal" href="../resources/commercial.html">Commercial Support</a></li> <li class="toctree-l1"><a class="reference internal" href="../resources/license.html">License</a></li> </ul> </div> </div> </nav> <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"> <nav class="wy-nav-top" aria-label="top navigation"> <i data-toggle="wy-nav-top" class="fa fa-bars"></i> <a href="../index-2.html">AcuGIS GeoHelm</a> </nav> <div class="wy-nav-content"> <div class="rst-content"> <div role="navigation" aria-label="breadcrumbs navigation"> <ul class="wy-breadcrumbs"> <li><a href="../index-2.html" class="icon icon-home"></a> »</li> <li>Leaflet Choropleth App</li> <li class="wy-breadcrumbs-aside"> <a href="https://github.com/AcuGIS/GeoHelm/blob/master/docs/apps/choropleth.rst" class="fa fa-github"> Edit on GitHub</a> </li> </ul> <hr/> </div> <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article"> <div itemprop="articleBody"> <div class="section" id="leaflet-choropleth-app"> <h1><a class="toc-backref" href="#id1">Leaflet Choropleth App</a><a class="headerlink" href="#leaflet-choropleth-app" title="Permalink to this headline">¶</a></h1> <div class="contents topic" id="table-of-contents"> <p class="topic-title">Table of Contents</p> <ul class="simple"> <li><a class="reference internal" href="#leaflet-choropleth-app" id="id1">Leaflet Choropleth App</a><ul> <li><a class="reference internal" href="#intro" id="id2">Intro</a></li> <li><a class="reference internal" href="#choropleth-maps" id="id3">Choropleth Maps</a></li> <li><a class="reference internal" href="#featuresrv-url" id="id4">featuresrv URL</a></li> <li><a class="reference internal" href="#querying-features" id="id5">Querying Features</a></li> <li><a class="reference internal" href="#relative-values" id="id6">Relative Values</a></li> <li><a class="reference internal" href="#print" id="id7">Print</a></li> <li><a class="reference internal" href="#using-geoserver" id="id8">Using GeoServer</a></li> <li><a class="reference internal" href="#documentation" id="id9">Documentation</a></li> </ul> </li> </ul> </div> <div class="section" id="intro"> <h2><a class="toc-backref" href="#id2">Intro</a><a class="headerlink" href="#intro" title="Permalink to this headline">¶</a></h2> <p>GeoSuite includes a Leaflet Choropleth map using your pg_featurserv installation</p> <p>The map can be access via:</p> <blockquote> <div><a class="reference external" href="http://domain.com/LeafletChoropleth.html">http://domain.com/LeafletChoropleth.html</a></div></blockquote> <p>It should appear as below:</p> <img alt="../_images/ChoroplethApp.png" src="../_images/ChoroplethApp.png" /> <img alt="../_images/spacer.png" src="../_images/spacer.png" /> <p>This map uses Leafletjs and the Leaflet Choropleth Plugin:</p> <blockquote> <div><a class="reference external" href="https://github.com/timwis/leaflet-choropleth">https://github.com/timwis/leaflet-choropleth</a></div></blockquote> </div> <div class="section" id="choropleth-maps"> <h2><a class="toc-backref" href="#id3">Choropleth Maps</a><a class="headerlink" href="#choropleth-maps" title="Permalink to this headline">¶</a></h2> <p>A Choropleth map renders coloring based on user defined ranges.</p> <p>In the demo map, GDP is used to determine country coloring.</p> <p>At top right, a legend is displayed that shows the color range</p> <img alt="../_images/gdp-1.png" src="../_images/gdp-1.png" /> <img alt="../_images/spacer.png" src="../_images/spacer.png" /> <p>This metric we are using (gdp_md), along with the color and steps between is passed via the choroplethLayer as below:</p> <div class="highlight-console notranslate"><div class="highlight"><pre><span></span><span class="go">// Add GeoJSON</span> <span class="gp"> $</span>.getJSON<span class="o">(</span>full_url,<span class="w"> </span><span class="k">function</span><span class="w"> </span><span class="o">(</span>geojson<span class="o">)</span><span class="w"> </span><span class="o">{</span> <span class="go"> var choroplethLayer = L.choropleth(geojson, {</span> <span class="go"> valueProperty: 'gdp_md',</span> <span class="go"> scale: ['#fbfad4', 'green'],</span> <span class="go"> steps: 5,</span> <span class="go"> mode: 'q',</span> <span class="go"> style: {</span> <span class="go"> color: '#fff',</span> <span class="go"> weight: 2,</span> <span class="go"> fillOpacity: 0.8</span> </pre></div> </div> <p>The js for our Legend is below and updating the choropleth metric requires only updating the display name:</p> <div class="highlight-console notranslate"><div class="highlight"><pre><span></span><span class="go">// Add legend</span> <span class="go"> var legend = L.control({ position: 'topright' })</span> <span class="go"> legend.onAdd = function (map) {</span> <span class="go"> var div = L.DomUtil.create('div', 'info legend')</span> <span class="go"> var limits = choroplethLayer.options.limits</span> <span class="go"> var colors = choroplethLayer.options.colors</span> <span class="go"> var labels = []</span> <span class="go"> // Add min & max</span> <span class="go"> div.innerHTML = `</span> <span class="go"> <div class="labels"></span> <span class="go"> <div class="quarter1">` + limits[0] + `</div></span> <span class="go"> <div class="quarter2">` + Math.round(((limits[limits.length - 1]-limits[0])*.25)+limits[0]) + `</div></span> <span class="go"> <div class="quarter3">` + Math.round(((limits[limits.length - 1]-limits[0])*.75)+limits[0]) + `</div></span> <span class="go"> <div class="quarter4">` + limits[limits.length - 1] + `</div></span> <span class="go"> </div>`</span> <span class="go"> limits.forEach(function (limit, index) {</span> <span class="go"> labels.push('<li style="background-color: ' + colors[index] + '"></li>')</span> <span class="go"> })</span> <span class="go"> div.innerHTML += '<ul>' + labels.join('') + '</ul> <span>'+humanize('Median GDP')+'</span>'</span> <span class="go"> return div</span> <span class="go"> }</span> <span class="go"> legend.addTo(map);</span> <span class="go"> });</span> </pre></div> </div> </div> <div class="section" id="featuresrv-url"> <h2><a class="toc-backref" href="#id4">featuresrv URL</a><a class="headerlink" href="#featuresrv-url" title="Permalink to this headline">¶</a></h2> <p>If you need to change the url for any reason, go to /var/www/html/LeafletChoroDemo.html and edit line 155:</p> <div class="highlight-console notranslate"><div class="highlight"><pre><span></span><span class="go">var full_url = "https://<YourIP>:9001/collections/public.countries/items.json?limit=100&continent=Europe";</span> </pre></div> </div> <p>Change <YourIP> to your server IP or hostname.</p> <p>Note: If you are not using SSL, update the line to use ‘HTTP’ and port to 9000</p> </div> <div class="section" id="querying-features"> <h2><a class="toc-backref" href="#id5">Querying Features</a><a class="headerlink" href="#querying-features" title="Permalink to this headline">¶</a></h2> <p>In our demo app, we are only limiting the number of items retured (100) and the continent (Europe):</p> <div class="highlight-console notranslate"><div class="highlight"><pre><span></span><span class="go">var full_url = "http://carmen.webgis1.com:9000/collections/public.countries/items.json?limit=100&continent=Europe";</span> </pre></div> </div> <p>As you can see, this results in a large number of Properies being displayed on click.</p> <p>We can change this using the pg_featurserv query parameters.</p> <p>Let’s add below to limit the Properties displayed to country name, estimated population, and gdp:</p> <div class="highlight-console notranslate"><div class="highlight"><pre><span></span><span class="go">&properties=name,pop_est,gdp_md</span> </pre></div> </div> <p>Our url now becomes:</p> <div class="highlight-console notranslate"><div class="highlight"><pre><span></span><span class="go">var full_url = "http://carmen.webgis1.com:9000/collections/public.countries/items.json?limit=100&continent=Europe&properties=name,pop_est,gdp_md";</span> </pre></div> </div> <p>Clicking on the map, the properties now becomes more manageable:</p> <img alt="../_images/query-2.png" src="../_images/query-2.png" /> <img alt="../_images/spacer.png" src="../_images/spacer.png" /> </div> <div class="section" id="relative-values"> <h2><a class="toc-backref" href="#id6">Relative Values</a><a class="headerlink" href="#relative-values" title="Permalink to this headline">¶</a></h2> <p>It’s important to note that while properties are the value from the database the Choropleth function shows values relative to our query.</p> <div class="highlight-console notranslate"><div class="highlight"><pre><span></span><span class="go">var full_url = "http://carmen.webgis1.com:9000/collections/public.countries/items.json?limit=100&continent=Europe&properties=name,pop_est,gdp_md";</span> </pre></div> </div> <p>If we look at the shading for Belarus, for example, it’s GDP is rendered relative to the items (Europe, in our case)</p> <img alt="../_images/belarus.png" src="../_images/belarus.png" /> <img alt="../_images/spacer.png" src="../_images/spacer.png" /> <p>Let’s now change our Query to remove ‘&continent=Europe’ and increase the limit to 500 to include all countries</p> <div class="highlight-console notranslate"><div class="highlight"><pre><span></span><span class="go">var full_url = "http://carmen.webgis1.com:9000/collections/public.countries/items.json?limit=500&properties=name,pop_est,gdp_md";</span> </pre></div> </div> <p>As we can see, the GDP for Belarus relative to the world (and not just Europe) shows a deeper shade of green,as do the other countries of Europe as we are now seeing GDP relative to all countries and not just Europe.</p> <img alt="../_images/belarus-3.png" src="../_images/belarus-3.png" /> <img alt="../_images/spacer.png" src="../_images/spacer.png" /> </div> <div class="section" id="print"> <h2><a class="toc-backref" href="#id7">Print</a><a class="headerlink" href="#print" title="Permalink to this headline">¶</a></h2> <p>Printing for the demo app is enabled by the leaflet.browser.print plugin:</p> <blockquote> <div><a class="reference external" href="https://github.com/Igor-Vladyka/leaflet.browser.print">https://github.com/Igor-Vladyka/leaflet.browser.print</a></div></blockquote> <p>The print plugin offers Portrait, Landscape, Auto, and Custom options</p> <p><strong>1. Click the print icona and select Auto</strong></p> <img alt="../_images/print.png" src="../_images/print.png" /> <img alt="../_images/spacer.png" src="../_images/spacer.png" /> <p><strong>2. On click a new window will open atop the current window as below. Select “Save as PDF” from the dropdown.</strong></p> <img alt="../_images/print-page.png" src="../_images/print-page.png" /> <img alt="../_images/spacer.png" src="../_images/spacer.png" /> <p><strong>3. Depending on your device, you may have additional print/save options as well</strong></p> <img alt="../_images/print-options.png" src="../_images/print-options.png" /> <img alt="../_images/spacer.png" src="../_images/spacer.png" /> </div> <div class="section" id="using-geoserver"> <h2><a class="toc-backref" href="#id8">Using GeoServer</a><a class="headerlink" href="#using-geoserver" title="Permalink to this headline">¶</a></h2> <p>As you may have noticed, our map requires only a json feed.</p> <p>In the demo, we are using pg_featurserv, but we can change this to GeoServer with 3 simple changes:</p> <p><strong>1. In your GeoServer instance, go to Layer Preview and select GeoJson under WFS for the USA Popular layer</strong></p> <img alt="../_images/json-1.png" src="../_images/json-1.png" /> <img alt="../_images/spacer.png" src="../_images/spacer.png" /> <p><strong>2. Substiture the full url for pg_featurserv url</strong></p> <div class="highlight-console notranslate"><div class="highlight"><pre><span></span><span class="go">var full_url = "http://domain.com/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50&outputFormat=application/json";</span> </pre></div> </div> <p><strong>3. Update line 159 to FAMILIES</strong></p> <div class="highlight-console notranslate"><div class="highlight"><pre><span></span><span class="go">valueProperty: 'FAMILIES',</span> </pre></div> </div> <p><strong>4. Update line 208 to FAMILIES</strong></p> <div class="highlight-console notranslate"><div class="highlight"><pre><span></span><span class="go">div.innerHTML += '<ul>' + labels.join('') + '</ul> <span>'+humanize('FAMILIES')+'</span>'</span> </pre></div> </div> <p><strong>5. Refreshing the page should now show our USA Population layer with FAMILIES as you metric:</strong></p> <img alt="../_images/geoserver-1.png" src="../_images/geoserver-1.png" /> <img alt="../_images/spacer.png" src="../_images/spacer.png" /> </div> <div class="section" id="documentation"> <h2><a class="toc-backref" href="#id9">Documentation</a><a class="headerlink" href="#documentation" title="Permalink to this headline">¶</a></h2> <p><a class="reference external" href="https://access.crunchydata.com/documentation/pg_featureserv/latest/">https://access.crunchydata.com/documentation/pg_featureserv/latest/</a></p> <p><a class="reference external" href="https://github.com/timwis/leaflet-choropleth">https://github.com/timwis/leaflet-choropleth</a></p> <p><a class="reference external" href="https://github.com/CrunchyData/pg_featureserv">https://github.com/CrunchyData/pg_featureserv</a></p> </div> </div> </div> </div> <footer> <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation"> <a href="geojson.html" class="btn btn-neutral float-right" title="Leaflet GeoJson" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right"></span></a> <a href="../qgis/style-only.html" class="btn btn-neutral float-left" title="Publish Styles Only" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left"></span> Previous</a> </div> <hr/> <div role="contentinfo"> <p> © Copyright acugis <span class="commit"> Revision <code>db2a027e</code>. </span> </p> </div> Built with <a href="http://sphinx-doc.org/">Sphinx</a> using a <a href="https://github.com/rtfd/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org/">Read the Docs</a>. </footer> </div> </div> </section> </div> <div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="versions"> <span class="rst-current-version" data-toggle="rst-current-version"> <span class="fa fa-book"> Read the Docs</span> v: latest <span class="fa fa-caret-down"></span> </span> <div class="rst-other-versions"> <dl> <dt>Versions</dt> <dd><a href="../index.html">latest</a></dd> </dl> <dl> <dt>Downloads</dt> <dd><a href="http://geohelm.docs.acugis.com/_/downloads/en/latest/pdf/">pdf</a></dd> <dd><a href="http://geohelm.docs.acugis.com/_/downloads/en/latest/htmlzip/">html</a></dd> <dd><a href="http://geohelm.docs.acugis.com/_/downloads/en/latest/epub/">epub</a></dd> </dl> <dl> <dt>On Read the Docs</dt> <dd> <a href="http://readthedocs.org/projects/geohelm/?fromdocs=geohelm">Project Home</a> </dd> <dd> <a href="http://readthedocs.org/builds/geohelm/?fromdocs=geohelm">Builds</a> </dd> </dl> </div> </div> <script type="text/javascript"> jQuery(function () { SphinxRtdTheme.Navigation.enable(true); }); </script> </body> <!-- Mirrored from geohelm.docs.acugis.com/en/latest/apps/choropleth.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 13 Jul 2023 23:23:24 GMT --> </html>