CODEWITHSUNDEEP
gisopenlayersopenstreetmap
codingjoe
codingjoe

Reputation: 810

OSM (Open Street Map) help for a newbie

I have a couple of issues:

I am trying to add my own marker to a map, but it does not seem to work. Also when I try to refer the OpenLayer.js file locally the default red marker disappears.

I have found some examples on the net, but they have been unsuccessful I am afraid. So I thought to ask for some help here.

Now my code looks like this:

    <div id="Map" style="height: 250px; width: 400px" ></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<%--<script src="js/osm/api/OpenLayers.js"></script>--%>
<script>
    var lat = 55.676098;
    var lon = 12.568337;
    var zoom = 11;

    var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
    var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
    var position = new OpenLayers.LonLat(lon, lat).transform(fromProjection, toProjection);

    map = new OpenLayers.Map("Map");
    var mapnik = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);

    var markers = new OpenLayers.Layer.Markers("Markers");//("Images/Icons/map-marker.png");
    map.addLayer(markers);
    markers.addMarker(new OpenLayers.Marker(position));

    map.setCenter(position, zoom);
</script>

and as you can see I have tried to refer to my own marker from 'Images/Icons/map-marker.png' without any luck.

Also you can see that I have tried to use a local copy of the 'OpenLayers.js', I don't know whether I should have it locally or always refer to 'www.openlayers.org', I believe referring local is good enough?

Also as I wrote earlier, if I refer the local .js file, the red marker, the zoom buttons and the OSM link disappears.

Can anyone help me out?

Upvotes: 0

Views: 817

Answers (2)

scai
scai

Reputation: 21469

(You are actually asking a question about OpenLayers, not OpenStreetMap)

The OpenLayers Marker documentation provides an example for a custom marker icon. You have to create a OpenLayers.Icon object:

var size = new OpenLayers.Size(32,32);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon("Images/Icons/map-marker.png", size, offset);
markers.addMarker(new OpenLayers.Marker(position, icon));

Where did you get your local OpenLayers.js copy from? It might be outdated if it doesn't work compared to the one version. And that's usually the reason why you want to keep a local copy of your libraries, because they won't change to a newer version automatically.

You should also make sure that the example you got from the web is up to date. Ideally you use one of the official OpenLayers examples.

Instead of OpenLayers you can also give the more modern and easier to use LeafLet library a try.

Upvotes: 1

codingjoe
codingjoe

Reputation: 810

I found this at http://wiki.openstreetmap.org/wiki/Marker_API:

marker = new khtml.maplib.overlay.Marker({
    position: new khtml.maplib.LatLng(0, 0),
    icon: {
            url: "http://maps.gstatic.com/intl/de_de/mapfiles/ms/micons/red-pushpin.png",
            size: {width: 26, height: 32},
            origin: {x: 0, y: 0},
            anchor: {
                    x: "-10px",
                    y: "-32px"
            }
    },
    shadow: {
            url: "http://maps.gstatic.com/intl/de_de/mapfiles/ms/micons/pushpin_shadow.png",
            size: {
                    width: "40px",
                    height: "32px"
            },
            origin: {x: 0, y: 0},
            anchor: {x: 0, y: -32 }
    },
    draggable: true,
    title: "moveable marker"

});

Upvotes: 0

Related Questions