From 964ddd8b5650bee67f5fe2dd5c1f6b6aef6d9b2c Mon Sep 17 00:00:00 2001 From: Terry Date: Thu, 19 Jul 2018 15:46:34 -0400 Subject: [PATCH 1/4] Fixed a bad code name, maxed-out width of popup content to match popup container, Added padding to the legend --- src/main/resources/static/css/tile.css | 9 ++++++++- src/main/resources/static/js/spew-format.js | 2 +- src/main/resources/static/js/tile.js | 1 + 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/main/resources/static/css/tile.css b/src/main/resources/static/css/tile.css index 679abeb..b9987dd 100644 --- a/src/main/resources/static/css/tile.css +++ b/src/main/resources/static/css/tile.css @@ -18,6 +18,7 @@ padding-right: 0px; padding-left: 0px; padding-bottom: 1px; + width: 100%; } .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip, @@ -101,7 +102,9 @@ body { .legend { border-radius: inherit; - padding: 0px; + padding-top: 2px; + padding-left: 2px; + padding-right: 2px; transform: translate(0%, 0%); } @@ -114,6 +117,10 @@ body { min-width: 20px; } +.legend-title { + /**/ +} + .zoom-note { background-color: #f25934; color: inherit; diff --git a/src/main/resources/static/js/spew-format.js b/src/main/resources/static/js/spew-format.js index 931d1c9..7382607 100644 --- a/src/main/resources/static/js/spew-format.js +++ b/src/main/resources/static/js/spew-format.js @@ -35,7 +35,7 @@ var SPEW_FORMAT = { "ages": "AGE", "puma": "puma_id", "year": "YEAR", - "races": "RACID", + "races": "RAC1P", "sexes": "SEX", "grades": "SCHG", "hid": "SYNTHETIC_HID", diff --git a/src/main/resources/static/js/tile.js b/src/main/resources/static/js/tile.js index ffb3f1e..9a611da 100644 --- a/src/main/resources/static/js/tile.js +++ b/src/main/resources/static/js/tile.js @@ -278,6 +278,7 @@ legendItemTable.cellPadding = "2"; legendItemTable.cellSpacing = "2"; + legendTitle.classList.add("legend-title"); legendTitle.innerHTML = "" + categoryLegend + ""; legendItemTable.appendChild(legendTitle); From b136ea57871bcf0fb1f737dfea644f4004c18d79 Mon Sep 17 00:00:00 2001 From: Terry Date: Wed, 25 Jul 2018 15:52:51 -0400 Subject: [PATCH 2/4] Added Google Analytics Tracking --- .../resources/static/js/site-analytics.js | 54 +++++++++++ src/main/resources/static/js/tile.js | 89 ++++++++++++++----- src/main/resources/templates/tile.html | 13 ++- 3 files changed, 135 insertions(+), 21 deletions(-) create mode 100644 src/main/resources/static/js/site-analytics.js diff --git a/src/main/resources/static/js/site-analytics.js b/src/main/resources/static/js/site-analytics.js new file mode 100644 index 0000000..2a93756 --- /dev/null +++ b/src/main/resources/static/js/site-analytics.js @@ -0,0 +1,54 @@ +//globals +var GOOGLE_ANALYTICS_TRACKING_ID = 'UA-122846038-1', + ANALYTICS_TRACKER = 'SPEWMap', + ga; + +(function(){ + /* --Google Site Tag-- */ + window.dataLayer = window.dataLayer || []; + function gtag(){dataLayer.push(arguments);} + gtag('js', new Date()); + + gtag('config', GOOGLE_ANALYTICS_TRACKING_ID); + /* --Google Site Tag-- */ + + /* -- Google Analytics -- */ + ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; + ga('create', GOOGLE_ANALYTICS_TRACKING_ID, 'auto', ANALYTICS_TRACKER); + + //This is called when tracker is created, so it's redundant to include + //ga(ANALYTICS_TRACKER + '.send', 'pageview'); + + /* + //typical send 'hit' usage + //Note: values specified in ...fields and fieldsObject are sent with the current hit, + //but they are not stored on the tracker object. Use the set method to update a tracker. + + ga('[trackerName.]send', [hitType], [...fields], [fieldsObject]); + [hitType] {...fields} + pageview {page} + event {eventCategory, eventAction, eventLabel, eventValue} + social {socialNetwork, socialAction, socialTarget} + timing {timingCategory, timingVar, timingValue, timingLabel} + + //Sends a pageview hit. + ga('send', 'pageview'); + + //Sends an event hit for the tracker named "myTracker" with the following category, + //action, and label, and sets the nonInteraction field value to true. + ga('send', 'event', 'link', 'click', 'http://example.com', { + nonInteraction: true + }); + + //typical set field usage + // Sets a single field and value. + ga('[trackerName.]set', fieldName, fieldValue); + + // Sets a group of field/value pairs. + ga('[trackerName.]set', fieldsObject); + */ + + /* -- Google Analytics -- */ + + return; +})(); diff --git a/src/main/resources/static/js/tile.js b/src/main/resources/static/js/tile.js index 9a611da..4cad064 100644 --- a/src/main/resources/static/js/tile.js +++ b/src/main/resources/static/js/tile.js @@ -420,6 +420,9 @@ ], i; + //ga('send', [event], {[eventCategory], [eventAction], [eventLabel], [eventValue]}); + ga(ANALYTICS_TRACKER + '.send', 'event', 'Map', 'click', 'click on household'); + popupContent.innerHTML = html(e); // Ensure that if the map is zoomed out such that multiple @@ -476,7 +479,7 @@ map.getCanvas().style.cursor = 'pointer'; }); map.on('mouseleave', id, function () { - map.getCanvas().style.cursor = ''; + map.getCanvas().style.cursor = null; }); function html(e) { @@ -645,37 +648,47 @@ } function makeCircleLayersToggleable() { - var id2link = {}; - for (var i = 0; i < toggleableLayerIds.length; i++) { - var layerId = toggleableLayerIds[i]; + var id2link = {}, + layerId, + layers, + link, + i; + + for (i = 0; i < toggleableLayerIds.length; i++) { + layerId = toggleableLayerIds[i]; - var link = document.createElement('a'); + link = document.createElement('a'); link.href = '#'; link.textContent = layerId; id2link[layerId] = link; + if (layerId !== hhId) hide.call(link, layerId); else show.call(link, layerId); link.onclick = function (e) { - var clickedLayer = this.textContent; + var clickedLayer = this.textContent, + visibility = map.getLayoutProperty(clickedLayer, 'visibility'), + layer, + i; e.preventDefault(); e.stopPropagation(); - var visibility = map.getLayoutProperty(clickedLayer, 'visibility'); if (visibility === 'visible') { hide.call(this, clickedLayer); - } else { - for (var i = 0; i < toggleableLayerIds.length; i++) { - var layer = toggleableLayerIds[i]; + } + else { + for (i = 0; i < toggleableLayerIds.length; i++) { + layer = toggleableLayerIds[i]; hide.call(id2link[layer], layer); } show.call(this, clickedLayer); } }; - var layers = document.getElementById('menu'); + + layers = document.getElementById('menu'); layers.appendChild(link); } @@ -694,6 +707,7 @@ function rgbToHex(rgb) { var hex = Number(rgb).toString(16); + if (hex.length < 2) { hex = '0' + hex; } @@ -701,28 +715,63 @@ } function rgb(r, g, b) { - var red = rgbToHex(r); - var green = rgbToHex(g); - var blue = rgbToHex(b); + var red = rgbToHex(r), + green = rgbToHex(g), + blue = rgbToHex(b); + return '#' + red + green + blue; } } function addControls() { + var draw; + map.addControl(new mapboxgl.NavigationControl(), 'top-left'); - var draw = newMapboxDraw(); + draw = newMapboxDraw(); map.addControl(draw, 'top-left'); - map.on('draw.create', updateQueryResult); - map.on('draw.delete', updateQueryResult); - map.on('draw.update', updateQueryResult); + map.on('draw.create', function(e){ + //ga('send', [event], {[eventCategory], [eventAction], [eventLabel], [eventValue]}); + ga(ANALYTICS_TRACKER + '.send', 'event', 'Map', 'draw', 'create draw query'); + updateQueryResult(e); + + return; + }); + map.on('draw.delete', function(e){ + ga(ANALYTICS_TRACKER + '.send', 'event', 'Map', 'delete', 'delete draw query'); + updateQueryResult(e); + + return; + }); + map.on('draw.update', function(e){ + ga(ANALYTICS_TRACKER + '.send', 'event', 'Map', 'update', 'update draw query'); + updateQueryResult(e); + + return; + }); function updateQueryResult(e) { var features = document.getElementById('features'), closeButton = document.getElementById('features-close-button'), featureCollection = draw.getAll(), - answer = document.getElementById('calculated-area'); + answer = document.getElementById('calculated-area'), + hasLegalPolygon = false, + featureArray = featureCollection.features, + geometryCoordinates, + i, + j; + + for(i = 0; i < featureArray.length; i++) { + geometryCoordinates = featureArray[i].geometry.coordinates; + for(j = 0; j < geometryCoordinates.length; j++){ + if(geometryCoordinates[j].length > 2) { + hasLegalPolygon = true; + break; + break; + } + } + } - if (featureCollection.features.length > 0) { + if(hasLegalPolygon && featureCollection.features.length > 0) { closeButton.onclick = function(){ closeButton.hidden = true; tokenForSummary.cancel(); diff --git a/src/main/resources/templates/tile.html b/src/main/resources/templates/tile.html index 6696e7a..8fc67e3 100644 --- a/src/main/resources/templates/tile.html +++ b/src/main/resources/templates/tile.html @@ -4,6 +4,17 @@ SPEW Map + + + + + + + + + + + @@ -42,7 +53,7 @@
- Current Zoom = + Current Zoom =
From f902e0654f70d08c7ff805a32eddef3e166abaf0 Mon Sep 17 00:00:00 2001 From: Terry Date: Wed, 25 Jul 2018 16:21:06 -0400 Subject: [PATCH 3/4] changed 8-digit hex color values to rgba format (since 8-digit hex colors may not be standard) --- src/main/resources/static/css/tile.css | 49 +++++++++++++++----------- 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/src/main/resources/static/css/tile.css b/src/main/resources/static/css/tile.css index b9987dd..45ac449 100644 --- a/src/main/resources/static/css/tile.css +++ b/src/main/resources/static/css/tile.css @@ -1,3 +1,10 @@ +:root { + --dark-background: rgba(0, 0, 0, 0.75); + --light-background: whitesmoke; + --light-font: whitesmoke; + --warning-color: #f25934; +} + .mapboxgl-ctrl-group > button { width: 36px; @@ -11,7 +18,7 @@ } .mapboxgl-popup-content { - background-color: #000000c0; + background-color: var(--dark-background); color: inherit; border-radius: inherit; padding-top: 2px; @@ -27,19 +34,19 @@ .mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip, .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip, .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip { - border-top-color: #000000c0; - border-bottom-color: #000000c0; + border-top-color: var(--dark-background); + border-bottom-color: var(--dark-background); } .mapboxgl-popup-anchor-left .mapboxgl-popup-tip, .mapboxgl-popup-anchor-right .mapboxgl-popup-tip { - border-left-color: #000000c0; - border-right-color: #000000c0; + border-left-color: var(--dark-background); + border-right-color: var(--dark-background); } .mapboxgl-popup-close-button, .mapboxgl-popup-close-button:hover { - background-color: #f25934; + background-color: var(--warning-color); color: inherit; width: 23px; height: 23px; @@ -49,15 +56,15 @@ body { margin:0; padding:0; font-family: 'Open Sans', sans-serif; - color: whitesmoke; - background-color: #000000c0; + color: var(--light-font); + background-color: var(--dark-background); border-radius: 5px; } .active-tab-button { font-weight: bold; color: black; - background-color: whitesmoke; + background-color: var(--light-background); } .active-tab-button, @@ -65,7 +72,7 @@ body { border-top-left-radius: 5px; border-top-right-radius: 5px; border-style: solid; - border-color: whitesmoke; + border-color: var(--light-font); display: inline-block; padding-left: 2px; padding-right: 2px; @@ -122,7 +129,7 @@ body { } .zoom-note { - background-color: #f25934; + background-color: var(--warning-color); color: inherit; border-radius: 15px; position: absolute; @@ -131,12 +138,12 @@ body { } .zoom-note-button-active { - background-color: whitesmoke; + background-color: var(--light-background); } .zoom-note-button-inactive { - border-color: #f25934; - color: #f25934; + border-color: var(--warning-color); + color: var(--warning-color); background-color: #ffffff; } @@ -163,7 +170,7 @@ body { #features-close-button { border-radius: inherit; color: inherit; - background-color: #f25934; + background-color: var(--warning-color); border-style: solid; width: 36px; height: 36px; @@ -230,19 +237,19 @@ body { } #menu a:hover { - background-color: #00000060; - color: whitesmoke; + background-color: rgba(0, 0, 0, 0.38); + color: var(--light-font); } #menu a.active:hover, #menu a.active { - background-color: #000000c0; - color: whitesmoke; + background-color: var(--dark-background); + color: var(--light-font); } #menu-button { border-radius: inherit; - background-color: whitesmoke; + background-color: var(--light-background); border-style: solid; width: 36px; height: 36px; @@ -251,7 +258,7 @@ body { } #menu-panel { - background-color: whitesmoke; + background-color: var(--light-background); color: black; border-radius: inherit; display: inline-block; From 5eb693500424b7dcd56ba84250ad996b9f74bd67 Mon Sep 17 00:00:00 2001 From: Terry Date: Wed, 25 Jul 2018 17:37:04 -0400 Subject: [PATCH 4/4] version 0.4.8 --- pom.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pom.xml b/pom.xml index 759cce1..291c373 100644 --- a/pom.xml +++ b/pom.xml @@ -5,7 +5,7 @@ edu.pitt.isg spewmap - 0.4.7 + 0.4.8 jar spewmap