newbie with OSM

garciasanchezdani · 2012-05-11T10:49:39.000Z

Hi! I’m newbie with OSM, and for my first example, I’d like to obtain the map of my city (Jaen, Spain), that allow me interact with all the gas stations.
This is the code I have


<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=-3.80198,37.75835,-3.77301,37.78193&layer=mapnik" style="border: 1px solid black">
</iframe><br /><small>
<a href="http://www.openstreetmap.org/?lat=37.77014&lon=-3.787495&zoom=14&layers=M&amenity=fuel">Ver mapa m&aacute;s grande</a>
</small>

Regards, Daniel

Vclaw · 2012-05-11T16:44:47.000Z

I’m not sure exactly what you want to do, but I’ll try to answer some of this:
That code will just give you a slippy map for your website. That map is made up of tiles, which are just bitmap images. So there’s not really any way to ‘interact’ with particular map objects.
If you want to interact with gas stations for example, you would have to get the actual OSM vector data for these.

There’s a few different ways to get this .osm data:
You could use XAPI to download everything with a particular tag within a bounding box. http://wiki.openstreetmap.org/wiki/Xapi
Or you could download a Planet.osm extract, then use Osmfilter to extract objects from that file. http://wiki.openstreetmap.org/wiki/Planet.osm http://wiki.openstreetmap.org/wiki/Osmfilter

Then once you have the data, it depends on what you want to do with it. If you want to have a slippy map on your webpage, with icons to click on etc, then you can use OpenLayers. eg something like this example: http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example

stephan75 · 2012-05-11T17:04:11.000Z

Or you can have a look at http://wiki.openstreetmap.org/wiki/OpenStreetBrowser

or http://www.flosm.de/en/index.html → POI map

Also: take some time and read the OSM wiki … there are several examples you might need.

garciasanchezdani · 2012-05-18T16:51:51.000Z

Hi, thanks very much for your replies. Could you look at this other thread?

http://forum.openstreetmap.org/viewtopic.php?pid=243042#p243042

What I really need is know about osm, its possibilities in an android device
Thanks again, Daniel

garciasanchezdani · 2012-07-05T14:27:55.000Z

Vclaw:

I’m not sure exactly what you want to do, but I’ll try to answer some of this:
That code will just give you a slippy map for your website. That map is made up of tiles, which are just bitmap images. So there’s not really any way to ‘interact’ with particular map objects.
If you want to interact with gas stations for example, you would have to get the actual OSM vector data for these.

There’s a few different ways to get this .osm data:
You could use XAPI to download everything with a particular tag within a bounding box. http://wiki.openstreetmap.org/wiki/Xapi
Or you could download a Planet.osm extract, then use Osmfilter to extract objects from that file. http://wiki.openstreetmap.org/wiki/Planet.osm http://wiki.openstreetmap.org/wiki/Osmfilter

Then once you have the data, it depends on what you want to do with it. If you want to have a slippy map on your webpage, with icons to click on etc, then you can use OpenLayers. eg something like this example: http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example

Very little by little, I’m understanding few about openstreetmap…It’s being hard, but I’m understanding a little…
If I have understood well, only with openlayers (slippy map), I can’t interact with pois (p.e: gas stations, bus stations…). So, for interact with pois previously uploaded (this is, pois that I don’t need to add at osm) , I need use Xapi for example, right?
Thanks very much for your answers, Daniel

EDIT: I continue learning about osm, and I have downloaded a .gpx from this link: http://poi-osm.tucristal.es/ I downloaded the radars poi for spain. I’m trying to see radars of spain in my map, but without luck.

This is my .html:

<html>
<head>
	<title>Simple OSM GPX Track</title>
	<!-- bring in the OpenLayers javascript library
		 (here we bring it from the remote site, but you could
		 easily serve up this javascript yourself) -->
	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
	<!-- bring in the OpenStreetMap OpenLayers layers.
		 Using this hosted file will make sure we are kept up
		 to date with any necessary changes -->
	<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
 
	<script type="text/javascript">
		// Start position for the map (hardcoded here for simplicity,
		// but maybe you want to get this from the URL params)
		var lat=47.496792
		var lon=7.571726
		var zoom=13
 
		var map; //complex object of type OpenLayers.Map
 
		function init() {			
		
			map = new OpenLayers.Map ("map", {
				controls:[
					new OpenLayers.Control.Navigation(),
					new OpenLayers.Control.PanZoomBar(),
					new OpenLayers.Control.LayerSwitcher(),
					new OpenLayers.Control.Attribution()],
				maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
				maxResolution: 156543.0399,
				numZoomLevels: 19,
				units: 'm',
				projection: new OpenLayers.Projection("EPSG:900913"),
				displayProjection: new OpenLayers.Projection("EPSG:4326")
			} );
 
			// Define the map layer
			// Here we use a predefined layer that will be kept up to date with URL changes
			layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
			map.addLayer(layerMapnik);
			layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
			map.addLayer(layerCycleMap);
			layerMarkers = new OpenLayers.Layer.Markers("Markers");
			map.addLayer(layerMarkers);
 
			// Add the Layer with the GPX Track
			var lgpx = new OpenLayers.Layer.Vector("Lakeside cycle ride", {
				strategies: [new OpenLayers.Strategy.Fixed()],
				protocol: new OpenLayers.Protocol.HTTP({
					url: "Radar.gpx",
					format: new OpenLayers.Format.GPX()
				}),
				style: {strokeColor: "green", strokeWidth: 15, strokeOpacity: 0.5},
				projection: new OpenLayers.Projection("EPSG:4326")
			});
			map.addLayer(lgpx); 
			 
			var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
			map.setCenter(lonLat, zoom);
 
			var size = new OpenLayers.Size(21, 25);
			var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
			var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
			layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
		}
	</script>
 
</head>
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">
	<!-- define a DIV into which the map will appear. Make it take up the whole window -->
	<div style="width:90%; height:90%" id="map"></div>
</body>
</html>

I’m using openlayers in order to see the map, and I see the map, but no the radars poi. As you see in the code, I’m calling Radar.gpx that is the file I downloaded with the radars for spain…what am I doing wrong?
I read the wiki of Xapi, but I understand…but I miss one sample in order to understand it well.
Best regards friends