Appboard/2.4/builder/widgets/tile map: Difference between revisions

imported>Joe.firebaugh
imported>Andy.hopper
 
(31 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{DISPLAYTITLE:Tile Map Widget}}
{{DISPLAYTITLE:Tile Map Widget}}
[[Category:AppBoard 2.4]]
The '''Tile Map Widget''' displays tile-based maps from a server that conforms to the [http://www.openstreetmap.org Open Street Maps] architecture.
The '''Tile Map Widget''' displays tile-based maps from a server that conforms to the [http://www.openstreetmap.org Open Street Maps] architecture.


Tile based mapping allows users to zoom through different levels of detail and pan quickly without having to load excessive amounts of data. Each zoom level is served by a different set of tiles of fixed size and the tiles are loaded on demand for performance reasons. Google Maps is a well known tile-based map tool and AppBoard supports the use of Google Maps through the [[appboard/2.4/builder/widgets/google_map|Google Map]] widget.


This Widget provides advantages over the Vector Map Widget because it can show details such as streets and satellite imagery.  The Widget also provides advantages over the Google Map Widget, because it does not require an internet connection and is not reliant upon the Google mapping technology and data.
The advantages to AppBoard users with the OpenStreetMap based Tile Map widget is:


* Native Adobe Flex based widget which better fits into the AppBoard framework providing flexible marker configuration, full access to widget actions, and better performance.
* Ability to pick, or create your own, set of base layer tilesets and overlay tilesets.
* Ability to serve up tilesets from AppBoard itself, avoiding the need for clients or the server having external Internet access.
* Avoid commercial licensing requirements of using Google Maps.


As in other AppBoard map Widgets, the data source for the Widget must contain fields with Longitude and Latitude for each node to be drawn on the map.
AppBoard also includes a [[appboard/2.4/builder/widgets/vector_map|Vector Map]] widget that uses internal maps so external Internet access is not required. This widget continues to be available but in many cases it is recommended to switch or use the Tile Map instead thanks to greater marker flexibility and map detail.


As with all other AppBoard geographic mapping widgets the data collection driving the widget must include ''latitude'' and ''longitude'' co-ordinates in order to plot markers on the map.


The use of KML is not supported in the Tile Map Widget.
[[File:appboard-2.4-tilemap.png|frame|center|link=|Tile Map widget using MapQuest tiles with atmospheric pressure overlay from OpenWeatherMap and icon markers with status indicators. The toolbar is also shown (hidden by default).]]




[[File:Tile_Map_Widget.PNG]]
== Creating Tile Map Widgets ==


== How To Create a Tile Map Widget ==
For instructions on creating a Widget, see the general instructions in [[appboard/2.4/builder/widgets#Adding_Widgets|Adding Widgets]].  The '''Tile Map''' type is located under the '''Maps''' category on the Widget Type selection screen.
For instructions on creating a Widget, see the general instructions in [[appboard/2.4/builder/widgets#Adding_Widgets|Adding Widgets]].  The '''Tile Map''' type is located under the '''Maps''' category on the Widget Type selection screen.




== How To Configure a Tile Map Widget ==
== Tile Map Widget Configuration ==


# Follow the instructions above to create the basic '''Tile Map Widget'''.
# Follow the instructions above to create the basic '''Tile Map Widget'''.
Line 31: Line 37:
#:
#:
# Enter the following information on the '''Visualization''' tab:
# Enter the following information on the '''Visualization''' tab:
#* '''Map Tiles''' - Select the tile style or server that you wish to use from the list of available tile types.
#* '''Map Tiles''' - Select the tile style or server that you wish to use from the list of available tilesets. Refer to the [[#Additional Information|Additional Information]] section for more information on managing this list.
#* '''Latitude Field''' - Select the column of data that provides latitude coordinates.
#* '''Latitude Field''' - Select the column of data that provides latitude coordinates.
#* '''Longitude Field''' - Select the column of data that provides longitude coordinates.
#* '''Longitude Field''' - Select the column of data that provides longitude coordinates.
Line 46: Line 52:
#* [Optional] '''Default Icon''' - When the "Icon" Marker Type is selected (see above), this item selects the icon to display for each node.  
#* [Optional] '''Default Icon''' - When the "Icon" Marker Type is selected (see above), this item selects the icon to display for each node.  
#* [Optional] '''Icon Size''' - When the "Icon" Marker Type is selected (see above), this item determines the size of each icon.
#* [Optional] '''Icon Size''' - When the "Icon" Marker Type is selected (see above), this item determines the size of each icon.
#* [Optional] '''Icon Badge Filter''' - When the "Icon" Marker Type is selected (see above), this allows for different icons to be displayed conditionally based on the attributes of each individual node on the map.
#* [Optional] '''Icon Badge Filter''' - When the "Icon" Marker Type is selected (see above), this allows for different icons to be displayed conditionally based on the attributes of each individual node on the map. See [[appboard/2.4/builder/icon_filter|Icon Filter]] for more information on configuring an Icon Filter.
#* '''Preview''' - This section provides a small preview of the Tile Map.
#* '''Preview''' - This section provides a small preview of the Tile Map.
#:
#:
# Provide additional configuration on the '''Options''' tab.  For details on the available Options, see [[appboard/2.4/builder/options|Options]].
# Enter the following information on the '''Overlays''' tab:
#* [Optional] Add a tile overlay from the registered Overlays by pressing the "Add" button.  Choose the overlay tile type, alpha value, and the refresh time for the overlay.  (A value of 0 minutes turns off refresh). Refer to the [[#Additional Information|Additional Information]] section for more information on managing this list.
#:
# Provide additional configuration on the '''Options''' tab.  For details on the available Options, see [[appboard/2.4/builder/widgets/options|Options]].
#:
#:
# Click '''Close'''.
# Click '''Close'''.
Line 57: Line 66:
{{Note|Changes made to the preview map positioning or zooming during configuration will be saved as defaults for the widget.}}
{{Note|Changes made to the preview map positioning or zooming during configuration will be saved as defaults for the widget.}}


{{Note|If the Tile Map widget encounters data in the latitude or longitude fields that can not be converted to numbers it will ignore the data and it will not plot it.  Latitude values that exceed +/-84 will be plotted on the +/- 84 boundary.}}


== Importing Offline Tile Data ==
== The Toolbar ==
The Tile Map Widget supports the use of custom tiles as offline tile data.  Perform the following steps to import offline tile data into AppBoard for use in the Tile Map Widget:
 
# Open a terminal window (i.e., CMD/shell prompt)
# Shutdown the AppBoard server
# Change directory to [Install_Home]/server/bin/
# Run the following command:
#* UNIX: <tt>./portal.sh FilesImport -jar <OfflineTilePackage></tt>
#* Windows: <tt>portal.bat FilesImport -jar <OfflineTilePackage></tt>
 
== Creating Custom Tiles From Images ==
 
The first 3 subsections are snapshot of the instructions found at: http://bryce-thomas.blogspot.com/2012/01/noobs-guide-to-creating-google-maps.html


===Finding the geographic coordinates of the image===
The Tile Map toolbar is available to users within the Builder or Viewer and changes made are only temporary for the session. On reloading the client the configured defaults will be used. The following controls are provided:
For a long time the hardest part has been trying to accurately figure out the coordinates of an overlay image.  Things got a little easier a few months ago with the release of [http://code.google.com/p/overlay-tiler/ Overlay Tiler].  A slightly modified version of the original Overlay Tiler is employed in the following steps (which you should now perform):
Upload your image to a location on the Web where you can publicly link it.  Dragging and dropping your image onto the imgur homepage is one option that will give you a direct link.
Visit http://overlaytiler.appspot.com/. In the Enter a location box, enter the name of the landmark your image will overlay and choose one of the auto-completed options. If no appropriate auto-complete option comes up, forget about it.
Paste a link to your uploaded image from Step 1 in the Upload an image to overlay box and hit Upload.
Step 3 should have taken you to a page with your image overlaid on top of Google Maps.  Use the green node in the centre of the image to centre the image on top of the respective Google Maps landmark (if it's not already).  You can use the standard Google Maps zoom controls and also the slider in the top left hand corner to adjust the image's opacity, which will make lining things up easier. 
Use the three red circles on the image corners to manipulate the image until it accurately traces the landmark1.  You'll notice as you do this that the command text in the bottom right hand corner continuously updates—we'll use this command in Part II to generate geographic metadata for our image.


Posted 11th January 2012 by [https://plus.google.com/114476754667118133978 Bryce Thomas]
* Toggle Toolbar: click the wrench icon to show or hide the toolbar.
===Adding geographic metadata to the image===
* Fit to Data: use the magnifying glass icon to force the widget to zoom and center on the current dataset. This is actually a toggle button and if left selected (or configured by the administrator by default) the map will always zoom to fit on any changes to the data collection.
Now that you've lined up your image over Google Maps, you're going to add some geographic metadata to your local copy of the image.
* Adjust Zoom Level - The <tt>-</tt> and <tt>+</tt> buttons and slider indicate the current zoom level and allow changes by clicking the symbols or dragging the slider.
Download [http://trac.osgeo.org/osgeo4w/ OSGeo4W] and install it. The "Express Desktop Install" is fine and you only need to tick "GDAL" when it asks you to select packages—all we want is access to the gdal_translate command.
* Overlays - This button allows the user to disable or enable overlays. Only overlays configured by the administrator are visible in this list.
Look for OSGeo4W Shell on the Start Menu and launch it.  Change into the directory with your image (e.g. cd C:\John\Pics).  
* Pan View - The circle with four arrows icon can be used to pan the map horizontally or vertically.
Copy the entire gdal_translate command from the bottom right hand corner of the Overlay Tiler Web page into the console, replacing [my_image] with the filename of your image locally. Note that you'll probably need to copy the command into something like Notepad first and remove all the backslashes and newlines, so you've got a command like: gdal_translate -gcp 0 0 178.71874950000017 -7.2265307089195225 -gcp 275 0 -128.37109424999983 -7.9235151584510195 -gcp 275 95 -128.37109424999983 -23.92125118057006 [my_image].png out.tif
(all on a single line). If you try to copy it straight into the console it'll execute the first line only and complain loudly.
In your image directory, you should now have a file named out.tif which looks just like your original file, but now with some hidden geographic metadata.


Posted 11th January 2012 by [https://plus.google.com/114476754667118133978 Bryce Thomas]
{{Tip|Panning and zooming are more simply performed by using a mouse scroll-wheel for zooming, and click-to-drag for panning.}}
===Generating Map Tiles===
Now that we've got an image with geographic metadata attached, it's time to generate the tiles.
Download and install [http://www.maptiler.org/ MapTiler].
Start MapTiler and select Google Maps compatible when it asks you what kind of tiles you'd like to generate.  Hit Continue.
Add your .tif image to the source data files and hit Continue.
Select WGS84 - Latitude and longitude (geodetic) as the Spatial reference system.  If you hit Preview the map reference with this SRS a browser tab will open showing you the boundaries of where your image will fit on Google Maps.  This should give you confidence that the georeferencing has worked.  Hit Continue.
Choose the zoom levels you want tiles generated for, or simply stick with the defaults.  Hit Continue.
Choose the directory to save the map tiles into and hit Continue.
Leave the default selection of viewers and hit Continue.
Change the title of the map if you want and hit Continue.
Hit Render.
Once rendering is done, click on the directory link MapTiler provides and you should see several numbered directories (one for each zoom level) and googlemaps.html and openlayers.html documents.  Open up googlemaps.html and you should see your tiles rendered as an overlay!  Try zooming in and out.


Posted 11th January 2012 by [https://plus.google.com/114476754667118133978 Bryce Thomas]
{{Note|When the zoom level on the map is such that tiles for different parts of the world are duplicated in the widget, data points will not be shown in the duplicated sections. Those sections will instead have a "letterbox" appearance with a layer of grey over the tiles.}}


=== Using the Custom Tiles in Appboard ===
== Included Tile Sets ==
# Copy the numbered directories created in the first 3 steps to: server\webapps\enportal\custom\tiles\[customFolderName]
# Create a file: server\webapps\enportal\WEB-INF\xmlroot\appboard\config\tileregistry\[myCustomTilesName].csv
# Insert the following as the header for the CSV (or use the default.csv file in the same directory as a template<pre>"id","name","source","minZoom","maxZoom","initialZoom","initialLatitude","initialLongitude","copyright"</pre>
# Place an entry with the details for your tiles like the following example:<pre>"washington","Washington","/enportal/custom/tiles/[customFolderName]/${z}/${x}/${y}.png",12,14,12,38.889,-77.03,"Copyright Information"</pre>


== User Options ==
AppBoard includes configuration to access the following OpenStreetMap tile sets.  Each provider of tile sets may have their own terms of use.  Please visit the provider site for more details.
[[File:tile_map_viewer_options.jpg]]


{|class="wikitable" border="1" style="text-align:center; background-color:#eeeeee;"
!Tile Set
!Provider
|-
|OpenStreetMap
|http://www.openstreetmap.org/
|-
|MapQuest OpenStreetMap
|http://developer.mapquest.com/web/products/open/map
|-
|Watercolor OpenStreetMap
|http://maps.stamen.com/watercolor/
|-
<!--|NASA
|<Need link>
|- -->
|Toner OpenStreetMap
|http://maps.stamen.com/toner/
|}


The following options are available to the end-user in the AppBoard Viewer for the Tile Map Widget.
== Additional Information ==


* Toggle Toolbar - Shows or hides the toolbar containing the map viewing options
* [[appboard/2.4/builder/widgets/tile_map/registering_tilesets|Registering Additional Tilesets]]: for making existing tilesets served remotely available within AppBoard.
* Fit To Data - When clicked, AppBoard will automatically zoom to the "best fit" zoom level based on the location of the data points
* [[appboard/2.4/builder/widgets/tile_map/offline_data|Importing Tilesets]]: for serving up tilesets locally with AppBoard.
* Adjust Zoom Level - Increases or decreases the zoom level of the map
* [[appboard/2.4/builder/widgets/tile_map/tileset_from_images|Creating Custom Tiles from Images]]
* Pan View - Adjusts the field of view of the map horizontally or vertically

Latest revision as of 20:54, 7 January 2014

The Tile Map Widget displays tile-based maps from a server that conforms to the Open Street Maps architecture.

Tile based mapping allows users to zoom through different levels of detail and pan quickly without having to load excessive amounts of data. Each zoom level is served by a different set of tiles of fixed size and the tiles are loaded on demand for performance reasons. Google Maps is a well known tile-based map tool and AppBoard supports the use of Google Maps through the Google Map widget.

The advantages to AppBoard users with the OpenStreetMap based Tile Map widget is:

  • Native Adobe Flex based widget which better fits into the AppBoard framework providing flexible marker configuration, full access to widget actions, and better performance.
  • Ability to pick, or create your own, set of base layer tilesets and overlay tilesets.
  • Ability to serve up tilesets from AppBoard itself, avoiding the need for clients or the server having external Internet access.
  • Avoid commercial licensing requirements of using Google Maps.

AppBoard also includes a Vector Map widget that uses internal maps so external Internet access is not required. This widget continues to be available but in many cases it is recommended to switch or use the Tile Map instead thanks to greater marker flexibility and map detail.

As with all other AppBoard geographic mapping widgets the data collection driving the widget must include latitude and longitude co-ordinates in order to plot markers on the map.

Tile Map widget using MapQuest tiles with atmospheric pressure overlay from OpenWeatherMap and icon markers with status indicators. The toolbar is also shown (hidden by default).


Creating Tile Map Widgets

For instructions on creating a Widget, see the general instructions in Adding Widgets. The Tile Map type is located under the Maps category on the Widget Type selection screen.


Tile Map Widget Configuration

  1. Follow the instructions above to create the basic Tile Map Widget.
  2. Enter the following information on the Data tab:
    • Data Collection - Select the name of the Data Collection that will provide the data to be displayed in the Tile Map.
      • For convenience, buttons are provided for Adding or Editing a Data Collection.
      • If you are using the AppBoard Sample Chart Data, select the sample.Data.Airport Data Collection.
      • The selected Data Collection must contain two separate fields with geographical coordinates representing the Latitude and Longitude of each node to be drawn on the map.
    • Widget Name - Enter the name to display for the Widget in the Widget Title Bar.
    • [Optional] Configure an Alternate Widget to be displayed on mobile devices, since this Widget is only supported for display in the desktop AppBoard Viewer.
  3. Enter the following information on the Visualization tab:
    • Map Tiles - Select the tile style or server that you wish to use from the list of available tilesets. Refer to the Additional Information section for more information on managing this list.
    • Latitude Field - Select the column of data that provides latitude coordinates.
    • Longitude Field - Select the column of data that provides longitude coordinates.
    • Marker Type - Toggle this switch to choose the type of image to draw for each node on the map:
      • Status Shape - Display a colored shape for each node on the map
      • Icon - Display an icon with a status shape in the top left corner for each node on the map.
    • Auto Zoom - Toggle the automatic zoom controls:
      • Off - The full map is displayed when the Widget is invoked on the Board.
      • Fit To Data - AppBoard will automatically zoom to the "best fit" zoom level when the Widget is invoked on the Board.
    • Default Shape - The default shape to use when the "Status Shape" Marker Type is selected (see above).
    • Default Color - The default color to apply to the shape when the "Status Shape" Marker Type is selected (see above).
    • Default Shape Size - The default size to use for the shape when the "Status Shape" Marker Type is selected (see above).
    • [Optional] Colored Shape Filter - Select the name of the filter you would like to use or click "Add" to create a new filter. A Color Filter allows you to set rules for displaying different colors for the markers on the map where certain conditions are met in the corresponding data. For more information, see Colored Shape Filter
    • [Optional] Default Icon - When the "Icon" Marker Type is selected (see above), this item selects the icon to display for each node.
    • [Optional] Icon Size - When the "Icon" Marker Type is selected (see above), this item determines the size of each icon.
    • [Optional] Icon Badge Filter - When the "Icon" Marker Type is selected (see above), this allows for different icons to be displayed conditionally based on the attributes of each individual node on the map. See Icon Filter for more information on configuring an Icon Filter.
    • Preview - This section provides a small preview of the Tile Map.
  4. Enter the following information on the Overlays tab:
    • [Optional] Add a tile overlay from the registered Overlays by pressing the "Add" button. Choose the overlay tile type, alpha value, and the refresh time for the overlay. (A value of 0 minutes turns off refresh). Refer to the Additional Information section for more information on managing this list.
  5. Provide additional configuration on the Options tab. For details on the available Options, see Options.
  6. Click Close.
  7. In the Builder Modes panel, select Builder and navigate to the appropriate Board to observe the new Tile Map Widget.
Template-note.png
Changes made to the preview map positioning or zooming during configuration will be saved as defaults for the widget.
Template-note.png
If the Tile Map widget encounters data in the latitude or longitude fields that can not be converted to numbers it will ignore the data and it will not plot it. Latitude values that exceed +/-84 will be plotted on the +/- 84 boundary.

The Toolbar

The Tile Map toolbar is available to users within the Builder or Viewer and changes made are only temporary for the session. On reloading the client the configured defaults will be used. The following controls are provided:

  • Toggle Toolbar: click the wrench icon to show or hide the toolbar.
  • Fit to Data: use the magnifying glass icon to force the widget to zoom and center on the current dataset. This is actually a toggle button and if left selected (or configured by the administrator by default) the map will always zoom to fit on any changes to the data collection.
  • Adjust Zoom Level - The - and + buttons and slider indicate the current zoom level and allow changes by clicking the symbols or dragging the slider.
  • Overlays - This button allows the user to disable or enable overlays. Only overlays configured by the administrator are visible in this list.
  • Pan View - The circle with four arrows icon can be used to pan the map horizontally or vertically.
Template-tip.png
Panning and zooming are more simply performed by using a mouse scroll-wheel for zooming, and click-to-drag for panning.
Template-note.png
When the zoom level on the map is such that tiles for different parts of the world are duplicated in the widget, data points will not be shown in the duplicated sections. Those sections will instead have a "letterbox" appearance with a layer of grey over the tiles.

Included Tile Sets

AppBoard includes configuration to access the following OpenStreetMap tile sets. Each provider of tile sets may have their own terms of use. Please visit the provider site for more details.

Tile Set Provider
OpenStreetMap http://www.openstreetmap.org/
MapQuest OpenStreetMap http://developer.mapquest.com/web/products/open/map
Watercolor OpenStreetMap http://maps.stamen.com/watercolor/
Toner OpenStreetMap http://maps.stamen.com/toner/

Additional Information

Retrieved from "http://ab.edge-technologies.com/docs/index.php?title=Appboard/2.4/builder/widgets/tile_map&oldid=3343"