davestacey
2/17/2015 - 8:53 PM

Create a featureGroup of all the selected states, apply to the map and capture clicks on this group to reset zoom.

Create a featureGroup of all the selected states, apply to the map and capture clicks on this group to reset zoom.

buildStateLayer.js
content_copyfile_download
/////////////////////////////
      // Process the state layer
      nsmap.buildStateLayer = function (map, stateData) {
        //console.log('buildStateLayer stateData', stateData);
        var geojsonStates = L.geoJson(stateData, {
          style: function (feature) {
           return nsmap.styleMap(feature);
          },
          onEachFeature: function (feature, layer) {
            //layer.on({
              //mouseover: highlightFeature,
              //mouseout: resetHighlight,
              //click: zoomToFeature,
              //pointToLayer: pointToLayer
            //});
          },
        });//end geojsonStates

        // put all state layers into a group
        var stateOverlay = L.featureGroup([geojsonStates])
          //.bindPopup('Hello world!')
          .on('click', onOverlayClick);
        stateOverlay.addTo(map);

        function onOverlayClick(){
          //console.log('onOverlayClick', this);
          if (nsmap.zoomed === true){
            //console.log('Zooming out');
            map.setView(new L.LatLng(nsmap.initialPosition.groupCenter.lat, nsmap.initialPosition.groupCenter.lng), nsmap.initialPosition.groupZoom);
            nsmap.zoomed = false;
          }
        };
        //var id_stateOverlay = map.getLayerId(stateOverlay);
        //geojsonStates.addTo(map);

        // Option to set maxZoom with
        var zoomOverride = map.getZoom();

        nsmap.bounds = geojsonStates.getBounds()
        map.fitBounds(nsmap.bounds, { maxZoom: 4 });


        nsmap.addLegend(map);
        //addRolloverControl();
      }//END buildStateLayer()
        
      // Color the states
      nsmap.styleMap = function(feature) {
        // Map Colors
        this.colors = {
          grey : "rgba(84,96,101,0.3)", //#546065",

          // colorblind colors
          blue:         "rgba(21, 21, 119, 0.3)", //#151577
          orange:       "rgba(255, 109, 2, 0.3)", //#ff6d02
          green:        "rgba(50, 82, 16, 0.3)", //#325210
          yellowgreen:  "rgba(216, 205, 24, 0.3)", //#d8cd18
          darkorange:   "rgba(144, 16, 243, 0.3)", //#9010f3
          
        };
        var colorVar = '#7AAD42';

          // Old non-colorblind colors - for reference
          // blue : "rgba(108,157,179,0.3)", //"#6c9db3",
          // orange : "rgba(247,148,30,0.3)", //"#f7941e",
          // green : "rgba(122,173,66,0.3)", //#7aad42",
          // yellowgreen : "rgba(234,234,100,0.3)",//"#d1d179",
          // darkorange : "rgba(188,47,80,0.3)", //#bc2f50", // too close to other orange, added red
          // //darkorange : "rgba(182, 109, 16, 0.3)", //#bc2f50",

        if (feature.properties.parent){
          //console.log('feature has a parent= ', feature.properties.parent);
          switch (feature.properties.parent) {
            // Midwest
            case "East North Central":
                var colorVar =  this.colors.orange;
                break; 
            case 'West North Central':
                var colorVar =  this.colors.orange;
                break; 
            // Northeast
            case "New England":
                var colorVar =  this.colors.darkorange;
                break; 
            case 'Mid-Atlantic':
                var colorVar =  this.colors.darkorange;
              break; 
            // South
            case "East South Central":
                var colorVar =  this.colors.green;
                break; 
            case 'South Atlantic':
                var colorVar =  this.colors.green;
              break; 
            case 'West South Central':
                var colorVar =  this.colors.green;
              break; 
            // West
            case "Mountain":
                var colorVar =  this.colors.blue;
                break; 
            case 'Pacific':
                var colorVar =  this.colors.blue;
              break; 
            // Canada
            case "Canada":
                var colorVar =  this.colors.yellowgreen;
                break; 
            // 
              default: 
                  var colorVar =  this.colors.grey;
          }
        }//if (feature.properties.parent

        return {
            fillColor: colorVar,
            weight: 1,
            opacity: 1.0,
            color: "#a0a0a0",
            dashArray: '3',
            fillOpacity: 0.6,
            className: "statePolygon",
        };
      } //end styleMap