0

I need to highlight on click of objects in a layer and popups with attributions provided by a WFS.

I got the whole layer highlight on mouseover/mouseout, but I need this on click and only one object to highlight, not whole layer. Like this:figure showing highlight of feature

Here is my code:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
  <title></title>
  <style>
    html, body, #map {
      margin: 0;
      height: 100%;
      width: 100%;
    }    
  </style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="../dist/leaflet-wfst.src.js"></script>

<script type="text/javascript">
  var map = L.map('map').setView([50, 50], 3);
  
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map); 

  var defaultStyle = {
            color: "#2262CC",
            weight: 2,
            opacity: 0.6,
            fillOpacity: 0.1,
            fillColor: "#2262CC",
            fillColor: 'transparent'
        };
  var highlightStyle = {
            color: 'red', 
            weight: 5,
            opacity: 0.6,
            fillOpacity: 0.65,
            fillColor: 'red',
            fillColor: 'transparent'
        };

  var polygons = new L.WFS({
    version: '1.1.0',
    url: 'http://localhost/cgi-bin/mapserv.exe?map=E:/data/test/test.map',
    request: 'GetFeature',
    showExisting:   true,
    typeNS: 'ms',
    typeName: 'Regions',
    crs: L.CRS.EPSG3857,
    geometryField: 'msGeometry',
    style: defaultStyle
    });

  map.addLayer(polygons);
      
  var popup = L.popup();

  polygons.on('click', function (event) {
    popup
      .setLatLng(event.latlng)
      .setContent(event.layer.getProperty('NAME') + '<br/>' + event.layer.getProperty('ADM3_NAME'))
      .openOn(map);
  });

  polygons.on('mouseover', function (e) {
      var layer = e.target;
      layer.setStyle(highlightStyle);
  });

  polygons.on('mouseout', function (e) { 
      var layer = e.target;
      layer.setStyle(defaultStyle);
  });

</script>
</body>
</html>

test.map

MAP
NAME        "WFS"
STATUS      ON  
FONTSET         "E:/data/fonts/fonts.list"
EXTENT          -180 -90 180 90
SIZE            1600 700
IMAGECOLOR      255 255 255
SHAPEPATH       "E:/data/test/shp/" 
WEB
 IMAGEPATH    "E:/tiles/ms_tmp/"
 IMAGEURL     "/ms_tmp/"
  METADATA
    "wfs_title"                     "Regions"
    "wfs_abstract"                  "Regions"
    "wfs_onlineresource"            "http://localhost/cgi-bin/mapserv.exe?map=E:/data/test/test.map&"
    "wfs_srs"                       "EPSG:4326 EPSG:3857"
    "wfs_enable_request"            "*"
  END
END

PROJECTION
  "init=epsg:3857"
END 

LAYER
  NAME "Regions"
  DATA "Regions.shp"
  STATUS ON
  TYPE POLYGON    
  CLASS
    NAME "Regions"
        STYLE
            COLOR 255 128 128
            OUTLINECOLOR 255 0 0
        END
  END          
  METADATA
    "wfs_title"                 "Regions"
    "wfs_abstract"              "Regions"
    "wfs_onlineresource"            "http://localhost/cgi-bin/mapserv.exe?map=E:/data/test/test.map&"        
    "wfs_enable_request"            "*"
    "gml_include_items"             "all"
    "gml_featureid"                 "fid"
  END
    PROJECTION
        "init=epsg:4326"
    END       
END
END

I'm using the plugin https://github.com/Flexberry/Leaflet-WFST I tried to apply example from Leaflet tutorial https://leafletjs.com/examples/choropleth/, but I don't know how to apply it in my code. It's really hard for me now.

DescribeFeatureType

<schema xmlns:ms="http://mapserver.gis.umn.edu/mapserver" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://www.w3.org/2001/XMLSchema" xmlns:gml="http://www.opengis.net/gml" targetNamespace="http://mapserver.gis.umn.edu/mapserver" elementFormDefault="qualified" version="0.1">
<import namespace="http://www.opengis.net/gml" schemaLocation="http://schemas.opengis.net/gml/3.1.1/base/gml.xsd"/>
<element name="Regions" type="ms:RegionsType" substitutionGroup="gml:_Feature"/>
<complexType name="RegionsType">
<complexContent>
<extension base="gml:AbstractFeatureType">
<sequence>
<element name="msGeometry" type="gml:GeometryPropertyType" minOccurs="0" maxOccurs="1"/>
<element name="NAME" minOccurs="0" type="string"/>
<element name="ADM3_NAME" minOccurs="0" type="string"/>
<element name="fid" minOccurs="0" type="string"/>
</sequence>
</extension>
</complexContent>
</complexType>
</schema>
4
  • Would it be possible to get your test.map OGC package?
    – TomazicM
    Nov 7, 2020 at 11:53
  • You mean content of test.map? added.
    – ullu
    Nov 10, 2020 at 13:06
  • or possibly the output from a DescribeFeatureType request like: http://localhost/cgi-bin/mapserv.exe?map=E:/data/test/test.map&version=1.1.0&service=WFS&request=DescribeFeatureType&typename=ms:Regions&
    – nmtoken
    Nov 10, 2020 at 13:15
  • DescribeFeatureType added.
    – ullu
    Nov 10, 2020 at 14:22

1 Answer 1

0

If I understood your problem, you should resetStyle when you write the function for mouseout. I hope it work!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.