INQ241A - Day 17 Notes

Map

TouchDevelop can display maps

page main ()
initialize
  ◳ map := maps → create full map
display
  boxed
    ◳ map → post to wall
  end boxed
end page

You can change the size of the map by changing the size of the box it is in

page main ()
initialize
  ◳ map := maps → create full map
display
  boxed
    ◳ map → post to wall
    box → set height(20)
    box → set width(20)
  end boxed
end page

But the map is centered on somewhere in the Atlantic Ocean
You can use the tools on the map to zoom out and pan to verify

Location

To do more with maps you need to create locations

For example, to change where the map is centered

page main ()
initialize
  ◳ map := maps → create full map
  var location := locations → create location(0, 0)
  ◳ map → set center(location)
display
  boxed
    ◳ map → post to wall
    box → set height(20)
    box → set width(20)
  end boxed
end page

But this didn’t change anything
Because the map was originally centered at (0, 0)
That is latitude=0 longitude=0 which is somewhere in the the Atlantic Ocean
To change this to somewhere else just change the numbers
Recall, latitued is how far north or south, where 0 is equator, 90 is the north pole, and -90 is the south pole
Also recall, longitude is how far east or west, where 0 is the Prime Meridian which passes through Greenwich England, 180th meridian passes through the Pacific Ocean, positive longitues are east of the Prime Meridian, and negative longitures are west of the Prime Meridian.
Try playing with the latitude and longitude to center the map on us
An easier way is to use Google maps, the url will show the latitude and longitude.

Or can center the map on the user’s current location

page main ()
initialize
  ◳ map := maps → create full map
  var location := senses → current location
  ◳ map → set center(location)
display
  boxed
    ◳ map → post to wall
    box → set height(20)
    box → set width(20)
  end boxed
end page

If your are running your script on a computer, the web browser will ask for permission to share your location which is estimated using your IP address

You can also set the zoom of the map

page main ()
initialize
  ◳ map := maps → create full map
  var location := senses → current location
  ◳ map → set center(location)
  ◳ map → set zoom(21)
display
  boxed
    ◳ map → post to wall
    box → set height(20)
    box → set width(20)
  end boxed
end page

The zoom is a number from 1 (out) to 21 (in)

Pins

You can add pins to the map using locations

page main ()
initialize
  ◳ map := maps → create full map
  var location := senses → current location
  ◳ map → add text(location, "Here", colors → accent, colors → white)
  ◳ map → set center(location)
display
  boxed
    ◳ map → post to wall
    box → set height(20)
    box → set width(20)
  end boxed
end page

A text pin needs a location, text, and the colors of the pin

Directions

It’s also possible to get directions

page main ()
initialize
  ◳ map := maps → create full map
  ◳ map → set center(senses  → current location)
display
  boxed
    ◳ map → post to wall
    box → set height(20)
    box → set width(20)
  end boxed
  boxed
    "Get Directions" → post to wall
    box → set border(colors → foreground, 0.1)
    box → on tapped(handler)
      where handler() is
        var to := locations → create location(7.2952117, -80.0530925)
        var from := senses → current location
        maps → directions("", from, "", to)
      end
    end
  end boxed
end page

Activity

Activity 17