[OpenLayers-Dev] Markers and Vector Layer conflict

Alexandre Dube adube at mapgears.com
Fri Feb 5 08:34:31 EST 2010


Alex,

  Instead of defining the externalGraphic property directly in your 
StyleMap (that affects all your features on your layer), you could 
register a "featureadded" event to your DrawFeature control for points 
and set the externalGraphic property there.  You would need to redraw 
your feature to affect the new style.  This might look like (untested) :

   var oDrawPoint = new OpenLayers.Control.DrawFeature(vectors, 
OpenLayers.Handler.Point);
   oDrawPoint.events.on({"featureadded": onPointFeatureAdded, scope: 
oDrawPoint});

   var onPointFeatureAdded = function(event) {
        var feature = event.feature;
        var symbolizer = this.layer.styleMap.createSymbolizer(feature);
        feature.style = symbolizer;
        feature.style.externalGraphic = "images/markers/marker-gold.png";
        feature.style.pointRadius = 10;
        this.layer.drawFeature(feature);
    };

    The remaining thing to do is to think about how to have different 
markers for your features.

Hope this helps,

Alexandre



Alex G. wrote:
> Alexandre,
>
> thanks again for your valuable help!
>
> At the moment the best idea would be to have vector points as markers, 
> which would make them both clickable and perfect for what I need to do.
>
> I have added this info to the vector layer:
>
>             vectors = new OpenLayers.Layer.Vector('Vectors', {
>                 styleMap: new OpenLayers.StyleMap({
>                     externalGraphic: "images/markers/marker-gold.png",
>                     pointRadius: 10
>                 })
>             });
>
> And the point appears correctly with the marker icon. But I have run 
> into 2 problems now:
>
> 1) All my polygons and lines appear black or invisible
> 2) I would like to use more than one image for the markers
>
> My controls looks like this:
>
>             controls = {
>                 point: new OpenLayers.Control.DrawFeature(vectors,
>                             OpenLayers.Handler.Point),
>                 line: new OpenLayers.Control.DrawFeature(vectors,
>                             OpenLayers.Handler.Path),
>                 polygon: new OpenLayers.Control.DrawFeature(vectors,
>                             OpenLayers.Handler.Polygon),
>                 drag: new OpenLayers.Control.DragFeature(vectors),
>                 select: selectControl
>             };
>
> Is there a way to maybe pass the external image specifically to the 
> "point" control?
>
> I am unsure about the syntax and I wasn't able to find any info 
> around, maybe something like this:
>
> point: new OpenLayers.Control.DrawFeature(vectors,
>                             OpenLayers.Handler.Point, {style: blah blah}),
>
> If it's possible, then that solves my 2nd problem as well for 
> different images.
>
> Thanks in advance!
>
> Best regards,
>
> Alex
>
> On Thu, Feb 4, 2010 at 8:26 PM, Alexandre Dube <adube at mapgears.com 
> <mailto:adube at mapgears.com>> wrote:
>
>     Alex,
>
>      Take a look at this example [1].  Vector features can be used
>     with a SelectFeature control to open popups.  You only need to
>     define the externalGraphic to have images and define the geometry
>     type to "point".  See an other example of "draw" types.
>
>      You might be interested to take a look at this example [3] too
>     (it's a development sandbox for a RedLining widget in GeoExt).  It
>     uses a lot of OpenLayers components to draw/select the features.
>      Maybe that can helps too.
>
>     Kind regards,
>
>     Alexandre
>
>     [1] http://openlayers.org/dev/examples/select-feature-openpopup.html
>     [2] http://openlayers.org/dev/examples/draw-feature.html
>     [3]
>     http://dev.geoext.org/sandbox/redlining/ux/FeatureEditing/examples/ControlerOnlyExample.html
>
>
>     Alex G. wrote:
>
>         Alexandre,
>
>         thanks for your thoughts. Although if I understand what you're
>         saying and the example correctly, this will not make the
>         markers to pop up with bubbles where I can put text.
>
>         I am currently placing markers with text on them where if you
>         click on the marker a little bubble will appear.
>
>         Here's another snippet that I forgot to include:
>
>                var click = new OpenLayers.Control.Click();
>                map.addControl(click);
>                click.activate();
>                var new2 = new OpenLayers.Layer.Text( 'Texts', {
>         layerToUse: markers, newLat: '4188741.7304207', newLon:
>         '217101.58694106', newTitle: "Title1", newDesc: "Desc1",
>         idUser : '62', userName: 'admin', newIcon:
>         'images/markers/marker.png'} );
>                new2.parseData();
>                var new3 = new OpenLayers.Layer.Text( 'Texts', {
>         layerToUse: markers, newLat: '4182021.7304207', newLon:
>         '210801.58694106', newTitle: "Title2", newDesc: "Desc2",
>         idUser : '62', userName: 'admin', newIcon:
>         'images/markers/marker-blue.png'} );
>                new3.parseData();
>                var new4 = new OpenLayers.Layer.Text( 'Texts', {
>         layerToUse: markers, newLat: '4179441.7304207', newLon:
>         '219681.58694106', newTitle: "Title3", newDesc: "Desc3",
>         idUser : '62', userName: 'admin', newIcon:
>         'images/markers/marker.png'} );
>                new4.parseData();
>         I am not quite sure what that click function does, could it be
>         the culprit?
>
>         I have used this example as a base:
>         http://dev.openlayers.org/releases/OpenLayers-2.8/examples/markers.html
>         The thing is I use a form also to create new bubbles where
>         users can enter a title, marker icon and description and get a
>         result similar to the above.
>
>         Thanks again,
>
>         Alex
>
>         On Thu, Feb 4, 2010 at 3:34 PM, Alexandre Dube
>         <adube at mapgears.com <mailto:adube at mapgears.com>
>         <mailto:adube at mapgears.com <mailto:adube at mapgears.com>>> wrote:
>
>            Alex,
>
>             I just looked at the SelectFeature control code and I
>         think you
>            could try this solution :
>
>             Change you Marker layer for a Vector one (you can define
>            externalGraphic to a vector feature, see an example [1])
>         and then
>            configure your SelectFeature control with both your layers :
>
>             var select = new OpenLayers.Control.SelectFeature([vectors,
>            markers], options);
>
>             The SelectFeature control will create a RootContainer layer
>            object enabling selection on both at the same time, thus fixing
>            your issue.   Please, tell me if that worked.
>
>            Hope this helps,
>
>            Alexandre
>
>            [1] http://openlayers.org/dev/examples/styles-unique.html
>
>
>            Alex G. wrote:
>
>                Hi all,
>
>                I am probably having a conflict problem with some of my
>                layers. I currently have 3 layers active on my
>         installation:
>                - a layer containing the data from a shapefile (running
>         WMS)
>                - a vector layer where users can draw
>                - a layer dedicated to markers.
>
>                I have noticed that if I place a marker, I cannot interact
>                with it afterwards unless I hide the vectors layer. The
>         order
>                is correct, I load first the shp layer, then the vector one
>                and then the markers one.
>
>                I include here some of my code in hope that it will
>         help, it's
>                mostly from examples on openlayers so there's really
>         nothing new.
>
>                           map = new OpenLayers.Map('map',{maxExtent: new
>              
>          OpenLayers.Bounds(195441.084706006,4171163.51662705,240142.089176109,4203199.94421431),
>                maxResolution: 120, units: 'dd'});
>                           layer = new OpenLayers.Layer.WMS( 'Landmass ',
>              
>          'http://localhost:8585/cgi-bin/mapserv?map=/opt/fgs/apps/gmap-demo-cvs_MS_VERSION_54/htdocs/gmap75a.map&
>         <http://localhost:8585/cgi-bin/mapserv?map=/opt/fgs/apps/gmap-demo-cvs_MS_VERSION_54/htdocs/gmap75a.map&>
>              
>          <http://localhost:8585/cgi-bin/mapserv?map=/opt/fgs/apps/gmap-demo-cvs_MS_VERSION_54/htdocs/gmap75a.map&
>         <http://localhost:8585/cgi-bin/mapserv?map=/opt/fgs/apps/gmap-demo-cvs_MS_VERSION_54/htdocs/gmap75a.map&>>
>              
>          <http://localhost:8585/cgi-bin/mapserv?map=/opt/fgs/apps/gmap-demo-cvs_MS_VERSION_54/htdocs/gmap75a.map&
>         <http://localhost:8585/cgi-bin/mapserv?map=/opt/fgs/apps/gmap-demo-cvs_MS_VERSION_54/htdocs/gmap75a.map&>
>              
>          <http://localhost:8585/cgi-bin/mapserv?map=/opt/fgs/apps/gmap-demo-cvs_MS_VERSION_54/htdocs/gmap75a.map&
>         <http://localhost:8585/cgi-bin/mapserv?map=/opt/fgs/apps/gmap-demo-cvs_MS_VERSION_54/htdocs/gmap75a.map&>>>',
>
>                           {
>                               layers: 'zak',
>                               format:'PNG',
>                               bbox:
>              
>          '195441.084706006,4171163.51662705,240142.089176109,4203199.94421431',
>                               srs: 'EPSG:4326'
>                           });
>                           lakegr_wms = new OpenLayers.Layer.WMS( 'Lakes',
>                                    
>         'http://localhost:8585/cgi-bin/mapserv?map=/opt/fgs/apps/gmap-demo-cvs_MS_VERSION_54/htdocs/gmap75a.map&
>         <http://localhost:8585/cgi-bin/mapserv?map=/opt/fgs/apps/gmap-demo-cvs_MS_VERSION_54/htdocs/gmap75a.map&>
>              
>          <http://localhost:8585/cgi-bin/mapserv?map=/opt/fgs/apps/gmap-demo-cvs_MS_VERSION_54/htdocs/gmap75a.map&
>         <http://localhost:8585/cgi-bin/mapserv?map=/opt/fgs/apps/gmap-demo-cvs_MS_VERSION_54/htdocs/gmap75a.map&>>
>              
>          <http://localhost:8585/cgi-bin/mapserv?map=/opt/fgs/apps/gmap-demo-cvs_MS_VERSION_54/htdocs/gmap75a.map&
>         <http://localhost:8585/cgi-bin/mapserv?map=/opt/fgs/apps/gmap-demo-cvs_MS_VERSION_54/htdocs/gmap75a.map&>
>              
>          <http://localhost:8585/cgi-bin/mapserv?map=/opt/fgs/apps/gmap-demo-cvs_MS_VERSION_54/htdocs/gmap75a.map&
>         <http://localhost:8585/cgi-bin/mapserv?map=/opt/fgs/apps/gmap-demo-cvs_MS_VERSION_54/htdocs/gmap75a.map&>>>',
>
>
>                               {
>                                   layers: 'sedi',
>                                   transparent: 'true',
>                                   format: 'image/png'
>                               },
>                               {isBaseLayer: false}
>                           );
>                           vectors = new OpenLayers.Layer.Vector(
>         'Editable' );
>                           vectors.onFeatureInsert=function(feature) {
>                                            var
>         wkt=wktwriter.write(feature);
>                              console.log(wkt);
>                           }
>                           map.addLayer(layer);
>                           map.addLayers([lakegr_wms,vectors]);
>                           map.addControl(new
>         OpenLayers.Control.LayerSwitcher());
>                               controls = {
>                                   point: new
>                OpenLayers.Control.DrawFeature(vectors,
>                                               OpenLayers.Handler.Point),
>                                   line: new
>                OpenLayers.Control.DrawFeature(vectors,
>                                               OpenLayers.Handler.Path),
>                                   polygon: new
>                OpenLayers.Control.DrawFeature(vectors,
>                                               OpenLayers.Handler.Polygon),
>                                   drag: new
>                OpenLayers.Control.DragFeature(vectors)
>                               };
>
>                               for(var key in controls) {
>                                   map.addControl(controls[key]);
>                               }
>
>                                     map.zoomTo(1);
>                           var options = {
>                               hover: true,
>                               highlightOnly: true
>                           };
>                                         var select = new
>                OpenLayers.Control.SelectFeature(vectors, options);
>                           selectCtrl = new
>                OpenLayers.Control.SelectFeature(vectors,
>                               {
>                                   clickout: true,
>                                   onSelect: serialize
>                               }
>                           );
>                           map.addControl(select);
>                           map.addControl(selectCtrl);
>                           select.activate();
>                           selectCtrl.activate();
>                 *
>                 * Inherits from:
>
>                           var markers = new OpenLayers.Layer.Markers(
>                'Markers' );
>                           map.addLayer(markers);
>
>                Rest of the code is taken from the markers example on
>         OpenLayers.
>
>                Can anyone think of any reason why they would conflict?
>         I am
>                thinking it has something to do with clicks and some of the
>                controls I use might be conflicting although I can't
>         see any
>                Javascript errors.
>
>                Thanks in advance.
>
>              
>          ------------------------------------------------------------------------
>
>                _______________________________________________
>                Dev mailing list
>                Dev at openlayers.org <mailto:Dev at openlayers.org>
>         <mailto:Dev at openlayers.org <mailto:Dev at openlayers.org>>
>
>                http://openlayers.org/mailman/listinfo/dev
>                
>
>
>            --    Alexandre Dubé
>            Mapgears
>            www.mapgears.com <http://www.mapgears.com>
>         <http://www.mapgears.com>
>
>
>
>
>     -- 
>     Alexandre Dubé
>     Mapgears
>     www.mapgears.com <http://www.mapgears.com>
>
>


-- 
Alexandre Dubé
Mapgears
www.mapgears.com




More information about the Dev mailing list