Road maps. Introduction. Structure

Transcription

1 Road maps Introduction This service let you embed interactive maps in your website (à la Google maps). You can customize map by displaying data in overlays You can create your own overlays. Structure To build original/interactive maps we need: A map source: OpenStreetMap A simple editor to generate XML: Umapper A lightweight and interactive client: OpenLayers

2 OpenStreetMap What is OpenStreetMap OpenStreetMap is an online community of people like you who are making a free map of the world. You are free to: Share to copy, distribute and transmit the work Remix to adapt the work

3 How to edit a map Map editing: add a road/street/frontier... performed change will became part of the OSM database Potlatch editor offer us the ability to directly edit and correct OSM maps changes will be visible after the next cache regeneration (once a week) 1. Type of the selected object, 2. Object ID in OSM database, 3. Split tool, 4. direction chooser, 5. Undo, 6. Show GPS traces, 7. Open options dialog,

4 8. Template chooser: a) class, b) types, 9. Relations (here 3) which the selected object is member of (a) and the member role if applicable (b), 10. Object properties (here 4): a) keys, b) values, 11. Delete property (w/o confirmation prompt!), 12. Copy properties of previously selected object, 13. Open relation editor, 14. Add a property Report bugs: OpenStreeBugs User can report and explain bugs directly on maps. This support is free and based on the community contributions so the delay and quality of correction may vary

5 Umapper What is UMapper? UMapper is an universal web-based map authoring application. You can create content for your maps with a XML file called KML. To edit KML files you can use a simple XML editor or UMapper What can I do with it? Create interactive flash maps and geogames Display maps on your website or social network Export data to Flash ActionScript 3.0 or KML (XML) Explore and interact with our community Fulfill all map and game-making dreams

6 How to create an account At click on the "Sign Up" buton to create an account. an account has been created for the european commision commission:$password How to create a map At click on the "Create Map" buton to create a new map. In the creation form, you have to enter the map title and description (see the screenshot bellow).

7

8 How to edit a map The map editor consists of several key elements: The Map Map Controls The Tools Marker Panel Info Window Content Marker Appearance Marker Position Save and Export Buttons We describe here how to place markers in a map. Make sure that you are using OpenStreetMap source Step 1: search for a place or location to mark. Example: Belgium representation located at "Rue de la Loi 61-63, 1040 Bruxelles" Enter the address then click on the arrow button to start searching.

9 Step 2: place the marker Click on the marker button to place it in the map on the indicated address. Step 3: edit the description of the marker Click on the marker recently added, then click on the display the following pop-up window. button to

10 When Info Window Content is selected for a marker or group of markers from the marker panel, a pop up will appear that will allow you to edit the title and description of the marker that will display in an info window when this marker is clicked by a user. use CSS We do recommend to add all formatting such as font type or size via CSS only

11 How to customise the marker There is two way to do this, according to two use case: 1. You need one marker by feature 2. Yo need one marker by overlays (report to "How to include multiple kml files in the same map") 1. You need one marker by feature Click on the "Marker Appearance" button. From the "Custom" tab, you can add the absolute URL to the new marker

12 Step 4: Save When you are finished editing your map, there is a save button. The save button will save your data and then allow you to continue editing. Step 5: export an xml dataset for a map After editing a map, performed changes will be saved in a standalone xml file (kml or georss) to be displayed as an overlay layer on the top the map. Click on the View Map button. Then, to export the xml dataset click in the "GET KML" button.

13 How to manually add an icon to a marker: You can manually add an icon directly in the kml file. An icon is defined with the folowing xml tags: <Icon> <href> </Icon> This XML tags must copied between <Style>...</Style> tag. Each marker (<Placemark>) use a style (<Style>). An id attribute is used to identify a style (<Style id="styleid">). To associate a style with a marker, the <styleurl>#styleid</styleurl> tag is used. Here a complete example showing a style with an icon used by a marker. <Style id="randomcoloricon"*> <IconStyle> <color>ff00ff00</color> <colormode>random</colormode> <scale>1.1</scale> <Icon> <href> </Icon> </IconStyle> </Style> <Placemark> <name>iconstyle.kml</name> <styleurl>#randomcoloricon</styleurl> <Point> <coordinates> , ,0</coordinates> </Point> </Placemark> Here are more information about KML structure:

14 OpenLayers What is OpenLayers OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles and markers loaded from any source. OpenLayers is a pure JavaScript library for displaying map data in most modern web browsers, with no server-side dependencies. OpenLayers implements a (still-developing) JavaScript API for building rich web-based geographic applications, similar to the Google Maps and MSN Virtual Earth APIs, with one important difference - OpenLayers is Free Software, developed for and by the Open Source software community.