Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding custom markers dynamically to map using OpenLayers

Tags:

openlayers

I would like to let users add custom markers on a map with a description for each marker. Any tips, links to any tutorials would be really useful.

like image 271
Shreyas Avatar asked Jan 07 '11 09:01

Shreyas


2 Answers

You can register a function to 'click' event on your map. When the user click on it, the mark is added automatically.

Try something like this:

// 'map' is your map created using new OpenLayers.Map(options)

markers = new OpenLayers.Layer.Markers( "Markers" );
markers.id = "Markers";
map.addLayer(markers);

map.events.register("click", map, function(e) {
      //var position = this.events.getMousePosition(e);
      var position = map.getLonLatFromPixel(e.xy);
      var size = new OpenLayers.Size(21,25);
   var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
   var icon = new OpenLayers.Icon('images/mark.png', size, offset);   
   var markerslayer = map.getLayer('Markers');

   markerslayer.addMarker(new OpenLayers.Marker(position,icon));

   });

Pretty simple, but I think that you can understand it :)

like image 59
Fran Verona Avatar answered Nov 11 '22 10:11

Fran Verona


i tried @Fran 's solution but it didnt work for me. so i adapted this example from openlayers so that i could accomplish 2 things:

  1. save latitude and longitude of marker position
  2. place a marker by clicking on the openlayers map

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" debug="true">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <title>MousePosition Control</title>
        <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
        <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
        <script src="../OpenLayers.js"></script>
        <script type="text/javascript">
            var map;
            function init(){
                var map = new OpenLayers.Map('map');
                var proj4326 = new OpenLayers.Projection("EPSG:4326");
                var projmerc = new OpenLayers.Projection("EPSG:900913");
                var layerOSM = new OpenLayers.Layer.OSM("Street Map");
                map.addLayers([layerOSM]);
                if (!map.getCenter()) map.zoomToMaxExtent();
                map.events.register("mousemove", map, function(e) { 
                    var position = this.events.getMousePosition(e);
                    OpenLayers.Util.getElement("coords").innerHTML = 'MOUSE POSITION '+position;
                    var lonlat = map.getLonLatFromPixel( this.events.getMousePosition(e) );
                    OpenLayers.Util.getElement("lonlatTG").innerHTML = 'lonlat => '+lonlat;
                    var lonlatTransf = lonlat.transform(map.getProjectionObject(), proj4326);
                    OpenLayers.Util.getElement("lonlatTrans").innerHTML = 'lonlatTransf => '+lonlatTransf;
                    OpenLayers.Util.getElement("lonlatDouble").innerHTML = 'lonlat => '+lonlat;
                });
    
                map.events.register("click", map, function(e) {
                    var position = this.events.getMousePosition(e);
                    var icon = new OpenLayers.Icon('http://maps.google.com/mapfiles/ms/icons/red-pushpin.png');   
                    var lonlat = map.getLonLatFromPixel(position);
                    var lonlatTransf = lonlat.transform(map.getProjectionObject(), proj4326);
                    alert ('lonlatTrans=> lat='+lonlatTransf.lat+' lon='+lonlatTransf.lon+'\nlonlat=>'+lonlat+'\nposition=>'+position);
                    var lonlat = lonlatTransf.transform(proj4326, map.getProjectionObject());
                    var markerslayer = new OpenLayers.Layer.Markers( "Markers" );
                    markerslayer.addMarker(new OpenLayers.Marker(lonlat, icon));
                    map.addLayer(markerslayer);
                });
                map.addControl(new OpenLayers.Control.LayerSwitcher());
            }
        </script>
      </head>  
    
      <body onload="init()">
        <h1 id="title">MousePosition Control</h1>
        <div id="tags">coordinate</div>
        <p>Click on map and create marker</p>
        <div id="map" class="smallmap"></div>
        <div id="coords"></div>
        <div id="lonlatTG"></div>
        <div id="lonlatTrans"></div><br/>
        <p>
        see how, even though we did NOT transform [lonlat],
        <br/>it was nevertheless transformed
        </p>
        <div id="lonlatDouble"></div>
    
      </body>
    </html>
    

there is something that you need to be aware of regarding the TRANSFORM method for LonLat as used in this simple example: when you apply [ .transform(projection1, projection2) ] to any LonLat, ALL LonLat objects are transformed.

play around with the order of certain commands and you will see what i mean.

for draggable markers, this example has it all

like image 5
tony gil Avatar answered Nov 11 '22 10:11

tony gil