0

Update! The problem is in the GeoJSON but I can't seem to find it.

The code below should be fine. mondayData is from a .js file that is GeoJSON called at the beginning of the HTML file. I took all of this from a course at UPENN that uses a a gardensData variable from a GeoJSON file. I got everything to work in the UPENN example fine. When I swapped out the .js file with my own geoJSON data it draws and the summary label that comes up at the bottom when the feature is clicked but it throws the uncaught TypeError for selectStyle.

Trying to get a click event to display selection symbology but am getting a TypeError: : e.target.setStyle is not a function:

Here is my code:

    function init() {
      map = new L.Map('mapid');
      map.setView([37.39,-122.086],15);

         // Add the tiled layer       
        var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: "Data copyright OpenStreetMap contributors"});
        tiles.addTo(map);

        var mondayLayer;

        var selection;
        var selectedLayer;


      // Set up symbols for stops
        // Purple symbol for unselected stops
        function mondayStyle(feature) {
          return {
            fillColor:'#ff00ff',
            fillOpacity: 1,
            color: '#B04173',
          };
        }

        // Yellow symbol for unselected stops
        function selectedStyle(feature) {
          return {
            fillColor: "00FFFB",
            color: '#0000FF',
            fillOpacity: 1
          };
        }     

function garbageOnEachFeature(feature, layer){
          layer.on({
            click: function(e) {
                if (selection) {
                  resetStyles();
                }

                e.target.setStyle(selectedStyle());
                selection = e.target;
                selectedLayer = mondayLayer;

                // Insert some HTML with the feature name
                buildSummaryLabel(feature);

                L.DomEvent.stopPropagation(e); // stop click from being further propagated

         }
      });
     }   

I looked this up but can't see how to work it in my code as I'm still a novice in JS: https://stackoverflow.com/questions/30242952/cant-get-featurelayer-setstyle-to-remove-highlight-on-mouseout-mapbox-leaflet

Here is the the code up to the first feature in the GeoJSON that is working:

var gardensData = {"crs": {"type": "name", "properties": {"name": "urn:ogc:def:crs:OGC:1.3:CRS84"}}, "type": "FeatureCollection", "features": [{"geometry": {"type": "Polygon", "coordinates": [[[-75.1675095, 40.0350697], [-75.1672735, 40.0352966], [-75.166615, 40.0349362], [-75.1668577, 40.0346969], [-75.1675095, 40.0350697]]]}

and here is the begining of the geoJSON after swapping it with my data:

var gardensData = {"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" }}, "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "Account_ID": "16951006", "Address_ID": "1695", "Customer_N": "PILLING PROPERTIES", "Address": "365 SAN ANTONIO RD", "City": "MOUNTAIN VIEW", "Exist_Part": "1", "Exist_Rout": "02X", "Demand": 0.022, "Service_Ti": 0.0, "Z1SVC_": 228049.0, "Z1UNIT": 2.0, "Z1SIZE": 96.0, "Z1TIMS": 1.0 }, "geometry": { "type": "Point", "coordinates": [ -122.1109869770321, 37.405436602116083 ] } }

Added a console.log(e.target); just before calling it and it returned this in the dev console when I clicked on an Icon on the screen:

NewClass {options: {…}, _latlng: L.LatLng, _initHooksCalled: true, feature: {…}, defaultOptions: {…}, …}
defaultOptions
:
{}
dragging
:
NewClass {_marker: NewClass, _initHooksCalled: true}
feature
:
{type: "Feature", properties: {…}, geometry: {…}}
options
:
{icon: NewClass, interactive: true, draggable: false, keyboard: true, title: "", …}
_eventParents
:
{78: NewClass}
_events
:
{click: Array(1), remove: Array(2)}
_firingCount
:
1
_icon
:
img.leaflet-marker-icon.leaflet-zoom-animated.leaflet-interactive
_initHooksCalled
:
true
_latlng
:
L.LatLng {lat: 37.39644884957494, lng: -122.09330695101022}
_leaflet_id
:
747
_map
:
NewClass {options: {…}, _container: div#mapid.smallmap.leaflet-container.leaflet-touch.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag…, _leaflet_id: 2, _containerId: 3, _fadeAnimated: true, …}
_mapToAdd
:
NewClass {options: {…}, _container: div#mapid.smallmap.leaflet-container.leaflet-touch.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag…, _leaflet_id: 2, _containerId: 3, _fadeAnimated: true, …}
_shadow
:
img.leaflet-marker-shadow.leaflet-zoom-animated
_zIndex
:
323
_zoomAnimated
:
true
__proto__
:
NewClass
  • have you checked the type of e.target? – Chase Choi Dec 5 '17 at 9:33
  • I inserted an alert and e.target came back as an object – geoJshaun Dec 5 '17 at 16:20
  • print e.target on console.log and check that is leaflet's object. – Chase Choi Dec 6 '17 at 0:40
  • @Chase Choi aded console log for e.target. It appears to be a leaflet object. Edited my post to reflect what console log returned in the dev console. – geoJshaun Dec 6 '17 at 23:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.