DEV Community

Cover image for Where in the World Am I?
JoeStrout
JoeStrout

Posted on

Where in the World Am I?

There are so many fun things you can do with web services, and most of them are trivial to use in Mini Micro. Today, let's use a couple of these together to plot your location on a map of the world!

Finding Your Place In the World

...begins by finding your external (or public) IP address. This is the Internet Protocol address by which you are seen on the internet, outside your local network. It's probably different from your internal (or private) IP address, which is what probably appears when you look at the network settings on your computer. We don't care how your computer is known to other computers in your house or neighborhood; we only care how packets are routed to it from the great wide world beyond. Fire up Mini Micro (available free here, and type:

http.get("https://api.ipify.org")
Enter fullscreen mode Exit fullscreen mode

This should return an IP address, something like 66.212.203.27.

Now, to get information about that IP address, including the city it's in and an approximate latitude/longitude, we'll use a different web service:

http.get("http://ip-api.com/json/66.212.203.27")
Enter fullscreen mode Exit fullscreen mode

You can replace the IP address above with whatever you got from the first query. The result will be a string of JSON code that contains your city, region, country, latitude, and longitude, along with the name of your internet service provider (ISP) and other details.

Putting this all together into a little program. Use edit to enter the code editor, then paste in the following:

import "json"
import "stringUtil"
clear

// What's my external IP address?
myIP = http.get("https://api.ipify.org")

// And where am I?
locJson = http.get("http://ip-api.com/json/" + myIP)
locInfo = json.parse(locJson)

pprint locInfo
print "You are in {city}, {region} ({country})".fill(locInfo)
Enter fullscreen mode Exit fullscreen mode

Run this, and it should tell you where you are (along with all those other details). Neat, right?

Don't Tell Me, Show Me!

But we can make it more fun. Let's pinpoint you on a map of the Earth! edit your program again, delete the last two lines (pprint and print), and add in this additional code:

mapImage = file.loadImage("/sys/pics/earth_day.jpg")

// Find the pixel coordinates of our lat/long in this image
px = (locInfo.lon + 180) / 360 * mapImage.width
py = mapImage.height - (90 - locInfo.lat) / 180 * mapImage.height

// Draw a marker (using an offscreen PixelDisplay)
g = new PixelDisplay
g.clear color.black, mapImage.width, mapImage.height
g.drawImage mapImage
g.line 0, py, g.width, py, "#00FFFF88", 3
g.line px, 0, px, g.height, "#00FFFF88", 3
g.fillEllipse px-10, py-10, 20, 20, "#00FFFFFF"
g.drawEllipse px-15, py-15, 30, 30, "#00FFFFAA"
g.drawEllipse px-20, py-20, 40, 40, "#00FFFF88"
markedMap = g.getImage(0, 0, g.width, g.height)

// And draw the mapImage, fit to the screen!
scale = 960/mapImage.width
gfx.drawImage markedMap,
  480 - mapImage.width*scale/2, 320 - mapImage.height*scale/2,
  mapImage.width*scale, mapImage.height*scale

s = "{city}, {region}, ({countryCode})".fill(locInfo)
text.row = 2
text.column = 34 - s.len/2
print s
Enter fullscreen mode Exit fullscreen mode

The result, if you happen to be my neighbor right now, should look like this:

World map with Tucson pinpointed

The trick here is knowing that the map image uses a standard equiprectangular projection, where longitude and latitude both map linearly to x and y. That lets us convert from lat/long to pixel coordinates with some reasonably simple math. Most of the code above is then drawing the pinpoint lines and circles on top of the map.

(Note: if you are reading this in the future and live somewhere other than Earth, this code will need adjustment.)

Now in Animated 3D!

Let's take it one step further: combine what you've done so far with the globe demo! Follow these steps:

  1. Save your program, if you haven't already.
  2. edit "/sys/demo/globe" to load the globe demo code.
  3. Select All (^A) and then Copy (^C).
  4. Exit the editor, then edit your program.
  5. Scroll to the bottom, and Paste (^V).
  6. Find the line (at the top of the pasted code) that says bigMapImg = file.loadImage("/sys/pics/earth_day.jpg"), and change it to just say bigMapImg = markedMap instead.

That's it. Now run your program, and you should see your location on a beautiful rotating globe.

Globe animation with Tucson pinpointed

Never Be Lost Again

The http module is an often-overlooked gem in the Mini Micro APIs. With one little call we can get our external IP address, and with a second little call, get all sorts of information about that, including the info we need to place ourselves on a map. We also looked at how you are able — nay, encouraged! — to steal from the demo code and make it your own.

What do you think of this? Let me know in the comments below!

Top comments (0)