Merge pull request #20 from will16363/John_Branch

updated js to reflect specific crimes
will16363 · Dec 5, 2022 · b78a32c · b78a32c
2 parents 951a958 + 79eed13
commit b78a32c
Show file tree

Hide file tree

Showing 22 changed files with 1,246 additions and 11 deletions.
diff --git a/js/accident_w_impound.js b/js/accident_w_impound.js
@@ -0,0 +1,112 @@
+/*
+  ## Utility Functions
+    Under this comment place any utility functions you need - like an inclusive random number selector
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
+*/
+
+function injectHTML(list) {
+  console.log('fired injectHTML');
+  const target = document.querySelector('#crime_list');
+  target.innerHTML = '';
+  const listEl = document.createElement('ol');
+  target.appendChild(listEl);
+  list.forEach((item) => {
+    const el = document.createElement('li');
+    el.innerText = item.street_address;
+    listEl.appendChild(el);
+  });
+}
+
+function processCrime(list) {
+  const newArray = list.filter((item) => {
+    const clearanceCodeIncType = item.clearance_code_inc_type;
+    if (clearanceCodeIncType && clearanceCodeIncType === 'ACCIDENT WITH IMPOUND') {
+      console.log(item);
+      return item;
+    }
+    return null;
+  });
+  return newArray;
+}
+
+function initMap() {
+  console.log('initMap');
+  const map = L.map('map').setView([38.9897, -76.9378], 11);
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+  }).addTo(map);
+  return map;
+}
+
+function markerPlace(array, map) {
+  map.eachLayer((layer) => {
+		if (layer instanceof L.Marker) {
+		  layer.remove();
+		}});
+  array.forEach((item) => {
+    const latitude = item.latitude;
+    const longitude = item.longitude;
+    L.marker([latitude, longitude]).addTo(map);
+  });
+}
+
+async function getData() {
+  const url = 'https://data.princegeorgescountymd.gov/resource/wb4e-w4nf.json';
+  const data = await fetch(url);
+  const json = await data.json();
+  const reply = json.filter((item) => Boolean(item.location)).filter((item) => Boolean(item.clearance_code_inc_type));
+  return reply;
+}
+
+async function mainEvent() {
+  // the async keyword means we can make API requests
+  const form = document.querySelector('.main_form'); // get your main form so you can do JS with it
+  const submit = document.querySelector('#get-resto'); // get a reference to your submit button
+  const loadAnimation = document.querySelector('.lds-ellipsis');
+  submit.style.display = 'none'; // let your submit button disappear
+
+  // initChart(chartTarget);
+  const pageMap = initMap();
+  /* API data request */
+  const mapData = await getData();
+
+  console.table(mapData);
+
+  // in your browser console, try expanding this object to see what fields are available to work with
+  // for example: arrayFromJson.data[0].name, etc
+  console.log(mapData[0]);
+
+  // this is called "string interpolation" and is how we build large text blocks with variables
+  console.log(`${mapData[0].clearance_code_inc_type} ${mapData[0].street_address}`);
+
+  // This IF statement ensures we can't do anything if we don't have information yet
+  if (mapData.length > 0) { // the question mark in this means "if this is set at all"
+    submit.style.display = 'block'; // let's turn the submit button back on by setting it to display as a block when we have data available
+
+    loadAnimation.classList.remove('lds-ellipsis');
+    loadAnimation.classList.add('lds-ellipsis_hidden');
+
+    let currentList = [];
+    form.addEventListener('input', (event) => {
+      console.log(event.target.value);
+      const newFilterList = filterList(currentList, event.target.value);
+      injectHTML(newFilterList);
+      markerPlace(newFilterList, pageMap);
+    });
+
+    form.addEventListener('submit', (submitEvent) => {
+      // This is needed to stop our page from changing to a new URL even though it heard a GET request
+      submitEvent.preventDefault();
+
+      // This constant will have the value of your 15-restaurant collection when it processes
+      currentList = processCrime(mapData);
+
+      // And this function call will perform the "side effect" of injecting the HTML list for you
+      injectHTML(currentList);
+      markerPlace(currentList, pageMap);
+    });
+  }
+}
+
+document.addEventListener('DOMContentLoaded', async () => mainEvent()); // the async keyword means we can make API requests
diff --git a/js/assault.js b/js/assault.js
@@ -0,0 +1,112 @@
+/*
+  ## Utility Functions
+    Under this comment place any utility functions you need - like an inclusive random number selector
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
+*/
+
+function injectHTML(list) {
+  console.log('fired injectHTML');
+  const target = document.querySelector('#crime_list');
+  target.innerHTML = '';
+  const listEl = document.createElement('ol');
+  target.appendChild(listEl);
+  list.forEach((item) => {
+    const el = document.createElement('li');
+    el.innerText = item.street_address;
+    listEl.appendChild(el);
+  });
+}
+
+function processCrime(list) {
+  const newArray = list.filter((item) => {
+    const clearanceCodeIncType = item.clearance_code_inc_type;
+    if (clearanceCodeIncType && clearanceCodeIncType === 'ASSAULT') {
+      console.log(item);
+      return item;
+    }
+    return null;
+  });
+  return newArray;
+}
+
+function initMap() {
+  console.log('initMap');
+  const map = L.map('map').setView([38.9897, -76.9378], 11);
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+  }).addTo(map);
+  return map;
+}
+
+function markerPlace(array, map) {
+  map.eachLayer((layer) => {
+		if (layer instanceof L.Marker) {
+		  layer.remove();
+		}});
+  array.forEach((item) => {
+    const latitude = item.latitude;
+    const longitude = item.longitude;
+    L.marker([latitude, longitude]).addTo(map);
+  });
+}
+
+async function getData() {
+  const url = 'https://data.princegeorgescountymd.gov/resource/wb4e-w4nf.json';
+  const data = await fetch(url);
+  const json = await data.json();
+  const reply = json.filter((item) => Boolean(item.location)).filter((item) => Boolean(item.clearance_code_inc_type));
+  return reply;
+}
+
+async function mainEvent() {
+  // the async keyword means we can make API requests
+  const form = document.querySelector('.main_form'); // get your main form so you can do JS with it
+  const submit = document.querySelector('#get-resto'); // get a reference to your submit button
+  const loadAnimation = document.querySelector('.lds-ellipsis');
+  submit.style.display = 'none'; // let your submit button disappear
+
+  // initChart(chartTarget);
+  const pageMap = initMap();
+  /* API data request */
+  const mapData = await getData();
+
+  console.table(mapData);
+
+  // in your browser console, try expanding this object to see what fields are available to work with
+  // for example: arrayFromJson.data[0].name, etc
+  console.log(mapData[0]);
+
+  // this is called "string interpolation" and is how we build large text blocks with variables
+  console.log(`${mapData[0].clearance_code_inc_type} ${mapData[0].street_address}`);
+
+  // This IF statement ensures we can't do anything if we don't have information yet
+  if (mapData.length > 0) { // the question mark in this means "if this is set at all"
+    submit.style.display = 'block'; // let's turn the submit button back on by setting it to display as a block when we have data available
+
+    loadAnimation.classList.remove('lds-ellipsis');
+    loadAnimation.classList.add('lds-ellipsis_hidden');
+
+    let currentList = [];
+    form.addEventListener('input', (event) => {
+      console.log(event.target.value);
+      const newFilterList = filterList(currentList, event.target.value);
+      injectHTML(newFilterList);
+      markerPlace(newFilterList, pageMap);
+    });
+
+    form.addEventListener('submit', (submitEvent) => {
+      // This is needed to stop our page from changing to a new URL even though it heard a GET request
+      submitEvent.preventDefault();
+
+      // This constant will have the value of your 15-restaurant collection when it processes
+      currentList = processCrime(mapData);
+
+      // And this function call will perform the "side effect" of injecting the HTML list for you
+      injectHTML(currentList);
+      markerPlace(currentList, pageMap);
+    });
+  }
+}
+
+document.addEventListener('DOMContentLoaded', async () => mainEvent()); // the async keyword means we can make API requests
diff --git a/js/b_and_e_commercial.js b/js/b_and_e_commercial.js
@@ -0,0 +1,112 @@
+/*
+  ## Utility Functions
+    Under this comment place any utility functions you need - like an inclusive random number selector
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
+*/
+
+function injectHTML(list) {
+  console.log('fired injectHTML');
+  const target = document.querySelector('#crime_list');
+  target.innerHTML = '';
+  const listEl = document.createElement('ol');
+  target.appendChild(listEl);
+  list.forEach((item) => {
+    const el = document.createElement('li');
+    el.innerText = item.street_address;
+    listEl.appendChild(el);
+  });
+}
+
+function processCrime(list) {
+  const newArray = list.filter((item) => {
+    const clearanceCodeIncType = item.clearance_code_inc_type;
+    if (clearanceCodeIncType && clearanceCodeIncType === 'B & E, COMMERCIAL') {
+      console.log(item);
+      return item;
+    }
+    return null;
+  });
+  return newArray;
+}
+
+function initMap() {
+  console.log('initMap');
+  const map = L.map('map').setView([38.9897, -76.9378], 11);
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+  }).addTo(map);
+  return map;
+}
+
+function markerPlace(array, map) {
+  map.eachLayer((layer) => {
+		if (layer instanceof L.Marker) {
+		  layer.remove();
+		}});
+  array.forEach((item) => {
+    const latitude = item.latitude;
+    const longitude = item.longitude;
+    L.marker([latitude, longitude]).addTo(map);
+  });
+}
+
+async function getData() {
+  const url = 'https://data.princegeorgescountymd.gov/resource/wb4e-w4nf.json';
+  const data = await fetch(url);
+  const json = await data.json();
+  const reply = json.filter((item) => Boolean(item.location)).filter((item) => Boolean(item.clearance_code_inc_type));
+  return reply;
+}
+
+async function mainEvent() {
+  // the async keyword means we can make API requests
+  const form = document.querySelector('.main_form'); // get your main form so you can do JS with it
+  const submit = document.querySelector('#get-resto'); // get a reference to your submit button
+  const loadAnimation = document.querySelector('.lds-ellipsis');
+  submit.style.display = 'none'; // let your submit button disappear
+
+  // initChart(chartTarget);
+  const pageMap = initMap();
+  /* API data request */
+  const mapData = await getData();
+
+  console.table(mapData);
+
+  // in your browser console, try expanding this object to see what fields are available to work with
+  // for example: arrayFromJson.data[0].name, etc
+  console.log(mapData[0]);
+
+  // this is called "string interpolation" and is how we build large text blocks with variables
+  console.log(`${mapData[0].clearance_code_inc_type} ${mapData[0].street_address}`);
+
+  // This IF statement ensures we can't do anything if we don't have information yet
+  if (mapData.length > 0) { // the question mark in this means "if this is set at all"
+    submit.style.display = 'block'; // let's turn the submit button back on by setting it to display as a block when we have data available
+
+    loadAnimation.classList.remove('lds-ellipsis');
+    loadAnimation.classList.add('lds-ellipsis_hidden');
+
+    let currentList = [];
+    form.addEventListener('input', (event) => {
+      console.log(event.target.value);
+      const newFilterList = filterList(currentList, event.target.value);
+      injectHTML(newFilterList);
+      markerPlace(newFilterList, pageMap);
+    });
+
+    form.addEventListener('submit', (submitEvent) => {
+      // This is needed to stop our page from changing to a new URL even though it heard a GET request
+      submitEvent.preventDefault();
+
+      // This constant will have the value of your 15-restaurant collection when it processes
+      currentList = processCrime(mapData);
+
+      // And this function call will perform the "side effect" of injecting the HTML list for you
+      injectHTML(currentList);
+      markerPlace(currentList, pageMap);
+    });
+  }
+}
+
+document.addEventListener('DOMContentLoaded', async () => mainEvent()); // the async keyword means we can make API requests