Sign up ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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?


locked by PolyGeo Nov 8 at 8:26

This question's answers are a collaborative effort: if you see something that can be improved, just edit the answer to improve it! No additional answers can be added here

25 Answers 25

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: 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.

qgis2leaf and Export to OpenLayers 3 have now merged into qgis2web. – Tom Chadwin Jul 13 at 10:49
Good point about qgis2web. I am author of a video course that teaches GIS from scratch and how to build web maps with qgis2web: – A.S Nov 4 at 9:18

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?)

enter image description here

Note: Lots of Media/News Companies are using it - Example Guardian UK Newspaper

There is a neat Fusion Wizard now to get you set up faster


One of the best:


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.

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.


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.

The strength of CartoDB is that it exposes its PostGIS roots through an SQL API.

Both of these can be used on their own or in combination with other javascript mapping libraries (e.g. Leaflet, Google Maps, OpenLayers).

No matter which platforms you decide to start using to get into web mapping, you will most certainly benefit from learning some javascript. Codecademy is a great place to start (also FREE!!).

To make things even easier, there "Are tools to directly import ArcGIS and QGIS projects into Tilemill" – RyanDalton Mar 26 '13 at 15:07
The key to understanding MapBox and CartoDB is pricing (map views, amount of data) and how much data you are displaying. CartoDB makes larger datasets easier to manage while I would suggest MapBox for smaller projects. Leaflet is the lightest and easiest to learn of the JavaScript mapping libraries. – Zach Nov 6 '13 at 18:16

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 :)


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:

Flex: Silverlight:

Currently it seems as if the trend in web programming is moving away from solutions that require plugins and are vendor specific (above), and towards more open source and standards based frameworks. ESRI has this covered with the Javascript API:


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.

Since this answer was posted, Esri have released ArcGIS Online, which potentially removes the need for on-premises ArcGIS Server and SDE. There are free developer plans available to get started – Stephen Lead Oct 10 '14 at 3:14

If you want to simply prototype something for a viability study to show your boss, which is what I had to do a year or so ago, then for the backend I'd recommend Geoserver because of its user-friendly web interface, backed by some simple shapefiles. For the frontend, OpenLayers is a fantastic choice with lots of samples on the website. I'm not a web-programmer by any means, but I found copying/pasting/tweaking the javascript samples a breeze. I put all this in a VirtualBox VM to keep it all in one place and not break my regular dev environment, using the packages from UbuntuGIS repository.

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 :)

Take a look at P.Mapper ( and GeoMoose ( they are quite "easy" to set up with your own data, you can do it on a Windows box with MS4W and then, as you progress, you can turn to a Linux set up. I have an outline of the initial steps for p.mapper it's in spanish though, in case you are interested. – jdeltoro1973 Apr 5 '11 at 15:43

Have you checked out MangoMap ? 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.



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 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!





  • Price (not for use of API's, but more-so if you want to publish your own data, also see ArcGIS Online)
  • Customizing application code can be cumbersome


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.



  • JavaScript
  • Mobile (Android, iOS)


  • By far the most recognized name in web mapping
  • Expansive JavaScript API
  • Many online samples
  • Recently, Google released their Pricing and Plans, which is a great breakdown of services offered



Google has a strong name is 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

APIs (all JavaScript based):



  • Official support really doesn't exist BUT the community involved is more than helpful (perhaps even better than commercial GIS support)


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.

This is a great answer which I have just tweeted to my followers. Hopefully it will attract votes quickly to raise its profile on this our most frequently asked/searched question. – PolyGeo Oct 31 '14 at 23:18

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.


For the tools involved, check out the "Web mapping" section (right menu) at - several of the products offer the requested features.


If you are a Java programmer, have a look at Geomajas.

There is a maven archetype which allows you to get started in minutes (see here). You can then add extra layers etc.

GIS developers seem to be such great JavaScript fans it's almost unique to find a java-based web-app. – Akheloes Aug 20 '13 at 14:05

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.

The second piece of advice would be to install GeoServer and look at the demo requests to see how web services are structured and how they work. Have a look at the layer previews to see how Javascript and HTML operate together. You can literally copy that Layer Preview code (view page source), save it somewhere and start tinkering.

W3 schools - has interactive examples which you can play with and adapt to your fledgling code. If you decide on JavaScript, JS Fiddle is also very good.


You might find an earlier question useful for choosing between Javascript mapping libraries:

How do various JavaScript mapping libraries compare?


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:

  1. desktop gis: qgis
  2. database admin: navicat
  3. webserver: basic VPS
  4. webgis package: boundlessgeo geosuit (contains: postgresql/postgis, geoserver, and geoexplorer)

Instead of the geoexplorer I would use leaflet javascript, because it looks nicer and run smoother... but take some time to copy/paste together some code. here is an example:


Three skills necessary for most any web development, web mapping included, are html, css, and javascript. Resources to learn those languages are ample. The topic of where to start learning how to develop web mapping applications is fairly well covered on GIS Stack exchange question How to Start Web Mapping?

One resource to look into developing web mapping applications if you have limited programming experience is mapbox. You can produce web maps without any coding, although I think it would be difficult to produce a web map as complicated and interactive as the one you use in your example without using a scripting language like javascript or python.


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.


I would begin with Google Maps API. Its free and easy to work with. It uses Javascript, which can be learned via a number of good resources. I would recommend Codecademy if you are new to JS.

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.


I use leafletjs and I think it is very simple. It is javascript based, and can draw features using various data sources. Basically, you insert the map code into a .html file and then view the file. I cannot comment on other API's, but I think that google is pretty simple, as well as Openlayers.

Also, there are services like MapBox that do not require you to host the html file, but rather just upload your data to them.


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

If you require more documentation on Mapbox you can take a read of their Mapbox Guides or dive into the code a bit more using the Examples section


I am a new webmapper, and was referred to Scott Murray's Data Visualization for the Web. His ebook can be read here: for free. It's for 'noncoders', extremely informative, and has many hands-on examples.


You can also take a look at some of my blog posts on the subject:

Blog Posts about my GeoSandbox


This link is the really good to start with Mapserver, which is an excellent open source GIS server. Before going through the tutorial, download the binary package of mapserver from here.


You can always try R and RShiny. You can easily create an webApp and project the results of your app into a map :D Check for more info:


Not the answer you're looking for? Browse other questions tagged or ask your own question.