Sharing the Openness of the Maps via FOSS4G and the Web


Published on

A presentation on FOSS4G 2012 Tokyo

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Sharing the Openness of the Maps via FOSS4G and the Web

  1. 1. Sharing the Openness of the Maps via FOSS4G and the Web Hidenori FUJIMURA Director for International Cooperation Overseas Project DivisionMinistry of Land, Infrastructure, Transport and Tourism 1
  2. 2. Exporting Digital Japan• One of Japan’s strategy is to export Japan’s proved technologies and policies on infrastructure to other countries.• One prospective measure to be exported: Provision of open access to maps developed through basic and pubic survey, which is called Digital Japan.• Can we export Digital Japan? 2
  3. 3. Digital Japan: GSI’s strategy in Web Mapping• Information from different entities shall be shared over authoritative maps from GeoSpatial Information Authority of Japan (GSI)• Tiled topographic map data + API to control map frame and to overlay information.2003- Digital Japan Web started the service. 3
  4. 4. Digital Japan Web System• Version 1 (2003) – Active X component for Internet Explorer + JavaScript API Google Maps (2004) Google Maps/Japan (2005)• Version 2 (2008) OpenLayers (2006) – Pure JavaScript API• Version 3 (2011) – Pure JavaScript API built on OpenLayers library• Version 4 (2012) – OpenLayers library add-on 4
  5. 5. OpenLayers applications Digital Japan geoSERBIAJapan SerbiaOS OpenSpace geoportal.mdUK Moldova The slippy map Tiantidu OSM China 5
  6. 6. Collaborative evolution via Open Source Digital Japan can follow the evolution of OpanLayersJapan canshare thesystem forDigital Japanwith othercountries Everyone can improve Digital Japn by improving OpenLayers 6
  7. 7. Not only OpenLayers Pt. 1: other Web Mapping LibrariesVarious implementation Open web access to tilesusing various open + open source librarysource library 7
  8. 8. Not only OpenLayers Pt. 2: map tiles generationIn 2011 jigsaw has fallen into place – the whole package ready!(at least for introductory phase.) 8
  9. 9. TileMill – the last jigsaw pieceDesign environment for cartography, constituting Mapnik as arenderer, Carto as a stylesheet language, a locally-served web interfacewith node.js. By default TileMill renders to an MBTiles, an SQLitebundle of tile images. 3-clause-BSD licensed. この地図の作成に当たっては、国土地理院長の承認を得て、同院発行の基盤地図情報を使用した。 ( 承認番号 平 24 情使、 第 29 号 ) / some map data (c) OpenStreetMap contributors 9
  10. 10. Proposal of tile based web mapping in JICA training courses 2012 in GSITileMill hands-onTileMill hands-on Lecture Lecture workshop workshop 10
  11. 11. TileMill hands-on workshopA hands-on workshop in “JICA training courseon Global Mapping for SustainableDevelopment” in 2012 probed that allparticipants could develop a tile based webmapping service within a few hours. 11
  12. 12. Steps for the hands-on workshop1. Download and Install TileMill.2. Download Global Map data.3. Load Global Map to TileMill.4. Style Global Map data inside TileMill.5. Export and publish the map. 12
  13. 13. 1. Download & Install 13
  14. 14. 2. Download Global Map data -> Download 14
  15. 15. Start TileMill and create a New Project 15
  16. 16. Open the project you created. 16
  17. 17. “Add Layer” for Global Map data 17
  18. 18. “Add Layer” for Global Map data 18
  19. 19. Select data sourceFirst try with polbnda.shp 19
  20. 20. SRS = WGS84 and “Save & Style” 20
  21. 21. You will see your data 21
  22. 22. To change the style of data… Click to reflect the Change to the map. Edit to change the style. Syntax: click on the left Drag to change the draw order for help 22
  23. 23. Make a map• Builtupa,watrcrsl, roadl, inwatera… 23
  24. 24. Scale dependent rendering [zoom > n] 24
  25. 25. Next: export to the web Step 1: project setting Limit the spatial bounds and zoom span so that the data size < 50MB 25
  26. 26. Export -> Upload 26
  27. 27. Now your map is ready on the Web. 27
  28. 28. Extra: text annotationtext-face-name, text-name, text-fill, text-placement 28
  29. 29. Extra: Embedding #1 (iframe)This example available at 29
  30. 30. Extra: Embedding #2 (Leaflet + Wax) You also need to download some JavaScript library files from hing/leaflet/This example available at 30
  31. 31. Conclusion• Tile based web mapping is already a common good practice among National Mapping Agencies (NMAs), and the whole process is now easy.• TileMill was the last piece for the first package.• JICA training participants could publish a tile based web mapping service within a few hours TileMill hands-on workshop.• Tile based web mapping from NMAs can be internationally promoted thanks to FOSS4G. 31