<commit_before>var style; //MapBox API
var token; //MapbBx API
var map; // Leaflet map
var url; // String
var drawnShapes; //FeatureGroup
var markers; //FeatureGroup
var MLFeatures; // Array

// Start! Initialize the map and all things awesome.
// For debugging, check MarkLogic's 8040_ErrorLog.txt
// and your browser's inspection tool
start();

// Run this function before any other
function start() {
  style = keys.mapboxStyle;
  token = keys.mapboxToken;

  // Leaflet's map initialization method
  // 'mapid' is the div's name where the map will be found on the web page.
  map = L.map('mapid').setView([0, 0], 2);
  url = 'https://api.mapbox.com/styles/v1/liangdanica/' + style + '/tiles/256/{z}/{x}/{y}?access_token=' + token;

  L.tileLayer(url,
  {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
      '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'Basic',
    accessToken: token
  }).addTo(map);

  // Initialize the FeatureGroup to store editable layers (shapes drawn by user)
  // ref: http://leafletjs.com/2013/02/20/guest-post-draw.html
  drawnShapes = new L.FeatureGroup();
  markers = new L.FeatureGroup();

  // Add the layers to the map so they are displayed
  map.addLayer(drawnShapes);
  map.addLayer(markers);

  // Load all MarkLogic feature and industry options for dropdown menus
  // and Draw all map markers
  doPost('/search.sjs', "", drawPage, drawnShapes, true);

  // mouse-click event for 'clear map' button
  $("#clearButton").click(removeAllFeatures);

  loadMLInfo();
}

// Draw markers on map
function drawPage(response) {
  displayGeoJSON(response);
}

function loadMLInfo() {
  // post call to find the ML features
  var payload = {
    getMLFeatures: true
  };

  $.ajax({
    type: "POST",
    url: "search.sjs",
    data: JSON.stringify(payload),
    contentType: "application/json",
    dataType: "json",
    success: function (response) {
      MLFeatures = response.features.MarkLogic;
    },
    error: fail
  });

}

// Find all items clicked (selected) in the Industry and Feature menu lists.
// TODO make this work. First need to grab the html element, right?
function getClickedItems() {
  var items = document.getElementsByClassName("list-group-item");
  var selected = {};
  //selected.features = ...
  //selected.industries = ...

  return selected;
}

/**Copied from <NAME> and <NAME>'s geoapp and modified**/
function doPost(url, str, success, drawnLayer, firstLoad) {
  var payload = {
    searchString: str,
    //mapWindow is used for search if there are no drawn shapes on map
    mapWindow: [
      map.getBounds().getSouth(),
      map.getBounds().getWest(),
      map.getBounds().getNorth(),
      map.getBounds().getEast()
    ],
    industries: firstLoad,
    features: firstLoad,
    searchRegions: drawnShapes.toGeoJSON()
  };


  $.ajax({
    type: "POST",
    url: url,
    data: JSON.stringify(payload),
    contentType: "application/json",
    dataType: "json",
    success: success,
    error: fail
  });
}

function fail(jqXHR, status, errorThrown) {
  console.log(errorThrown);
}

// Draw geojson data on map, data will originate from Marketo
function displayGeoJSON(geojsonFeatures) {
  var geojsonLayer = L.geoJson(geojsonFeatures.results, {
    pointToLayer: function (feature, latlng) {
      var marker = new L.CircleMarker(latlng, {radius: 6, fillOpacity: 0.85});
      return marker;
    },
    onEachFeature: function (feature, layer) {
      layer.bindPopup(formatPopup(feature.properties));
    },
    style: function(feature) {
      return {color: getColor(feature)};
    }
  });
  geojsonLayer.on('click', function(e) {
    // Set map's currUser field so we can know who was clicked
    // Need to know who was clicked for the dialog box to load
    // their features and save back to DB if needed.
    map.currUser = e.layer.feature;
  });
  markers.addLayer(geojsonLayer);
}

function removeAllFeatures() {
  drawnShapes.clearLayers();
  markers.clearLayers();
}

// The brighter the red, the more ML features the EA user uses.
// 0 features is black circle marker
// 3+ creates a bright red circle marker<commit_msg>Removed variable that stored drawn map shapes in map.js<commit_after>var style; //MapBox API
var token; //MapbBx API
var map; // Leaflet map
var url; // String
var markers; //FeatureGroup
var MLFeatures; // Array

// Start! Initialize the map and all things awesome.
// For debugging, check MarkLogic's 8040_ErrorLog.txt
// and your browser's inspection tool
start();

// Run this function before any other
function start() {
  style = keys.mapboxStyle;
  token = keys.mapboxToken;

  // Leaflet's map initialization method
  // 'mapid' is the div's name where the map will be found on the web page.
  map = L.map('mapid').setView([0, 0], 2);
  url = 'https://api.mapbox.com/styles/v1/liangdanica/' + style + '/tiles/256/{z}/{x}/{y}?access_token=' + token;

  L.tileLayer(url,
  {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
      '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'Basic',
    accessToken: token
  }).addTo(map);

  // Initialize the FeatureGroup to store editable layers (shapes drawn by user)
  // ref: http://leafletjs.com/2013/02/20/guest-post-draw.html
  markers = new L.FeatureGroup();

  // Add the layers to the map so they are displayed
  map.addLayer(markers);

  // Load all MarkLogic feature and industry options for dropdown menus
  // and Draw all map markers
  doPost('/search.sjs', "", drawPage, true);

  // mouse-click event for 'clear map' button
  $("#clearButton").click(removeAllFeatures);

  loadMLInfo();
}

// Draw markers on map
function drawPage(response) {
  displayGeoJSON(response);
}

function loadMLInfo() {
  // post call to find the ML features
  var payload = {
    getMLFeatures: true
  };

  $.ajax({
    type: "POST",
    url: "search.sjs",
    data: JSON.stringify(payload),
    contentType: "application/json",
    dataType: "json",
    success: function (response) {
      MLFeatures = response.features.MarkLogic;
    },
    error: fail
  });

}

// Find all items clicked (selected) in the Industry and Feature menu lists.
// TODO make this work. First need to grab the html element, right?
function getClickedItems() {
  var items = document.getElementsByClassName("list-group-item");
  var selected = {};
  //selected.features = ...
  //selected.industries = ...

  return selected;
}

/**Copied from <NAME> and <NAME>'s geoapp and modified**/
function doPost(url, str, success, firstLoad) {
  var payload = {
    searchString: str,
    //mapWindow is used for search if there are no drawn shapes on map
    mapWindow: [
      map.getBounds().getSouth(),
      map.getBounds().getWest(),
      map.getBounds().getNorth(),
      map.getBounds().getEast()
    ],
    industries: firstLoad,
    features: firstLoad,
  };


  $.ajax({
    type: "POST",
    url: url,
    data: JSON.stringify(payload),
    contentType: "application/json",
    dataType: "json",
    success: success,
    error: fail
  });
}

function fail(jqXHR, status, errorThrown) {
  console.log(errorThrown);
}

// Draw geojson data on map, data will originate from Marketo
function displayGeoJSON(geojsonFeatures) {
  var geojsonLayer = L.geoJson(geojsonFeatures.results, {
    pointToLayer: function (feature, latlng) {
      var marker = new L.CircleMarker(latlng, {radius: 6, fillOpacity: 0.85});
      return marker;
    },
    onEachFeature: function (feature, layer) {
      layer.bindPopup(formatPopup(feature.properties));
    },
    style: function(feature) {
      return {color: getColor(feature)};
    }
  });
  geojsonLayer.on('click', function(e) {
    // Set map's currUser field so we can know who was clicked
    // Need to know who was clicked for the dialog box to load
    // their features and save back to DB if needed.
    map.currUser = e.layer.feature;
  });
  markers.addLayer(geojsonLayer);
}

function removeAllFeatures() {
  markers.clearLayers();
}

// The brighter the red, the more ML features the EA user uses.
// 0 features is black circle marker
// 3+ creates a bright red circle marker
{'fraction_non_alphanumeric': 0.13362789586816337, 'fraction_numerical': 0.006926200143300693, 'mean_word_length': 3.2970754232939967, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5855373', 'n_tokens_mistral': 2718, 'n_tokens_neox': 2613, 'n_words': 799}