handsondataviz / leaflet-maps-with-google-sheets Goto Github PK

I discovered this problem while making a new instance, and am unsure if it's a problem caused by our code, or a problem caused by GitHub Pages.

This link works:
https://jackdougherty.github.io/dataviz-course-image/

But this link, which refers directly to the index.html, does NOT work for this repo, and I don't know why not.
https://jackdougherty.github.io/dataviz-course-image/index.html

I don't see this problem with other instances of Leaflet Maps with Google Sheets, or other GitHub repos I've created.

Please insert a Subtitle field to appear under Page Title, with smaller font size

If possible, allow user to insert breaks in the subtitle so that long text does not stretch across the entire map

remove the bottom three options

Not sure why this happens, so perhaps it's worth discussing to decide if it's a bug or something we need to warn about in the instructions

In this version of our tool: https://github.com/JackDougherty/ctoca-opp-index/
if Polygon Property Range Dividers has NO SPACES after commas, like this:

Very Low,Low,Moderate,High,Very High

Then the map correctly displays 5 color ranges, like this:

But if I insert spaces after commas above, like this:

Very Low, Low, Moderate, High, Very High

then the map messes up the colors

change this:
view code[link] with Leaflet[link]
to
view code[link] by DataVizForAll[http://datavizforall.org] with Leaflet[link]

insert a new row called "code credit" in Google Sheet, with default link to DataVizForAll

When the code was newly created, it worked nicely

But today I have tried to enter different values and am not seeing changes

Hey all,
not sure if this is intentional, but currently the polygon options in the demo seem to set polygons to transparent instead of filled in with the legend colors.

Cheers!

Margie at #TCamp16 suggested that Tabletop.js can process the entire Google Doc URL (which is easier to copy and paste)

need to set scrollWheelZoom to false

here's how I would normally do it in a simple Leaflet map, but am unsure how to code this into map.js

var map = L.map('map', {
  center: [41.76, -72.6],
  zoom: 11,
  scrollWheelZoom: false
});

Reorganize Google Sheets tabs (and constants.js) into 4 coherent categories, to avoid overwhelming the new users

• Notes (very basic instructions, to reminder users that this data is linked to a Leaflet map; reminder to type in data source notes)
• Options (for Map Info, Settings, Basic Controls, and Point Options)
• Points (all point data; put "layer" or "category" in first column, and decide which one makes sense)
• Polygons (all polygon controls in one sheet, to replace the existing "Polygons" tab)

Also, remove the current "Polygons" tab, and move vertical columns to new horizontal rows labeled "Polygon Properties on Click" and "Polygon Labels on Click")

In Polygon tab, create option to allow polygon labels to be displayed on map, similar to this option in http://carto.com below.
In Leaflet, use panes feature

same error when selecting MapQuestionOpen.OSM or MapQuestOpen.Aerial

uncaught exception: No such provider (MapQuestOpen)

In Google Sheets, can you Protect a column from accidental editing in a way that carries forward when someone does File > Make a Copy?

So far, the Protection feature disappears when I make a copy of the file. But if there's a way to preserve protection, let's use it in the Google Sheet to avoid accidental edits

We may not be able to fix this, so make a note to warn novice mapmakers:

If testing the map on a local computer (rather than GitHub Pages), use Firefox browser, because Chrome generates a cross-origins error for polygon GeoJSON

The intro text pop-up is great, but its not very obvious how to close it. Auto-fade might be an option as well.

Added visual gravy would be to do a modal style pop-up where the map in the background is darkened until the box goes away, but I realize that may not be easily implemented if its just a Leaflet pop-up.

This map does not generate any errors in FFox for Mac
https://jackdougherty.github.io/leaflet-maps-with-google-sheets/

But these problems arise in Chrome for Mac

1. Marker icons do not display properly in Chrome -- see screenshot
   

2. Chrome console error, probably related to above
   GET https://use.fontawesome.com/a36da20aef.js net::ERR_BLOCKED_BY_CLIENT
   jackdougherty.github.io/:27

3. Chrome console warning (but I don't know if we can do anything about this one...)
   Mixed Content: The page at 'https://jackdougherty.github.io/leaflet-maps-with-google-sheets/' was loaded over HTTPS, but requested an insecure image 'http://d.basemaps.cartocdn.com/light_all/11/610/761.png'. This content should also be served over HTTPS.

One advantage of Derek's GFT template is that marker colors appeared in the layer control, which helped users to visually associate layer labels and point colors on the map

Can we do something similar with this Leaflet template? At minimum, marker layer colors would be nice. Ideally, the actual marker style and color would appear.

similar to point labels

Can we enable the Polygon Property Range Dividers to handle phrases with spaces?
Our demo tested words like "low, medium, high"
But when I tried to add phrases with spaces ("very low" and "very high") it did not display properly.
See this live demo:
https://jackdougherty.github.io/ctoca-opp-index/
and its Google Sheet (with editing privileges to @ilyankou )
https://docs.google.com/spreadsheets/d/1HVwCMpVWLHVtSXXOGDG3rqzYfNGyJ_6sAs2OWzj52Zc/edit#gid=0

When I tried selecting "off" in the Google Sheet for
Map Controls > Find My Location

the location icon still appeared on the map

Eric at #Tcamp16 recommended that we try this approach instead of Google
https://mapzen.com/documentation/search/

If we do this, then let's also create a new cell in Map Options called "Insert Your Mapzen API key"
and give simple instructions for users to create and insert it, rather than using our default
The Mapzen API key would run both 1) geocoding in the Google Sheet; 2) search

Try public schools in metro Hartford by type
with census tracts by income and race

Problem: the current Google Sheets Geocoding Macro uses a service (Google Maps?) that does not return a "match quality" indicator, which means that users cannot be confident if addresses were correctly geocoded

Possible solution: Create an alternative Google Sheets Macro to “Geocode Address from US Census API” with two extra columns for match quality; See http://www.census.gov/geo/maps-data/data/geocoder.html and click Documentation to read about this API. However, it would be limited to US street addresses only.

'Off' is triggered when clicked on lower half of the polygons legend (where the colored squares with ranges are).

Fix the bug

Ilya pointed out that my default 300x150 image is not displaying at this size; instead is rendered by the title width, which is approproriate, so jack needs to change default images to other source

Create option for users who wish to transform and preserve their dynamic Google Sheet data into more stable CSV files to be uploaded into the GitHub repo, to create a more stable version of the map.

change to "Display polygon labels at zoom level"

check variable names

extend it to include the default values

Create favicon and insert in index.html

  <head>
  <link rel="icon" type="image/png" href="src/favicon.png">

please fix our version of leaflet-providers for https issue in Open Street Map basemap

if working, please push code to Leaflet-Providers GitHub to see if they will accept for future

if they will not accept, in future we should rethink whether or not to use leaflet-providers, or simply rename as our own version and drop their name

Would it be easy to make a custom marker appear in the legend if it is the first instance of a group?
if yes, please recommend custom marker size for me to include in readme
also tell me if .png with transparent background

For marker-color choices in the Google Sheet, should we add "none" as a logical possibility (for custom markers)?

Please rename the following items

1. In Google Sheets options tab, simply "Point Layer Legend Title" to "Point Legend Title"

2. Also simplify "Point Layer Legend Position" to "Point Legend Position"
   Fix constants.js to match
   

3. In Google Sheets points tab, change "Layer" to "Group" (which will make sense to new users, both in English and Spanish). Fix constants.js to match.
   

4. in Google Sheets polygon tab, change these items (and fix constants.js to match)
   I'm suggesting that we use the comma in the 1st and 3rd items below to signal its importance
   change "GeoJSON Layers" to "Polygon Properties, Labels"
   change "Property Range Dividers" to "Property Ranges"
   change "GeoJSON Popup Properties" to "Property Popups, Labels"

Review basemap tiles validated choices that currently appear in Google Sheet, based on potential listings in https://leaflet-extras.github.io/leaflet-providers/preview/

First, Erik from #Tcamp16 convinced me that the Search Map Boundaries should be empty by default, since it's something that could unnecessarily limit people who are new to creating their first map

Second, I believe that the Mapzen API allows us to "focus" the results using the center lat, lng of the map. https://mapzen.com/documentation/search/autocomplete/#global-scope-local-focus

If so, then maybe we don't even need the Search Map Boundaries option. Or perhaps we leave it blank by default, but describe in hints what kinds of parameters can be inserted.

this allows users to return to the pop-up window initial state if needed

When creating one's own version, a common error (which I've done twice) is for users to forget to File > Publish their new copy of the Google Sheet template. When that happens, users see the "spinner" for a long period with no results, which can be confusing.

Does this mistake produce an error code somewhere that we can read? If so, when triggered, please insert a line of code that generates this message:
Cannot find the linked Google Sheet.
Did you remember to File > Publish?

Or if no error message is generated, consider displaying this message if the spinner runs more than 10 seconds?

How can users create a point map with only a polygon outline (not color-coded)

Add "Polygon location" option = none

Add "Polygon opacity percent" (0 to 100 percent) because sometimes users only want the outline to appear, with no filled area

Add "Polygon outline color" (default is white, but allow others to be manually set) for customization

add Point Layer Legend Position = off
when user wants to create a polygon map only, with no points shown

I need to choose better labels in Polygon tab. Try to match vocab in similar polygon map tools, such as Carto choropleth wizard

ex. Carto also serves their tiles using https: https://carto.com/location-data-services/basemaps/
I changed the URL accordingly in leaflet-providers.js and it worked fine.

Add polyline support

I have uploaded two sample polylines to Github
polyline-sample1.geojson
polyline-sample2.geojson

Google Sheet tab should include each line as a row with these options
url for geojson (typically inside the github, but would be any url)
display name
description (for popup)
color

In Options tab
location (including off)
thickness

@ilyankou
Next time we talk:

1. Can you easily revise the code to support custom markers, beyond the Font Awesome markers?
2. If so, can you implement this so that the user can upload an icon image into GitHub, and refer to it in the Google Sheet points tab, marker-icon column? For example, instead of writing a Font Awesome icon name:
   graduation-cap
   users could write a specific file name in their GitHub:
   americorps-icon.png

Test case:
This issue up during a conversation with Knox Foundation, one of our Hartford community partners.
Knox currently has a custom Google Map on their website, which a tech firm created for them, but Knox staff cannot make edits.
https://www.knoxhartford.org/map/

But if we can find a way to support their custom icons, such as this one:
https://www.knoxhartford.org/wp-includes/images/tree-map-images/americorps-icon.png

Then my DataViz students can replicate the Knox map in our easy-to-edit tool.

Similar to colored marker icons

See this plugin from Leaflet, but there may be others
https://github.com/Leaflet/Leaflet.heat

I'm leaning toward keeping this separate. Tell me what you think.