<!DOCTYPE html>
<html lang="en" >
<!-- Mirrored from geohelm.docs.acugis.com/en/latest/apps/geojson.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 13 Jul 2023 23:23:24 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 GeoJson — 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 and PHP" href="php.html" />
<link rel="prev" title="Leaflet Choropleth App" href="choropleth.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/geojson", "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 current"><a class="current reference internal" href="#">Leaflet GeoJson</a><ul>
<li class="toctree-l2"><a class="reference internal" href="#access">Access</a></li>
<li class="toctree-l2"><a class="reference internal" href="#pg-featurserv-url">pg_featurserv URL</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>
<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 GeoJson</li>
<li class="wy-breadcrumbs-aside">
<a href="https://github.com/AcuGIS/GeoHelm/blob/master/docs/apps/geojson.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-geojson">
<h1><a class="toc-backref" href="#id1">Leaflet GeoJson</a><a class="headerlink" href="#leaflet-geojson" 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-geojson" id="id1">Leaflet GeoJson</a><ul>
<li><a class="reference internal" href="#access" id="id2">Access</a></li>
<li><a class="reference internal" href="#pg-featurserv-url" id="id3">pg_featurserv URL</a></li>
<li><a class="reference internal" href="#content" id="id4">Content</a></li>
<li><a class="reference internal" href="#documentation" id="id5">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 basic leafletjs application employing pg_featurserv is available at <a class="reference external" href="http://yourdomain.com/LeafletGeoJson.html">http://yourdomain.com/LeafletGeoJson.html</a></p>
<img alt="../_images/leaflet-geojson-europe.png" src="../_images/leaflet-geojson-europe.png" />
<p>Like our Choropleth map, this map leverages GeoJson from pg_featurserv and Query Features, but does not employ the Choropleth plugin</p>
</div>
<div class="section" id="pg-featurserv-url">
<h2><a class="toc-backref" href="#id3">pg_featurserv URL</a><a class="headerlink" href="#pg-featurserv-url" title="Permalink to this headline">¶</a></h2>
<p>If you have issues with the pg_featurserv url, it can be edited at line 41 below</p>
<div class="highlight-console notranslate"><div class="highlight"><pre><span></span><span class="gp">$</span>.getJSON<span class="o">(</span><span class="s2">"http://domain.com:9000/collections/public.countries/items.json?limit=100&continent=Europe&properties=name,gdp_md"</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>
</pre></div>
</div>
</div>
<div class="section" id="content">
<h2><a class="toc-backref" href="#id4">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"><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">"</span>$<span class="s2">.getJSON("</span>http://domain.com:9000/collections/public.countries/items.json?limit<span class="o">=</span><span class="m">100</span><span class="p">&</span><span class="nv">continent</span><span class="o">=</span>Europe<span class="p">&</span><span class="nv">properties</span><span class="o">=</span>name,gdp_md<span class="s2">", function(data) {"</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.gdp_md);</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>
</div>
</div>
<div class="section" id="documentation">
<h2><a class="toc-backref" href="#id5">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="php.html" class="btn btn-neutral float-right" title="Leaflet and PHP" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right"></span></a>
<a href="choropleth.html" class="btn btn-neutral float-left" title="Leaflet Choropleth App" 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/geojson.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 13 Jul 2023 23:23:25 GMT -->
</html>