Search code examples
htmlclassopenlayerslayer

insert custom div tags into openlayers

I am currently developping a map, using Openlayers2. This map has to show several information

I already managed ton integrate images and canvas using

  • OpenLayers.Layer.Vector -> for basic images and vectors
  • OpenLayers.StyleMap and OpenLayers.Style -> for canvas and text

I need now to insert several boxes, integrating text.

The boxes have to adapt themself to the texts, each having different length.

I would like now to insert customized HTML tags, like a div, instead of a canvas (difficult to adapt and quite heavy to handle)

The information are integrated from a json:

Example of Json

{
   
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    589200.0,
                   2402900.0
               ]
           },
            "properties": {
                "activation": "true",
                "info": "one for example short text"
    
            }
      }, {
            "type": "Feature",
            "geometry": {
               "type": "Point",
               "coordinates": [
                   603700.0,
                 2408300.0
              ]
           },
          "properties": {
             "activation": "true",
              "info": My other very long text \n with lines \r different messages and so on\n and it has to fit in.."
    
          }
       }]
  }

It is a legacy map, and we are stucked with Openlayer 2, so the solution wouldn't be with the version 3.

I am desesperately searching on the net a solution that would suit, without success, but I am loosing a precious amount of time with it.

The information are loaded this way :

new OpenLayers.Layer.Vector("Vector", {
            layername: "myText",
            resolutions: [100, 50, 25, 10],
            styleMap: textStyleMap,
            isBaseLayer: false,
            visibility: false,
            strategies: [new OpenLayers.Strategy.Fixed({
                preload: true
            })],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "myText.json",
                format: new OpenLayers.Format.GeoJSON()
            })
        })

What kind of styleMap could I use? Has anybody a solution to the problem?

Thank you!

Solution

  • I finally skiped the problem using dragable popups instead.

    It is an update you can find here:

    http://aamirafridi.com/openlayers/openlayers-draggable-popups.