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 = "Feature:
" + feature.id + "
Location:
" + feature.geometry +"
"; 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 and find it fascinating! Any assistance with this problem is greatly appreciated. Thank you all so much.
أكثر...
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 = "Feature:
" + feature.id + "
Location:
" + feature.geometry +"
"; 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 and find it fascinating! Any assistance with this problem is greatly appreciated. Thank you all so much.
أكثر...