osgeolive
/
OSGeoLive-doc
7
2
Fork 7
Code Pull Requests Releases Wiki Activity

[link] geoext fixed link & reformating

master
cvvergara 2023-01-17 13:15:55 -06:00
parent e3c78317cf
commit 54cbfe30f1
2 changed files with 94 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
doc/overview/geoext_overview.rst
View File

@ -1,5 +1,5 @@
:Author: Seth Girvin
:Reviewer:
:Reviewer:
:Version: osgeolive13.0
:License: Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
@ -13,16 +13,25 @@
A JavaScript Toolkit for Rich Web Mapping Applications
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
GeoExt is Open Source and enables building desktop-like GIS applications through the web. It is a JavaScript framework that combines the GIS functionality of
`OpenLayers <https://openlayers.org/>`_ with the user interface of the `ExtJS <https://www.sencha.com/products/extjs/>`_ library provided by `Sencha <https://www.sencha.com>`_.
GeoExt is Open Source and enables building desktop-like GIS applications through
the web. It is a JavaScript framework that combines the GIS functionality of
`OpenLayers <https://openlayers.org/>`_ with the user interface of the `ExtJS
<https://www.sencha.com/products/extjs/>`_ library provided by `Sencha
<https://www.sencha.com>`_.
User interface components include a map panel, layer tree panel, feature grid, and an overview map. GeoExt components can be used just like any other ExtJS component
and can be easily configured and extended. Lower level classes are also available allowing OpenLayers features and layers to be used as ExtJS data models, and for various
map layer types to be serialized.
User interface components include a map panel, layer tree panel, feature grid,
and an overview map. GeoExt components can be used just like any other ExtJS
component and can be easily configured and extended. Lower level classes are
also available allowing OpenLayers features and layers to be used as ExtJS data
models, and for various
map layer types to be serialized.
GeoExt3 is dual licensed. The license you choose depends on the license of the framework ExtJS you use with it.
If you are using the GPL v3 version of the ExtJS framework you will use it under GPLv3. If you own a Sencha ExtJS Commercial License, you
have the right to use GeoExt3 under the BSD License.
GeoExt is dual licensed. The license you choose depends on the license of the
framework ExtJS you use with it.
If you are using the GPL v3 version of the ExtJS framework you will use it under
GPLv3.
If you own a Sencha ExtJS Commercial License, you have the right to use GeoExt
under the BSD License.
@SCREENSHOT_geoext@
@ -39,14 +48,17 @@ Core Features
* Data Models and Stores
* Integration of the OpenLayers data model with the ExtJS data model enabling sorting and filtering of features
using ExtJS components
* Integration of the OpenLayers data model with the ExtJS data model enabling
sorting and filtering of features using ExtJS components
* ExtJS stores and models for OpenLayers features and layers
* Miscellaneous
* Integration with `MapFish Print <http://mapfish.github.io/mapfish-print-doc/>`_ and
`GeoServer Printing Module <https://docs.geoserver.org/latest/en/user/extensions/printing/index.html>`_
* Integration with
* `MapFish Print <http://mapfish.github.io/mapfish-print-doc/>`_
* and `GeoServer Printing Module <https://docs.geoserver.org/latest/en/user/extensions/printing/index.html>`_
* Layer Serializers (WMS, WMTS, XYZ)
Details
@ -54,19 +66,26 @@ Details
**Website:** @WEB_geoext@
**License:** GPLv3 or BSD License dependent on ExtJS license - see `License <https://github.com/geoext/geoext3/blob/master/LICENSE>`_
and `License FAQ <https://github.com/geoext/geoext3/blob/master/LICENSE-FAQ.md>`_
**License:** GPLv3 or BSD License dependent on ExtJS license
* see `License <https://github.com/geoext/geoext/blob/master/LICENSE>`_
* and `License FAQ <https://github.com/geoext/geoext/blob/master/LICENSE-FAQ.md>`_
**Software Version:** |version-geoext|
**API Interface:** JavaScript
**Support:** Mailing list https://www.geoext.org/cgi-bin/mailman/listinfo/users and https://stackoverflow.com/questions/tagged/geoext3
**Support:** Mailing lists
* https://www.geoext.org/cgi-bin/mailman/listinfo/users
* and https://stackoverflow.com/questions/tagged/geoext
@VMDK_geoext@
@QUICKSTART_geoext@
.. presentation-note
GeoExt is Open Source and enables building desktop-like GIS applications through the web. It is a JavaScript framework that combines the GIS functionality of
OpenLayers with the user interface of the ExtJS library provided by Sencha.
GeoExt is Open Source and enables building desktop-like GIS applications
through the web. It is a JavaScript framework that combines the GIS
functionality of OpenLayers with the user interface of the ExtJS library
provided by Sencha.

86
doc/quickstart/geoext_quickstart.rst
View File

@ -13,9 +13,13 @@
@NAME_geoext@ Quickstart
********************************************************************************
GeoExt is a JavaScript library that runs in the browser, it combines and enhances the ExtJS framework and OpenLayers library.
This quick start details the steps to create a rich web application using GeoExt components in less than 200 lines of code.
We will be using the installed MapServer web services on OSGeoLive a MapServer to supply map layers to the application. Completing the steps below will result in the demo GeoExt application at http://localhost/geoext/.
GeoExt is a JavaScript library that runs in the browser, it combines and
enhances the ExtJS framework and OpenLayers library.
This quick start details the steps to create a rich web application using GeoExt
components in less than 200 lines of code.
We will be using the installed MapServer web services on OSGeoLive a MapServer
to supply map layers to the application. Completing the steps below will result
in the demo GeoExt application at http://localhost/geoext/.
.. contents:: Contents
:local:
@ -23,7 +27,9 @@ We will be using the installed MapServer web services on OSGeoLive a MapServer t
Create an HTML page
===================
In this step we will set-up an empty HTML page which will contain the application. We'll use the text editor FeatherPad installed on OSGeoLive to create a new HTML file at ``/var/www/html/geoext/demo.html``
In this step we will set-up an empty HTML page which will contain the
application. We'll use the text editor FeatherPad installed on OSGeoLive to
create a new HTML file at ``/var/www/html/geoext/demo.html``
#. Open FeatherPad from the command line with elevated permissions, so you can save the file, using System Tools > QTerminal and then running run the command below:
@ -31,9 +37,13 @@ In this step we will set-up an empty HTML page which will contain the applicatio
sudo featherpad
#. Next paste in the HTML below, and save the file as ``/var/www/html/geoext/demo.html``. The file contains links to the ExtJS and OpenLayers JavaScript libraries, and two CSS files used to style ExtJS and OpenLayers components.
#. Next paste in the HTML below, and save the file as
``/var/www/html/geoext/demo.html``. The file contains links to the ExtJS and
OpenLayers JavaScript libraries, and two CSS files used to style ExtJS and
OpenLayers components.
We will use the ``Ext.Loader`` class to load in GeoExt JavaScript source files. These are all in the ``src`` folder in ``/var/www/html/geoext/``.
We will use the ``Ext.Loader`` class to load in GeoExt JavaScript source files.
These are all in the ``src`` folder in ``/var/www/html/geoext/``.
.. code-block:: html
@ -66,15 +76,18 @@ In this step we will set-up an empty HTML page which will contain the applicatio
You should now be able to view an empty HTML page in Firefox at http://localhost/geoext/demo.html
All the JavaScript in the following sections should be pasted after the ``// all JavaScript application code should go here`` comment in the
``Ext.onReady`` function. Placing code here ensures the JavaScript libraries have been loaded before running any custom JavaScript code.
All the JavaScript in the following sections should be pasted after the ``// all
JavaScript application code should go here`` comment in the ``Ext.onReady``
function. Placing code here ensures the JavaScript libraries have been loaded
before running any custom JavaScript code.
Configure OpenLayers objects
============================
Next we will configure some OpenLayers objects used by the application.
Next we will configure some OpenLayers objects used by the application.
#. First lets create a map tile layer using OpenStreetMap, and some WMS layers that are available from the MapServer Itasca demo on OSGeoLive.
#. First lets create a map tile layer using OpenStreetMap, and some WMS layers
that are available from the MapServer Itasca demo on OSGeoLive.
.. code-block:: js
@ -110,7 +123,9 @@ Next we will configure some OpenLayers objects used by the application.
name: 'Highways'
});
#. Next we are going to add in a WFS vector layer - this is a little more complicated, but follows the same approach of creating a source and then a layer as the previous layers:
#. Next we are going to add in a WFS vector layer - this is a little more
complicated, but follows the same approach of creating a source and then a
layer as the previous layers:
.. code-block:: js
@ -130,8 +145,9 @@ Next we will configure some OpenLayers objects used by the application.
name: 'Airports'
});
#. Now we are going to create our OpenLayers map object configured with the layers we just created. We will also set the center
and zoom level of the map, and add in a select interaction so we can select features in our vector layer.
#. Now we are going to create our OpenLayers map object configured with the
layers we just created. We will also set the center
and zoom level of the map, and add in a select interaction so we can select features in our vector layer.
.. code-block:: js
@ -151,9 +167,12 @@ Next we will configure some OpenLayers objects used by the application.
Work with GeoExt components
===========================
Now the map and layers have been configured we are going to create and configure our GeoExt components.
Now the map and layers have been configured we are going to create and configure
our GeoExt components.
#. First of all we will create a ``GeoExt.component.Map``. This uses the OpenLayers map we created, and will be positioned in the 'center' region of our application.
#. First of all we will create a ``GeoExt.component.Map``. This uses the
OpenLayers map we created, and will be positioned in the 'center' region of
our application.
.. code-block:: js
@ -163,10 +182,13 @@ Now the map and layers have been configured we are going to create and configure
});
#. Next we will create a layer tree component. The tree has its own data store - ``GeoExt.data.store.LayersTree``, which we will fill
with layers from our OpenLayers map. The store will then be used to populate our tree panel. We will also add in a plugin to the
tree to allow the map layer order to be changed by dragging and dropping the layers. The ``flex`` property causes the tree panel
to fill up all available space in its region of the screen.
#. Next we will create a layer tree component. The tree has its own data store -
``GeoExt.data.store.LayersTree``, which we will fill
with layers from our OpenLayers map. The store will then be used to populate
our tree panel. We will also add in a plugin to the
tree to allow the map layer order to be changed by dragging and dropping the
layers. The ``flex`` property causes the tree panel
to fill up all available space in its region of the screen.
.. code-block:: js
@ -185,8 +207,9 @@ Now the map and layers have been configured we are going to create and configure
}
});
#. We are also going to create a grid component to display the attributes of features in our WFS layer.
Similar to the layer tree store and tree panel, we create a ``GeoExt.data.store.Features`` store and a grid panel.
#. We are also going to create a grid component to display the attributes of
features in our WFS layer.
Similar to the layer tree store and tree panel, we create a ``GeoExt.data.store.Features`` store and a grid panel.
.. code-block:: js
@ -215,8 +238,10 @@ Now the map and layers have been configured we are going to create and configure
height: 300
});
#. Our final GeoExt component is an overview map - ``GeoExt.component.OverviewMap``.
We will configure this to display the OpenStreetMap layer we created earlier, and place it in an ExtJS panel.
#. Our final GeoExt component is an overview map -
``GeoExt.component.OverviewMap``.
We will configure this to display the OpenStreetMap layer we created earlier,
and place it in an ExtJS panel.
.. code-block:: js
@ -238,7 +263,9 @@ Now the map and layers have been configured we are going to create and configure
Create a viewport
=================
The final step in creating our application is to create a viewport - a container representing the application which will display all the components we created above.
The final step in creating our application is to create a viewport - a container
representing the application which will display all the components we created
above.
.. code-block:: js
@ -260,7 +287,8 @@ The final step in creating our application is to create a viewport - a container
]
});
You should now be able to refresh the link http://localhost/geoext/demo.html in your browser and see a complete GeoExt application similar to the image below.
You should now be able to refresh the link http://localhost/geoext/demo.html in
your browser and see a complete GeoExt application similar to the image below.
.. image:: /images/projects/geoext/geoext_quickstart.png
:scale: 100 %
@ -269,9 +297,9 @@ You should now be able to refresh the link http://localhost/geoext/demo.html in
What's next?
============
* The `GeoExt homepage <https://geoext.github.io/geoext3/>`_ contains full `API documentation <https://geoext.github.io/geoext3/v3.1.0/docs>`_
and examples
* A `GeoExt workshop <https://github.com/geoext/geoext3-ws>`_ details all the steps for configuring and using
GeoExt3 in your ExtJS applications
* The `GeoExt homepage <https://geoext.github.io/geoext/>`_ contains full `API
documentation <https://geoext.github.io/geoext/v3.1.0/docs>`_ and examples
* A `GeoExt workshop <https://github.com/geoext/geoext3-ws>`_ details all the
steps for configuring and using GeoExt3 in your ExtJS applications
* The `OpenLayers v4.6.5 API docs <https://openlayers.org/en/v4.6.5/apidoc>`_
* The `ExtJS 6.2.0 API docs <https://docs.sencha.com/extjs/6.2.0/>`_