How to Start Web Mapping?

Question

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?

Answer 1

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.

Answer 2

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 Table of Contents:

link to course materials https://www.e-education.psu.edu/geog585/node/508

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

Answer 3

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

http://sites.google.com/site/fusiontablestalks/stories

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

Examples: http://www.latimes.com/news/local/la-me-us-congress-census-map,0,4500533.htmlstory

One of the best: http://tinyurl.com/England-Deprivation-Mapped

Answer 4

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

Answer 5

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.

Answer 6

Edit

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.

---

I recently stumbled upon this website, which also provides some metrics on different software platforms in this area.

---

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

APIs:

• JavaScript
• Esri Leaflet
• Silverlight (please see this blog post on last release notes)
• Flex (please see this blog post on last release notes)
• .NET
• ...and more (see here)

Pros:

• The Experience Builder solution provides one of the most dynamic non-coding web application building experience on the market
• The Web AppBuilder has made creating web map applications very simple for those not well-versed in web development
• Easy to use application builders (Flex, Silverlight, and JavaScript, just be mindful of the deprecation plans)
• Expansive online forums (Plenty of Stack Exchange Posts)
• With many solutions available within the ArcGIS stack that require little to no development work, ArcGIS can also be a good choice for deploying solutions in a timely manner.
• GitHub repositories for many of the solutions

Cons:

• 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

Summary:

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

APIs:

• JavaScript
• Mobile (Android, iOS)

Pros:

• 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

Cons:

• Potential licensing issues (read up on the terms of service)
• Restrictions on web services

Summary:

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

APIs (all JavaScript based):

• Leaflet
• OpenLayers
• GeoServer

Pros:

• Very easy to use and completely free
• Ever growing API
• Ever growing developer base with custom plugins being published all the time
• Tutorials for beginners

Cons:

• Official support is not as well known BUT the community involved is more than helpful (perhaps even better than commercial GIS support)

Summary:

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.

Answer 7

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: http://help.arcgis.com/en/webapi/flex/index.html Silverlight: http://help.arcgis.com/en/webapi/silverlight/index.html

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:

Javascript: http://help.arcgis.com/en/webapi/javascript/arcgis/

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.

Answer 8

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

Answer 9

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.

Answer 10

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

Answer 11

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.

Answer 12

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.

Answer 13

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.

Answer 14

I would go with GeoServer It's the easiest to setup yet very powerful and completely OGC compliant. Lots of documentation and a very active user community... join user list serv.

Answer 15

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.

You can also have a look at GeoExt which provides extJS widget for building maps. Again geoext uses OpenLayers for map rendering.

There are also PHP based framework which uses MapServer (OpenLayers already supports) like GeoMoose, CartoWeb etc.

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.

Answer 16

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.

Answer 17

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.

Answer 18

Using GeoServer is the way to go if you want services adhering to the OGC spec. Openlayers is the client side library you're looking for (using google maps and bing).

In my experience however, only coding in javascript kills my productivity. I spend hours hunting small bugs, even with developer tools and firebug. Therefore, I write most of my code in geodjango. The data is stored in PostGIS, used by GeoServer to do everything I need. So for admin screens and workflows I'd recommend having a look at geodjango.

Answer 19

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:

• How to Start Web Mapping?
• Understanding web mapping tools
• Looking for a developer-friendly web gis

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 would instead suggest that you go with a Geoserver/OpenLayers solution provided that you can work with JavaScript. You might not even need any php code, if your data is all in the attributes of the features.

Answer 20

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: http://gis.xyz

Answer 21

A nice light alternative to OpenLayers, which is the big popular javascript library for web-mapping, is Leaflet.

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.

Answer 22

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.

http://openlayers.org/

Answer 23

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.

Answer 24

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.

Answer 25

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.

Answer 26

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.

Answer 27

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.

• Mapbox Pop Up Window
• Leaflet Quick Start Guide
• Info windows - Google Maps API

Answer 28

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

Answer 29

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.

Answer 30

If speed is important, then MapServer is a better choice than GeoServer. As of 2010 MapServer is a faster WMS server than GeoServer, and the advantage that MapServer has is important. During last editions of the FOSS4G Conference, serious benchmarking of several WMS servers have been done. The description and results of the one done during the FOSS4G 2010 (Barcelona, Spain) are available at:

• Benchmarking 2010 - OSGeo Wiki (detailed description of the benchmarks)
• FOSS 2010 WMS Benchmarking slides (graphs start at page #65)

About MapServer on 64 bit platforms, I have installed it on an old Itanium server under an Ubuntu server operating system. I do not remember it was difficult or tricky, and under heavy load it worked fine.

On the other hand, perhaps the biggest concern MapServer has is, as of version 5 (I don't know about version 6, the current stable one) the lack of WFS-T support.