[Talk-gb-westmidlands] ShareMap to show OSM data

Fri Dec 30 15:56:47 GMT 2011

Hi Stuart, nice work. Write-ups like this are worth putting on the wiki
somewhere so that they can easily be found by others at a later date.

Cheers

Andy

From: stuart lester [mailto:stulester at googlemail.com] 
Sent: 30 December 2011 11:18
To: talk-gb-westmidlands at openstreetmap.org
Subject: [Talk-gb-westmidlands] ShareMap to show OSM data

Hello,

Following on from Andy Mabbett's request about easily working with OSM data
I decided ot have a bit of a play around with some of the tools out there. I
concentrated on ShareMap to try and bridge the gap between technical use of
OSM data and non-technical access. The main case is where someone wants to
render some OSM data over a map and embed it in their own web page.

ShareMap is far from perfect (in fact I found it frustrating at times) and
you cannot get fully away from a bit of technical usage. Anyway I tried to
recreate the gritting map:

http://sharemap.org/public/Grit%20Map 

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

The technical part is using the 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 form OSM" button

3. This is really annoying but you can draw a rectangle to set your bounding
box, but the clicking is a bit flaky at times I found, you sort have 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.29
209872095745,52.25813715698189,-1.3733670623948984,52.683940414232836]
<http://open.mapquestapi.com/xapi/api/0.6/way%5bgritting=priority_1%5d%5bbbo
x=-2.29209872095745,52.25813715698189,-1.3733670623948984,52.683940414232836
%5d> 

as you can see you can actually define your bounding box here if you get
frustrated with the draw a box function (as I did)

6. Once it has (hopefully) found some features (again I found this a bit hit
and miss) 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 as a thumbnail, with a link, as a static image or
as a flash object (following the code inthe help page):

<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>

You can see it is not plain sailing, but someone could potentially start to
use it to create some simple maps for their own site.....I'm not sure. The
main thing is understanding the tags you want to import and using the custom
XAPI calls if you need to.

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/talk-gb-westmidlands/attachments/20111230/4cdee9f2/attachment.html>