The Codex of Business Writing Software for Real-World Solutions 2.pptx
Staticmaps cloudmade-internal-april-2009
1. Introduction API overview Implementation Future development Summary
CloudMade Staticmaps:
Overview
API, architecture and hard decisions
Andrii V. Mishkovskyi
April 28, 2010
2. Introduction API overview Implementation Future development Summary
Introduction
What is this?
Map images of various sizes and scales
Use cases
JavaScript-less environments
Printable maps
Not using slow CloudMade tiles ;)
3. Introduction API overview Implementation Future development Summary
Getting maps
Overview
URL
http://staticmaps.cloudmade.com
/<API key>/staticmaps?
size=<widthxheight>&styleid=<style
id>
4. Introduction API overview Implementation Future development Summary
Getting maps
Overview
Parameters
API key CloudMade user API key
size Sets the width and the height of the
image
styleid Sets the style of the map
5. Introduction API overview Implementation Future development Summary
Getting maps
Specifying area
Specify center and zoom
size=800x600&
center=51.47,0.0&
zoom=14
6. Introduction API overview Implementation Future development Summary
Getting maps
Specifying area
7. Introduction API overview Implementation Future development Summary
Getting maps
Specifying area
Specify bounding box
size=800x600&
bbox=51.475,-0.02,51.479,0.02
8. Introduction API overview Implementation Future development Summary
Getting maps
Specifying area
9. Introduction API overview Implementation Future development Summary
Getting maps
Specifying area
Implicit area calculation
size=800x600&
path=51.48,-0.02|51.48,0.02|
51.465,0.0|51.48,-0.02
10. Introduction API overview Implementation Future development Summary
Getting maps
Specifying area
11. Introduction API overview Implementation Future development Summary
Getting maps
Paths
Options
weight Width of the line
color Color of the line
opacity Level of opacity of the line
fill Color of the inner polygon
fill-opacity Level of opacity of the inner polygon
12. Introduction API overview Implementation Future development Summary
Getting maps
Paths
Line example
size=800x600&
path=
color:red|weight:10|opacity:0.6|
51.46,-0.02|51.48,0.02
13. Introduction API overview Implementation Future development Summary
Getting maps
Paths
14. Introduction API overview Implementation Future development Summary
Getting maps
Paths
Polygon example
size=800x600&
path=
color:red|weight:10|opacity:0.6|
fill:blue|
51.46,-0.02|51.48,0.02|51.46,0.02
15. Introduction API overview Implementation Future development Summary
Getting maps
Paths
16. Introduction API overview Implementation Future development Summary
Getting maps
Markers
Styling options
size Size of the marker image (small,
mid or big)
label Any letter in [a-Z] range or number
in range 0-99)
color 8 predefined colors
opacity 0.0 for completely transparent, 1.0
for completely opaque
17. Introduction API overview Implementation Future development Summary
Getting maps
Markers
Example
size=800x600&
center=51.47,0.0&
zoom=14&
marker=51.47731,0.0|
label:S|
size:big|
color:red|
opacity:0.6
18. Introduction API overview Implementation Future development Summary
Getting maps
Markers
19. Introduction API overview Implementation Future development Summary
Getting maps
Markers
Two markers, same style
size=800x600&
center=51.47,0.0&
zoom=14&
marker=51.47731,0.0|51.465,0.15|
label:S|
size:big|
color:red|
opacity:0.6
20. Introduction API overview Implementation Future development Summary
Getting maps
Markers
21. Introduction API overview Implementation Future development Summary
Getting maps
Markers
Two markers, different style
size=800x600&
center=51.47,0.0&
zoom=14&
marker=51.47731,0.0|
label:A|color:red&
marker=51.465,-0.005|
label:B|color:darkblue
22. Introduction API overview Implementation Future development Summary
Getting maps
Markers
23. Introduction API overview Implementation Future development Summary
Getting maps
Custom markers
URL of the image
marker=url:<url of the
image>|<coords and other options>
Upload and use assigned id
marker=id:<assigned id>|<coords and
other options>
24. Introduction API overview Implementation Future development Summary
Getting maps
Custom markers
Example
size=800x600&
center=51.477222,0&
zoom=14&
marker=
51.473,0.0|opacity:0.65|
url:http://i.imgur.com/s3ZfB.png
25. Introduction API overview Implementation Future development Summary
Getting maps
Custom markers
27. Introduction API overview Implementation Future development Summary
Getting maps
Custom markers
Using id
size=800x600&
center=51.477222,0&
zoom=14&
marker=51.477222,0.0|
id:f4f539ec97354a5c9eeb8fbe464b767c
28. Introduction API overview Implementation Future development Summary
Getting maps
Custom markers
29. Introduction API overview Implementation Future development Summary
Getting maps
Custom markers
MAH FACE IZ AMAZING
30. Introduction API overview Implementation Future development Summary
Competitor’s services
Google Maps
Cons
Quite small set of APIs
Lots of restrictions
Pros
Integrated geocoding
Amazing speed
Unbelievable performance
I mean, it’s really freaking fast
31. Introduction API overview Implementation Future development Summary
Competitor’s services
MapQuest
Cons
No opacity support
No POST support
Pros
Decluttering of labels
Integrated geocoding (USA-only)
Traffic information
32. Introduction API overview Implementation Future development Summary
Initial
Initial approach
Every request gets processed by one
render
Render simply calls Mapnik rendering
utilities
Mapnik does the magic
33. Introduction API overview Implementation Future development Summary
Initial
Mapnik rendering
Pros
Easy to use
Initial implementation took 4 days
Drawing paths and labels is a built-in
Cons
Slow (0.2 - 10 seconds to render one
image)
Non-scalable (depends on database
scalability)
34. Introduction API overview Implementation Future development Summary
Current
Why rewrite?
Mapnik-based solution is not cacheable
We need speed for staticmaps
...and scalability
“Render less” strategy
35. Introduction API overview Implementation Future development Summary
Current
Rendering from cache
Consolidation of cache management
Fast
Scales easily when no cache available
36. Introduction API overview Implementation Future development Summary
Comparing
Figure: Zeus decides which instance should take care of
the request
37. Introduction API overview Implementation Future development Summary
Comparing
Figure: nginx checks the cache and if none found passes
request further through FCGI
38. Introduction API overview Implementation Future development Summary
Comparing
Figure: Tilman then translates HTTP request into triton
request and checks it
39. Introduction API overview Implementation Future development Summary
Comparing
Figure: Triton dispatches request to the render(s)
40. Introduction API overview Implementation Future development Summary
Comparing
Figure: Old implementation is pretty inefficient
41. Introduction API overview Implementation Future development Summary
Comparing
Figure: New implementation takes advantage of all
available rendering capabilities
42. Introduction API overview Implementation Future development Summary
Performance
More caching?
Using bigger/smaller tiles
Braking tiles into several layers
Having cached staticmaps images in two
layers – markers + paths and base image
43. Introduction API overview Implementation Future development Summary
Performance
More scalability?
Using EC2 capabilities to instantly launch
new renders in case of high load
Using PgPool II for DB scaling
Using NoSQL databases instead of
PostGIS for ease of scaling
44. Introduction API overview Implementation Future development Summary
API
Overall
Geocoding integration
Non-discrete zooms (free scale selection)
45. Introduction API overview Implementation Future development Summary
API
More path options
Drawing primitives – circles, polylines,
multipolygons
Automatic routing integration
Line caps and joins selection
Using geohashes for shorter requests
46. Introduction API overview Implementation Future development Summary
API
Markers improvements
More default markers
Decluttering and grouping
Marker offsets
Scale and transform abilities
Shades
47. Introduction API overview Implementation Future development Summary
Summary
Staticmaps is a cool service to implement
It’s still a very developing piece of code
I hope it’s usable
48. Introduction API overview Implementation Future development Summary
?