Progress for JS

[Karahmel]

Trying to get JS layer to show up. Any tips?

@amyleew

[Karahmel]

I tried to debug this from our "breakthrough" in class, but I can't figure it out. Why aren't the polygons or markers from the mapbox map showing up? @amyleew

[amyleew]

@Karahmel add screenshot or link so I can help you troubleshoot

[Karahmel]

[image: Inline image 1]

On Fri, Dec 12, 2014 at 11:35 AM, Amy Lee Walton notifications@github.com wrote:

@Karahmel https://github.com/Karahmel add screenshot or link so I can help you troubleshoot

— Reply to this email directly or view it on GitHub https://github.com/Karahmel/Blog/issues/2#issuecomment-66797248.

[amyleew]

@Karahmel - Looks like you have 2 overlapping basemaps, ksalaets.k8e8hb0e and ksalaets.kebdmg9h on your page http://karahmel.github.io/Blog/maptrial

But you need to add the mapIDs for the point and polygon maps you made so they can be what are layered over the basemap. You also need to remove the basemap from these maps so they are on a transparent background.

Edit Your Saved Project

Go to your projects page: https://www.mapbox.com/projects/ and launch the project with your points and polygons so you can edit the background.

Hide the base layer

Click the Style tab on the top bar then for all the tabs - Streets, Bdgs, Areas, Water, Land you are going to click the Hide button.

This will result in only your points and polygons over a transparent background.

Layer maps with .js

Save that project and use the mapID in your .js code where you're adding the map layers.

Let me know how this works for you.

[Karahmel]

I now have 4 map layers and changed the style of the baselayer. The baselayer shows up just fine, but nothing shows up for any of the other maps. Here is a screenshot of the neighborhoods map: @amyleew

[Karahmel]

Ugh now this is what shows up when I try to get into any of my maps other than the base map.

On Fri, Dec 12, 2014 at 2:04 PM, Amy Lee Walton notifications@github.com wrote:

@Karahmel https://github.com/Karahmel - Looks like you have 2 overlapping basemaps, ksalaets.k8e8hb0e and ksalaets.kebdmg9h on your page http://karahmel.github.io/Blog/maptrial

[image: image] https://cloud.githubusercontent.com/assets/4587826/5417186/a175a6da-8204-11e4-99c6-5cad85be5f9c.png

But you need to add the mapIDs for the point and polygon maps you made so they can be what are layered over the basemap. You also need to remove the basemap from these maps so they are on a transparent background. Edit Your Saved Project

Go to your projects page: https://www.mapbox.com/projects/ and launch the project with your points and polygons so you can edit the background.

[image: image] https://cloud.githubusercontent.com/assets/4587826/5417003/273c3b96-8203-11e4-8f26-39fdbf5424f8.png Hide the base layer

Click the Style tab on the top bar then for all the tabs - Streets, Bdgs, Areas, Water, Land you are going to click the Hide button.

[image: image] https://cloud.githubusercontent.com/assets/4587826/5417276/859e9e3e-8205-11e4-8d7f-e0d5538c07a7.png

This will result in only your points and polygons over a transparent background.

[image: image] https://cloud.githubusercontent.com/assets/4587826/5417348/58b277c8-8206-11e4-9204-41e3cefe4db4.png Layer maps with .js

Save that project and use the mapID in your .js code where you're adding the map layers https://github.com/Karahmel/Blog/blob/gh-pages/maptrial.html#L72.

[image: image] https://cloud.githubusercontent.com/assets/4587826/5417371/af0407c2-8206-11e4-98aa-297e93615730.png

Let me know how this works for you.

— Reply to this email directly or view it on GitHub https://github.com/Karahmel/Blog/issues/2#issuecomment-66818631.

[amyleew]

@Karahmel

I keep getting an error myself trying to load MapID data directly from mapbox.com/editor. However, this process works:

1. Plot data points with mapbox.com/editor
2. Create source file for each a separate toggling layer in Mapbox Studio and upload to Mapbox.com
3. Create corresponding style file for each toggling layer in Mapbox Studio and upload to Mapbox.com
4. Use that final MapID on the JS layer

You also want to upgrade your Mapbox account to Standard with the code: STAYINSCHOOL100. This allow you to add 10 styles to Mapbox.com instead of only 1.

---

Plot data points with mapbox.com/editor

When you are finished plotting all the data points you plan to use a layer you will toggle, make sure to save the project. And then under the Project > Info tab you should see a GeoJSON button to download your data. Right-click that button and save the .json file onto your computer. This is your data.

Create source file for each layer in Mapbox Studio and upload to Mapbox.com

In Mapbox Studio, click New Project and select New Source.

Then select New Layer and load in the .json file with your data points you just made in mapbox.com/editor.

In the settings panel, Name your project, then upload that project to Mapbox.com.

When you see this 100% screen you've successfully uploaded your data.

Create corresponding style file layer in Mapbox Studio

Now you want to style that source layer so you can toggle it on your web page. In Mapbox Studio, make a new New Project and select any New Style you want, we are just going to delete all the code anyway. Save the new style and name it appropriately for your data layer.

Select Layers tab, then click Change Source. You should be able to find the Source file you just create by the Name you gave that file. Select it and it will populate the input box as your source. Click Apply.

Now, delete all the code and add the code below where #points is the name of the layer in your data set. If you don't know the name of the layer, click the Layers tab and it will be listed there.

Map {
  background-color: transparent;
  }

#points {
  marker-fill: red;
  }

Save this file and you should see your points plotted over a transparent background.

If you do not see your points, you may not be looking over the right area or zoomed in close enough. There is a search button at the top left in the UI, you can enter City, ST (2-letter state initial) and it will take you to that location on your map. You may need to zoom in a few clicks to see the data better. Make sure you save your file on that zoom so when you open this file again you will be in that same location.

Now your Style file is ready to upload to Mapbox.com. Do so by selecting Settings > Upload to Mapbox.

Add MapID to your .js on your web page

The resulting mapID will work as a layer to add to your .js file.

Also, consider setting your setView to a close zoom on your target location. I've set it to zoom level 15 right over Baltimore, MD, 39.2877,-76.6172.

var map = L.map('map').setView([39.2877,-76.6172], 15);

Extra bells and whistles

Find more ways to style your data points under the Docs tab, points and markers

Add by styling [title] variable

#points {
   marker-fill: red;
   ::label {
   text-name: '[title]';
   text-face-name: "DIN Offc Pro Medium";
   text-size: 12;
   text-fill: darken(red,25);
   text-allow-overlap: true;
   text-dy: -14;
   text-transform: uppercase;
   }
}

[Karahmel]

I looked through this and I understand it so I think it'll work, but I can't upload my points/lines/polygons into mapbox studio right now because I can't see anything in those maps anymore. I can open up my baselayer, but with my top bars, neighborhood, and attractions maps I see this, and this, so it won't even let me see the json of my data so I can upload it to mapboxstudio. I'm not at the point where I'm ready to start that over again because it took so long to put it in in the first place, so if you know of a way to recover those maps I would be so appreciative. Thank you for outlining all of those steps for me!

[image: Inline image 1] [image: Inline image 2]

On Sat, Dec 13, 2014 at 9:15 AM, Amy Lee Walton notifications@github.com wrote:

@Karahmel https://github.com/Karahmel

I keep getting an error myself trying to load MapID data directly from mapbox.com/editor. However, this process works:

1. Plot data points with mapbox.com/editor
2. Create source file for each a separate toggling layer in Mapbox Studio and upload to Mapbox.com
3. Create corresponding style file for each toggling layer in Mapbox Studio and upload to Mapbox.com
4. Use that final MapID on the JS layer

You also want to upgrade your Mapbox account to Standard with the code: STAYINSCHOOL100. This allow you to add 10 styles to Mapbox.com instead of

only 1.

Plot data points with mapbox.com/editor

When you are finished plotting all the data points you plan to use a layer you will toggle, make sure to save the project. And then under the *Project

Info* tab you should see a GeoJSON button to download your data. Right-click that button and save the .json file onto your computer. This is your data.

[image: image] https://cloud.githubusercontent.com/assets/4587826/5422823/49339132-8266-11e4-8949-9aa94302f00a.png Create source file for each layer in Mapbox Studio and upload to Mapbox.com

In Mapbox Studio, click New Project and select New Source.

[image: image] https://cloud.githubusercontent.com/assets/4587826/5418533/02afe940-8211-11e4-9606-fcae6442e1fe.png

Then select New Layer and load in the .json file with your data points you just made in mapbox.com/editor.

[image: image] https://cloud.githubusercontent.com/assets/4587826/5418544/13651ecc-8211-11e4-9d83-e447e6c379c5.png

In the settings panel, Name your project, then upload that project to Mapbox.com.

[image: image] https://cloud.githubusercontent.com/assets/4587826/5418572/50ed00e8-8211-11e4-8e9b-5f02280fb394.png

When you see this 100% screen you've successfully uploaded your data.

[image: image] https://cloud.githubusercontent.com/assets/4587826/5418583/5f857432-8211-11e4-9a55-9ff491a0fd2f.png Create corresponding style file layer in Mapbox Studio

Now you want to style that source layer so you can toggle it on your web page. In Mapbox Studio, make a new New Project and select any New Style you want, we are just going to delete all the code anyway. Save the new style and name it appropriately for your data layer.

Select Layers tab, then click Change Source. You should be able to find the Source file you just create by the Name you gave that file. Select it and it will populate the input box as your source. Click Apply .

[image: image] https://cloud.githubusercontent.com/assets/4587826/5422861/cab7db26-8268-11e4-9291-e34028750dae.png

Now, delete all the code and add the code below where #points is the name of the layer in your data set. If you don't know the name of the layer, click the Layers tab and it will be listed there.

Map { background-color: transparent; }

points {

marker-fill: red; }

[image: image] https://cloud.githubusercontent.com/assets/4587826/5422874/12571546-8269-11e4-9856-204ae689f3f7.png

Save this file and you should see your points plotted over a transparent background.

[image: image] https://cloud.githubusercontent.com/assets/4587826/5422877/32f5f83a-8269-11e4-81a1-78f59aa7d98f.png

If you do not see your points, you may not be looking over the right area or zoomed in close enough. There is a search button at the top left in the UI, you can enter City, ST (2-letter state initial) and it will take you to that location on your map. You may need to zoom in a few clicks to see the data better. Make sure you save your file on that zoom so when you open this file again you will be in that same location.

[image: image] https://cloud.githubusercontent.com/assets/4587826/5422886/87700112-8269-11e4-8441-40f0c15d7795.png

Now your Style file is ready to upload to Mapbox.com. Do so by selecting Settings > Upload to Mapbox.

[image: image] https://cloud.githubusercontent.com/assets/4587826/5422888/a0530eae-8269-11e4-9ed2-4dd0f49b16fb.png Add MapID to your .js on your web page

The resulting mapID will work as a layer to add to your .js file.

[image: image] https://cloud.githubusercontent.com/assets/4587826/5422893/ddec85ba-8269-11e4-8e16-c8e3262c24aa.png

Also, consider setting your setView to a close zoom on your target location. I've set it to zoom level 15 right over Baltimore, MD, 39.2877,-76.6172.

var map = L.map('map').setView([39.2877,-76.6172], 15);

Extra bells and whistles

Find more ways to style your data points under the Docs tab, points and markers

[image: image] https://cloud.githubusercontent.com/assets/4587826/5422911/9ede5ac8-826a-11e4-9677-d477ff137f9f.png

Add by styling [title] variable

[image: image] https://cloud.githubusercontent.com/assets/4587826/5422954/80ea38ea-826d-11e4-8f3c-659289c3006f.png

points {

marker-fill: red; ::label { text-name: '[title]'; text-face-name: "DIN Offc Pro Medium"; text-size: 12; text-fill: darken(red,25); text-allow-overlap: true; text-dy: -14; text-transform: uppercase; } }

[image: image] https://cloud.githubusercontent.com/assets/4587826/5422975/15ad7dfc-826e-11e4-8437-281d356f0724.png

— Reply to this email directly or view it on GitHub https://github.com/Karahmel/Blog/issues/2#issuecomment-66877634.

[Karahmel]

More emails from me!

I went through the process with some false data points just to make sure I understood, but I'm stuck at the point where I'm supposed to upload the typed map to mapbox. See image. Also, if I am forced to make layers this way, are all the neighborhood outlines going to have to be the same color? We decided with Ian to color them so that they look distinct but not to have the colors stand for anything. Is there a way to keep the polygon colors I dictated in Editor? And what about the text we've put in to describe the markers, does that data come with the layer? That's where most of our map information is going to live.

[amyleew]

@Karahmel So... I had a similar issue with mapbox.com/editor unfortantely. I'm not sure what's going on with it either. BUT .... I figured out a hack! :eyes:

First go to your mapbox.com/projects page, then launch the corrupted map.

Next you need to view source of the web page with the map embedded. I am using Chrome so from the top bar I select, View > Developer > View Source.

Looking at the .html for the page, find the data javascript code and copy the entire string and paste it into a new browser window.

At first you will see an error...

You need to remove the extra backspaces in the URL like so...

Hit enter and you got your JSON data! Just save this to your desktop and move on to the next step.

[Karahmel]

Cool! I've got the data now, thanks. Does that mean I can't add to it anymore? I'm really bummed because the data looks so cool in mapbox but then it's a little lackluster just as points on the final map. And all that info we had in mapbox in the description is gone. I think Amal and I are at the point where we need to let go of our original vision a bit because technology is not working with us.

On Sat, Dec 13, 2014 at 5:43 PM, Amy Lee Walton notifications@github.com wrote:

@Karahmel https://github.com/Karahmel So... I had a similar issue with mapbox.com/editor unfortantely. I'm not sure what's going on with it either. BUT .... I figured out a hack! [image: :eyes:]

First go to your mapbox.com/projects page, then launch the corrupted map. [image: image] https://cloud.githubusercontent.com/assets/4587826/5425641/6a3e02e4-82ee-11e4-94d3-8349dcf4253a.png

Next you need to view source of the web page with the map embedded. I am using Chrome so from the top bar I select, View > Developer > View Source.

[image: image] https://cloud.githubusercontent.com/assets/4587826/5425644/9fb0166a-82ee-11e4-9823-7ed3675cde54.png

Looking at the .html for the page, find the data javascript code and copy the entire string and paste it into a new browser window.

[image: image] https://cloud.githubusercontent.com/assets/4587826/5425660/030e349e-82ef-11e4-8059-81a1a379eea8.png

At first you will see an error...

[image: image] https://cloud.githubusercontent.com/assets/4587826/5425664/1c657a9c-82ef-11e4-921a-9aa35e11baeb.png

You need to remove the extra backspaces in the URL like so...

[image: image] https://cloud.githubusercontent.com/assets/4587826/5425672/5168b38a-82ef-11e4-8ae0-912481474f84.png

Hit enter and you got your JSON data! Just save this to your desktop and move on to the next step.

[image: image] https://cloud.githubusercontent.com/assets/4587826/5425676/88abc08a-82ef-11e4-8fc3-2c44f4abbc71.png

— Reply to this email directly or view it on GitHub https://github.com/Karahmel/Blog/issues/2#issuecomment-66894567.

[amyleew]

@Karahmel I'm not seeing any of the images you are attaching. Are you adding them to the Github page? If not, you have to paste them into the comment box or they will not show up.

I'm stuck at the point where I'm supposed to upload the typed map to mapbox. See image.

Not sure what you are experiencing... send a screenshot and tell me at what point you are in the process.

neighborhood outlines going to have to be the same color

You can alter the color of the neighborhood outlines in Mapbox Studio using filters. It will look very similar to this example below. You are essentially saying whenever the variable neighborhood is "whatever" make the polygon-fill: red; are whatever color you choose. Read up on it on the Styling Selectors page under Filter selectors.

And what about the text we've put in to describe the markers, does that data come with the layer?

That data is still available and you can pull it out as I outlined in this comment under the Bells and Whistles heading

[Karahmel]

Okay I'll play around with it more. I'm sorry we're doing so much of this last minute and demanding so much last minute help. Thanks! I'll work on it tonight and see how much I can figure out, then likely ask more questions tomorrow. Thanks!

On Sat, Dec 13, 2014 at 5:54 PM, Amy Lee Walton notifications@github.com wrote:

@Karahmel https://github.com/Karahmel I'm not seeing any of the images you are attaching. Are you adding them to the Github page https://github.com/Karahmel/Blog/issues/2? If not, you have to paste them into the comment box or they will not show up.

I'm stuck at the point where I'm supposed to upload the typed map to mapbox. See image.

Not sure what you are experiencing... send a screenshot and tell me at what point you are in the process.

neighborhood outlines going to have to be the same color

You can alter the color of the neighborhood outlines in Mapbox Studio using filters. It will look very similar to this example below. You are essentially saying whenever the variable neighborhood is "whatever" make the polygon-fill: red; are whatever color you choose. Read up on it on the Styling Selectors https://www.mapbox.com/mapbox-studio/styling-selectors/ page under Filter selectors.

[image: image] https://cloud.githubusercontent.com/assets/4587826/5425707/63c414ce-82f0-11e4-8b84-5e5507ff7ced.png

And what about the text we've put in to describe the markers, does that data come with the layer?

That data is still available and you can pull it out as I outlined in this comment under the Bells and Whistles heading https://github.com/Karahmel/Blog/issues/2#issuecomment-66877634

— Reply to this email directly or view it on GitHub https://github.com/Karahmel/Blog/issues/2#issuecomment-66894884.

[amyleew]

Does that mean I can't add to it anymore?

@Karahmel You can add more points but in GeoJSON... I would use the http://geojson.io it's kind of advance but I think you can handle it. Just take the JSON file you downloaded and choose Open > file to open with all the points and data.

I'm really bummed because the data looks so cool in mapbox but then it's a little lackluster just as points on the final map. And all that info we had in mapbox in the description is gone. I think Amal and I are at the point where we need to let go of our original vision a bit because technology is not working with us.

You still have the data and can style it in Mapbox Studio but maybe considering a different approach is smart right now since time is running out.

You can use the layer toggle concept and add the title and markers with color in Mapbox Studio. All the notes on this ticket are all you need to get that done. Maybe think about the best way to achieve your map concept at this point. What's more important and focus on getting that accomplished. Maybe it's colored markers, maybe it's labels maybe it's both. Make sense?

I'm glad to help... happy you guys are working so hard on this! :+1: