[GIS] Adding attributes contained in JSON data to OpenLayers popup

jqueryjsonopenlayers-2

I am working on a website using jQuery, Javascript, and OpenLayers. I am adding markers to an OpenLayers Vector layer using the following code:

var pointLayer = new OpenLayers.Layer.Vector("POI Markers", {projection: "EPSG:4326"});
$.getJSON('json/DATA.json', function(data) {
  $.each(data.transmitters, function() {
    var pointFeatures = [];
    var px = this.longitude;
    var py = this.latitude;
    // Create a lonlat instance and transform it to the map projection.
    var lonlat = new OpenLayers.LonLat(px, py);
    lonlat.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));

    var pointGeometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
    var pointFeature = new OpenLayers.Feature.Vector(pointGeometry, null, {
        pointRadius: 16,
        fillOpacity: 0.7,
        externalGraphic: 'marker.png',
    });

    pointFeatures.push(pointFeature);
    pointLayer.addFeatures(pointFeatures);
  });
});

I am using the following code to select markers and create popups:

 var selectControl = new OpenLayers.Control.SelectFeature(pointLayer, {
  hover: true,
  onSelect: function(feature) {
    var layer = feature.layer;
    feature.style.fillOpacity = 1;
    feature.style.pointRadius = 20;
    layer.drawFeature(feature);

        var content = "<div><strong>Feature:</strong> <br/>" + feature.id +  
            "<br/><br/><strong>Location:</strong> <br/>" + feature.geometry +"</div>";

        var popup = new OpenLayers.Popup.FramedCloud(
        feature.id + "_popup", 
        feature.geometry.getBounds().getCenterLonLat(),
        new OpenLayers.Size(250, 100),
        content,
        null, 
        false, 
        null);
        feature.popup = popup;
        map.addPopup(popup);
    },
    onUnselect: function(feature) {
        var layer = feature.layer;
        feature.style.fillOpacity = 0.7;
        feature.style.pointRadius = 16;
        feature.renderIntent = null;
        layer.drawFeature(feature);

        map.removePopup(feature.popup);
    }
});
map.addControl(selectControl);
selectControl.activate();

As you can see, the popup contains information regarding the feature id and geometry. What I would like to do is add information that is contained inside the DATA.json file referenced in the first code block to the corresponding popup.

I am using a large JSON file. The following is a sample:

"LOCATION_A": {
      "latitude": 10.2070,
      "longitude": 25.3215,
      "altitude": 1.2,
      "status": "CLOSED",
      "serverAddress": "192.168.0.1"
 }

I would like to add the latitude, longitude and status information to the corresponding popup so when the user selects a popup, they view this information.

In addition, it would be useful to change the "externalGraphic" file to reflect the status of each LOCATION. Continuing to use the above JSON file, if a POI were closed, the "externalGraphic" file should be one PNG file, while if the POI were open, it should be another.

I am using jQuery in this project.

Best Answer

You should try to use the builtin method of adding GeoJSON file. This gives a better and standard representation of features.

You can add it like this 

var pointlayer = new OpenLayers.Layer.Vector("POI Markers", {
    protocol: new OpenLayers.Protocol.HTTP({
        url: "json/DATA.json",
        format: new OpenLayers.Format.GeoJSON()
    }),
    strategies: [
        new OpenLayers.Strategy.Fixed()
    ]
});

This will give you point features with all the attributes (right now your method is getting only points)

then in Select Control, you can access the attribute value as feature.attributes['status']

Additionally you can also change the external Graphic using stylemap property of Layer.vector You should post it as a separate question.

Related Question