转自:http://blog.thematicmapping.org/2012/11/exploring-mapbox-stack-mbtiles-tilejson.html

In my last blog post, we created a population density map of New Zealand using QGIS, SQLite and TileMill. Today, we’re going to publish this map to the web using various MapBox inventions. I'll also show you how to publish an interactive TileMill map on your own web server using some PHP and JavaScript wizardry.

I love MapBox. The team behind this platform has created a series of new specifications, allowing us to create fast, good looking and interactive maps. The downside is the limited support for other map projections than Web Mercator.

TileMill allows you to add legends and tooltips to your maps. I’ve added a legend to my population density map with a HTML snippet describing the map and the color scale.

123456789101112131415161718
<div class='my-legend'>
<div class='legend-title'>Population density<br/>per km<sup>2</sup> (2011)</div>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:#FFFFFF;'></span>None</li>
<li><span style='background:#FFFFE5;'></span>< 1</li>
<li><span style='background:#FFF7BC;'></span>1 - 5</li>
<li><span style='background:#FEE391;'></span>5 - 10</li>
<li><span style='background:#FEC44F;'></span>10 - 50</li>
<li><span style='background:#FE9929;'></span>50 - 100</li>
<li><span style='background:#EC7014;'></span>100 - 250</li>
<li><span style='background:#CC4C02;'></span>250 - 500</li>
<li><span style='background:#993404;'></span>500 - 1000</li>
<li><span style='background:#662506;'></span>1000 ></li>
</ul>
</div>
<div class='legend-source'>Map: <a href="http://blog.thematicmapping.org">Bjørn Sandvik</a><br/>Data: <a href="http://www.stats.govt.nz/">Statistics New Zealand</a></div>
</div>
view rawlegend.html hosted with ❤ by GitHub

The tooltip shows when the user hovers over or clicks on the map. It allows us to show dynamic content - additional data, images, charts - for each map feature. I want to show the name, total population, area and population density for each feature:

123456
<div>
<strong>{{{au_name}}}</strong><br>
Population: {{{pop2011}}} (2011)<br>
Area: {{{area}}} km<sup>2</sup><br>
Density: {{{popdens}}} per km<sup>2</sup>
</div>
view rawtooltip.tpl hosted with ❤ by GitHub

The data fields for the layer are wrapped in curly Mustache tags. These tags will be replaced by data when you interact with the map. You can use the full Mustache template language.

The easy way to publish this map is to upload it to MapBox Hosting, and use the embed code provided. If you want to publish your map on your own web server, this is an alternative route:

To export an interactive map from TileMill, you need to use the MBTiles format. This is an innovative SQLite-basedformat specification capable of storing millions of map tiles in a single file. The format is also supported by various3rd-party applications, and I'm sure we'll see a greater adoption in the future.

Within the MBTiles file, the map legend, the tooltip template and information about map extent, zoom levels etc. is stored in a format named TileJSON. This is also an open specification, providing a consistent way of describing a map, making it easier to load and display a map the way it’s meant to be seen.  The TileJSON for my map looks like this:

1234567891011121314151617181920
{
"tilejson": "2.0.0",
"scheme": "xyz",
"bounds": [ 166, -47.5, 179, -34 ],
"center": [ 173.3, -41.273, 5 ],
"minzoom": 0,
"maxzoom": 12,
"name": "Population density map of New Zealand",
"description": "Created by Bjørn Sandvik\nhttp://blog.thematicmapping.org/",
"legend": "<div class='my-legend'>\n<div class='legend-title'>Population density<br/>per km<sup>2</sup> (2011)</div>\n<div class='legend-scale'>\n <ul class='legend-labels'>\n <li><span style='background:#FFFFFF;'></span>None</li>\n <li><span style='background:#FFFFE5;'></span>< 1</li>\n <li><span style='background:#FFF7BC;'></span>1 - 5</li>\n <li><span style='background:#FEE391;'></span>5 - 10</li>\n <li><span style='background:#FEC44F;'></span>10 - 50</li>\n <li><span style='background:#FE9929;'></span>50 - 100</li>\n <li><span style='background:#EC7014;'></span>100 - 250</li>\n <li><span style='background:#CC4C02;'></span>250 - 500</li>\n <li><span style='background:#993404;'></span>500 - 1000</li>\n <li><span style='background:#662506;'></span>1000 ></li>\n </ul>\n</div>\n<div class='legend-source'>Map: <a href=\"http://blog.thematicmapping.org\">Bjørn Sandvik</a><br/>Data: <a href=\"http://www.stats.govt.nz/\">Statistics New Zealand</a></div>\n</div>",
"attribution": "Statistics New Zealand",
"template": "{{#__location__}}{{/__location__}}{{#__teaser__}}<div>\n<strong>{{{au_name}}}</strong><br>\nPopulation: {{{pop2011}}} (2011)<br>\nArea: {{{area}}} km<sup>2</sup><br>\nDensity: {{{popdens}}} per km<sup>2</sup>\n</div>{{/__teaser__}}{{#__full__}}{{/__full__}}",
"version": "1.0.0",
"tiles": [
"http://earthatlas.info/nz/tiles/nz-popden/{z}/{x}/{y}.png"
],
"grids": [
"http://earthatlas.info/nz/tiles/nz-popden/{z}/{x}/{y}.json"
]
}
view rawnz-popden.tilejson hosted with ❤ by GitHub

If you add interactivity to your map (tooltips), your MBTiles file will also include the most impressing part of the MapBox specifications: UTFgrids. This JSON-format allows us to add thousands of interactive points or polygons through interactivity data grids, and it will even work in older browsers with limited support for vector data.

So how do we turn our MBTiles file into an interactive map? Previously, I've used MBUtil to extract the contents from MBTiles into a directory structure. But by doing this, we loose the benefits of the MBTiles format, like storing a map in a single file and dealing with redundant images. What we need is a script on our web server that will extract content from our MBTiles file on demand. I decided to try a PHP script from infostreams (this is probably not the most scaleable solution). The script supports the full MBTiles specification, including TileJSON and UTFGrids. Installation is simple: just put the .php file and the .htaccess file in the same directory as your .mbtiles files. The .htaccess file includes a rule that rewrites requested URLs on the fly, so the map data is available un URLs like:

So when we have our backend sorted, how can we recreate our interactive map with Leaflet or other JavaScript mapping libraries? This is way the MapBox team created Wax, which is a client implementation of the MBTiles interaction specification. You just include the wax script together with your mapping library of choice, and then you can add interactivity with a few lines of code:

123456789101112131415161718
// Load TileJSON
wax.tilejson('http://earthatlas.info/nz/tiles/nz-popden.tilejson', function(tilejson) {
 
// Create map and add image tiles
var map = new L.Map('map-div')
.addLayer(new wax.leaf.connector(tilejson))
.setView(new L.LatLng(51, 0), 1);
 
// Create map legend
wax.leaf.legend(map, tilejson).appendTo(map._container);
 
// Add map interaction (tooltips)
wax.leaf.interaction()
.map(map)
.tilejson(tilejson)
.on(wax.tooltip().animate(true).parent(map._container).events());
 
});
view rawleaflet-wax.js hosted with ❤ by GitHub

I've also done some extra JavaScript coding to allow switching between various interactive map layers. I'll save that for a later blog post.

The Leaflet map looks like this (there seems to be an issue with the latest Wax distribution and Google Chrome):

Fullscreen map

Exploring the MapBox stack: MBTiles, TileJSON, UTFGrids and Wax的更多相关文章

  1. 与你相遇好幸运,mbview的mbtiles文件分析

    mbview是一个查看.mbtiles文件的本地程序. https://github.com/mapbox/mbview .mbtiles文件就是一个Sqlite文件,用Navicat Premium ...

  2. Tilemill + tilestream + mapbox.js 自制地图

    感谢Mapbox,带来了一整套完整的地图方案. 你可以把你的地图放在Mapbox的网站上.也可以使用他们提供的开源软件自己架设地图服务. Mapbox的地图方案包括web,ios和android. 不 ...

  3. TileJSON

    TileJSON TileJSON is an open standard for representing map metadata. License The text of this specif ...

  4. MBTiles

    MBTiles Specification MBTiles is a specification for storing tiled map data in SQLite databases for ...

  5. UVA 1362 Exploring Pyramids 区间DP

    Archaeologists have discovered a new set of hidden caves in one of the Egyptian pyramids. The decryp ...

  6. 支持 MBTiles 规范的预缓存

    SuperMap iServer 支持生成符合MBTiles规范的预缓存(MBTiles是由MapBox制定的一种将瓦片地图数据存储到SQLite数据库中并可快速使用,管理和分享的规范. 该规范由Ma ...

  7. Exploring Python Code Objects

    Exploring Python Code Objects https://late.am/post/2012/03/26/exploring-python-code-objects.html Ins ...

  8. Exploring the 7 Different Types of Data Stories

    Exploring the 7 Different Types of Data Stories What makes a story truly data-driven? For one, the n ...

  9. LA 3516(ZOJ 2641) Exploring Pyramids(递推 DP)

    Exploring Pyramids Archaeologists have discovered a new set of hidden caves in one of the Egyptian p ...

随机推荐

  1. DIV+CSS解决IE6,IE7,IE8,FF兼容问题(转至http://www.douban.com/note/163291324/)

    2011-07-25 21:11:47     DIV+CSS解决IE6,IE7,IE8,FF兼容问题 1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE ...

  2. mysql server5.6.28 修改数据目录

    1.查看配置文件 mysql --help | grep my.cnf 列出使用哪个配置文件(顺序推) 2.service mysql stop 3.创建新目录 mkdir /data 4.迁移之前的 ...

  3. Android 开发笔记“Eclipse 调试和快捷键”

    原文地址:http://blog.sina.com.cn/s/blog_5cf876340100aswr.html Eclipse 调试器和 Debug 视图 Eclipse SDK 是针对 Java ...

  4. 基于FPGA的cordic算法的verilog初步实现

    最近在看cordic算法,由于还不会使用matlab,真是痛苦,一系列的笔算才大概明白了这个算法是怎么回事.于是尝试用verilog来实现.用verilog实现之前先参考软件的程序,于是先看了此博文h ...

  5. 为sublime安装package control 解决乱码问题 Mac版

    为sublime安装package control   Mac版参考 https://sublime.wbond.net/installation 防止中文乱码其实只需要2个东东  一个GBK enc ...

  6. 转:说说angularjs中的$parse和$eval

    说说AngularJS中的$parse和$eval AngularJS的初学者常常会对$parse和$eval两个内建服务感到有些困惑,今天我们就来说说AngularJS中的$parse和$eval. ...

  7. Protel99se教程九:protel99se中PCB设计的高级应用

    在上一节我们PCB资源网的protel99se教程当中,我们给大家讲解了在protel99se进行原理图设计中的一些高级应用技巧,在这一节protel99se教程当中,我们将给大家讲解的是,在prot ...

  8. COB封装的优势

    随着固态照明技术的不断进步,COB(chip-on-board)封装技术得到越来越多的重视,由于COB光源有热阻低,光通量密度高,眩光少,发光均匀等特性,在室内外照明灯具中得到了广泛的应用,如筒灯,球 ...

  9. Ants(思维)

    Ants Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 12893   Accepted: 5637 Description ...

  10. 1148 - Mad Counting(数学)

    1148 - Mad Counting   PDF (English) Statistics Forum Time Limit: 0.5 second(s) Memory Limit: 32 MB M ...