Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University.

Slides:

Advertisements

Similar presentations

A Roadmap of Open Source components for GI Web Services and Clients A Paul R Cooper MAGIC.

Advertisements

Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a certain scale, of a terrain.

Web GIS Oregon Explorer Marc G Rempel Oregon State University The Valley Library Oregon Explorer

GeoRSS and Webmaps. Really Simple Syndication Specification name of the FEED creator's name 2011 unique item can.

10 Map Mashups Mapping in the Cloud Peterson. Basic Map.

Mapserver The PSU Experience David Percy Geospatial Data Manager, Geology Department William Garrick Manager of Academic and Research Computing Portland.

Discover Perak Tourism Icons Through Web GIS

December Things You Can Do With The Harvard Map ABCD-WWW/GIS January 19, 2011 Presented by Peter Siebert University Planning.

Oregon Explorer Mashups. What is a mashup? a mashup is a web page or application that combines data or functionality from two or more external sources.

Sue Bergeron Jesse Rouse Dept of Geology and Geography West Virginia University GIS for Everyone? The Growth of the Geospatial Web.

Implementation of a Data Node in China's Spatial Information Grid Based on NWGISS Dengrong Zhang, Le Yu, Liping Di Institute of Spatial.

OpenLayers Schuyler Erle Christopher Schmidt. What is OpenLayers?

NREL is a national laboratory of the U.S. Department of Energy Office of Energy Efficiency and Renewable Energy operated by the Alliance for Sustainable.

Unit One: GIS Concepts In this unit… ► What is GIS? ► Types of GIS data ► What can you do with GIS? ► ArcGIS 9 license levels ► Basics of the ArcGIS 9.

Exploring large marine datasets using an interactive website and Google Earth Jon Blower, Dan Bretherton, Keith Haines, Chunlei Liu, Adit Santokhee Reading.

1 Dynamic Map Service Integration Tool Mashing.

Mapserver The Oregon Experience David Percy Geospatial Data Manager, Geology Department Portland State University Digital Mapping Techniques, 2006 Conference.

What is ? Geographical information by the combination of: –Imagery –3D geography –Maps –Business data The virtual tour around the world 7.1.

Layouts: Creating maps and figures using ArcMap 1 GIS for Planetary Mappers June 2012, Planetary Mappers Meeting.

OpenLayers: Data Integration 1 Prof. Dr.-Ing. Franz-Josef Behr OpenLayers: Data Integration in an Open Source Map Browser Prof. Dr. Franz-Josef Behr Hochschule.

Spatial Databases: Lecture 6

Fusion Overview Paul Spencer CTO Jason Fournier Product Manager

Developing an Open Web Mapping Application Jill Bernhard GEOG 596A Advisor: Ian Turton, Ph.D.

AUTOMATED TUTOR : Jolla Code Camp Presented By Fisayo Sangogboye Iqbal Ahmed Rohan Nanda Ngo Manh Khoi 1.

 Image Id  USGS/GFSAD1000_V0  USGS/GFSAD1000_V1  Expected to be added to Google Earth Data Catalog with the week. Demo in EE JavaScript Playground.

OPEN LAYERS. History Google Maps ◦ Announced on February 2005 ◦ Possibility to explore the world OpenLayers ◦ First release on June 2006 ◦ Open alternative.

Bringing GEOSS services into practice 1 May 2014 GEO Work Plan Symposium Geneva Pierre Lacroix Grégory Giuliani University of Geneva UNEP/GRID-Geneva.

OAK RIDGE NATIONAL LABORATORY U. S. DEPARTMENT OF ENERGY The Open Location Services (OLS) Tracking Service Standard Dr. Johnny Tolliver Oak Ridge National.

Open Source Web Mapping Server Products (Spatially-enabled Internet applications)‏ Rex Thaxton & Jerry Workman Mountain CAD Corporation 339 Sixth Ave.

SMART WATER is Co-financed by the EU Civil Protection Mechanism.

Integrated Map Tool Overview, Current Status, and Things to Come…

Data Scrounging 101 Steve Signell, Instructor Robert Poirier, TA School of Science Rensselaer Polytechnic Institute Monday,

Implementing Web GIS Solutions using open source software Karsten Vennemann Seattle.

Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University.

Portal ArcGIS /propertytaxes

Campus Tour COMP 523 Midterm Presentation Justin, Paul, Florian.

MapTube and Streaming Google Earth – Sharing Data via Anonymous Servers Richard Milton and Andrew Hudson-Smith CASA, UCL UCL CENTRE FOR ADVANCED SPATIAL.

Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University.

ORNL DAAC ORNL DAAC: Access ORNL DAAC OGC WMS Service in Virtual Globe Tools Overview: Access ORNL DAAC Open Geospatial.

1 Geospatial and Business Intelligence Jean-Sébastien Turcotte Executive VP San Francisco - April 2007 Streamlining web mapping applications.

1 ORNL DAAC WebGIS Demonstration Suresh Santhana Vannan, Robert Cook, Tammy W. Beaty and Yaxing Wei ORNL DAAC Oak Ridge National Laboratory Distributed.

Information Technology Exchange Meeting A New Decade in Support of Science Silence is Golden…. This is an atmosphere for learning - so please make EVERY.

GEO WEB. DEFINITION The Geospatial Web or Geoweb is a relatively new term that implies the merging of geographical(location- based) information with the.

A GeoSpatial Mapping Architecture

Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University.

Virtual Earth Map Control V4 MARK MAGLIOCCO Phillydotnet.org 11/21/2006

1 The 3 keys to making online GIS friendly & intuitive for a public audience Joy Bonaguro, Interface Designer/Research Analyst.

Using the AccuGlobe Software with the IndianaMap Using the AccuGlobe Software.

Maps. Google Earth is a great resource, but is often blocked by school districts because of its size. Google maps and Bing maps share many of the features.

Spatial Databases: Web Services DT211-4 DT228-4 Semester Pat Browne

Participatory App ArcGIS Server Final Presentation Christian Paluschek Georg Tschorn Philipp Weiß Michael Wilbers Eva Zimmermann.

Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University.

OS OpenSpace Tim Martin Geotechnologist. Breaking News The Prime Minister has today announced that the public and others will have greater access to a.

Google Maps and Web Mapping Kyle Mulka Computer Science in Engineering University of Michigan.

1 DMIS Tools Course Lesson 9 - Mapping Part 1 Getting Started with Map Navigation Tools DMIS Web Services Release 2.3 Getting Started with Map Navigation.

Using Google Maps and other OpenSource GIS software for displaying geospatial data Jon Blower, Dan Bretherton, Keith Haines, Chunlei Liu, Adit Santokhee.

1 Kalev Leetaru, Eric Shook, and Shaowen Wang CyberInfrastructure and Geospatial Information Laboratory (CIGI) Department of Geography and Geographic Information.

Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University.

U.S. Department of the Interior U.S. Geological Survey Center of Excellence in Geospatial Information Science Functional Analysis for The National Map.

Esri UC 2014 | Technical Workshop | ArcGIS API for JavaScript: An Introduction Kelly Hutchins Derek Swingley.

Community MapBuilder Workshop Client-Side Feature Rendering (SLD) and Vector Graphics Pat Cappelaere

Commercial benefits to organisations using geospatial mash-ups and open standards Norman Barker Consultant

OpenLayers Prof. Wenwen Li School of Geographical Sciences and Urban Planning 5644 Coor Hall

A. Jonoski and A. Almoradie UNESCO-IHE Institute for Water Education, Delft, The Netherlands.

OpenGeo: a 'dot-org' to build the Open Geospatial Web –Chris Holmes.

Introducing OS OpenSpace

Principles of GIS Fundamental database concepts – II Shaowen Wang

MapMaker Easy fast web-based map creation

HEATHER HALL & ADRIENNE SPITZER

An Intro to Leaflet.js Matt Anderson.

Presentation transcript:

Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University of Illinois at Urbana-Champaign Geog 480: Principles of GIS

What is OpenLayers?

An API for building web map applications

What is OpenLayers? An API for building web map applications Pure client-side JavaScript

What is OpenLayers? An API for building web map applications Pure client-side JavaScript “AJAX”

What is OpenLayers? An API for building web map applications Pure client-side JavaScript “AJAX” “Web 2.0”

What is OpenLayers? An API for building web map applications Pure client-side JavaScript “AJAX” “Web 2.0”

What is OpenLayers? An API for building web map applications Pure client-side JavaScript “AJAX” Supports open standards

What is OpenLayers? An API for building web map applications Pure client-side JavaScript “AJAX” Supports open standards Supports closed standards, too

What is OpenLayers? An API for building web map applications Pure client-side JavaScript “AJAX” Supports open standards Supports closed standards, too BSD licensed

Quick Demonstration Tiling Zoom in/out Panning Zoom Box!

History of the Project Started after Where 2.0 in 2005

History of the Project Started after Where 2.0 in 2005 Motivated by MetaCarta's business needs

History of the Project Started after Where 2.0 in 2005 Motivated by MetaCarta's business needs Went through several internal revisions

History of the Project Started after Where 2.0 in 2005 Motivated by MetaCarta's business needs Went through several internal revisions Final rewrite took only a month

History of the Project Started after Where 2.0 in 2005 Motivated by MetaCarta's business needs Went through several internal revisions Final rewrite took only a month Released before Where 2.0 in 2006

History of the Project Started after Where 2.0 in 2005 Motivated by MetaCarta's business needs Went through several internal revisions Final rewrite took only a month Released before Where 2.0 in 2006 Already used by > 10,000 people

OpenLayers Features: Layers OGC WMS OGC WFS GeoRSS CSV ka-Map WorldWind (*) Canvas Google Maps MSN Virtual Earth Yahoo! Maps Multimap

OpenLayers Features: Controls Zoom / Pan Zoom Bar Mouse controls Layer Switcher (aka “legend”) Scale Ratio Scale Bar Permalink

OpenLayers Features: et cetera... Markers Popups Feature objects Event handling... and, of course...

OpenLayers Features: et cetera... Markers Popups Feature objects Event handling “AJAX”

OpenLayers: WMS var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", " {layers: 'basic'}); map.addLayer(wms); map.zoomToMaxExtent(); var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", " {layers: 'basic'}); map.addLayer(wms); map.zoomToMaxExtent();

OpenLayers: WMS var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", " {layers: 'basic'}); map.addLayer(wms); map.zoomToMaxExtent(); var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", " {layers: 'basic'}); map.addLayer(wms); map.zoomToMaxExtent();

OpenLayers: WMS var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", " {layers: 'basic'}); map.addLayer(wms); map.zoomToMaxExtent(); var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", " {layers: 'basic'}); map.addLayer(wms); map.zoomToMaxExtent();

OpenLayers: WMS var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", " {layers: 'basic'}); map.addLayer(wms); map.zoomToMaxExtent(); var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", " {layers: 'basic'}); map.addLayer(wms); map.zoomToMaxExtent();

OpenLayers: WMS var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", " {layers: 'basic'}); map.addLayer(wms); map.zoomToMaxExtent(); var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", " {layers: 'basic'}); map.addLayer(wms); map.zoomToMaxExtent();

OpenLayers: WMS var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", " {layers: 'basic'}); map.addLayer(wms); map.zoomToMaxExtent(); var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", " {layers: 'basic'}); map.addLayer(wms); map.zoomToMaxExtent();

OpenLayers: WMS (demo)

Google Maps in OpenLayers var map = new OpenLayers.Map('map'); var layer = new OpenLayers.Layer.Google("Google Streets"); map.addLayer(layer); map.zoomToMaxExtent(); var map = new OpenLayers.Map('map'); var layer = new OpenLayers.Layer.Google("Google Streets"); map.addLayer(layer); map.zoomToMaxExtent();

Google Maps in OpenLayers (demo)

Commercial Layers in OpenLayers Additionally, OpenLayers supports...

Commercial Layers in OpenLayers Y! Maps Additionally, OpenLayers supports...

Commercial Layers in OpenLayers Y! Maps MultiMap Additionally, OpenLayers supports...

Commercial Layers in OpenLayers Live Maps Y! Maps MultiMap (insert your own here) Additionally, OpenLayers supports...

OpenLayers: Transparent WMS var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", " {layers: 'basic'} ); var twms = new OpenLayers.Layer.WMS( "World Map", " {map: '/www/freemap.in/world/map/factbooktrans.map', transparent:'true', layers: 'factbook', 'format':'png'} ); map.addLayers([wms,twms]); map.zoomToMaxExtent(); var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", " {layers: 'basic'} ); var twms = new OpenLayers.Layer.WMS( "World Map", " {map: '/www/freemap.in/world/map/factbooktrans.map', transparent:'true', layers: 'factbook', 'format':'png'} ); map.addLayers([wms,twms]); map.zoomToMaxExtent();

OpenLayers: Transparent WMS (demo)

OpenLayers: Markers var map = new OpenLayers.Map('map'); var markers = new OpenLayers.Layer.Markers("Markers"); map.addLayer(markers); var point = new OpenLayers.LonLat(5, 40) var marker = new OpenLayers.Marker(point); markers.addMarker(marker); map.zoomToMaxExtent(); var map = new OpenLayers.Map('map'); var markers = new OpenLayers.Layer.Markers("Markers"); map.addLayer(markers); var point = new OpenLayers.LonLat(5, 40) var marker = new OpenLayers.Marker(point); markers.addMarker(marker); map.zoomToMaxExtent();

OpenLayers: Markers var map = new OpenLayers.Map('map'); var markers = new OpenLayers.Layer.Markers("Markers"); map.addLayer(markers); var point = new OpenLayers.LonLat(5, 40) var marker = new OpenLayers.Marker(point); markers.addMarker(marker); map.zoomToMaxExtent(); var map = new OpenLayers.Map('map'); var markers = new OpenLayers.Layer.Markers("Markers"); map.addLayer(markers); var point = new OpenLayers.LonLat(5, 40) var marker = new OpenLayers.Marker(point); markers.addMarker(marker); map.zoomToMaxExtent();

OpenLayers: Markers (demo)

OpenLayers: WMS + Google Map var map = new OpenLayers.Map("map"); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", " {layers: "opengeo:postgis_states_conner7", transparent:'true'},{"reproject":"true",projection: new OpenLayers.Projection("EPSG:900913")}); var layer = new OpenLayers.Layer.Google("Google Streets", {isBaseLayer:'true'}); map.addLayers([wms,layer]); map.zoomToMaxExtent(); map.zoomToMaxExtent(); var map = new OpenLayers.Map("map"); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", " {layers: "opengeo:postgis_states_conner7", transparent:'true'},{"reproject":"true",projection: new OpenLayers.Projection("EPSG:900913")}); var layer = new OpenLayers.Layer.Google("Google Streets", {isBaseLayer:'true'}); map.addLayers([wms,layer]); map.zoomToMaxExtent(); map.zoomToMaxExtent();

OpenLayers: WMS + Google Map var map = new OpenLayers.Map("map"); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", " {layers: "opengeo:postgis_states_conner7", transparent:'true'},{"reproject":"true",projection: new OpenLayers.Projection("EPSG:900913")}); var layer = new OpenLayers.Layer.Google("Google Streets", {isBaseLayer:'true'}); map.addLayers([wms,layer]); map.zoomToMaxExtent(); map.zoomToMaxExtent(); var map = new OpenLayers.Map("map"); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", " {layers: "opengeo:postgis_states_conner7", transparent:'true'},{"reproject":"true",projection: new OpenLayers.Projection("EPSG:900913")}); var layer = new OpenLayers.Layer.Google("Google Streets", {isBaseLayer:'true'}); map.addLayers([wms,layer]); map.zoomToMaxExtent(); map.zoomToMaxExtent();

Examples: A WebGIS crash course by Eric Shook:

Further info