User:ShareMap

From Wikimedia Commons, the free media repository
Jump to: navigation, search

Contents

Overview [edit]

Sharemap org screenshot.png

ShareMap.org is community tool that allows creating map on Creative Commons (CC BY SA 3.0 )license in SVG format - this license is compatibile with with wikimedia projects

News [edit]

Opinions, bugs, improvements, feature requests [edit]

We are open for your ideas - please add them on this page

Map creation tutorial [edit]

Video map creation tutorial can be be found here

Create a map with OpenStreetMap data

As an example a road gritting map for the West Midlands, UK: http://sharemap.org/public/Grit%20Map The roads that are to be gritted in winter have an attribute that defines their priority (1 or 2)

This is set up as a public map, so you can simply go on and edit to see how it is put together.

The technical part is using the OpenStreetMap XAPI calls to get the priority 1 and priority 2 datasets - this is how I did it:

1. Create a new Container to import the OSM data into 2. click on the "import from OSM" button 3. You can draw a rectangle to set your bounding box, it is best to do a slow double click 4. You can choose common features to import, but the gritting priorities are a bit specialist so I used the custom XAPI area 5. I entered: http://open.mapquestapi.com/xapi/api/0.6/way[gritting=priority_1][bbox=-2.29209872095745,52.25813715698189,-1.3733670623948984,52.683940414232836]

as you can see you can actually define your bounding box here if you get frustrated with the draw a box function 6. Once it has found some features you can import the features (this puts the raw data into the new container) 7. I then renamed the container to Priority 1 8. I then clicked on one of the lines on the map to change the colour and apply that to all the lines in the Container 9. Saved the map

This was the repeated for priority 2 roads.

You can then embed the map in a webpage:

<head>
<script type="text/javascript" src="http://sharemap.org/js/sharemap.js"></script>
</head>

[...]

<body>
<div id="mapBox" style="width:300px; height:300px;">
</div>
<script language="JavaScript">
insertInteractiveMap('public/Grit%20Map','mapBox',300,300);
</script>
</body>

The main thing is understanding the tags you want to import and using the custom XAPI calls if you need to.

Saving map for wikipedia [edit]

Use "export map for wikipedia button".


Example maps created with ShareMap.org [edit]

Most recent list you will find at

Browser compatibility for ShareMap map creation app [edit]

  • Google Chrome 10, 11
  • Mozilla Firefox 3.5, 4.0
  • Internet Explorer 9
  • Opera 11
  • Apple Safari 4.0, 5.0