Webcartography and WebGIS Essentials

webcartography and webgis n.w
1 / 19
Embed
Share

Discover the fundamentals of webcartography and WebGIS using MapServer and OpenLayers. Learn about map applications, client-server architectures, and how to create interactive web maps. Dive into OpenLayers, an open-source JavaScript library for displaying raster and vector geodata, and explore embedding maps into web pages for a dynamic user experience.

  • Webcartography
  • WebGIS
  • MapServer
  • OpenLayers
  • JavaScript
rayaanacharya
maniyahh Follow

Uploaded on | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.

Download Presentation

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.

E N D

Presentation Transcript

  1. Webcartography and WebGIS Using MapServer and OpenLayers

  2. Outline Introduction JavaScript fundamentals OpenLayers basics Raster layer types Vector layer Controls; popups More on controls; geocoding MapServer basics Classification; projections Labels, symbols Scale-dependent visualization Data sources

  3. Student project Create web map application of a smaller region of special interest. Download OSM data. Add data from other sources. Set up WMS service with MapServer (with well- designed layer structure, styling) Create user interface using OpenLayers. Add interactive functions to the map (toggle layers, clickable features, etc.)

  4. Architecture of web map applications Client s web browser Other parts of the Internet OpenLayers Leaflet User Interface - Pannable/zoomable map - Displaying raster/vector data - Other interactive functions - Raster images - XML (KML, SVG, GeoRSS, GML, ) Google Maps JS API - WMS services - WFS services Server - Geocoding services MapServer GeoServer Webserver ... map server Generates map from geodata (ESRI ArcIMS) ArcGIS for Server Files (images, data) geoDB

  5. OpenLayers Open-source JavaScript library for displaying raster and vector geodata Created by MetaCarta (2006), now developed by OSGeo OpenLayers doesn t contain any built-in maps, only displays data! Supports several formats and sources: - raster images - WMS services - tiled map services - WFS services - KML - GeoRSS etc. OpenLayers maps consist one ore more layers. Each layer can be of different type.

  6. Embedding an OpenLayers map 1. Including OpenLayers library <script src="http://openlayers.org/api/OpenLayers.js"></script> 2. Creating a container <DIV> <div id= map_container style= width:600px;height:400px ></div> 3. Adding map initializing script <script type="text/javascript"> function init() // things to be done on startup { // creating map into the div with id map_container var map = new OpenLayers.Map('map_container', {}); // creating and adding an OSM layer map.addLayer(new OpenLayers.Layer.OSM()); // zooming approximately to Hungary map.zoomToExtent(new OpenLayers.Bounds(1790000,5730000,2560000,6210000)); } </script> 4. Setting onload event handler of <BODY> tag <body onload="init()">

  7. Embedding an OpenLayers map <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>OpenLayers map</title> <script src="http://openlayers.org/api/OpenLayers.js"></script> <script type="text/javascript"> function init() // things to be done on startup { // creating map into the div with id 'map_container' var map = new OpenLayers.Map('map_container', {}); // creating and adding an OSM layer map.addLayer(new OpenLayers.Layer.OSM()); // zooming approximately to Hungary map.zoomToExtent(new OpenLayers.Bounds(1790000,5730000,2560000,6210000)); } </script> </head> <body onload="init()"> <h1>OpenLayers map</h1> <div style="width:600px; height:400px" id="map_container"></div> </body> </html>

  8. Adding a MapServer map as a WMS layer ... // creating a WMS layer var wms = new OpenLayers.Layer.WMS( "Bird protection areas", 'http://mercator.elte.hu/cgi-bin/mapserv?map=/home/oktatok/saman/public_html/hu/okt/mapserver/mo.map', { layers: ['madaras'], isBaseLayer: false, transparent: true }, { singleTile: true }); // adding the WMS layer to the map map.addLayer(wms); // LayerSwitcher control map.addControl(new OpenLayers.Control.LayerSwitcher); ... Things to notice: - URL of Mapserver WMS service - Use the singleTile option if tiling is not desired (WMS with dynamic labels) - LayerSwitcher control - 2 layer categories (Base Layer / Overlay)

  9. Image layer ... // creating an Image layer var img = new OpenLayers.Layer.Image( "Raster world map", 'http://mercator.elte.hu/~saman/webglobes/globe_greenwich.jpg', new OpenLayers.Bounds(-180, -90, 180, 90), new OpenLayers.Size(3600,1800), { numZoomLevels: 6, maxResolution: 0.4 }); // adding the layer to map map.addLayer(img); ... Image layer is used for displaying smaller raster maps. Common sense rules: If the map size is too large, delays can occur due to eventually slow network connection and displaying may be faltering on low perfor- mance computers

  10. Markers layer Markers layers contain Marker objects simple point placemark icons. Markers cannot have labels. The usual use is to mark a important points on the map. ... // creating Markers layer var markerLayer = new OpenLayers.Layer.Markers('Places'); // creating markers - lat/lons are transformed into Spherical Mercator var Budapest=new OpenLayers.Marker(new OpenLayers.LonLat(19.1,47.5).transform("EPSG:4326","EPSG:900913")); var Dresden=new OpenLayers.Marker(new OpenLayers.LonLat(13.74,51.05).transform("EPSG:4326","EPSG:900913")); // adding markers to layer markerLayer.addMarker(Budapest); markerLayer.addMarker(Dresden); // adding Markers layer to map map.addLayer(markerLayer); ... Notice the coordinate transformation while defining markers. OpenLayers natively supports EPSG:4326 (WGS84 lat/lon) and EPSG:900913 (Spherical Mercator) projections. For more complex applications it is advisable to use the Vector layer instead of Markers

  11. Vector layer Vector layers contain vector features. Features can be points, lines or polygons and may have any kind of attributes. Vector layers can be populated either manually by defining their features one by one or automatically by specifying populating strategy and protocol. Layers have a default style but each feature can have a custom style. ... // creating style var pointStyle= new OpenLayers.StyleMap({ externalGraphic: 'http://openlayers.org/api/img/marker.png', graphicHeight: 21, graphicWidth: 16, label: '${name}', // using attribute value for labeling labelAlign: 'lb', fontWeight: 'bold', fontColor: 'purple', labelXOffset: 8 }); // creating Vector layer var vectorLayer = new OpenLayers.Layer.Vector('Places' {styleMap: pointStyle}); // creating points - lat/lons are transformed into Spherical Mercator var p1=new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(19.05,47.5).transform("EPSG:4326","EPSG:900913"),{ name: 'Budapest' }); var p2=new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(13.74,51.05).transform("EPSG:4326","EPSG:900913"),{ name: 'Dresden' }); // adding features to layer vectorLayer.addFeatures([p1,p2]); // adding Vector layer to map map.addLayer(vectorLayer); ...

  12. Adding a MapServer data as a WFS Vector layer ... // creating WFS vector layer... var wfs=new OpenLayers.Layer.Vector( "WFS", { isBaseLayer: true, strategies: [new OpenLayers.Strategy.Fixed()], protocol: new OpenLayers.Protocol.WFS( { version: "1.0.0", url: "http://mercator.elte.hu/cgi-bin/mapserv?map=/home/oktatok/saman/public_html/hu/okt/mapserver/p2_wfs.map", featureType: "Megye_nepesseg", srsName: "EPSG:23700", propertyNames: ['msGeometry','Nev','Nepesseg','Gyermek','Felnott','Idos'] }) }); ... - strategies describe which strategies to use for filling the layer with data. Fixed strategy requests all data once (it is used when the total amount of data is not very high) - protocol defines the data source and its attributes

  13. Controls Controls are useful accessories of OpenLayers maps. A few useful and often used controls: LayerSwitcher to switch layers on-off MousePosition Displays mouse coordinates in the corner of the map DragFeature makes features of a Vector layer draggable DrawFeature tool for drawing new features to a Vector layer Measure length or area measuring tool Scale displays the actual scale ScaleLine places a dynamic scale bar to the map SelectFeature useful tool for selecting vector features and defining event handlers

  14. MapServer Developed by UMN (University of Minnesota) Open-source Works either as CGI or as an add-on to server-side scripting languages Creates (usually raster) maps from geodata on the fly. Possible inputs: Shapefile, MapInfo TAB, KML, raster formats etc. Possible map formats: JPEG, PNG, GeoTIFF, SVG The Mapfile The spirit of every MapServer application Serves as a cooking recipe : describes how to display the source data on the map Plain text format Consists of different objects in hierarchical order

  15. Mapfile example #1: simple map from shapefile Result: Mapfile contents: MAP NAME "Hungary" STATUS ON SIZE 800 600 IMAGETYPE png EXTENT 420000 45000 950000 380000 SHAPEPATH "data" PROJECTION "init=epsg:23700" END LAYER NAME "Counties" TYPE polygon DATA "megyek.shp" STATUS DEFAULT PROJECTION "init=epsg:23700" END CLASS NAME "default" STYLE OUTLINECOLOR 0 127 0 COLOR 180 255 180 END END END END URL: http://mercator.elte.hu/cgi-bin/mapserv? map=/home/oktatok/saman/public_html/hu/okt/mapserver/p1.map& mode=map

  16. Mapfile example #2: defining classes Result: Mapfile contents: ... CLASS NAME "0-300000" EXPRESSION ([Pop]<=300000) STYLE OUTLINECOLOR 0 127 0 COLOR 180 255 180 END END # class 0-300000 CLASS NAME "3-500000" EXPRESSION ([Pop]<=500000) STYLE OUTLINECOLOR 0 127 0 COLOR 180 255 180 END END # class 3-500000 CLASS NAME "5-900000" EXPRESSION ([Pop]<=900000) STYLE OUTLINECOLOR 0 127 0 COLOR 180 255 180 END END # class 5-900000 CLASS NAME "900000-" STYLE OUTLINECOLOR 0 127 0 COLOR 180 255 180 END END # class 900000- ... Notice: Each object of the layer is put into the first matching class!

  17. Mapfile example #3: chart layer Mapfile contents: Result: ... LAYER NAME "Pop_chart" TYPE chart DATA "megyek.shp" PROCESSING "CHART_SIZE_RANGE= Pop 15 30 200000 1700000" STATUS DEFAULT PROJECTION "init=epsg:23700" END CLASS NAME "Children" STYLE SIZE [Children] OUTLINECOLOR 0 127 0 COLOR 255 0 0 END END # class Children CLASS NAME "Adults" STYLE SIZE [Adults] OUTLINECOLOR 0 127 0 COLOR 0 255 0 END END # class Adults CLASS NAME "Elders" STYLE SIZE [Elders] OUTLINECOLOR 0 127 0 COLOR 0 0 255 END END # class Elders END # layer Pop_chart ...

  18. Mapfile example #4: line styles Result: Mapfile contents: ... LAYER TYPE line CLASSITEM type ... CLASS # Highways EXPRESSION "HW" NAME "Highway" STYLE # Base line WIDTH 8 COLOR 127 127 127 END STYLE # Fill WIDTH 5 COLOR 250 220 127 END STYLE # Center line WIDTH 1 COLOR 127 127 127 END END # class Highway ... Notice: complex line styles are created as different style lines stacked.

  19. Resources, downloads, documentation MapServer: http://mapserver.org/ OpenLayers: http://openlayers.org/ Book (printed / e-book): Erik Hazzard: OpenLayers 2.10 Beginners Guide Packt Publishing, 2011

Related


No related presentations.

More Related Content