网络使我们脱离现实世界。实际上，每个网站都是用一套抽象的概念作为我们交流和表达的工具。任何时刻,网站可以被任意一个新式的版本所覆盖或直接消失掉。我想这就是为什么那么多的人渴望创造一个产品,写一本书或与互联网的东西打交道。我们需要与物质世界保持联系并证明(如果只有我们自己)我们是在做真实的事情。
我可以继续搞网络，挑战去写一本书,或者思考我们如何处理真实所需的东西。然而，我将要去探索物质世界和网站都有直接关系的事物——地图。
地图不仅是个图表,它具有打开和制定的意义;它形成这里与那里，搭建不同想法的桥梁，即便我们并不知道以前是如何连接的。
Reif Larsen, The Selected Worksof T.S. Spivet
网站上最简单的地图形式就是用于显示具体的位置以及到达的方向。这是一个让人难以置信的强大工具。那么,为什么这么多网站都恰有一个默认的谷歌地图却不用呢?你会在每个网站上都使用深灰色的Helvetica字体吗?个性何在?定制体验何在?设计何在?
进入设计
保持简单——我们都想成为更好的互联网人员,而不是地图制作者。我们不需要研究历史,数学和制作地图技术(尽管这些都是非常有趣的研究领域)。出于理智,我将要掩盖一些技术区域而专注于实际的概念。
Tiles
如果你曾经注意到地图的加载部分,这是因为它使用Tiles,一种单独下载,而不是要求用户下载他们可能需要的一切。这些Tiles有多种风格并可用于大部分区域，例如基础地图和数据。你已经见过可选择性基础地图的例子了，当你使用谷歌地图时,谷歌提供了卫星图像和道路地图,这两种基础地图的形式。他们是用来提供现实世界的环境,或世界任意一个角落的位置。
Tiles是物质的表现;它没有提供环境的逼真画面。这意味着你可以设计地图本身。最简单的方法是设想对比谷歌的路线图与陆地测量部路的路线图。这两个地图的一切都是不同的：颜色，标签字体和使用符号。但是都提供同样精准的环境信息(其他地图可能提供不同的环境信息,如地形轮廓)。
比较谷歌地图的(顶部)与陆地测量部(底部)
精心设计的基础地图与一个网站的其他部分同等重要。最明显，也常被忽略的是如美学与品牌。地图应该搭配网站的其他部分;例如颜色和线条粗细的搭配，他们可以提高整个设计而不是放弃它。你也可以定义确切的地图目标,用标志或标签来显示、隐藏内容而不是显示你可以展示的一切详情。
我没有真正研究过任何基地地图的可访问性，但是考虑一些可行的选择，我认为关注标签的排版和各种元素的颜色是至关重要的。当然你可以选择隐藏标签，通常他们都提供所需有意义的数据地图。因此,确保每一个缩放级别不要太杂乱足够显示环境即可。当你选择字体时也要像其他设计一样仔细。对于颜色，你需要密切关注的问题是,色盲使用色彩来传达信息时。经常一个光谱的颜色将被用来显示数据或显示地形, 所以你需要知道,有些人很难看出光谱颜色差异。一个很好的定制基本图例子源于Michael K Owens’ check-in pages:
正如我所提到的，Tiles不仅仅用于基本图：它们也用于数据。在下面的截图中可以看到PlymouthMarine Laboratory怎样使用Tiles来显示数据和光谱的颜色。
来自Marine Operational Ecology数据网站的地图，显示了成年北海鳕鱼的数量。
技术
你可能很想知道怎样设计基本框架。在这里我将简单解释概念，在文章末尾将提供所使用的工具。如果你担心设计地图花费时间，完全不会——因为大部分都是自动化。你不需要手绘整个世界的Tile。
我们已经了解WEB标准的重要性，所以你将会很高兴(我不需要解释web标准映射开放地理联盟(OGC)的优势)称为网络地图服务(WMS)。你可以使用传统的图像文件格式,但你需要一种方法来查询特定的Tiles显示区域和缩放级别,这就是所谓的WMS。
功能
Tiles对大区域很适用，但是有时需要特定的小区域。我们把这些称为功能他们通常由多边形,线或点组成。例子包括邮编边界和地方之间的路线,甚至一些不定边界例如随着时间推移国家的改变。
在地图上显示功能提出了有趣的设计挑战。如果表达远处地理边界某些类型的数据,则颜色或形状需要更加明显。这确实很难，除了构建复杂的用户页面。如下图，这里有显而易见的颜色关系吗?它需要一种显示颜色代表什么的方法吗?
Choropleth map 按邮编排名显示, 使用 ViziCities.
功能用线条或颜色来表示;有效地利用线条或颜色远远超过学科知识，更要求审美判断。
Erwin Josephus Raisz, 绘图师 (1893–1968)
哪里可以明显的表示许多小而密集的地界(例如大街或购物中心)的边界，并且用什么表示?当设计地图时，最大的挑战是数据如何处理，怎样让用户理解明白。
技术
正如你所了解,我们使用WMS为Tiles，另一套标准WFS为特定的功能。我必须要强调两者之间的区别，WMS为TI领，然而WFS是为特定的功能。两者都可以使用相似的文件格式，但是用于各自特定的用例。你可能会疑问为什么不都使用一个定量格式例如KML，GEOJSON(甚至SVG)——当然可以——但是问题在于同样为WMS：你需要一种方法来查询数据得到正确的区域和缩放级别。
用户界面
当然没有一个绝对的用户界面设计方法，因为每个项目都要考虑许多不同的因素。地图有多种使用方法,如提供简单的方向信息或用可视化信息解释大量复杂的数据。当制作地图时这些因素需要考虑进去。
正如开始我所提到，网站上有很多的谷歌地图以至于人们认为制作地图的UI方法就只有这种。在某种程度上我们不想改变这种状况，因为人们知道如何使用;但是每个地图都需要缩放滑块或基础地图切换吗? 事实上,用户都需要放大吗?回答通常是肯定的，缩放并提供更多的环境信息。
有时候,你需要让用户在地图上选择(如数据层或方向)，因此怎样显示和隐藏数据呢?做一个简单的下拉框还是需要做个搜索呢? 谷歌的基础地图切换是相当不错的,因为它并没有提供许多选项而是提供了非常不同的环境情景和样式。
直到我们明白这一点才意识到随意放张谷歌地图是多么的荒谬，特别是与其他领域的工作量相比如颜色、字体或如何写CSS时。这些都很重要因此我们需要确保整个网站都被设计,包括地图与其他任何内容。
实践
我可以花时间漫谈下去，我们能做些什么来自定义地图使其与网站的个性相适应并正确地表示数据。我想强调概念和标准,因为工具在不断地变化并且仅仅依靠工具来做这个工作也绝非是一件好事。也就是说,有各种各样的工具将帮助你把这些概念变成现实。这不是比较,我只是想向你展示制作网站上的地图有很多种选择。
谷歌
好吧,到目前为止我一直在评论关于谷歌地图,这是因为网络上有大量的默认地图。你可以尽量设计它们。他们不可能允许你使用自定义的WMS层但谷歌地图有自己的版本叫做Calledstyled地图。使用数组映射功能(用于某种意义上的道路和湖泊和地标,而不是为某种WFS)，你可以用JavaScript设计基本地图。它甚至允许你随意切换,这有助于避免太多杂物在地图上的问题。不仅缺乏WFS，也不支持WFS，但是可以支持GEOJSON和KML所以你仍然可以在地图上显示的功能。你同样应该检查Google Maps Engine(新版本的地图)，提供了一个接口用于创建更高级的地图,与不同选择的基础地图。高级版本是可用的,本质上创建可视化的地图,提高了谷歌主地图的加载。一个有用的功能是为你提供数据的采集。
Leaflet
之前你也许见过Leaflet。它不像谷歌地图那么受欢迎，但经常使用绝对是明智的。Leaflet是很小的开放源资源脚本代码。它不是一种服务所以你不必担心API限制和期限。Tiling有两个选择,要么能够使用WMS,或者直接把文件中的文件名使用变量如/ { z } / { x } / { y }. png。我建议使用WMS在动态文件的名称,因为它是一个标准,仅在一个文件名中使用变量的能力在某些情况下可能是有用的。Leaflet有很强的团体和有据可查的API。
MAPBOX
作为一个免费增值服务，MAPBOX虽说不是对每个案例都应用完美但是绝对值得期待。服务商提供了令人难以置信的定制工具以及大量的数据源和托管的地图。它还提供了大量的各种平台库,所以你不必只在网络上使用地图。
Mapbox是一种服务，尽管它的地图设计工具是开放资源。Mapbox Studio是一个只有向量名为Tilemill的以前版本工具。开始，我写到一个地图如何排版和配色与网站其他部分同等重要;如果你认为，“对，那究竟怎样设计地图的这些部分呢?”那么这就是一个工具。使用非常简单。基本上每个地图都有一个样式表。
如果你不想 买Mapbox，那么你可以导出Tiles(PNG、SVG等)使用其他的地图工具。
OpenLayers
经过长时间的等待,OpenLayers 3已经发布。与Leaflet相似不是一种服务而是文库，但它有一个更广泛的范围。去年我在普利茅斯海洋实验室GIS工作期间(早期我习惯于显示数据Tiles)，它使用OpenLayers 2创建一个基于web的地理信息系统，采集大量的数据并分析(例如图表)不用下载整个数据库和复杂的软件。OpenLayers 3较于之前的版本性能和可行性都大大提高。它是完美的工具对于复杂的web地图应用程序,同时它也可以用于简单的案例。
OPENSTREETMAP
没有所谓的OpenStreetMap我不可能在网上写一篇关于地图的文章。这里拥有大量的数据,完整的路线图和强大的API。
VIZICITIES
由Robin Hawkes 和 PeterSmart提出的最新列表 ViziCities项目，这是一个开放的三维可视化工具,目前还在开发的早期阶段。展示世界各地的3 d建筑物的经典例子是使用OpenStreetMap数据。Robin已经用它来创建一些令人难以置信的演示如实时伦敦地铁列车和飞机降落的机场。EdwardGreer和我目前正在使用ViziCities展示特定角色的理想住房领域。我们之所以选择它是因为3 d技术方面为我们提供了所想象到的有意思的可能性数据。(如实际地图上的柱状图而不是仅在UI中)。尽管不是完全稳定，功能齐全的系统，ViziCities值得借鉴，功能绝对会越来越强大。