Notes from Dynamicland: Geokit

Hey ___,

I do know you’ve got been interested by among the stuff I’ve finished at
Dynamicland. It is likely to be some time till you
could make it out right here and go to in particular person, so I will attempt to clarify one
venture of mine, Geokit, from prime to backside, to offer you among the
taste.

I will focus on what Geokit truly is and what you do with it
first, after which I will clarify the way it’s made. That clarification may
enable you to perceive how individuals make issues in Dynamicland in
basic. It is the form of element that is not lined within the zine or on
the Dynamicland web site.

I type of hope you learn this, come right here your self, and reimplement
Geokit higher.

What Geokit is

Geokit is a ‘package’ or ‘library’ for constructing and viewing maps.

One Dynamicland researcher, Luke
Iannini, writes about his experiences
with Geokit:

The actual property group that owns the constructing Dynamicland lives in
makes use of their buying energy to affect the town to enhance
infrastructure to the underserved areas of Oakland they develop
in. The pinnacle of this initiative was visiting the area, and he or she
started describing her work whereas we have been gathered across the lunch
desk, which occurred to have Geokit unfold throughout it
Oakland. With out breaking the circulate of dialog, I dealt the
transit card to show the bus routes, and he or she grabbed the “zoom
and pan dial” ^{with none instruction to zoom in on a portion
of West Oakland — noticing an enormous gap in route protection she’d by no means
seen earlier than the place she knew there have been tons of working households. We
spent the following quarter-hour exploring as she taught me extra in regards to the
metropolis’s transit particulars than I ever knew I needed to know.}

In one other case at a celebration I discovered that an individual I’d simply met grew
up in the identical metropolis as me (Tucson, AZ) when she looked for it to
print it out, and we then bonded deeply over trying on the
extremely stark racial divisions in North and South Tucson that we
knew from expertise however had by no means seen specified by uncooked information.

I’ve by no means had experiences like these in some other medium. Buildings
don’t are likely to have detailed racial, transit and elevation maps of
each metropolis within the US on the partitions. In concept you may pull this
information up in your private iPad, praying there aren’t any embarrassing
notifications and hopefully remembering what you have been even going to
have a look at by the point you’re previous the lock display 24
rainbow-gradient icons and pink bubbles, however I’m personally not in
the behavior of pulling out my units in the midst of events. In
each of those instances these just-dynamic-enough maps have been locations at
the get together, identical to the appetizers desk and the piano, the place
individuals might casually collect, play and converse.

Geokit lives on a shelf when it isn’t in use, so I will take it off the
shelf and lay it out on a desk:

Geokit in motion

I will pull up a map of San Francisco and zoom into Dolores
Park.

I will begin by typing into the “Geomap above from place search” web page,
which turns the large clean web page above it right into a map.

Should you have been right here in particular person, I would hand you the keyboard, and I wager
you’d need to sort your hometown in. However I will simply use San Francisco.

OK, now I need to zoom in to the park. I’ve a device for zooming, the
“Map magnifier with IR (infrared) dial” web page (the smaller web page on the
proper). After I put that web page on the desk, it turns into a zoomed-in
‘inset map.’

I additionally should put this rotating dial on the massive map of SF, which
controls each the placement and zoom degree of the inset map. Shifting the
dial pans the inset map, and rotating the dial zooms it in and
out. With the ability to
directly
transfer the map place is absolutely satisfying.

On this subsequent clip, I put the dial down after which pan over and zoom the
inset map to Dolores Park within the Mission.

Now I am interested by this a part of the neighborhood. How numerous is
it? How has it modified over time? Are there stark dividing strains?
I will apply some information layers: a color-coded demographic map (“racial
dot map”), after which road
strains and labels on prime so the map is extra comprehensible. I level
them on the massive map first, then level them on the zoomed map (simply to
present that each work).

Try how the west (towards Castro) is bluer on the inset map,
whereas the east (towards Mission) is extra orange. ^{Think about
having a number of individuals on the desk: every particular person might need their
private view on smaller pages, however the desk can all share the massive
map on the heart.}

Zoom lenses

To be trustworthy, this entire venture began with a very clear
image I had in my head. I needed to make zoom
lenses, the place you may level a lens at a map to zoom into it, then
level a lens at that lens… so I need to present you these lenses now.

You’ll be able to see me enjoying with the OpenPTMap (public transport) tilelayer
as I mess with zoom, making use of it right here and there at varied zoom ranges
(it propagates down from wherever I put it). The layer reveals some bus
strains, in addition to the J-Church gentle rail line. ^{I am
attempting to get the flexibility of those instruments throughout to you: layers
work in all places and zoom works in all places, and you’ll pull a device out
and use it wherever and everytime you need.}

Here is my play on Powers of
Ten in Geokit:
ranging from the Earth, I apply a zoom lens, then a lens to that
lens, and so forth, till I get right down to our neighborhood in Oakland.

I may even print a map. I’ve a printed map of San Francisco right here,
for example. I take advantage of precisely the identical instruments on this printout: I have a look at
public transit strains, then demographics, then I zoom and pan round
east of Golden Gate Park.

Even when Geokit is not drawing any tiles on a map and it is only a
printout, it is nonetheless a totally functioning map.

I have been utilizing San Francisco for example, however I might have entered
anywhere on the earth, and every part would have labored precisely the
identical.

The one-page ‘engine’ web page makes all these maps and instruments work, and
that little engine would not must know something in regards to the stuff constructed
above it. Mainly, the engine takes a web page representing some
geographic coordinates, and it attracts some map tiles from the Web
on prime. I will present the way you may construct that engine from scratch right here in
Dynamicland, step-by-step.

All of the elements

These are all of the ‘recreation items’ contained in the package. Every web page is each a
little laptop program and an object that individuals and different pages
can see and work with. Some pages are face-down, however most of them are
face-up, which implies they’re operating proper now. (Face-up is the facet
with the coloured dots.)

You typically level one web page at one other to make it do one thing, like
how the zoom lens factors on the printed map, or how the keyboard
factors on the textual content field which factors on the massive map.

We now have a number of methods to get a map of a spot:

• ⌨️sort a spot title into the textual content field to seek for it
• use a premade map like my 📄 printed map of SF
• apply the 🔍 zoom lens to an present map: the lens turns into a zoomed-in map
  of the inexperienced area it factors at
• use the 🎛 zoom & pan dial (‘loupe’) web page on an present map: it zooms into
  wherever the dial is, and also you rotate the dial to vary the zoom
  degree

These elements are those within the package proper now, however anybody right here can
make new elements: you may come right here and write up a brand new form of
tilelayer or a brand new strategy to make maps.

That is why I name Geokit a package and never an utility: it is naturally
extensible. You can come right here, pull a keyboard off the shelf, level
it at any a part of Geokit, and simply begin enhancing it and printing new
stuff to your personal use. You may present a brand new tileset to reply some
query you’ve, or give you a brand new zoom mechanism to derive
maps. (I will clarify learn how to do each of these issues on this writeup!)
You’ve the identical standing that I do, and you do not have to open your
laptop computer and obtain and recompile some supply code if you wish to
change one thing.

Background on Realtalk

Dynamicland is a spot – a land – in
Oakland, California.

Realtalk is the programming
system that runs inside Dynamicland. It features a superset of the
Lua programming
language. You
do ‘pure’ computation in Lua, however you employ particular Realtalk extensions
to do all communication with different pages and with the surface world.

The Realtalk ‘working system’ already is aware of about some needs as
a part of its commonplace library, so we will say issues like Want (you) is labelled "Bella". and Want (you) is highlighted "inexperienced". and so they
work straight away. However we will additionally make up our personal claims and desires:

-- Made-up declare demo
Declare (you) blahblahblah.

-- Made-up declare when demo
When /web page/ blahblahblah:
    Want (web page) is highlighted "blue".
Finish

Why is “Made-up declare demo” highlighted in blue? What’s going to occur if I
flip “Made-up declare when demo” face-down?

Realtalk and the remainder of Dynamicland

I am primarily going to debate Realtalk right here, so I am writing in a type
that can look nearly like some other tutorial about learn how to do a
programming venture.

I am not going to speak in regards to the social experience of
Dynamicland,
the group, or issues explicit to the bodily lab, however these
issues are integral to the Dynamicland idea! Information switch in
Dynamicland normally occurs these methods, not by means of writing like
this. I simply assume others can do a greater job of describing these
issues, and I need to fill the hole of documenting ‘programming.’
Try @Dynamicland1 on Twitter
for a broader view.

Making Geokit

I will begin by making a map web page representing San Francisco, a map
web page which will not truly do something at first.

Then I will construct up the Geokit ‘engine’, which is a few web page of code,
in 4 steps. (The engine will make the map web page work.)

1. A starter three-line Geokit ‘engine web page’ that simply paints that map blue.

2. A greater engine which downloads a map tile from OpenStreetMap and
   shows it.

3. Assist for a number of tile layers, from completely different sources, on one
   map.

4. Stitching a couple of tile collectively to get precisely the correct map
   view to suit the map web page’s space.

A map web page that does not do something (but)

First, I will make a San Francisco map web page for Geokit to behave on.

I need to make a declare that my map web page represents the geographical
space of San Francisco, in order that Geokit is aware of it is supposed to attract San
Francisco on it. I will sort in a declare whose syntax I made up:
Declare (you) is geomap of bbox (... coordinates ...).

At Dynamicland, you make a brand new web page by

1. pointing a keyboard at an present web page another person wrote (ideally
   with code you need to reuse),
2. then patching its code in place to do what you need,
3. after which printing it out.

I will try this to make my map web page, though I am not maintaining any of the
unique code on this case. I additionally add a bunch of linebreaks so the
printout covers the entire web page.

Is that this a map? Effectively, it is a web page – a program, principally – which is
making a declare about itself. (See Tabitha Yong’s cheat sheet, proven
earlier, for extra about claims.)

-- San Francisco map
Declare (you) is geomap of bbox ({left=-122.527, backside=37.664, proper=-122.348, prime=37.851}).

You’ll be able to consider it as setting a dynamic ‘property’ that different pages
can see: “I declare I am a map representing the field with corners
(122.527° W, 37.664° N) and (122.348° W, 37.851° N).” (These
longitude-latitude pairs are, very roughly, the bounds of San
Francisco.)

You may make no matter claims you need, however there is no assure that
something will occur consequently. Proper now, no person cares about my
geomap declare, so the map is inert. However quickly, the Geokit ‘engine’ will
be querying for all of the pages that make that form of declare, and it
will give them map conduct.

1. Beginning on the ‘engine’ web page

Subsequent, I will begin constructing the Geokit ‘engine’, which is a separate
web page: it’s going to go searching for maps just like the one I simply made, then draw
on them.

My first try is a minimal take a look at to indicate how I can acknowledge
and act on maps: it colours all maps stable blue.

-- Geokit 1st strive: blue
-- On every geomap, attracts blue.

When /map/ is geomap of field /bbox/:

    Want (map) is highlighted "blue".

Finish

I am utilizing a want right here, which is a type of broadcast request for
one thing on the earth to be completely different: on this case, at any time when I see a
map, I want for it to be highlighted in blue.

Another web page occurs to note that want and fulfill it utilizing a
projector, however I don’t know or care about that
mechanism.
I am not addressing the want to anybody particularly. After I put this
web page along with the map, certain sufficient, the map turns blue.

To indicate you that the engine responds to each map, not only one, I
made a map of New York as properly. See for your self: it turns blue the
identical manner.

2. Drawing one map tile

OK. Now I need to draw actual map tiles from
OpenStreetMap as a substitute of
that placeholder blue. I will begin with one thing small: draw one
tile of SF at a set
degree of element, sufficiently big that it suits the web page.

I will present you (an abbreviated model of) how I edited our earlier
“paint maps blue” 1st try to ended up with this 2nd strive, which attracts
an precise map tile. I will present you the code subsequent, so don’t fret about
squinting to learn all of the code within the video. (The projection is far
clearer in particular person!)

I begin by altering "blue" to "orange" after which "pink" to indicate
you the way I can edit the web page in place. Then I lengthen the code in order that
it downloads and attracts a hard-coded tile at (11, 327, 791), which is
San Francisco. Lastly, I make the code extra basic. I copy and paste
the utility operate deg2num from one other web page, which I take advantage of to
compute a tile based mostly on the bbox encoded within the map web page, together with
a drawing dimension for that tile based mostly on the web page’s bodily peak and
width. As soon as it really works, I print the web page out, so I’ve a everlasting,
bodily model.

This code is among the most ‘conventional’ and complex within the
entire package. Actually, it is a bit of unidiomatic to have a lot
‘regular’ code bunched collectively. It would not assist that it has to
interface with the surface world (the Web and filesystem).

You may begin by trying on the code block I highlighted, the When /map/ is geomap... block on the backside, which runs for every map on
the desk:

native URL_TEMPLATE = "https://tile.openstreetmap.org/%d/%d/%d.png"
native ZOOM = 11
When /map/ is geomap of bbox /bbox/,
     /map/ has width /width/, /map/ has peak /peak/:

    native xtile, ytile = deg2num((bbox.left + bbox.proper)/2,
                                 (bbox.prime + bbox.backside)/2,
                                 ZOOM)
    native url, path = get_tile_url_and_path(URL_TEMPLATE, ZOOM,
                                            math.flooring(xtile),
                                            math.flooring(ytile))
    native tilesize = math.min(width, peak)
    When tile URL (url) is downloaded to path (path):
        native sick = new_illumination()
        sick:picture { filename=path, scale=1,
                    x=0, y=0,
                    width=tilesize, peak=tilesize }
        Want (map) has illumination (sick).
    Finish

Finish

1. Have the When bind variables:

   • map: reference to the map web page
   • bbox: the left, proper, prime, backside coordinates of this geomap
   • width: the map web page’s usable width in inches (7.5)
   • peak: the map web page’s usable peak in inches (10)

2. Compute the geographic heart of bbox and use
   deg2num
   to search out the corresponding OSM tile coordinates xtile and ytile
   (327 and 791, respectively, on this case)

3. Assemble the URL https://tile.openstreetmap.org/11/327/791.png and
   the obtain path
   shared/geokit-tiles/https___tile_openstreetmap_org_11_327_791_png.png

4. Compute the tilesize at which to render the tile picture, which is
   the minimal of the web page width and peak. On this case, it is about
   7.5 inches.

5. As soon as the tile is downloaded^{, construct an illumination (the
   built-in graphics library) that pulls the tile picture. Then Want to
   draw that illumination on the map web page.}

I patched in some log statements to indicate you the stay values of
bbox, width = 7.491, peak = 10.001, xtile = 327, and ytile = 791:

3. Modular tile layers

I could make a ten-line change to the engine and get an enormous quantity extra
flexibility. As a substitute of hard-coding that URL_TEMPLATE = "https://tile.openstreetmap.org/%d/%d/%d.png" in Geokit, I will let
pages make Wantes to attract any tilesets from any URLs they need.

To let the person specify what layers to attract, I’ve made particular person
tilelayer pages. Every web page represents a layer: if you level a layer
web page at a map web page, the layer needs to attract that layer on the map.

Here is the supply code for the “Demographic dots tilelayer”, for
instance:

When (you) factors "up" at /map/:
    Want (map) reveals tilelayer
        "http://demographics.virginia.edu/DotMap/tiles4/%d/%d/%d.png"
        with choices ({max_zoom=13}).
Finish

I edited the engine in order that it responds to those Wantes, fairly than
searching for any geomap and drawing that hard-coded URL_TEMPLATE
from final time.

Listed below are all 4 tilelayers in motion on the San Francisco
map. Discover how I chain layers to place them on prime of one another!

And right here is the brand new engine web page:

This Third-try Geokit is sort of unchanged from the 2nd strive, aside from
this part, from line 34 right down to the additional clause in the important thing When
block that handles maps:

When /somebody/ needs /web page/ reveals tilelayer /url_template/ with choices /opts/,
     /web page/ needs /goal/ reveals tilelayer /one thing/ with choices /one thing/,
     web page ~= goal:
    opts = rt.desk(opts) -- Make a mutable copy of opts
    opts.precedence = 1 + (opts.precedence or 1)
    Want (goal) reveals tilelayer (url_template) with choices (opts).
Finish

native ZOOM = 11
When /somebody/ needs /map/ reveals tilelayer /url_template/ with choices /opts/,
     /map/ is geomap of bbox /bbox/,
     /map/ has width /width/, /map/ has peak /peak/:

Begin from the underside: the added When /somebody/ needs /map/ reveals tilelayer /url_template/ with choices /opts/ clause makes my
map-drawing code run individually, for each tilelayer want for every
map, fairly than operating solely as soon as for every map.

It binds url_template to regardless of the tilelayer web page stated, whereas I
had a hard-coded URL_TEMPLATE fixed final time. The tilelayer
page code makes a want like Want (map) reveals tilelayer "https://tile.openstreetmap.org/%d/%d/%d.png" with choices ({}).", which leads to url_template = "https://tile.openstreetmap.org/%d/%d/%d.png" and opts = {}.

The first When block (When /somebody/ needs /web page/ reveals tilelayer...), beginning on line 34, is absolutely fascinating. It is what
lets me put layers on prime of one another by chaining them. When a
tilelayer web page (somebody) is pointed at one other tilelayer web page
(web page), and that web page is itself pointed at goal, then
somebody‘s tilelayer want is ‘forwarded’ to goal, however with its
precedence boosted by 1 (larger precedence means drawn on prime, so
somebody‘s tilelayer will get drawn above web page‘s tilelayer). Meaning
{that a} tilelayer pointed immediately on the map is drawn on the backside, a
tilelayer pointed at that tilelayer is in entrance of it, and so
on. The outermost tilelayer is drawn on prime.

A observe on the Realtalk mannequin

Suppose you have been implementing this tilelayer manipulation in
conventional software program. You’d in all probability make a listing of tilelayers, with
(+) and (-) buttons. You may put a verify field subsequent to every
tilelayer. You’d should implement drag and drop, and also you’d should
deal with occasions each time the person reordered the
layers.

This step begins as an instance the ability of the Realtalk mannequin, in a
manner that I’ve tweeted about
before. Look
at how I’ve dealt with layers. Every layer is a web page, and you set the
layer down and level it to allow it and set its place. No person had
to implement a checkbox or deal with a drag occasion or synchronize an array
with a UI view.

After I first confirmed up at Dynamicland, I did numerous what I consider
as ‘conventional programming.’ Meaning utilizing a web page basically as a
laptop monitor: you hack out numerous Lua code, print it, and it
renders one thing cool on that web page. Possibly it takes enter based mostly on
completely different areas of the web page. I’ve seen programmers do that over and
over on their first publicity to the system, and I fell into it too: I
would say it took me about 4 months to know learn how to actually
reap the benefits of Realtalk.

A method to consider Realtalk is that numerous code within the exterior
world is about displaying lists and letting individuals decide from
lists.

• Mapping software program has to indicate a listing of layers, and make them
  checkable and uncheckable, and make them draggable, and deal with all of the
  occasions, and bear in mind what the state is.

• A photograph app reveals you a listing of pictures, and then you definitely open one, and
  then you definitely see a toolbox of operations you’ll be able to apply, and then you definitely decide
  one…

• Even command-line packages allow you to ask for a listing of supply branches
  or a listing of disk partitions or a listing of information or no matter, and have
  some set of subcommands you’ll be able to apply to your object of selection.

In Realtalk, most of that code falls away – offered that you just
signify your objects as particular person bodily pages. After getting
bodily pages, you robotically get the operations of the bodily
world: putting and selecting up objects, shifting and grouping objects
in area, pointing objects at one another, and so forth.

We now have a rule of thumb that no program ought to be longer than a web page
(73 strains!) When you have an extended program, you are in all probability doing
one thing mistaken, and it is best to cut up it up into little pages that
work collectively.

And there is a lighter rule of thumb floating round, that almost all code
ought to be ‘purple textual content’ – Whens and Declares and Wantes, which the
editor highlights in purple – not gobs of plain Lua code.

These guidelines recommend that there is a distinct Realtalk idiom, which is
very completely different from simply writing Lua for projectors and cameras. It is
one thing like objects or actors (the place the pages are objects), and
reactive programming, and reusing performance from the actual world
wherever attainable.

I do not declare that Geokit is a perfect instance: the engine web page is
fairly complicated, and even my use of the projector to render maps is
questionable, since any static map might have been printed
as a substitute. However the layer pages present a bit of little bit of this energy.

4. Becoming to precise coordinates

Lastly, I need to do away with that one-tile hack. If a map web page is
presupposed to signify the field with corners (122.527° W, 37.664° N) and
(122.348° W, 37.851° N), I would like it to show a map of that precise
space, not just a few close by tile picture that OpenStreetMap serves
up.

We have to work out the correct degree of element, get a number of tiles at
that degree, after which sew the map collectively.

I’ve made this engine improvement right into a GitHub
gist
as properly, so you’ll be able to have a look at the
revisions
to see how I received from step 1 to right here.

I’ve solely modified the underside When block from the earlier engine:

When /somebody/ needs /map/ reveals tilelayer /url_template/ with choices /opts/,
     /map/ is geomap of bbox /bbox/,
     /map/ has width /width/, /map/ has peak /peak/:

    -- Made-up formulation to guess a very good zoom from width of bbox.
    native zoom = math.log(360 / (bbox.proper - bbox.left)) / math.log(2)
    zoom = math.ceil(zoom + width/16 - 1) -- experimentally decided width issue
    native max_zoom = opts.max_zoom or 17
    if zoom > max_zoom then zoom = max_zoom finish
  
    native xtile_left, ytile_top = deg2num(bbox.left, bbox.prime, zoom)
    native xtile_right, ytile_bottom = deg2num(bbox.proper, bbox.backside, zoom)

    native tilesize = width / (xtile_right - xtile_left)

    for xtile=math.flooring(xtile_left),math.flooring(xtile_right) do
        for ytile=math.flooring(ytile_top),math.flooring(ytile_bottom) do
            native url, path = get_tile_url_and_path(url_template, zoom, xtile, ytile)
            When tile URL (url) is downloaded to path (path):
                native sick = new_illumination()
                sick:picture { filename=path, scale=1,
                            x=tilesize * (xtile - xtile_left),
                            y=tilesize * (ytile - ytile_top),
                            width=tilesize, peak=tilesize }
                Want (map) has illumination (sick) with precedence (opts.precedence or 1).
            Finish
        finish
    finish
Finish

1. Decide the zoom
   level
   zoom – larger zoom means more tiles are used to represent the
   same area. I
   ought to level out that there is no single appropriate zoom degree to
   draw a selected map: it will depend on how a lot element you need to
   present. You in all probability need larger zoom the upper your show
   decision is.

   Right here, I take the logarithm of (360 / the gap between the left
   longitude and proper longitude of the map), so a map overlaying a
   smaller geographical space will get larger zoom. Then I enhance the
   zoom by a bit, based mostly on the bodily dimension of the map web page (width / 16). For this San Francisco map, I find yourself with zoom = 11.

2. Compute the tilesize in inches at which to render every tile, such
   that the tiles precisely match the web page. ^{On this case, we get one thing
   like tilesize = 7.44 inches.}

3. Loop by means of all of the tiles and obtain and render every one, simply
   as we did after we drew a single tile beforehand.

With excellent match working, maps of various sizes additionally work
nice. Here is the New York map I made earlier.

I confirmed numerous instruments, like zooming and looking for locations by
title, initially; how do they work?

You’ll be able to implement all of them with out altering the engine in any respect. I
will not go into as a lot element about them – possibly another time – however
all of them basically come right down to the declare {that a} web page is geomap of bbox (...one thing...). I’ve used fixed coordinates for the
bbox up to now, however they will also be dynamic values, which is how we
get dynamic maps.

Zoom lens

The zoom lens is surprisingly easy to implement, and it was the
first device I made. Eager to make a zoom lens impressed the entire
venture, in any case.

The lens attracts the inexperienced rectangle on the map it is zooming into, then
computes a bbox so it will probably make its personal declare to be a geomap.

It inherits tilelayers from its mother or father, however scales their priorities
down so the person can simply put layers on prime. It additionally inherits
highlighted factors, that are an addon I will focus on subsequent.

Addons

I want some addons to help the remainder of the instruments.

Want (…) is geomap containing bbox (…)

This addon handles Want (...) is geomap containing bbox (...). It
lets a web page turn into a map of an space that does not precisely match its
side ratio. I will want this performance quickly, after I need to map an
arbitrary place that the person varieties in.

For instance, in case you have a web page with a 2:1 side ratio, however you
need to make web page a map of sq. San Francisco, you are able to do Want (web page) is geomap containing bbox (...SF coordinates...), and this
addon will give web page a declare for a wider bbox which nonetheless incorporates
San Francisco.

Should you already knew a bbox that matched the web page‘s 2:1 side
ratio, then you definitely would not want this want addon: you may merely make
the unique Declare (web page) is geomap of bbox (...). that we
applied within the engine.

Want (…) highlights geopoint (…) with label (…)

This addon handles Want (...) highlights geopoint (...) with label (...). You’ll be able to label particular locations on a map with this
Want.

Place search

Place search goes to Google Maps with no matter you typed, will get a
prompt viewport again, after which makes a Want (to the geomap-wish
addon from earlier) to assemble a map containing that viewport. It
additionally units the OSM tilelayer as a default.

Zoom and pan dial

This dial pan-and-zoom mechanic was prompt and applied by some
visiting designers from a know-how firm you’ve got heard of. We
confirmed off a number of issues within the morning, together with a generic
dial and my
Geokit zoom lenses, and one designer (who “did not program”)
instantly thought of learn how to mix the 2.

How might we management the zoomed-in map immediately and in context,
as a substitute of getting the lens (which sits at a distance from the unique
map)? With that interplay concept and a few hours of labor within the
afternoon, we had a working prototype for this dial. And we have been
working at a desk collectively, with items of paper, a marker for
scribbling, a dial, and a keyboard, not with laptops.

I like the direct manipulation; simply as hoped, shifting the dial on the
map to pan feels a lot nicer than shifting the zoom lens out on the facet.

The inexperienced quantity on the dial (from 0.0 to 1.0) is the zoom degree,
the place 1.0 is essentially the most zoomed-in and 0.0 is the least.

There’s additionally a inexperienced rectangle, which represents the precise space that
the inset map is displaying. After I enhance the zoom degree, the inexperienced
rectangle shrinks and the inset map zooms in.

The unique dial was only a (small) regular web page, which you’d placed on
prime of the map web page. However the gentle from the projector interfered with
dot detection, particularly with the racial dot tilelayer’s vibrant
colours in place, so it was unreliable. To keep away from that downside, I am
utilizing an IR (infrared) dot detector (/map/ incorporates monitoring dots /dots/) which tracks the gray-looking retroreflective dots. (Ideally,
the dial can be a traditional web page, although.)

Among the finest issues about Dynamicland is making peripherals and
utilizing them with the pc straight away. We need not implement
simulated inertia or make a digital drag deal with, since we merely monitor
the bodily dial.

The dot furthest from the typical of the dots is the ‘head’ of the
dial, which I take advantage of to determine the dial’s angle.

It’d even be fascinating to attract the zoomed map on the dial itself;
we have performed with this a number of instances, however there are nonetheless some points
(interference, efficiency, rotating view correctly).

Printing maps

Printing may be very a lot a work in progress. You level the “Print
static map” web page at a map web page, and it prints a static map of that
place, with a Google Maps view on it.

There’s numerous fiddly calibration to do right here, and it isn’t excellent
proper now. It goes to Google’s Maps API and will get a picture across the
heart of the map it is pointed at, guessing the correct radii round
that picture to line up with the prevailing map. It injects a declare, so
the printed map might be a sound Geokit map too.

It has been surprisingly helpful as a debugging device, since I can flip a
misbehaving dynamic map, which is tough to maintain secure, right into a static,
printed take a look at case.

Conclusion

These pages are all there’s! Every thing I confirmed you initially
of this writeup was applied by the precise items of paper in entrance
of me, and now you’ve got seen how all that code works.

Yeah, I am counting on some ‘built-in’ performance, however all that
conduct is additionally applied on pages right here in Dynamicland. When
you are right here, you’ll be able to stroll over to a board and skim by means of these
system libraries. There is no such thing as a underlying stack hidden on a pc
laborious drive or on GitHub. On this whiteboard, you will discover the web page
that renders to the projector after I Want (map) has illumination...,
the web page that makes a GET request after I question When URL (...) has contents /contents/:, and the web page that parses these Declares and
Wantes and Whens within the first place:

In Dynamicland, software program is meant to be this easy or
less complicated. Software program in Dynamicland is supposed to be regularly learn and
tweaked and discarded by customers; that is why every web page has its supply
code printed on it.

Why maps?

Why maps? Personally, I have been excited about maps and cities and
public transportation and infrastructure for a number of years, and I
have not gotten to do a lot unique work round that curiosity, so
Dynamicland appeared like a very good place to discover it. I used to be excited to
construct an idiomatic-feeling ‘package’ with elements, as a substitute of a one-off
program like my earliest work right here.

I feel maps spotlight the benefits of breaking out of the
display. We insult a whole custom of huge, information-rich maps
after we cram them onto tiny cellphone screens, then crowd round them and
make finger
gestures
to squeeze solutions out little by little.

I figured that in Dynamicland, we might have maps that really regarded
like maps. We might have a number of individuals sitting round a map at a
desk, sharing a big view, but in addition making use of computational filters
and derivations to get at their particular person pursuits. You can
discover many locations and concepts directly, and maintain monitor of them on the
desk in entrance of you, as a substitute of regularly sacrificing context on a
restricted display.

Dynamicland is nice at spatial interfaces, and maps are
spatial. You get instruments like dot monitoring, web page monitoring, whiskers, and
rotation, in addition to no matter else you’ll be able to tie in from the bodily
world.

And maps contain actual data from the world, which makes them
extra relatable than a visualization of some mathematical mannequin. I’ve
seen loads of individuals whip out lenses and switch zoom knobs and poke at
layers in an try to be taught in regards to the place the place they grew up. Maps
are an early alternative to make use of this know-how to ask actual questions
in regards to the world, the identical manner that I take advantage of my cellphone or laptop computer to ask
questions.

On documentation

I feel numerous the fabric and dialogue about Dynamicland has
been both too imprecise or too centered on the mistaken particulars. It has been
laborious to speak in regards to the place to individuals who have not visited. You lapse
into phrases that sound like platitudes.

I am taking a distinct strategy right here. I need to be concrete about how
you make issues and in regards to the particulars of the programming
expertise. I am hoping that this element will truly do a greater job
of speaking the larger concepts.

I feel there are a number of explanation why there hasn’t been a lot written
about Realtalk, particularly writing past ‘first impressions’:

• Written essays really feel like a clumsy medium for speaking about
  Dynamicland. As a result of it is a bodily area, its inhabitants are used
  to speaking in particular person, with demonstrations at hand. You
  would not ordinarily write or learn a doc like this one; for those who
  need to know the way one thing works, you set it out on the desk and
  learn the code on the pages, and possibly ask somebody within the area
  (since it’s a shared area, individuals might be there!)

• Constructing exterior consideration hasn’t been an enormous objective: the main target has
  been on in-person outreach, fundraising, and improvement throughout the
  area.

• Even amongst individuals who’ve visited Dynamicland, not many truly know
  Realtalk properly, so not many can write this type of overview. As with
  any inventive device, changing into fluent takes time. It took me no less than a
  few months.

• There may be some embarrassment about having a standard
  text-editor-oriented surroundings, given the sooner work of
  Bret and different researchers within the lab.

• There was a concern that individuals would fixate on particulars and replica them
  blindly whereas lacking the values, as occurred to the Xerox Alto GUI.

However specializing in these programming particulars nonetheless appears higher than
specializing in issues just like the dots and projectors and laptop imaginative and prescient,
that are apparent to anybody who visits and so get a ton of
dialogue. I see that stuff – dots, the character of the web page database,
cameras and projectors, occlusion, comparisons to augmented actuality –
purely as implementation particulars, and I do not spend a lot time considering
about it; I have not mentioned it on this writeup in any respect!

The pages/needs/claims/whens programming mannequin is the true ‘spirit of
Realtalk’, even when ideally we might change programming follow in even
extra radical methods: do away with the keyboards as properly, or add extra
direct manipulation, or introduce higher visibility for
debugging… or abolish programming fully?

In truth, I would argue that the programming mannequin may be very
under-discussed. It’s extra necessary than you might assume from what you
see on-line. A number of what’s new about Dynamicland is that it is a
programming system! Examine projection-mapping demos you see from the
Nineteen Nineties and 2000s, from varied educational and industrial labs. They might
have related interface strategies, and so they might demo cleaner, however the
implementation is a few massive blob of C++ that’s written backstage. You
cannot stroll in and do your individual program. The items of paper in
Dynamicland aren’t simply show surfaces for a demo somebody wrote on
their PC: they’re used to program the system immediately.

You can implement Geokit in JavaScript or C++, and construct your individual
projection mapping and laptop imaginative and prescient rig, and you may implement
any Dynamicland program that manner, however it might be numerous work. I
definitely would by no means have finished it. Dynamicland helps you to take all that
as given.

There’s additionally numerous Dynamicland protection that’s simply old-fashioned!
Utilizing the system at the moment (August, 2018) is a really completely different expertise
in comparison with utilizing the system a yr and even six months in the past: there are
hundreds of instance packages, computing surfaces are in all places in
the area, projectors are high-resolution sufficient to show detailed
information and textual content, every part runs manner quicker, you edit with keyboards
throughout the system as a substitute of laptops – the elemental design is
intact, however the subjective expertise has modified quite a bit, particularly
if you’re making issues.

I hope this writeup has given you a greater concept of how Dynamicland
works and what’s highly effective and new about it. I’ve talked about a few of
these concepts @rsnous on Twitter, and I would
like to put in writing and launch extra in public – let me know what you need
to listen to about.

finest,
Omar

My because of John Backus, Jason Brennan, Nicky Case, Mary Rose Cook dinner,
Daniel Feichtinger, Katie Gu, Jacob Haip, Joshua Horowitz, Luke
Iannini, Lauren Killingsworth, Tristan Navarro, Lisa Neigut, Paul
Sonnentag, Bret Victor, Roshan Vid, Elizabeth Yang, and Andy Zhao for
their considerate feedback and suggestions on this writeup.