<!DOCTYPE html>
<html lang="en" >
<!-- Mirrored from geohelm.docs.acugis.com/en/latest/apps/php.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 13 Jul 2023 23:23:25 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 and PHP — 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="Documentation" href="../resources/documents.html" />
<link rel="prev" title="Leaflet GeoJson" href="geojson.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/php", "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"><a class="reference internal" href="choropleth.html">Leaflet Choropleth App</a></li>
<li class="toctree-l1"><a class="reference internal" href="geojson.html">Leaflet GeoJson</a></li>
<li class="toctree-l1 current"><a class="current reference internal" href="#">Leaflet and PHP</a><ul>
<li class="toctree-l2"><a class="reference internal" href="#access">Access</a></li>
<li class="toctree-l2"><a class="reference internal" href="#initialize">Initialize</a></li>
<li class="toctree-l2"><a class="reference internal" href="#security">Security</a></li>
<li class="toctree-l2"><a class="reference internal" href="#structure">Structure</a></li>
<li class="toctree-l2"><a class="reference internal" href="#content">Content</a></li>
<li class="toctree-l2"><a class="reference internal" href="#documentation">Documentation</a></li>
</ul>
</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 and PHP</li>
<li class="wy-breadcrumbs-aside">
<a href="https://github.com/AcuGIS/GeoHelm/blob/master/docs/apps/php.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-and-php">
<h1><a class="toc-backref" href="#id1">Leaflet and PHP</a><a class="headerlink" href="#leaflet-and-php" 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-and-php" id="id1">Leaflet and PHP</a><ul>
<li><a class="reference internal" href="#access" id="id2">Access</a></li>
<li><a class="reference internal" href="#initialize" id="id3">Initialize</a></li>
<li><a class="reference internal" href="#security" id="id4">Security</a></li>
<li><a class="reference internal" href="#structure" id="id5">Structure</a></li>
<li><a class="reference internal" href="#content" id="id6">Content</a></li>
<li><a class="reference internal" href="#documentation" id="id7">Documentation</a></li>
</ul>
</li>
</ul>
</div>
<div class="section" id="access">
<h2><a class="toc-backref" href="#id2">Access</a><a class="headerlink" href="#access" title="Permalink to this headline">¶</a></h2>
<p>A web application employing PostGIS, PHP, and LeafletJS.</p>
<p>This application uses the PHP-Database-GeoJSON file from <a class="reference external" href="https://github.com/bmcbride/PHP-Database-GeoJSON">https://github.com/bmcbride/PHP-Database-GeoJSON</a></p>
<p>It can be access via <a class="reference external" href="http://domain.com/LeafletPHPDemo.html">http://domain.com/LeafletPHPDemo.html</a></p>
<img alt="../_images/leaflet-geojson-europe.png" src="../_images/leaflet-geojson-europe.png" />
</div>
<div class="section" id="initialize">
<h2><a class="toc-backref" href="#id3">Initialize</a><a class="headerlink" href="#initialize" title="Permalink to this headline">¶</a></h2>
<p>If you any issues connecting to PostGIS, check line 12 of get-json.phpbelow:</p>
<blockquote>
<div>$conn = new PDO(‘pgsql:host=localhost;dbname=postgisftw’,’pgis’,’<YourPgisPassword>’);</div></blockquote>
<p>Replace <YourPgisPassword> with the password for user pgis.</p>
<p>The password for user pgis is auto-generated and can be found at /home/pgis/.pgpass</p>
</div>
<div class="section" id="security">
<h2><a class="toc-backref" href="#id4">Security</a><a class="headerlink" href="#security" title="Permalink to this headline">¶</a></h2>
<p>This map loads GeoJson generated from PostGIS directly and does not employ the pg_featurserv or GeoServer urls.</p>
<p>As you may have noticed, it is identical to our LeafletGeoJson.html map except for the GeoJson source url.</p>
<p>While urls for pg_featurserv and GeoServer can be secured, the url will always be exposed to your users as it is required for map rendering.</p>
<p>Conversely, the PostGIS PHP application uses the get-json.php file to establish a connection to PostGIS in the background.</p>
<p>You can employ the same method for loading GeoJson from pg_featurserv, GeoServer, or any other json url.</p>
<p>There is performance penalty, however, as the GeoJson is loaded into the end users browser and for large data sets, this can become extremely slow.</p>
</div>
<div class="section" id="structure">
<h2><a class="toc-backref" href="#id5">Structure</a><a class="headerlink" href="#structure" title="Permalink to this headline">¶</a></h2>
<p>The app is located at:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="o">/</span><span class="n">vaw</span><span class="o">/</span><span class="n">www</span><span class="o">/</span><span class="n">html</span><span class="o">/</span><span class="n">LeafletPHPDemo</span><span class="o">.</span><span class="n">html</span>
</pre></div>
</div>
<p>This is just a basic Leafletjs map in which we are pulling in geojson from get-json.php:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>$.getJSON("get-json.php", function(data) {
</pre></div>
</div>
</div>
<div class="section" id="content">
<h2><a class="toc-backref" href="#id6">Content</a><a class="headerlink" href="#content" title="Permalink to this headline">¶</a></h2>
<p>The content of the html page is displayed below.</p>
<div class="highlight-console notranslate"><div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal"> 1</span>
<span class="normal"> 2</span>
<span class="normal"> 3</span>
<span class="normal"> 4</span>
<span class="normal"> 5</span>
<span class="normal"> 6</span>
<span class="normal"> 7</span>
<span class="normal"> 8</span>
<span class="normal"> 9</span>
<span class="normal">10</span>
<span class="normal">11</span>
<span class="normal">12</span>
<span class="normal">13</span>
<span class="normal">14</span>
<span class="normal">15</span>
<span class="normal">16</span>
<span class="normal">17</span>
<span class="normal">18</span>
<span class="normal">19</span>
<span class="normal">20</span>
<span class="normal">21</span>
<span class="normal">22</span>
<span class="normal">23</span>
<span class="normal">24</span>
<span class="normal">25</span>
<span class="normal">26</span>
<span class="normal">27</span>
<span class="normal">28</span>
<span class="normal">29</span>
<span class="normal">30</span>
<span class="normal">31</span>
<span class="normal">32</span>
<span class="normal">33</span>
<span class="normal">34</span>
<span class="normal">35</span>
<span class="normal">36</span>
<span class="normal">37</span>
<span class="normal">38</span>
<span class="normal">39</span>
<span class="normal">40</span>
<span class="normal">41</span>
<span class="normal">42</span>
<span class="normal">43</span>
<span class="normal">44</span>
<span class="normal">45</span>
<span class="normal">46</span>
<span class="normal">47</span>
<span class="normal">48</span>
<span class="normal">49</span>
<span class="normal">50</span>
<span class="normal">51</span>
<span class="normal">52</span>
<span class="normal">53</span>
<span class="normal">54</span></pre></div></td><td class="code"><div><pre><span></span><span class="go"> <!doctype html></span>
<span class="go"> <html></span>
<span class="go"> <head></span>
<span class="go"> <style type="text/css"></span>
<span class="go"> body {</span>
<span class="go"> padding: 0;</span>
<span class="go"> margin: 0;</span>
<span class="go"> }</span>
<span class="go"> html, body, #map {</span>
<span class="go"> height: 100%;</span>
<span class="go"> }</span>
<span class="go"> </style></span>
<span class="go"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css"</span>
<span class="go"> integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3lqm9lzAsTxg0GFeJgoAtxuCLREZSC5lUXdVyo/7yfsqFjQ4S+aKw=="</span>
<span class="go"> crossorigin=""/></span>
<span class="go"> <script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js"</span>
<span class="go"> integrity="sha512-mNqn2Wg7tSToJhvHcqfzLMU6J4mkOImSPTxVZAdo+lcPlk+GhZmYgACEe0x35K7YzW1zJ7XyJV/TT1MrdXvMcA=="</span>
<span class="go"> crossorigin=""></script></span>
<span class="go"> </head></span>
<span class="go"> <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script></span>
<span class="go"> </head></span>
<span class="go"> <body></span>
<span class="go"> <div id="map"></div></span>
<span class="go"> <script></span>
<span class="go"> var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';</span>
<span class="go"> var osmAttrib='Data &copy <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';</span>
<span class="go"> var osm = new L.TileLayer(osmUrl, {minZoom: 2, maxZoom: 8, attribution: osmAttrib});</span>
<span class="gp"> $</span>.getJSON<span class="o">(</span><span class="s2">"get-json.php"</span>,<span class="w"> </span><span class="k">function</span><span class="o">(</span>data<span class="o">)</span><span class="w"> </span><span class="o">{</span>
<span class="go"> function onEachFeature(feature, layer) {</span>
<span class="go"> layer.bindPopup("Name: " + feature.properties.name + "<br>" + "Abbreviation: " + feature.properties.abbrev);</span>
<span class="go"> }</span>
<span class="go"> var geojson = L.geoJson(data, {</span>
<span class="go"> onEachFeature: onEachFeature</span>
<span class="go"> });</span>
<span class="go"> var map = L.map('map').fitBounds(geojson.getBounds());</span>
<span class="go"> osm.addTo(map);</span>
<span class="go"> geojson.addTo(map);</span>
<span class="go"> });</span>
<span class="go"> </script></span>
<span class="go"> </body></span>
<span class="go"> </html></span>
</pre></div></td></tr></table></div>
</div>
</div>
<div class="section" id="documentation">
<h2><a class="toc-backref" href="#id7">Documentation</a><a class="headerlink" href="#documentation" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://leafletjs.com/">https://leafletjs.com/</a></p>
<p><a class="reference external" href="https://leafletjs.com/examples/geojson/">https://leafletjs.com/examples/geojson/</a></p>
</div>
</div>
</div>
</div>
<footer>
<div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
<a href="../resources/documents.html" class="btn btn-neutral float-right" title="Documentation" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right"></span></a>
<a href="geojson.html" class="btn btn-neutral float-left" title="Leaflet GeoJson" 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/php.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 13 Jul 2023 23:23:25 GMT -->
</html>