I want to start working on a web map at work to map some of our statistics by city.
I have an idea, but I'm not exactly sure where to start.
Are there any definitive resources that provide step by step guidance on how to do this?
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It only takes a minute to sign up.Sign up to join this community
This question has been converted to Community Wiki and wiki locked because it is an example of a question that seeks a list of answers and appears to be popular enough to protect it from closure. It should be treated as a special case and should not be viewed as the type of question that is encouraged on this, or any Stack Exchange site, but if you wish to contribute more content to it then feel free to do so by editing this answer.
You can chose between solutions with a map server component or without. Server solutions of course support more data and more sophisticated applications.
If you know QGIS want to create one-off visualizations of data, I would recommend QGIS2Leaf or Export to OpenLayers 3 which are both plugins for QGIS which allow you to export layers to a web map. Update (based on Tom Chadwin's comment): qgis2leaf and qgis-ol3 have now been merged into qgis2web.
A middle way option is QGIS Cloud, a hosted QGIS Server option: You just prepare the project locally and then publish it to the web where you will find it in a ready-made viewer. They have free accounts up to a certain data size. So you don't need your own server if that's an issue for you.
If you want to run your own open source server, you could start with this Introduction to Geoserver from last year's FOSS4G: http://workshops.opengeo.org/geoserver-intro/. Tools involved are usually Geoserver, PostGIS and OpenLayers. Start up costs is your work time plus hosting.
It's hard to estimate time to deployment without knowing your use cases.
Penn State has an Open Web Mapping class. It should be enough to teach you how web mapping works, and also the technologies involved. Most, if not all, of the tools used in the class are free so you cost shouldn't be a problem. Here's the TOC:
Lesson 0: Orientation
Lesson 1: Introduction to Open Web Mapping
Lesson 2: Web Map Servers (WMS)
Lesson 3: Web Feature Servers (WFS)
Lesson 4: Extensible Markup Language (XML)
Lesson 5: Advanced Web Map Servers
Lesson 6: Geographic Markup Language (GML)
Lesson 7: WFS Revisited
Lesson 8: Building a Web Mapping Application
Lesson 9: Building a Thin Custom Web Mapping Client
Have fun :)
Google Fusion Tables is looking promising with mapping and spatial queries
pros:easy to set up
cons: all your data is on google servers (good? or bad?)
Note: Lots of Media/News Companies are using it - Example Guardian UK Newspaper http://www.guardian.co.uk/environment/datablog/interactive/2011/mar/07/carbon-emissions-public-buildings-map
There is a neat Fusion Wizard now to get you set up faster http://gmaps-samples.googlecode.com/svn/trunk/fusiontables/fusiontableslayer_builder.html
One of the best: http://tinyurl.com/England-Deprivation-Mapped
There are so many options out there and many great answers already. Two of my favorite choices that haven't already been listed here are CartoDB and MapBox. Both of these provide web based hosting and visualization of data and some very fancy tools with prices starting at FREE.
You'll benefit from having desktop software to get your data setup. ArcMap and Quantum GIS are both great choices for the desktop part.
I'd say the strength of MapBox is making beautiful web maps with really great, easy to use templates and ready to go user interface elements. MapBox requires a desktop program called TileMill (also free) which makes use of a styling interface very similar to CSS.
I also just attended a conference where they presented the OpenGeo Suite, which is a stack of OpenLayers, GeoServer, GeoExt & PostGIS. They offer both the "Enterprise Edition" (paid for version with support) or the "Community Edition" (free) versions. (Update) OpenGeo Suite is now Boundless Suite.
Another package that was demonstrated at the conference was GeoMoose, which is a stack of MapServer and OpenLayers.
You might consider downloading the OSGEO Live DVD, which you can run in a virtual machine environment in case you don't want to install a bunch of stuff on your machine while testing it out. It comes pre-packaged with a bunch of different open source GIS software packages, including web mapping tools.
Due to the popularity of this question and answer, I am adding editing some content on this post due to changes with providers and APIs over the past several months.
API choice is related to the scope and purpose of your project, not to mention your budget if you in fact want to use some specific functionality. The other major caveat is your web development experience, and what language you prefer or have an interest in.
I think the best way to answer your question is to provide a nice listing of API's available to you. Here are three that come to mind. These are not by any means all of them!
ArcGIS has a lot to offer for web GIS products, and has many resources to help you along the way. Just be aware of the potential costs you run into when wanting to publish your own data.
Google has a strong name in the market and pretty reliable online services. Just be sure to understand the ins and outs of their usages, so you don't step on any legal toes. The new Pricing and Plans page is quite helpful in that regard.
Open Source is truly a great option for anyone who wants to test the waters of Web GIS. With changes and enhancements made every day in the community, open source can be the inexpensive way to address your geospatial needs.
As I said, this is not all of the choices you have, but at least now there is a post with links for yourself and others to get familiar with some of the major players in the Web GIS world.
It looks like you have gotten the Open Source answers in the question above. If your company has the budget, ESRI can be a very good option. To clarify, the webmapping APIs in and of themselves are free to use, however the backend ArcGIS Server and SDE will cost you money. Additioanlly, desktop software will be needed to create map services to be used in the web mapping application. If you already have access to these resources or can purchase them, I would defintely recommend looking into ESRI solutions.
One benefit here is that you can code in a variety of languages. There are ESRI specific APIs for Flex and Silverlight:
If you take a look at these API websites the documentation is very good. Additionally, forums are available for community help on specific problems. Tech support through ESRI is also very good. So it comes down to price and resources, if you already have these applications or have the budget this is an excellent path, if not the above open source solutions are worth looking into.
For production, there's a whole slew of stuff out there that depends on your use-case. For me, I eventually went with Mapserver because it's not as bloated as Geoserver, running as a fast-cgi process on a lighttpd web-server. We needed WFS-T (which Geoserver supports out of the box), but Mapserver doesn't, so we used tinyows. We're also serve coverages (WCS), which Mapserver supports, and we're looking at integrating Rasdaman for its WCS-T support. This is all backed by a PostGIS database.
I'd recommend breaking your application down into back-, middle-, and front-ends, and reading the pros and cons of each piece of software. There may only be a few solutions for each layer, but that increases combinatorially.
I believe ESRI make products capable of doing all this, but this will cost. If your time is at a premium, then the commercial route may be the way to go, but the open-source route is heading in some very exciting directions and I suspect will eventually outstrip anything ESRI could come up with. But then I am a biased FOSS fanboi :)
You could look at MangoMap www.mangomap.com.
You should be able to create the map that you want with the available tools.
It's hosted and free, so very little time and effort is required to deploy.
For the features that your suggesting I would look at what is the most straight forward and easy to install stack that meets your needs. The software saying "You can have quick, powerful or cheap. Choose two." definitely applies here.
If you're only planning on doing simple queries such as identifying features then the power of PostGIS is likely overkill. It's much more simple to just upload shapefiles as a datastore directly into GeoServer.
OpenLayers once again is great and has lots of functionality such as support for coordinate systems other than WGS84 and Web Mercator but if you're not going to make use of that functionality then I would look at Leaflet, in my experience it has a much less steep learning curve for new users.
Also if you don't have a requirement that says you need to host the app on your own server then you can take a look at some of the hosted options as you'll get much more back from the time your invest. Using MangoMap or GeoCommons you will likely end up with a superior map for your users without having to write a single line of code.
If this is a project where you want to write some code then you can also take a look at CartoDB and MapBox. If you want to know more about all of these hosted platforms I wrote a free ebook on the subject that gives all the details you need to select one.
Disclosure: I am the Founder of MangoMap
There are lots of places to start when developing a web map.
If you have experience as a web developer, you should start by investigating the various services available to you that allow you to publish a map on the web. There are other questions answered here on this site that will give you valuable insight regarding the differences between the platforms available.
If you're starting fresh and don't want to commit to a particular platform, then address your business requirements. How are you going to draw your data on the map? How will the data be updated? Who is going to use this site? What will they do with it? Making these decisions early will help you assemble the pieces, or make choices that will support expansion towards a goal.
As for cost... I prefer to borrow a modern proverb: "Good, fast, cheap. Pick two." It's formally defined as the Project Management Triangle, which describes the balance between cost, scheduling, and scope to bring quality.
I too have recently started the web mapping journey after many years more on the database side of things.
What really helped me was learning basic programming principles, using MapBasic for MapInfo (or I am assuming Python for the esri crowd) really helped me understand how computers "think".
From there CodeAcademy was a godsend. Its a really fun and intuitive way to learn programming. It can take you from "Hello World" examples all the way to fully functional and interactive programs. The learning curve is gradual and understands that some people are gifted with this stuff and others (like me) aren't.
You can use OpenLayers for client side. It stable,easy and had tons of examples on how to use a WFS(in your case to connect to PostgreSQL) etc. Geoserver, OSM uses it for rendering purposes.
I vote for OpenLayers since you can decide on the entire web page design unlike php framework running on to of MapScript bindings which have a default template and I found it not easy to manage such a large code base.
Also, there are services like MapBox that do not require you to host the html file, but rather just upload your data to them.
I think the easiest way to go with qgis + qgis2leaflet plugin. You can edit whatever you want in qgis than export to leaflet and upload to your webserver. Or if you choose the more interesting way than:
What is important to note, is that Web-Gis is a vast field, and a lot of work has already been done on several projects and libraries to help out in this endeavor. So we need to see if there is something which you can reuse, instead of starting from scratch.
The bad news is that there is no popular library/application for web-mapping in php. The Good news is that you might not need one.
I would recommend that you first try to understand WebMapping, and understand the projects and Libraries that are already present. For this, you can refer to these questions:
Once you have understand the options available, you should then clarify your requirements. Looking at your question, you have very basic requirements: Show Parcels on the map Allow for Queries, Get Attributes for the Parcels and show them to the user, either on result of a Query, or when the User clicks on it.
This kind of work is possible using Google Maps, but I wouldn't recommend it, since the Google Maps API is a pain to work with when you have large Amounts of data.
I use Leaflet with GeoServer to make some nice maps, including some interactivity. It does require custom coding, but not much, and it is much easier to use than OpenLayers.
Before deciding between Leaflet and OpenLayers, it might be worth having a look at the upcoming version which promises a cleaned up API and better documentation:
OpenLayers 3 is a comprehensive rewrite of the library, targeting the latest in HTML5 and CSS3 features. The library will continue to have broad support for projections, standard protocols, and editing functionality from OpenLayers 2.x. The new version of the library will focus on performance improvements, lighter builds, prettier visual components, an improved API, and more. Some of the major highlights are:- - - - - - 8< - - - - - -
A new codebase: This offers an opportunity to clean up some of the “clunky” ways of doing things in OpenLayers. The team will also create with new API designs, which will be more accessible to all.
High-quality documentation: The new release will also feature documentation with fresh examples and default designs in OpenLayers 3.0. Making a toolkit standout is about more than the actual code.
There are many free data sources out there which can be incorporated into Google Maps via a number of ways (KML, database, GeoRSS, etc.). Most states and many universities have free data stores which can be incorporated into your map.
One of my favorite sites for Google Maps examples is Google Maps Mania. There are great map examples which showcase what is possible in this API.
GeoPHP might be worth a look.
GeoPHP is a open-source native PHP library for doing geometry operations. It is written entirely in PHP and can therefore run on shared hosts. It can read and write a wide variety of formats: WKT (including EWKT), WKB (including EWKB), GeoJSON, KML, GPX, GeoRSS. It works with all Simple-Feature geometries (Point, LineString, Polygon, GeometryCollection etc.) and can be used to get centroids, bounding-boxes, area, and a wide variety of other useful information.
And you can take it up a notch with the GEOS extension (assuming you have admin privileges for installing GEOS).
With GEOS you get the full-set of openGIS functions in PHP like Union, IsWithin, Touches etc. This means that applications get a useful "core-set" of geometry operations that work in all environments, and an "extended-set"of operations for environments that have GEOS installed.
Well, custom PHP script could be a more robust (and simple) solution. After all, spatial data are just rows in a database, and they can be queried as usual. No need for heavy server GIS software and/or horrible OGC filter syntax. If I were in your shoes, I would store the data in PostgreSQL database with PostGIS extension, write PHP back-end to query the database and retrieve data in GeoJSON format (look at this gist), and a front-end web application based on OpenLayers - it's more flexible than Google Maps API, but you can still Google base maps if you want to.
For help on which to choose, Alternatives to ArcGIS Online question and the What books, journals, electronic resources are most valuable for expanding Geographic Information knowledge? question for learning resources.
Web mapping costs include hosting (paying for a website) and server storage space (if you are using mapping services, look at MapBox pricing and CartoDB pricing per month). Ultimately, knowing web development is going to be very important to creating your map.
Well, there are a couple mapping libraries you can use.
The first (and probably most well known) would be Google Maps API, however I think this can be pretty complex if you're relatively new to web mapping.
I would suggest taking a look at Leaflet.js or Mapbox.js. Mapbox.js was built with Leaflet in mind and Mapbox has some great tutorials on various tasks you can do with Mapbox.js. Leaflet also has some examples and resources.
Here are specific links to examples that should help lead you in the correct direction.
If you require a map that you click a country and an image pop up you can take a look at the Mapbox example for Linking to External Data
You can learn how the code interacts in JSFiddle for the project
I am a new webmapper, and was referred to Scott Murray's Data Visualization for the Web. His ebook can be read here: http://chimera.labs.oreilly.com/books/1230000000345/ for free. It's for 'noncoders', extremely informative, and has many hands-on examples.