# Map of Places explainer

#1

The aim of this puzzle: Add the places to the map by using the `drawOnMap` function.
Walkthrough of the solution: When the starter code runs, you see that there is a blank grid. You need to add each place from `arrayOfPlaces` on the map using the `drawOnMap` function. There’s already a `for...of` loop set up for you to use. It runs through all the places, but you need to make sure it does something with them – draw them on the map using `drawOnMap(...)`. What arguments does the function take – what goes in the parentheses? If you look at the function definition, you’ll see `drawOnMap` asks for an `x`, `y`, and `color` value. So, if you’re given a `place` object from the array, how to you access its `x`, `y`, and `color` value? By using member expressions – the property name with a dot before it. That means `place.name` would give you the name of the place, and `place.color` will give you the color, and so on. Now if you run the code again, there will be part of a black circle in the top left corner of the map. That’s because the `drawOnMap` function wasn’t completed – it doesn’t use its parameters: `x`, `y`, and `color`. You want to make sure the `.attr()` for `cx` is set to `x`, `cy` is set to `y`, and `fill` is set to `color`. Then, everything should work!
Sample code solution:
(Tap below to reveal)

``````var arrayOfPlaces = [
{
name: 'mall',
x: 240,
y: 160,
color: red
},
{
name: 'home',
x: 50,
y: 70,
color: blue
},
{
name: 'gym',
x: 100,
y: 140,
color: yellow
},
{
name: 'work',
x: 180,
y: 30,
color: white
}
];
function drawOnMap(x, y, color) {
var newPoint = svg.append('circle')
.attr('r', 8);
newPoint.attr('cx', x)
.attr('cy', y)
.attr('fill', color);
}
for (var place of arrayOfPlaces) {
drawOnMap(place.x, place.y, place.color);
}
``````

JavaScript Concepts: Code Block (function, for loop), Chaining, D3 Library, D3 Modifiers
D3 Concepts: .append(), .attr(‘r’,), .attr(‘cx’,), .attr(‘cy’,), .attr(‘fill’,)
Additional Code: There is hidden code that runs before the puzzle’s code that creates the grid.

Can not pass map of places
#2

I am stuck on the last part of Map of places. I can’t figure out where to put my attr.

#3

Hey @Stoked,

Do you want to share a screenshot of your code? That why we can try give some pointers on where to make adjustments?

H

#4

#5

Hey @Stoked,

You don’t need any `attr()` calls inside your for loop. Instead, you just need to call the `drawOnMap()` function and add arguments for `x`, `y` and `color`.

Since you’re looping through the array `arrayOfPlaces`, each element you’re looping through is an object. For each object, you want to draw that point on the map, so you’ll need it’s `x` value, it’s `y` value and it’s `color` value and pass those to `drawOnMap()`.

To access an objects property you can use dot notation, so inside your for loop the code should look something like: `drawOnMap(place.x, place.y, place.color)`.

H

#6

I’m still stuck. I can’t figure out how to paint the objects on the grid. This is all I have so far.

#7

It is not working because you have used ‘quotes’, which are used for calling a string. You want an object, so no quotes. Otherwise looks great!
use place.x
not ‘place.x’

#9

hi I am stuck… on maps of places… I reveled answer and I had it exactly like the answer… help!

#10

If you’re still stuck, please attach a screenshot.

–Scott.

#11

Not stuck anymore… actually completed the a few days ago… fun app… good learning experience!

#12

Hi there, I have the same code as the sample code (except for the names and colors I chose) and it works. But the app keeps telling me this: (see scree shot)

#13

That feedback will show up if you have not enough place objects, or if there is an item in the array that isn’t a “proper place”. A proper place in this puzzle must have:

• A `name` that is a string or number
• `x` between 0 and 400, but not including those numbers
• `y` between 0 and 400, but not including those numbers
• `color` chosen from: `red`, `yellow`, `white`, `black`, and `blue`.

–Frankie

#14

Hi Frankie, thanks a lot for your feedback - I changed the purple color but it still doesn’t work. I know the problem must be obvious but I haven’t been able to find it… Here’s what my code looks like (I can only post 1 image at a time):

#15

That’s it for the objects in array0fPlaces

#16

The puzzle is looking for the color to be an identifier instead of a string literal – `blue` instead of `'blue'`. Your object is okay, it’s just the check being too picky. If you change your color values to use the variable names instead of the direct strings it should work. I’ll make sure this puzzle gets updated to allow color values to be literal strings. Thanks for letting us know!

–Frankie

#17

It works now, thanks a lot!

#18

Hi! I’m not sure if notation mechanism was introduced in this course. It’s a bit tricky to reproduce place.x. If you have the same issue: first choose ‘place’ as attribute of drawOnMap function, then tap again to introduced ‘place’ and choose ’ .x’ - > you will get ‘place.x’ finally as attribute!

Then repeat the same for y and color.

#19

… n i am pretty sure it looks the same but still doesn’t have colored circles

#20

Hey @Chewier_Devin,

Can you share a screenshot of your code so we can give you pointers?

Thanks,
Heather

#21

My instructions say to add place.x, place.y, and place.location.

Is there a valid reason for the solution to be place.color? How would one know to use place.color, other than going to the solution?