![Page 1: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/1.jpg)
Geog 596A: Blueprint for Creating an Open Source Web Map
Michelle BallingerPenn State
Masters of Geographic Information SystemsAdvisor Frank Hardisty
Winter of 2010
![Page 2: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/2.jpg)
Motivation: ease the adoption of open source web mapping
![Page 3: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/3.jpg)
How to do you create a web map?
Open Source Mash Up
![Page 4: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/4.jpg)
Why choose open source programs?
• Free• Flexibility• Ability to control the end product
![Page 5: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/5.jpg)
Why not just use a mash up?
• Mash up are great for certain situations, but not all.
• Everyone has the ability to add to it.
![Page 6: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/6.jpg)
Who would want to use this blueprint?
• City governments• School districts• Other organizations• Individuals
![Page 7: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/7.jpg)
Who is already doing this?
• Friends of the Urban Forest and San Francisco's Department of Public Works have joined forces to create an open source web map of the trees in San Francisco
• http://www.urbanforestmap.org/
![Page 8: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/8.jpg)
Where to get data?
• Federal Geographic Data Committee’s Clearinghouse Network (http://gos2.geodata.gov/wps/portal/gos)
• Libre Map Project (http://libremap.org/)• Many states have free data• Always can create your own
![Page 9: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/9.jpg)
What software to use?
• Lots of options– Open Source:
• uDig• GeoServer• Open Layers• Notepad++• Quantum GIS
• Off the Shelf- ESRI ArcMap
![Page 10: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/10.jpg)
Step by Step
• Slides give an overview of how to create your own web map
![Page 11: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/11.jpg)
Example Web Map
• The template is a web map that I created for Geog 585 of Jackson County, Missouri of farmers’ markets and breweries
• Geared towards “buying local” movement
![Page 12: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/12.jpg)
ESRI ArcMap
Tiger Census Data: • Roads• Cities• Area Water
Created Farmers’ Markets and Breweries
![Page 13: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/13.jpg)
uDig
• “User-friendly Desktop Internet GIS”• Creates Styled Layer Descriptor• http://udig.refractions.net/
![Page 14: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/14.jpg)
![Page 15: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/15.jpg)
Geoserver
• Written in Java • Web Map Server• Web Feature Server• http://geoserver.org
![Page 16: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/16.jpg)
Open Layers
• Written in Javascript• Web Feature Client• http://openlayers.org/
![Page 17: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/17.jpg)
Other Options
There are many different web feature servers:• Mapbuilder• Degree• MapServer
![Page 18: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/18.jpg)
Notepad++
• Is a text editor• Written in C++• How to bring everything together• Creates the HTML• http://notepad-plus.sourceforge.net/uk/site.h
tm
![Page 19: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/19.jpg)
How?
• Building the final code using Notepad++
![Page 20: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/20.jpg)
What will this produce?
• This template is designed as a thin client.
![Page 21: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/21.jpg)
Sample Code
• Always can look at other web maps to find a good template for code
• http://openlayers.org/dev/examples/
![Page 22: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/22.jpg)
Pan/Zoom
• All interactive maps need this:// setup controls and initial zooms
map.addControl(new OpenLayers.Control.PanZoomBar()); map.addControl(new OpenLayers.Control.Navigation());
![Page 23: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/23.jpg)
Querying• // support GetFeatureInfo• map.events.register('click', map, function (e) {• document.getElementById('nodelist').innerHTML = "Loading... please wait...";• var url = map.layers[2].getFullRequestString(• {• REQUEST: "GetFeatureInfo",• EXCEPTIONS: "application/vnd.ogc.se_xml",• BBOX: map.getExtent().toBBOX(),• X: e.xy.x,• Y: e.xy.y,• INFO_FORMAT: 'text/html',• QUERY_LAYERS:
[map.layers[1].params.LAYERS,map.layers[2].params.LAYERS,map.layers[3].params.LAYERS,map.layers[4].params.LAYERS],
• FEATURE_COUNT: 50,• WIDTH: map.size.w,• HEIGHT: map.size.h• },
![Page 24: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/24.jpg)
Post to the Web
![Page 25: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/25.jpg)
Validation
• The quality of the blueprint I am producing will be assured by having it approved by the relevant open source projects
![Page 26: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/26.jpg)
Conclusion
• Motivation: ease the adoption of open source web mapping
• Limited only by your ideas• Lots of way to get to the same end product• Can be customized
![Page 27: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/27.jpg)
Questions?
![Page 28: Geog 596A: Blueprint for Creating an Open Source Web Map](https://reader036.vdocument.in/reader036/viewer/2022081507/5681692e550346895de07273/html5/thumbnails/28.jpg)
References• "City of San Francisco Plots its Urban Forest Using Open Source Mapping
Technology; Together with Autodesk and Friends of the Urban Forest, San Francisco launches Web-based Urban Forest Mapping System for official and public use. " PR Newswire
8 March 2007 ABI/INFORM Dateline, ProQuest. Web. 3 Feb. 2010.• Mitchell, Tyler. Web Mapping Illustrated. Sebastopol: O'Reilly Media, Inc.,
2005. • Sherman, Gary E.. Desktop GIS Mapping the Planet with Open Source
Tools. Raleigh: The Pragmatic Bookshelf, 2008.• Turton, Ian. Open Web Mapping. Penn State, World Campus. Winter 2009