Add GIS functions to WebGIS page i.e Zoomin, Zoom to extent, Measure, featureinfo etc. - part2

This video shows how to develop simple Web GIS application using Geoserver, Openlayers, Geoext and postgis and add GIS functionalities to Web GIS page i.e Zoom in, Zoom Out, Zoom to max extent, Measure, Get feature info etc.

Link for the web GIS application html page:

Develop simple Web GIS application using Geoserver, Openlayers, Geoext and postgis - part1

Link for downloading Openlayers 2.13.1:

Link for downloading GeoExt 2.1.0:

Link for downloading ExtJs 4.2.1:

Link for video showing how to install geoserver with tomcat:

Link for video showing how to Install postgresql with postgis extension and import/export shapefiles from the postgis database

How to Publish shapefiles/raster images using GeoServer

If u face any problem.... please put a comment below......

Later i will upload video extending the application further by adding legend panel to the application and styling the layers using SLD

[tapankumar]

Thank a lot Karan.. it's amazing. In measuring tool there is only unit set for km for length and sqkm for area measurement... How can we add user required input for the measuring tools..

[ahmednour]

the icons in .png format are missing to display the zoom ....
thank you

[danielmajlath]

@Karan Choudhary can you or anybody tell me the correct setup method for sizing the buttons and the icons (*.png)? As a result i've like to get the whole icon picture seen on buttons. Thank You!

[akankshabalha]

Hi, how can I prepare png files saved in tools_png folder? Can you please share the png files? Also, from where can I get loaders.js saved in libs folder. Kindly help.

[itadvisor]

hi bro m facing an issue i need your help
i call the geo ext action function
than i put this code
//pan map
var pan = Ext.create('GeoExt.Action', {
tooltip: "Pan Map",
text: "pan Map",
icon:"icons/pan.png",
enableToggle: true,
pressed: false,
allowDepress: true,
control: new OpenLayers.Control.Navigation(),
map: map,
toogleGroup: 'tools'
});


var pan_map = Ext.create('Ext.Button', pan);

than assing tbar: [pan_map], under mapPanel function but its showng me gray page

[INVOLVER]

Thanks a lot for that video, Karan! Would you be able to share an html file? Thanks a lot in advance!

[marcoantoniovazquezgonzale]

I tried your sample, i got no errors but the map doesnt show up, the only thing i can do it's change the theme