mapserver/public/js/map/overlays/BorderOverlay.js

import AbstractGeoJsonOverlay from './AbstractGeoJsonOverlay.js';
import { HtmlSanitizer } from '../../lib/HtmlSanitizer.js';

export default AbstractGeoJsonOverlay.extend({
  initialize: function() {
    AbstractGeoJsonOverlay.prototype.initialize.call(this, "border");
  },

  getMaxDisplayedZoom: function(){
    return 1;
  },

  getMinDisplayedZoom: function(){
    return 9;
  },

  createGeoJson: function(objects){
    var geoJsonLayer = L.geoJSON([], {
      onEachFeature: function(feature, layer){
        if (feature.properties && feature.properties.popupContent) {
          layer.bindPopup(feature.properties.popupContent);
        }
      },
      style: function(feature) {
        if (feature.properties && feature.properties.color){
          return {
            color: feature.properties.color,
            fill: feature.properties.color,
            opacity: 0.3
          };
        }
      }
    });

    var borders = [];
    var borderColors = {}; // { name: color }

    objects.forEach(function(obj){
      if (!obj.attributes.name)
        return;

      var border = borders[obj.attributes.name];
      if (!border){
        border = [];
        borders[obj.attributes.name] = border;
        borderColors[obj.attributes.name] = "#ff7800";
      }

      if (obj.attributes.color){
        borderColors[obj.attributes.name] = obj.attributes.color;
      }

      border.push(obj);
    });

    //Order by index and display
    Object.keys(borders).forEach(function(bordername){
      borders[bordername].sort(function(a,b){
        return parseInt(a.attributes.index) - parseInt(b.attributes.index);
      });

      var coords = [];

      //Add stations
      borders[bordername].forEach(function(entry){
        coords.push([entry.x + 0.5, entry.z + 0.5]);
      });

      // closing border
      coords.push([
        borders[bordername][0].x + 0.5,
        borders[bordername][0].z + 0.5
      ]);

      var feature = {
        "type":"Feature",
        "geometry": {
          "type":"LineString",
          "coordinates":coords
        },
        "properties":{
            "name": bordername,
            "color": borderColors[bordername],
            "popupContent": "<b>Border (" + HtmlSanitizer.SanitizeHtml(bordername) + ")</b>"
        }
      };

      //line-points
      geoJsonLayer.addData(feature);
    });

    return geoJsonLayer;
  }

});