Highlight selected feature in Zoom_to_feature_at_startup

[3liz]

Highlight selected feature in Zoom_to_feature_at_startup

[geomoes]

I'm trying since a while to get the script to highlight the target features.
Until now, I can only highlight the bounding box of the feature adressed by the URL, not the geometry of the feature itself!
It would be nice to get this working, since it would offer a way to call a Lizmap-Map with layer and feature id's and to zoom to and highlight the corresponding feature on Lizmap.

Here the adapted code (that needs modification and simplification) to draw the outline of the taget feature instead of the bounding box):

var lizZoomAtStratup = function() {

    var show_popup = true;

    function getHashParamFromUrl(hash_key) {
        var ret_val = null;
        var hash = location.hash.replace('#', '');
        var hash_items = hash.split(',');
        for (var i in hash_items) {
            var item = hash_items[i];
            var param = item.split(':');
            if (param.length == 2) {
                var key = param[0];
                var val = param[1];
                if (key == hash_key) {
                    return val;
                }
            }
        }
        return ret_val;
    }

    function getFeatureId() {
        var fid = getHashParamFromUrl('fid');
        if (!fid || fid.split('.').length != 2) {
            return null;
        }
        return fid;
    }

    function showFeaturePopup(featuretype, fid) {

        lizMap.getLayerFeature(featuretype, fid, function(feat){
        
        // tried to highlight the feature for better user exoerience 
        // set  Style and StyleMap to display features      
        var highlight = new OpenLayers.Style({
            'fillColor': "yellow", 
            'fillOpacity': 0.0,
            'strokeColor': "yellow",
            'strokeWidth': 2.5,
            'pointRadius': 8
        });
        
        var highlight_style_map = new OpenLayers.StyleMap({ 'default': highlight
        });

       //clone feat to f 
       var f = JSON.parse(JSON.stringify(feat));
       
       // original data is in EPSG:4326 but map is in EPSG:3857 (EPSG:900913) 
       var geojson_format = new OpenLayers.Format.GeoJSON({
                          internalProjection: new OpenLayers.Projection("EPSG:3857"),
                          externalProjection: new OpenLayers.Projection("EPSG:4326")
                  });
       var feature_layer = new OpenLayers.Layer.Vector();

       feature_layer.styleMap = highlight_style_map; 
       
       feature_layer.addFeatures(geojson_format.read(f));
       
       // results gives only the bounding box of the target feature
       lizMap.map.addLayer(feature_layer);

            lizMap.getFeaturePopupContent(featuretype, feat, function(data){
            
                // Add class to table
                var popupReg = new RegExp('lizmapPopupTable', 'g');
                var ptext = data.replace( popupReg, 'table table-condensed table-striped table-bordered lizmapPopupTable');

                // Get feature id
                var hfid = $(ptext).find('input').val();
                var fid = hfid.split('.').pop();

                // Remove h4 title (with layer title)
                var titleReg = new RegExp('<h4>.+</h4>');
                ptext = ptext.replace(titleReg, '');

                // Add popup menu tool if needed
                if( !$('#mapmenu .nav-list > li.popupcontent > a').length ){
                    var dock = 'dock';
                    lizMap.addDock('popupcontent', 'Popup', dock, '<div class="lizmapPopupContent"/>', 'icon-comment');
                }
                $('#popupcontent div.menu-content div.lizmapPopupContent').html(ptext);

                // Open popup div
                $('#mapmenu li.popupcontent:not(.active) a').click();

                // Add geometry
                lizMap.addGeometryFeatureInfo(null, null);

                // Trigger Lizmap event to add popup toolbar
                lizMap.events.triggerEvent(
                    "lizmappopupdisplayed",
                    {'popup': null}
                );

            });

        })
    }

    lizMap.events.on({

        'uicreated': function(e) {

            var fid = getFeatureId();
            if (fid){
                // Get layer id, name, config
                var layerId = fid.split('.')[0];
                var getLayer = lizMap.getLayerConfigById(layerId);
                var featuretype = getLayer[0];
                var typename = getLayer[1].typename

                // Get integer feature id
                var fid = fid.split('.')[1];
                
			// Need to set timeout, to avoid incorect zoom
			// 
            setTimeout(() => {
                lizMap.zoomToFeature(featuretype, fid, 'zoom');
            },1200); 

                // Show popup
                if (show_popup) {
                    showFeaturePopup(featuretype, fid);
                }
            }

        }
    });
}();

[nboisteault]

This script is now deprecated. See this comment to know how to get this behavior in Lizmap.