Skip to main content

Tutorial 3b: Tiling (Creating static tiles with svgMapTools)

Introduction​

In the previous chapter, we used tiles that had already been created, but here we will use svgMapTools to create and display tile data from a shapefile. Click here to see it in action.

File Structure​

The file structure is as follows:

Tutorial​

Files Used​

Preparing tiled content​

Configuring svgMapTools​

Download source data​

Transform data and save content​

Generates tiled content for an SVGMap from a Shapefile.

Below is an example run on Windows.

  • cd [PATH_TO_DATA]
  • mkdir roadl
  • mkdir coastl
  • mkdir builtup
  • cd [PATH_TO_TOOLS]
  • Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -showtile -densityControl 400 -lowresimage -strokefix 2 -color "#000000" [PATH_TO_DATA]\coastl_jpn.shp [PATH_TO_DATA]\coastl\coastl_jpn.svg
  • Shape2ImageSVGMap [PATH_TO_DATA]\coastl\coastl_jpn.svg -sumUp 16 -antiAlias [PATH_TO_DATA]\coastl_jpn.shp "#000000" "#000000" 0 2
  • Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -showtile -densityControl 400 -lowresimage -strokefix 2 -color "#00ff00" [PATH_TO_DATA]\roadl_jpn.shp -[PATH_TO_DATA]\roadl\roadl_jpn.svg
  • Shape2ImageSVGMap [PATH_TO_DATA]\roadl\roadl_jpn.svg -sumUp 16 -antiAlias [PATH_TO_DATA]\roadl_jpn.shp "#00ff00" "#00ff00" 0 2
  • Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -strokefix 2 -color "#ff0000" [PATH_TO_DATA]\builtupa_jpn.shp [PATH_TO_DATA]\builtup\builtupa_jpn.svg
  • Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -strokefix 2 -color "#ff0000" [PATH_TO_DATA]\builtupp_jpn.shp [PATH_TO_DATA]\builtup\builtupp_jpn.svg
  • Transfer all contents of [PATH_TO_DATA]\coastl, [PATH_TO_DATA]\roadl, [PATH_TO_DATA]\builtup to the host.

Note:

  • [PATH_TO_TOOLS] is the tools directory of svgMapTools
  • [PATH_TO_DATA] is the directory where you extracted the downloaded data
  • builtupp_jpn and builtupa_jpn do not generate bit image tiles for small scales because the data size is not large (tiling is not actually necessary).

tutorial3b.html​

It is essentially the same as tutorial2b.html used in Tutorial 2b.

Container.svg​

  • It is essentially the same as Container.svg from Tutorial 2b.
  • However, this time the coastline layer, road layer, and urban area (surface/point) layer are all tiled data.
  • The animation elements representing each layer refer to the root file of the tiled SVGMap content generated by svgMapTools.
  • To make the vector data clickable, add clickable to the class attribute.
  • Additionally, OpenStreetMap has been added as a hidden layer at the bottom.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="122.9800817, -45.398095, 21.97626, 21.0533039" >
 <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(1,0,0,-1,0,0)" />

<!-- Background map OpenStreetMap (hidden)-->
<animation xlink:href="dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="OpenStreetMap" class="basemap switch" visibility="hidden"/>

<!-- Global Map Japan Coastline -->
<animation xlink:href="coastl/coastl_jpn.svg" x="-3000" y="-3000" width="6000" height="6000" title="Coastline" class="Global Map Japan clickable" visibility="visible"/>

<!-- Global Map Japan Road Lines -->
<animation xlink:href="roadl/roadl_jpn.svg" x="-3000" y="-3000" width="6000" height="6000" title="Road" class="Global Map Japan clickable" visibility="visible"/>

<!-- Global Map Japan Urban Area (Area)-->
<animation xlink:href="builtup/builtupa_jpn.svg" x="-3000" y="-3000" width="6000" height="6000" title="Urban Area (Area)" class="Global Map Japan clickable" visibility="visible"/>

<!-- Global Map Japan Urban Area (Point)-->
<animation xlink:href="builtup/builtupp_jpn.svg" x="-3000" y="-3000" width="6000" height="6000" title="Urban Area (Dot)" class="Global Map Japan clickable" visibility="visible"/>
</svg>

The structure of tiled content generated by svgMapTools​

  • All vector data (.svg format - for large-scale display) and raster data (.png format - for small-scale display) are referenced hierarchically from the layer's root content (in this example, coastline data, coastl_jpn.svg).
  • Among .svg format data, those with the file name cont contain no vector graphics data and only reference data, referencing child and descendant content.
coastl_jpn.svg
 |
 +-coastl_jpn/lvl3/tile1_0.png
 +-coastl_jpn/lvl3/tile0_1.png
 +-coastl_jpn/lvl3/tile1_1.png
 |
 +-coastl_jpn/lvl4/tile1_2.png
 +-coastl_jpn/lvl4/tile2_2.png
 +-coastl_jpn/lvl4/tile2_3.png
 |
 +-coastl_jpn_l1_2-3.svg
 |
 +-coastl_jpn_cont_l1_1-2.svg
 | |
 | +-coastl_jpn/lvl5/tile3_4.png
 |+-*.png ...
 |+-coastl_jpn_l2_2-5.svg
 |+-*.svg ...
 | +-coastl_jpn_cont_l4_14-20.svg
 | |
 |+-*.png ...
 |+-*.svg ...
 |
 +-coastl_jpn_cont_l1_2-2.svg
    |
    +-*.png ...
    +-*.svg ...