Best programming language to make a fill-in map?
October 19, 2013 1:04 PM Subscribe
How would I go about programming a map which would fill-in an area with color when a question was answered correctly?
So, I know jack about programming. But I have a minor obsession with answering geography quizzes on sporacle. Their map-based questions are kind of for shit, though --- when you answer a question correctly, the corresponding country/state name appears on the map, but a lot of times when smaller countries are smooshed together, the result is a confusing mishmash. I've been looking for a similar type of quiz where, when questions are answered correctly, the area is colored in on the map, but I've been unable to find anything like that. It made me wonder how difficult it would be to make such a thing.
It didn't seem like it would be ridiculously difficult, and I thought it might be an interesting opportunity to tinker around and teach myself something new. So, what kind of programming language would I have to teach myself to make such a thing?
So, I know jack about programming. But I have a minor obsession with answering geography quizzes on sporacle. Their map-based questions are kind of for shit, though --- when you answer a question correctly, the corresponding country/state name appears on the map, but a lot of times when smaller countries are smooshed together, the result is a confusing mishmash. I've been looking for a similar type of quiz where, when questions are answered correctly, the area is colored in on the map, but I've been unable to find anything like that. It made me wonder how difficult it would be to make such a thing.
It didn't seem like it would be ridiculously difficult, and I thought it might be an interesting opportunity to tinker around and teach myself something new. So, what kind of programming language would I have to teach myself to make such a thing?
Yeah, HTML/Javascript would probably be the easiest way to go, I've had good luck with leaflet.js and also with Mapbox which is built on top of leaflet.
posted by Static Vagabond at 1:17 PM on October 19, 2013
posted by Static Vagabond at 1:17 PM on October 19, 2013
If you want to learn a language where quick visual results are important, I'd recommend Processing. It has libraries (1, 2) which make reading shapefiles simple.
posted by scruss at 2:28 PM on October 19, 2013
posted by scruss at 2:28 PM on October 19, 2013
Response by poster: Thanks for all the answers so far. I shall play around with these and come back.
posted by Diablevert at 9:14 PM on October 19, 2013
posted by Diablevert at 9:14 PM on October 19, 2013
D3 is amazing, and I'm currently really into it, but it is kinda in the deep end. A lot of experienced programmers struggle with it. That said, if you go through the above links and get what you want happening, that is awesome; problem solved.
If they end up leaving too many gaps between A and B, so to speak, you might want to back up and learn about JavaScript basics.
However, reading general tutorials can seem horribly abstract and like it's not moving you toward a solution. So, another way to go about it is to think about the steps involved —
1. Find or draw SVG data for the geographic entities you want to show. (SVG is scalable vector graphics, like in Adobe Illustrator. Vector graphics let you zoom in on small, detailed shapes.)
2. Present those SVG elements in an <svg> element on a web page.
3. Respond to a click by changing the fill attribute of a specific SVG element (representing a geographic region).
— and google techniques for doing each one. Then, go back to the tutorials when you think a technique explanation is assuming you know something you don't know. Then, you'll be reading to find out X or Y, and maybe it'll be easier to keep reading. I know that makes reading that kind of thing easier for me, personally.
posted by ignignokt at 7:23 AM on October 20, 2013
If they end up leaving too many gaps between A and B, so to speak, you might want to back up and learn about JavaScript basics.
However, reading general tutorials can seem horribly abstract and like it's not moving you toward a solution. So, another way to go about it is to think about the steps involved —
1. Find or draw SVG data for the geographic entities you want to show. (SVG is scalable vector graphics, like in Adobe Illustrator. Vector graphics let you zoom in on small, detailed shapes.)
2. Present those SVG elements in an <svg> element on a web page.
3. Respond to a click by changing the fill attribute of a specific SVG element (representing a geographic region).
— and google techniques for doing each one. Then, go back to the tutorials when you think a technique explanation is assuming you know something you don't know. Then, you'll be reading to find out X or Y, and maybe it'll be easier to keep reading. I know that makes reading that kind of thing easier for me, personally.
posted by ignignokt at 7:23 AM on October 20, 2013
I agree with ignignokt that D3 is "in the deep end," but you might want to at least look at this D3 choropleth example.
posted by callmejay at 12:48 PM on October 21, 2013
posted by callmejay at 12:48 PM on October 21, 2013
« Older Email current page as attachment? | What are these things that came with my laptop bag... Newer »
This thread is closed to new comments.
posted by jeb at 1:13 PM on October 19, 2013