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