[OpenLayers-Dev] Markers and Vector Layer conflict

Alex G. unseen.wizard at gmail.com
Fri Feb 5 06:32:26 EST 2010


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> 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>> 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&
>> >>',
>>
>>                   {
>>                       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&
>> >>',
>>
>>
>>                       {
>>                           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>
>>
>>        http://openlayers.org/mailman/listinfo/dev
>>
>>
>>
>>    --    Alexandre Dubé
>>    Mapgears
>>    www.mapgears.com <http://www.mapgears.com>
>>
>>
>>
>
> --
> Alexandre Dubé
> Mapgears
> www.mapgears.com
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-dev/attachments/20100205/65acee9b/attachment.html


More information about the Dev mailing list