Introduction     API overview         Implementation   Future development   Summary




               CloudMade Staticmap...
Introduction   API overview   Implementation   Future development   Summary




Introduction

       What is this?
       ...
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Overview


       URL
      ...
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Overview


       Parameters...
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Specifying area



       Sp...
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Specifying area
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Specifying area



       Sp...
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Specifying area
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Specifying area



       Im...
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Specifying area
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Paths


       Options
     ...
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Paths


       Line example
...
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Paths
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Paths


       Polygon examp...
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Paths
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Markers

       Styling opti...
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Markers

       Example
    ...
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Markers
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Markers

       Two markers,...
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Markers
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Markers

       Two markers,...
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Markers
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Custom markers


       URL ...
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Custom markers


       Exam...
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Custom markers
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Custom markers



       Upl...
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Custom markers


       Usin...
Introduction   API overview   Implementation   Future development   Summary


Getting maps



Custom markers
Introduction     API overview   Implementation   Future development   Summary


Getting maps



Custom markers




       ...
Introduction            API overview   Implementation   Future development   Summary


Competitor’s services



Google Map...
Introduction            API overview   Implementation   Future development   Summary


Competitor’s services



MapQuest

...
Introduction      API overview   Implementation   Future development   Summary


Initial



Initial approach


           ...
Introduction      API overview   Implementation   Future development   Summary


Initial



Mapnik rendering
          Pro...
Introduction      API overview   Implementation   Future development   Summary


Current



Why rewrite?


               ...
Introduction      API overview   Implementation   Future development   Summary


Current



Rendering from cache



      ...
Introduction    API overview   Implementation   Future development   Summary


Comparing




       Figure: Zeus decides w...
Introduction    API overview   Implementation   Future development   Summary


Comparing




       Figure: nginx checks t...
Introduction    API overview   Implementation   Future development   Summary


Comparing




       Figure: Tilman then tr...
Introduction        API overview   Implementation   Future development   Summary


Comparing




               Figure: Tr...
Introduction      API overview   Implementation   Future development   Summary


Comparing




               Figure: Old ...
Introduction    API overview   Implementation   Future development   Summary


Comparing




       Figure: New implementa...
Introduction      API overview   Implementation   Future development   Summary


Performance



More caching?



         ...
Introduction      API overview   Implementation   Future development   Summary


Performance



More scalability?


      ...
Introduction      API overview   Implementation   Future development   Summary


API



Overall



               Geocodin...
Introduction      API overview   Implementation   Future development   Summary


API



More path options


              ...
Introduction      API overview   Implementation   Future development   Summary


API



Markers improvements


           ...
Introduction      API overview   Implementation   Future development   Summary




Summary



               Staticmaps is...
Introduction   API overview   Implementation   Future development   Summary




                                    ?
Upcoming SlideShare
Loading in...5
×

Staticmaps cloudmade-internal-april-2009

737
-1

Published on

Internal tech talk on CloudMade's Staticmaps service given on 28th of April.
General overview of API, design decisions and idea dump.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
737
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Staticmaps cloudmade-internal-april-2009

  1. 1. Introduction API overview Implementation Future development Summary CloudMade Staticmaps: Overview API, architecture and hard decisions Andrii V. Mishkovskyi April 28, 2010
  2. 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. 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. 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. 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. 6. Introduction API overview Implementation Future development Summary Getting maps Specifying area
  7. 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. 8. Introduction API overview Implementation Future development Summary Getting maps Specifying area
  9. 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. 10. Introduction API overview Implementation Future development Summary Getting maps Specifying area
  11. 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. 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. 13. Introduction API overview Implementation Future development Summary Getting maps Paths
  14. 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. 15. Introduction API overview Implementation Future development Summary Getting maps Paths
  16. 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. 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. 18. Introduction API overview Implementation Future development Summary Getting maps Markers
  19. 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. 20. Introduction API overview Implementation Future development Summary Getting maps Markers
  21. 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. 22. Introduction API overview Implementation Future development Summary Getting maps Markers
  23. 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. 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. 25. Introduction API overview Implementation Future development Summary Getting maps Custom markers
  26. 26. Introduction API overview Implementation Future development Summary Getting maps Custom markers Uploading image $ curl -XPOST http://.../marker -F image=@image.png f4f539ec97354a5c9eeb8fbe464b767c
  27. 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. 28. Introduction API overview Implementation Future development Summary Getting maps Custom markers
  29. 29. Introduction API overview Implementation Future development Summary Getting maps Custom markers MAH FACE IZ AMAZING
  30. 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. 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. 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. 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. 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. 35. Introduction API overview Implementation Future development Summary Current Rendering from cache Consolidation of cache management Fast Scales easily when no cache available
  36. 36. Introduction API overview Implementation Future development Summary Comparing Figure: Zeus decides which instance should take care of the request
  37. 37. Introduction API overview Implementation Future development Summary Comparing Figure: nginx checks the cache and if none found passes request further through FCGI
  38. 38. Introduction API overview Implementation Future development Summary Comparing Figure: Tilman then translates HTTP request into triton request and checks it
  39. 39. Introduction API overview Implementation Future development Summary Comparing Figure: Triton dispatches request to the render(s)
  40. 40. Introduction API overview Implementation Future development Summary Comparing Figure: Old implementation is pretty inefficient
  41. 41. Introduction API overview Implementation Future development Summary Comparing Figure: New implementation takes advantage of all available rendering capabilities
  42. 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. 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. 44. Introduction API overview Implementation Future development Summary API Overall Geocoding integration Non-discrete zooms (free scale selection)
  45. 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. 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. 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. 48. Introduction API overview Implementation Future development Summary ?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×