Originally I had wanted to pull in data about populations in the US that still refer to themselves as whatever country they or their ancestors came from. I got the data here.

Since it was CSR format, I put the information into a CSR sheet. Then I wanted to do something similar to the chloropleth map – make the countries identified in this information be colored in based on their points. I was attempting to turn JSON to CSR by pulling in each individual country’s JSON data from the countries’s polygon shape data and then using the json formatter to check it out.  After spending a lot of time collecting the data, I was given an error message by the formatter, that the formatting was not 100% accurate. However — I think it fixed  that automatically. So the next step was to convert the JSON to CSR using this online tool. However, I put the data back through the json formatter in the what-I-thought-was-corrected format, and indeed it was not. I got this: Screen Shot 2016-02-18 at 11.35.32 PM

 

Back to square 1.

Instead of trying to find or create data, at this point I want to add the geoSearch option.

This is very confusing. The instructions on leaflet don’t show full code to explain how the geosearch fits in based on what map you are calling. It didn’t work for me using both the google or the open street maps option. I am using a Mapbox map, so I wonder if that is the issue. So I switched out open street maps for google on the class example and that didn’t work. I switched it back and the open street maps one wasn’t working any more.

It looks like there is a special reference that needs to be made to the google specific library for calling this geo search. I found this saved in our data file as “l.geosearch.provider.google.js.” Comparing my code to the class code to the leaflet reference code, I added this:

<script src=”../src/js/l.control.geosearch.js”></script>
<script src=”../src/js/l.geosearch.provider.google.js”></script>
<link rel=”stylesheet” href=”../src/css/l.geosearch.css” />

YAY! It works. ACHIEVEMENT UNLOCKED!

I tried uploading the map to my website, but for some reason it is coming up with errors:

Screen Shot 2016-02-19 at 10.38.56 AM

QUESTION

Why it is necessary to call each of these within a folder on the computer and not outside to the internet?

DATA FROM CSV

I decided to make a csv of the Disney Parks around the world, and import this file. I added all of this code:

<script src=”http://code.jquery.com/jquery-1.11.3.min.js”></script>
<link href=’https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css’ rel=’stylesheet’ />
<link href=’https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css’ rel=’stylesheet’ />

<script src=’//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js’></script>

Plus

omnivore.csv(“data/disneyParks.csv”).addTo(map);

And I am not seeing any markers nor am I getting any errors in the console.

The omnivore tutorial doesn’t mention anything outside of adding

<script src=’//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js’></script>

and

omnivore.csv(“data/disneyParks.csv”).addTo(map);

I tested this by removing those other lines of code from the class example and the omnivore still worked.

Still not getting my particular code to work. I thought perhaps there was an issue with the CSV file. Latitude was where longitude should have been so I switched them. I reformatted that and still the map is not working.

Next I decided to transfer the CSV file to a JSON file using this tool.

It did not work.

Turns out the issue was with the csv file. Here is the working map and code!

QUESTIONS:

-Is there a way to do geosearch without adding the SRC and the CSS?
-The github repo does not mention this, however it is in the class example code. And when I // it out, the search box disappears (no src) or moves to the corner (no css).