[OpenLayers-Users] Popup over GPX track

Francesco webfrank at tiscali.it
Mon May 17 04:44:54 EDT 2010


I tried with this code:
var lgpx = new OpenLayers.Layer.Vector("Track", {
                 style: {strokeColor: 'red', strokeWidth: 10, 
strokeOpacity: 0.5},
                 projection: map.displayProjection,
                 strategies: [new OpenLayers.Strategy.Fixed()],
                 protocol: new OpenLayers.Protocol.HTTP({
                     url: 'gpx.php?imei='+imei+'&from='+from+'&to='+to,
                     format: new OpenLayers.Format.GPX({
                         extractAttributes: true,
                         extractStyles: false,
                         maxDepth: 4,
                         extractTracks: true,
                         extractRoutes: false,
                         extractWaypoints: false
                     })
                 })
             });

             map.addLayer(lgpx);

             lgpx.events.register('loadend',lgpx,function() {
                 var bounds = this.getDataExtent();
                 map.zoomToExtent(bounds);
             });

             var hoverSelect = new OpenLayers.Control.SelectFeature(lgpx, {
                 hover: true,
                 multiple: true,
                 geometryTypes: ["OpenLayers.Geometry.LineString"],
                 renderIntent: "temporary",
                 onSelect: function(f) {
                     var content = 'popup';
                     popup = new OpenLayers.Popup.FramedCloud("Info",
                         f.geometry.getBounds().getCenterLonLat(),
                         null,
                         content,
                         null, true, function() {
                             hoverSelect.unselectAll();
                         }
                     );
                     f.popup = popup;
                     map.addPopup(popup);
                 },
                 onUnselect: function(f) {
                         if (f.popup) {
                         map.removePopup(f.popup);
                         f.popup.destroy();
                         delete f.popup;
                     }
                 }
             });
             map.addControl(hoverSelect);
             hoverSelect.activate();

and the GPX file is like this:
<gpx xmlns="http://www.topografix.com/GPX/1/1" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.1" 
creator="Waze Mobile Ltd (1.4.0.1) - 
http://roadmap.digitalomaha.net/editor.html" 
xsi:schemaLocation="http://www.topografix.com/GPX/1/1 
http://www.topografix.com/GPX/1/1/gpx.xsd">
<trk xmlns="">
<trkseg>
<trkpt lat="37.0617024" lon="14.9067984">
<time>2010-05-16T10:46:10Z</time>
<name>0</name>
</trkpt>
                 .............

I would like to display inside the popup time and name attributes

Il 11/05/2010 19.11, emmexx ha scritto:
> Il 11/05/2010 18:43, Francesco scrisse:
>    
>> Hi,
>>       I'm trying to display a popup on mouse over GPX track. This is the
>> code used to load the track:
>>      
>    
>>                   onSelect: function(feature) {
>>
>> -------------->  Here I want to display a popup with info from the GPX file
>>
>>                   },
>>                   onUnselect: function(feature) {
>>      
> I use eventListeners instead of onSelect onUnselect.
>
> bye
> 	maxx
>
>
>    
>>>> Code for the popup:
>>>>          
> 	var highlightCtrl = new OpenLayers.Control.SelectFeature([vlayer,
> clayer], {
> 		hover: true,
> 		highlightOnly: true,
> 		multiple: true,
> 		geometryTypes: ["OpenLayers.Geometry.LineString"],
> 		renderIntent: "temporary",
> 		eventListeners:
> 		{
> 			featurehighlighted: function(f)
> 			{
> 				popup = new OpenLayers.Popup("mylayer",
> f.feature.geometry.getBounds().getCenterLonLat(),
> null,
> 'some html text',
> null,
> true);
>   				popup.autoSize=true;
> // 				popup.panMapIfOutOfView=true;
> 				f.feature.popup = popup;
> 				map.addPopup(popup);
> 			},
> 			featureunhighlighted: function(f)
> 			{
>              	map.removePopup(f.feature.popup);
>              	f.feature.popup.destroy();
>              	f.feature.popup = null;
>
> 			}
> 		}	
> 	});
>
> 	map.addControl(highlightCtrl);
>
> 	highlightCtrl.activate();
>
> (popup is a global variable)
>
>    
>>>>> Code to open a gpx file:
>>>>>            
> 		var tmplayerGps= new OpenLayers.Layer.GML('myfile', path,
> 		{
> 				format:  OpenLayers.Format.GPX,
> 				formatOptions: {
> 					extractAttributes: true,
> 					extractStyles: false,
> 					maxDepth: 2,
> 					extractTracks: true,
> 					extractRoutes: false,
> 					extractWaypoints: false
> 				},
> 				'styleMap': styleMap,
> 				projection: map.displayProjection
> 		});
>
>
>    
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20100517/37e87aac/attachment.html


More information about the Users mailing list