There are quite a few online map services that offer maps (basemaps) and APIs to control maps that you can embed on your own pages. Google, Bing, OpenStreetMaps, Mapbox are just some of the providers.
To enabled maps to be used in the browser, Javascript is necessary. Most of these map providers provide their own API however, there are Javascript libraries with extended functionality to create layers on top of these maps and whatever additional layers and functionality is built into the API. Some examples of libraries are the powerful OpenLayers, lightweight Leaflet and Modest Maps and even WebGL based 3D globe library Cesium.
Basemaps are the base layer of maps. Google for example, offers a choice of satellite/aerial maps and street maps layers as base maps. OpenStreetMaps (OSM) are focused on street maps as the base layer. Other providers like ESRI (ArcGIS) have good quality satellite/aerial/terrestrial base maps. Basemaps are usually rendered in the browser and served from a server using a standard defined by the OGC (Open Geospatial Consortium), the WMS (Web Map Service).
OpenStreetMaps for example is a huge collection of data - streets, buildings, etc. are represented as points and polygons (geometry) and are rendered as tiles and served through various online map services. MapBox, for example, uses OSM data and uses a custom rendering engine to create beautiful maps. MapBox has a TileMill software that runs on your local machine and allows you to create maps from OSM data, style the maps and render them as tiles or save them in a more efficient SQLLite based format. MapBox Studio is a powerful online version that allows you to design your own maps.
When Google Maps started, the state-of-the-art required maps to be served as tiles and the innovation was to use Javascript to enable people to drag and scroll to pan and zoom maps which in turn loaded tiles on the backend. Often, tile servers used simple folders with x,y,z labels to serve pre-rendered tiles. These servers (e.g. MapServer) are still popular and a possible solution if you want to run your own map server. Tiles were rendered from vector to raster using libraries like MapNik (still very much the best renderer nowadays) that made beautiful tiles but required lots of processing power.
Google, however, has since moved to using vector maps rendered with the help of WebGL. This is a huge advancement since serving vector data is much more efficient than serving raster tiles. Client browsers are also much more capable of handling this rendering nowadays. This needs to be differentiated from rendering vectors as tiles and serving them on the fly as rasters. This is the 'heaviest' option in terms of processing and is usually only possible for simple maps. An example of such a server is GeoServer. GeoServer is very useful for serving vector layers above the base map layer though.
What is a vector layer? A vector layer is a set of instructions that a machine can intepret, e.g. Draw a line from (x1,y1) to (x2,y2) and the line should be red in colour and with a stroke of 0.5in. The OGC (Open Geospatial Consortium) defines a WFS (Web Feature Service) standard for querying and editing vector geographic features, such as roads or lake outlines.
The OGC KML (Keyhole Markup Langauge) Encoding Standard is an XML language focused on geographic visualization, including annotation of maps and images. Geographic visualization includes not only the presentation of graphical data on the globe, but also the control of the user’s navigation in the sense of where to go and where to look. An example KML snippet is shown below that describes a placemarker (think a pin on a map):
<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
<name>My office</name>
<description>This is the location of my office.</description>
<Point>
<coordinates>-122.087461,37.422069</coordinates>
</Point>
</Placemark>
</kml>GeoJSON is a popular, elegant way of serving geographical data (features, areas, etc.) and the non-spatial data accompanying them (labels, values). MongoDB can serve and store GeoJSON objects and servers like GeoServer and libraries like OpenLayers support GeoJSON.
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [125.6, 10.1]
},
"properties": {
"name": "Dinagat Islands"
}
}You can play around with sandboxed GeoJSON data and a map at geojson.io.
You might have heard of SVGs mentioned sometime when using the browser for viz. Scalable Vector Graphics or SVG is a format for defining graphics in a vector format which the browser will then draw. Scalable refers to the fact that it is possible to zoom these graphics without degredation in quality as they are a set of instructions and geometry where translations and scaling can be applied to and rendered by the browser.
Since SVG support in browsers is relatively mature (HTML 5 Canvas and WebGL are relatively newer technologies), many libraries default to SVG for defining overlays on maps. SVGs are actually a HTML like markup langauge for describing geometry to be drawn. Many libraries like D3.js support both SVG and HTML5 Canvas to allow interactive visualizations.
Google Earth is a desktop virtual globe software that allows the visualisation of geospatial information. You can load KML/KMZ layers on the virtual globe. The globe is made up of satellite photographs stiched together and due to the globe based visualisation, reduces the effect of Mercator Projection. As of the time of writing (Dec 2015), this service is unavailable in China.