Making your own maps


Formal Metadata

Making your own maps
Title of Series
Number of Parts
Singer, Steve
Heroku (Provider)
CC Attribution - NonCommercial - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this license.
PGCon - PostgreSQL Conference for Users and Developers, Andrea Ross
Release Date

Content Metadata

Subject Area
An introduction in using free Geospatial data PostGIS is an extension to PostgreSQL that turns PostgreSQL into a superb spatial database. Storing spatial data in PostgreSQL is a great way too use up the space on your SSD's however using the data to make maps is much more fun. This talk is aimed at people with limited GIS experience and will talk about how to use OpenStreetMap data for map making. We will tell you how you can get free geo-spatial data from OpenStreetMap and how it can be loaded into a PostGIS database. Common methods of using and accessing your data will be discussed including: Open Source desktop GIS software Generating custom map tiles for use on your website Making pretty paper maps. This talk will introduce common tools and techniques used to with PostGIS when working with OpenStreetMap data. This is a user focused talk suitable for people who have next to no GIS background.
Metropolitan area network Texture mapping Computer animation Mapping Volumenvisualisierung Information Videoconferencing
Metre Building Server (computing) Service (economics) Open source Multiplication sign Replication (computing) Computer Open set Frequency Lecture/Conference Term (mathematics) Database Physical system Texture mapping Mapping Projective plane Volume (thermodynamics) Software maintenance Tessellation Computer animation Network topology Internet service provider Computer science Website Freeware
Digital electronics Open source Mereology Event horizon Open set Formal language Wave packet Mathematics Square number Boundary value problem Default (computer science) Multiplication Texture mapping Mapping Set (mathematics) Electric power transmission Cartesian coordinate system Local Group Digital photography Uniform resource locator Computer animation Graph coloring Telecommunication Website Object (grammar) Game theory
Area Graphics tablet Trail Focus (optics) Mapping Texture mapping Mapping Projective plane Neighbourhood (graph theory) Mereology Computer Goodness of fit Computer animation Traffic reporting Curve fitting Descriptive statistics Units of measurement
Slide rule Freeware Texture mapping Computer file File format Shared memory Bit Binary file Open set Attribute grammar Mathematics Computer animation Graph coloring Database Core dump Subtraction
Slide rule Computer programming Intel Greatest element Computer file State of matter Multiplication sign Web browser Mass Chaining Frequency Latent heat Web service Mathematics Database Square number Cuboid Logic gate Subtraction Metropolitan area network Process (computing) Texture mapping System call Table (information) Computer animation Universe (mathematics) Website Abstraction Row (database)
Point (geometry) Polygon Building Open source Geometry Shape (magazine) Area Table (information) Wiki Sign (mathematics) Type theory Bridging (networking) Single-precision floating-point format Database Boundary value problem Monster group Data type Area Key (cryptography) Closed set Point (geometry) Polygon Line (geometry) Electric power transmission Table (information) Uniform resource locator Pointer (computer programming) Computer animation Website Energy level Object (grammar) Data type
Area Texture mapping Computer animation Software Open source Multiplication sign Database Order (biology) Electronic mailing list Number Table (information)
Texture mapping Information Mereology Table (information) Attribute grammar Word Computer animation Spherical cap Causality Graph coloring Personal digital assistant Query language Computer configuration Quicksort Object (grammar) Data type Subtraction
Slide rule Texture mapping Mapping Multiplication sign Debugger Virtual machine Web browser Cartesian coordinate system Workstation Table (information) Attribute grammar Front and back ends Computer animation Software Personal digital assistant Database Bus (computing) Cuboid Amenable group Plug-in (computing) Row (database)
Web page Slide rule Sequel Computer file Interior (topology) Geometry Sheaf (mathematics) Mereology Computer font Formal language Computer configuration Database String (computer science) Social class Stylus (computing) Texture mapping Key (cryptography) Block (periodic table) Sound effect Line (geometry) System call Connected space Tessellation Word Computer animation Graph coloring Personal digital assistant Query language Quicksort Object (grammar) Resultant
Area Building Game controller Texture mapping Mapping Computer file Variety (linguistics) File format Multiplication sign Element (mathematics) Zoom lens Content (media) Function (mathematics) System call Tessellation Web 2.0 Computer animation Graph coloring Software Personal digital assistant Query language Energy level Quicksort Condition number
Point (geometry) Computer file Sequel Variety (linguistics) Multiplication sign Zoom lens Family of sets Web browser Web 2.0 Database Electronic visual display Energy level Cuboid Subtraction World Wide Web Consortium Newton's law of universal gravitation Area Texture mapping Spacetime Mapping File format Expert system Tessellation Tablet computer Computer animation Internet service provider Website Quicksort
Building Multiplication sign Range (statistics) Zoom lens Water vapor Parameter (computer programming) Food energy Web 2.0 Fluid statics Conjugacy class Roundness (object) Bit rate Computer configuration Stress (mechanics) File system Approximation Cuboid Physical system Metropolitan area network Texture mapping Process (computing) Spacetime Mapping Sound effect Bit Instance (computer science) Entire function Connected space Tessellation Network topology Data storage device Artistic rendering Hard disk drive Volumenvisualisierung Website MiniDisc Right angle Content delivery network Trail Computer programming Read-only memory Server (computing) Service (economics) Sequel Computer file Open source Point cloud Open set Goodness of fit Escape character Database Energy level Data structure MiniDisc Directory service Subject indexing Computer animation Personal digital assistant
Web page Computer programming Server (computing) Mapping Computer file Multiplication sign Zoom lens 1 (number) Web 2.0 Energy level Scripting language Area Metropolitan area network Texture mapping Process (computing) Server (computing) Structural load Open set Tessellation Internet forum Computer animation Software Module (mathematics) Speech synthesis Electronic visual display Library (computing)
Complex (psychology) Game controller Server (computing) Mapping Curvature Concurrency (computer science) Computer file Zoom lens Range (statistics) Computer Variance Attribute grammar Number Web 2.0 Image resolution Optical disc drive Array data structure Cuboid Energy level Subtraction Engineering physics Social class Metropolitan area network Touchscreen Texture mapping Scaling (geometry) Mapping File format Executive information system Chemical equation Projective plane Bound state Bit Rectangle Sphere Open set Tessellation Uniform resource locator Computer animation Software Oval Personal digital assistant Energy level Object (grammar) Quicksort Cuboid Reading (process)
Web page Slide rule Server (computing) Code Patch (Unix) Web browser Mereology Table (information) Web 2.0 Dependent and independent variables Energy level Descriptive statistics Metropolitan area network Texture mapping Key (cryptography) Mapping Line (geometry) Ruby on Rails System call Table (information) Stopping time Computer animation Personal digital assistant Dependent and independent variables Object (grammar)
Point (geometry) Axiom of choice Multiplication sign Zoom lens Letterpress printing Computer font Event horizon Variance Revision control Web 2.0 Image resolution Energy level Metropolitan area network Descriptive statistics Dot product Texture mapping Mapping Cartesian coordinate system Open set Tessellation Message passing Computer animation Volumenvisualisierung Object (grammar) Quicksort Curve fitting
Mapping Computer file Open source State of matter Patch (Unix) Schweizerische Physikalische Gesellschaft Vector graphics Graphics software Rule of inference Computer icon Number Image resolution Web 2.0 Goodness of fit Hypermedia Error message Position operator Descriptive statistics Condition number Dot product Shift operator Texture mapping Mapping Tessellation Software Graph coloring Personal digital assistant Right angle Object (grammar)
Point (geometry) Metre Trail Server (computing) Service (economics) Computer file Open source Observational study Sequel Geometry Zoom lens Letterpress printing Schweizerische Physikalische Gesellschaft Streaming media Mereology Food energy Open set Medical imaging Term (mathematics) Database Energy level Information Extension (kinesiology) Subtraction Task (computing) Texture mapping Spacetime File format Sampling (statistics) Planning Bit Volume (thermodynamics) Set (mathematics) Port scanner Functional (mathematics) Computer animation Graph coloring Data storage device Website Object (grammar) Routing
reduces the so thanks for coming out this morning I know some of you might light at the bar and glad you were able to find your way out of the party here my name is teaching singer and in the talking to you about making your own maps and going to talk to you about how you can get the data to make your own maps from OpenStreetMap Paolo that data into posters and then how to come up with your own map styles tend render that map to the where the current and what different ways you might wanna that aren't so a
bit about me uh I've been around the course stressed community for quite a while and currently work for affiliates as database developers and 1 of the maintainers of the slowly replication system affiliates is trying to hire somebody being Toronto if anyone is interested come talk to me this but when I'm not working in my spare time I like to run around and make maps I'm not a professional cartographer professional geographer the computer science database person but OpenStreetMap is a project of amateurs and people in their spare time building using free and open source and it's not that difficult if you have basic computer skills and to talk to you about how to do that 1
might be 1 meter on that 1 of the big reasons lately is volume you have a website anyone and that 1 of these maps on your website people do with Google Maps all the time and the frequency serving up map tiles I will give you the terms of service and IT to serve their acts and if you're busy site many of the providers such as Google will start to charge you want you exceed a certain traffic oppression and busy cited starting to find that the dollar cost to use third-party commercial maps computed expense but if you are serving your own maps off your own server infrastructure you can control costs so a lot of people as they get more popular or switching tree free and open maps so they can serve the maps themselves another reason why
might why you might want to build your own that is you wanna style your on that you want don't want to use the default styling colors and the object shown on a base map from a 3rd party but you want specialize style to to show what you care about you might be the phoenix zoo and you might be really interested in where the elephants and zebras are and the snack bar and might not want to show some of the major highways nearby the power lines running over the 0 you can do this if you can control the style of your and when you build your own maps you get to control that start another reason is to not show circuit and things when you're showing a map you often using that as part of a story your talent and you wanna focus the user on the part of the story you care about sometimes the base map that only shows a couple of things such as political boundaries out in trading groups might be good and infestation communicator story and you don't want to show rivers and mountains and other things that will get in the way you also might want to show things in a different language on this map I believe I believe is an Italian but you can also design your map to show things in whatever language or in multiple languages if you're so inclined when you design your own map style you have all these freedoms who's making their own
maps of lately Apple switch their iPhoto application to their own custom maps using OpenStreetMap and some other data what did they switched away from Google Maps to their own math their serving it off of the apple infrastructure you download photo onto your iPhone or iPad and the map that your fault locations are shown is a map customized by Apple using various data sources flicker when they were doing the Beijing olympics they notice that the other 1 at a map showing the location of photos that had much more detail so use OpenStreetMap data to provide a base layer to do their own local map of the city for photos here no popular sites foursquare people use this to go and check in with their friends on the phone and you can go to the website to see our who has checked in at a particular location they recently switched to using maps rendered by themselves using OpenStreetMap data 40 square was finding that because they were busy the charges that are Google Maps were charging them to use the Google API or getting a bit steep so they went out of their own and their rendering their own maps based on OpenStreetMaps nite run some events on the running gain in London every year that involves people running around the city of ideas people running around is going to sell running shoes and might be designed to custom map for this game very specialized map to show things that are important to the players of the game and they were able to produce posters with the map that was able to correct used train with the map if you're using a free and open data sets you can make posters and printouts and customized things for your purpose is to just some
examples of people making their own maps you to make your own maps you might need a map to get back from a party to the conference of from the conference to the party and we can do that but I have an example map at map Explorer or 4 kg part that I'll be talking about how to build this is a map of downtown Ottawa University in the market area and its focus toward things that conference attendees might care about and it excludes things that conference attendees probably don't care how
do I do this 1st i use OpenStreetMap data openstreetmap is a crowdsourced project for building a free map of the world people go out with GPS units and note pads and cameras into the world and report what they see and what their roles as they go canoe down rivers and they report what they see in the real world they take this data and they go to the computer they uploaded the OpenStreetMap they traced over the GPS tracks and they had in descriptions using tagging of what they see what was out there in the real world in doing this we have built a pretty good map of many places in the world some places in the world such as Germany and parts of London our map is the best you will ever find other places in the world of are maps from its work I encourage you all to map the your local neighborhoods are inferred your friends the map your neighbor doing this we have built a good map and we'll build an even better are
map is free of our current data is currently licensed under the Creative Commons ShareAlike with attribution license this means you can take your data and you can do what you want with it as long as you attribute us and you any changes you make to the data you share them as well i under the CC-BY-SA license we're switching to a new license in a couple weeks may be called the Open Database License it's basically the same thing share alike with attribution license on for most users details differences between the 2 are not that important so can take the data and you can get it for free how do you
get a data we publish a dump of a database that contains all the map data in the world everywhere we take this down it's in an XML format or a binary format that and we put it its color planet file and we put it on a planet that openstreetmap or it's the a dump of the whole world is about 20 genes compressed and anyone can download it and use it all talk a bit about how you want to use it in a few slides on this contains all the mapping of the world but you might not want
20 gates and all the market in the world you might only care about your country and your country on is probably listed at this site extracts downloaded you fabric their company that does OpenStreetMap work and they produce extracts the data for specific of the data for Canada is about a gigabyte download smaller countries and smaller size of a country's a bigger but you might not even when an entire country you might only what the data for downtown Ottawa for the university in the market you can get back to instead of down when we did the for all of Canada there's some API is you can use 1 of these is called the overcapacity i where you put in a story like I have on my slides and you replace the latitude and longitude with the bounding box of what you want that would be the upper bottom left right corners of a square or 4 or table for the data that you want to download you do this you make the call to a web service with that you get on the web browser saying you can get up to 300 megabytes of data this way you get the data enables you can save it into a final state is X and that's the same x amount those planets files have various like what you do with that
we have the processing chain where we can take these different data files are whether beautiful planet the binary planet or abstract and we load them into a program called or sent 2 pgs throughout always entity gesture well will take these data files and update PostGIS database convert the XML to rows and columns in a post database that you can then use so I mentioned we produce this data every week this planet but we have matters out their mapping in changing the mass 24 hours a day 7 days a week and you might also want to get some of these changes you might not want the planet on from last week so we also produce defiance every day every minute hour in every minute we produce against that are we you can get these differ files containing the changes in that period of time and you pass through another crop program called of Moses and then you next to or centrifuges to well and that will update your posters database to contain the changes made in the past our data among or our data in in doing this we have a post database with our map of the world there's 3 types of
shapes that you can find in this posters database there's points a point represents a single location a single latitude and longitude a traffic light or stop sign will be a point on this line lines are a bunch of points connected together a role will be aligned a power line might be aligned and there's polygons polygons are closed line search close objects 8 building might be a polygon the boundaries of the city might be a polygon these are the 3 types of shapes we deal with and PostGIS you can
have 3 tables a planet 0 7 line of planet or some point and and or public each type of shape of that was added to the OpenStreetMap database by matter will go into 1 of these tables and you will then be able to select from each of these tables the schema of these tables are identical other than the fact that they 1 source points 1 lines monsters polygons they all have an object ID and geometry that specify that suppose just geometry type that contains the d spatial details of the object then they have a bunch of these columns of text columns and it's a fairly sparse database as and there's a lot of knowledge so their old or let's say a bicycle path might be tagged with bicycle path and in detail in describing the type of bicycle paths lined up by same bicycle paths I might also cover a bridge at 1 point so the point where covers a bridge you would have a bridge and bicycle path has non null values describing the type of Bergen bicycle but that a role in the database is going to have a null value for our area where where and now value for boundary has that road is describe a boundary or at a airport doing this week describe a tag OpenStreetMap when people tag data in the database it is freeform type you can build the OpenStreetMap site and tag a line or point using any key value pairs you can imagine but only key value pairs that are generally accepted by the community will get converted by the source and the GSQ well program and show up on that so we have a wiki describe how things should be tagged and we have tagging conventions the way other people to have type things are often a good way to type things if you want your data that actually show what was so and talk a bit about
desktop GIS software to explore there are a number of open source desktop GIS packages should use is what I'll talk about that some of the there's others you could use in order to know what you want showing a that you often have to see what the data looks like how were things actually time in the area you're making a map so judicious very good for this on you downloaded you load up and you can
connect to your post database when you connect to PostGIS you get a list of tables and these are the spatial tables and posters and you can pick 1 and once you pick 1 you can enter a
query or anywhere cause SQL where cause that will be made part of a spatial word any SQL where cause options are acceptable here in this case I'm interested in places the eat so for the note this is a note on the table and an entity it that are part of the bar cafe restaurant are all caps common ways of tagging different types of places the so I might write my SQL where clause to only return these things and this will produce what's called a layer or layers are sort of collections of data that geospatial people like to work with of a layer
into just has to be from a single table but within that table you can use the where clause of you select a bunch of layers and add them to your map into just you can dance styles you can control the color you can turn labels on and off and once you've done that you can zoom in you can zoom out you can panorama explore your data see what's there you can select an object that shows up on the map judicial show you information about the object the ID the other attributes
you can also explore the whole dataset in a table this shows you the layers every row in the database is a row in this table and you can see what our attributes in this case of you know I slept in an amenity that a hospital any as you see most of the other columns are are not but in our later on there's bus station and doing this you can explore the tagging and see how data actually books in the database of you
just can't produce maps for both for the web and for producing plug-ins but I find it's not the the best tool for that I find it very well it's good for exploring data I like to use of sophical tylenol which is mapped design software for actually designed and its title male is all written in JavaScript that runs in a browser and the back end is in no JS on application so you download time and you run it on your machine and then you can to it with the browser and you use the designer pile male is actually a front end for other software called Cottrell and map box problematic but I will talk about in a few slides and you use it to design your maps
the 1st step in this in a design in your mouth is selecting the data from the database to do this we create a layer layer is entitled Miller very similar to layers and you just you give it a connection string to given the name the later in this case and public roads stash major and you put in a sequel entirely male the sequel query can can include joins are within the subselected do any UN-ECE that's valid all stressed to come up with your data the important part is you end up with 1 sort of result set that contains your geometry at the primary key of your data and whatever actually it's you want to show off the map like the name of the road you do this and you tell our pal male what the primary key of the geometry is and then you can go on to style to turn that
sequel query into a pretty robe like this you have to add a style of tile millions something called and styling language called character which is cascading Style Sheets but that's if you use cascading style sheets for web pages a lot of the concepts will be very familiar you can take your style and you say are you the idea you named in the outer layer of such as road stash major you specify them and you open up a section describe the stylus was applied in this case from my role and make my role in line with a that is 12 pixels along with the black are color and then I'm going to do another style after that of which will be 10 pixels wide with an orange color that's going to give me my orange with a black outline and that's how you style things in male you describe the object later name you want style you give the styling and you can get more stuff to do road names you would do another style of further down you wanted do your name is later on in the file in you're streets this way the names that rendered on top of a straight if the names were earlier in effect files it would render the names 1st then the street are line and you wouldn't see your street the or the name of this industry so the ordering is important and here you see me doing call you know the a class name colon colon in some were those words are arbitrary there just to identify the different blocks but these are found roads stash name or Serpell that's major is what identifies the later we did in the previous slide so for words you can say what's the textile and you specify the column name that this the texture come from in this case it's the name called it can control of font size the font name at and a bunch of other rendering options to make things look pretty we do there's a
bunch of times we have about 2 layers we added onto styles and we get a decent map of the Ottawa area in some cases we wanna make certain buildings look different from this building the homes that were in here we wanted to paint we wanna make or purple we wanna make the royal purple so PG content attendees can see the important places for the call this allows you to make a style for Europe clientele you can pick certain buildings and make them a different color based on the name of the you do this with conditionals entirely on you can do the square brackets and put in a condition that will evaluate against 1 of the columns in your dataset so nicknamed equals rural all you can say 0 I want to do this in and if on otherwise 1 you light trading making of course you can also do conditionals on the zoom level on a web map as you zoom in more detail so what you do this by saying all these elements of the style will only show up in zoom levels 18 or about a half and doing this you build a map and this map is sort of in control what you wanna see on but now we have
to render them we have to take that maps style from the tile male and get it out to people as mentioned before tile male sits on top of software called magnet magnet is mapped rendering software it takes an XML style that title no will produce on or if you're into that you could write your own and you can write the px not directly but it's a lot easier to use cascading style sheets for perhaps entire and that it produces the XML it's going to take this XML content posters and execute the queries specified a couple slides ago and it will produce PNG files or PDFs the I has a variety of output formats that are useful for getting your maps of enter into the real world the this is sort of our rendering toolchain and I'm going to talk about how you might want to review its we've all seen
web that's what we use them on many websites map providers and they all generally works the same way there's a bunch of javascript running in the web browser this JavaScript those infections what are called map files and map child is a PNG files usually 256 by 256 pixels wide and he's not tiles show a particular point in space you pick a point in the and when you pay on to the left of the JavaScript will then go and fetch fetch the next not time on but just to the left of you and display that and Schiphol over the different tiles to see what you get if you zoom out it gets a different sets of set of pilots and that child is rendered for particular zoom level of level 0 shows you the whole map of the whole world on your web browser at once and you every time you zoom in it shows you less and less bitter area and more and more detail so your JavaScript knows how to figure out what tiles to show you and what tiles to get and i'll talk now about how you build those talk
entitled meal there's an export tab and this expert tablet you export to a variety of formats 1 of these formats is called in the title and the tiles is actually a sequel light database containing PNG this is good for our sort of small maps of the city or urban area that want to show the ID is do a map of downtown Ottawa it's something like 500 titles for the zoom level that are relevant for this area and that's going to be a megabyte at 2 megabytes of P & G's so we export them from pell-mell as a as a from now and the tiles 5 you can select the bounding box of what you want to explore from your map and you x 4 and it'll go off and give you a and B tiles what do you do with this well
you have some options 1 option is you can host non-mapped box map box is the company that makes our title male is open source but they a company has not posting services you can pay between beat anywhere beach between 3 and 5 and the 500 dollars a month poster maps with the amount the size of your maps the traffic of your website will all control what you want you upload the file to them after their website and they will give you your house to use the host or you might not want post pay tile male and approx instead you might want to run the soft some stuff from your own philosophical tiles tree which will allow you to serve these and tile files it's a simple I think it's better Python it sits on whether or not already listens for incoming connections search is the sequel like database with the tile requested and returns the conjugate or maybe you don't like sequel like databases and you want on post this on some content distribution networks and or the Amazon cloud and you just 1 host rock energy you can do that to tile Mill will export instead of a and B tiles file each PNG as an individual file file system the directory structure is 1 directory presume and then I never directly level for the exporter and then the wife or the docking G is your file and you put this out on any static web server you can serve them up and the JavaScript will know what 5 titles get and displayed on so many you
don't wanna render just enough about what maybe you wanna get home to more than you need a map to get home and people from the conference are all over the world so what's it going to take the render these titles for the entire world well it depends on you zoom zoom level 0 it's a couple of tiles for the world and it's pretty small little to you go up a zoomable 5 you talking 3 megabytes but by the time you get a zoom level 14 600 gigabytes serious disk space and syllable 18 171 terrabytes is probably more storage than anyone in this room has on the system so what you do well it turns out the building don't want to render the entire world at someone team the world is mostly water most of these tiles will be blue tiles with nothing on the but no 1 is ever going to want to see because who zooms in doesn't level in team in the middle of the Pacific Ocean not a lot so you don't render all you the tiles for the entire world at once instead you're going to dynamically rendered to do dynamic rendering you need to load the world into your posters database that 20 gage planet file I spoke about before will loaded into post just to give you about 600 gigabyte database including index this is you know not having any instance significant space but it is the entire world and it's a pretty detailed maps and it's actually affordable on if you look at the hard drives these days it's not too bad but how long it's going to take the importance that 1 might take you wait hours it might take you 60 hours why such a wide range of this despite of the import is a very disk I O intensive process if you have a greater array of assistive devices you'll get this done pretty quickly but if you're running on a slower rate 5 is spinning disks and not too many of them it could take a while CPU also as a bit of an effect so the important time will very much depend upon your own car the other thing is I spoke about these minute lead this if you want to apply these this every minute of your database you need a lot of room to apply minute we dance to the database of the world world and keep up we people recommend about 24 bits of red the always center SQL programs have to keep track of a lot of things in memory and to do this in each round it can spilled this if you don't have the answer but then you're probably not going to be able to keep up with the data files cutting in every minute so people in the open space and community that display the entire world from the database and keep up their biases the disks as there tends to be cheaper to buy a couple of as fast as his these then 60 spinning hard or whatever you need to get a really good idea right so and they tend to buy a lot of parameters if you don't want keep up if you wanted down on the planet final once a month and just do that you can get by with less stress less I O that
so what do we do once we have this data loaded on we run Apache and the Apache module called motile motile serves map tiles and it will 1st chapter 8 dispatch on this specific tile has already been rendered you render the time if the tiles rendered were assigned this Apache serve up and everything's good if the title is not available it calls a program called rendered d which it maintains a of rendering requests the rendered all will call that which allow MapReduce suffer map it will contact posters that the data turned into a PNG file a return that 2 on the Apache and I will show up in its speech stored on your tile cash and the title of the repertory of the person asking for a lot of people will trigger a bunch of tiles of the lower zoom levels they might write a script that contacts Apache for those kicks off the tiling process exploded there are also other software and literature the rendering technique to prevent the either areas that are popular to you or the lower zoom levels that you know are going to be asked for any time it takes to render this is completely dependent on your hard work so how do we know how
to take those tiles and display them on whether you use JavaScript mapping software I will talk about sophical OpenLayers there's a whole bunch of packages that do this OpenLayers is 1 of the oldest and 1 of the more popular ones are I'm not saying it's better or worse than any other JavaScript library so to go you get OpenLayers on or you can download OpenLayers it's a JavaScript file on it comes with a par all documentation please host the JavaScript file on your web server you could tell open your web page load OpenLayers budget guests from the the OpenLayers website that's not particularly nice it's not that big and you gonna
modified your map here it's to me how to include all the layers and then have to do for them and then you write some javascript that's going to tell OpenLayers to build the to the 1st thing we do is we tell OpenLayers what the bounding box format should be in this case I'm building a matter of just again Ottawa so I specify latitude and longitude coordinates for this rectangle of Ottawa I care about and I I do this with the OpenLayers bounds object and have to transform this from latitudes and longitudes to a different projection of you not familiar with map projections this simple poverty is the Earth is not flat on your computer screen flat and there's lots of different map projections to deal with that difference which projection to use when it's sort of beyond this talk on most web maps using the google spherical Mercator projection which is EPS G 9 0 0 9 1 3 to keep things simple that's probably what you want use 1st and so you convert those bounds that projection and you create an OpenLayers map object the OpenLayers map object your and tell about the balance you tell about what zoom levels you want use in this case I'm not letting you zoom out to the whole world and only rounded up to the level 18 for a given that range you also have to arm give it a tug-of-war controls you want the map and giving the attribution attending control you zoom out control there's other controls OpenLayers supports and read manual review that look at the examples on the OpenLayers website it's quite a complex piece of software but it's not hard to do simple things like this next we need
to actually add a layer of OpenLayers OpenLayers let you add multiple layers the OpenLayers layer object class is what does this and these different classes of layers the XYZ class gives us the letters show these XYZ PNG piled maps which is what will use you can also add odd GML KML files layers and use different layers for some of the different other web mapping stops is available so to do this we give it the URL of files when I uploaded my map map box they gave me this URL of aid of a b and c . tiles are just different servers in the map OX infrastructure and this allows a bit of concurrency happen for downloading the style of and then you get to tell the OpenLayers layer object what zoom levels to use and you give it the resolution which is sort of the scale of each zoom level how the resolutions arrays important if you're doing restricted zoom levels how to calculate these numbers are go on the Internet and find out what the resolutions arrays should be for any particular zoom level it's documented it's out there on it's important to remember if it do this but you don't need to know where those numbers come from and then you finally add the layer to the OpenLayers map object it would
be if we do this and we have a map the example code on this slide was not 100 per cent complete to get a couple of details fit on the slide and interesting lines of JavaScript that of but if you go to the key that you're and get out you can see a complete example of the code used to render this map
next we might want to add some markers markers the balloon like thing you see on map stop time that show important parts of web maps these are not part of the background map style but things that the JavaScript will add in you can often can add and remove them by clicking on things on the web page to do this the general workflow is that the JavaScript the web browser will make an AJAX call to a web server somewhere filmmakers http call on and get a new level web server somewhere in the case of Maddox export or it's a Ruby on Rails apps running on her roku on that queries the table the table is a simple table it has lacked long and description and it's gonna this table and post-stressed and turn it into adjacent response adjacent responses an array of patches jackass chase on that you can then be used in jet web browser 2 parts all so we get a maker operate will have an array of objects latitude longitude and description on the web browser
what we do with that we pass the J. Song of J. summed up pass into an array called conflicts within trade an OpenLayers marker objects all markers of the balloon things and we add our markers layer to the man is next we have to add each marker onto the markers object we do this by looking through our and for every item in the year when array with the at the latitude and longitude and we created OpenLayers latitude-longitude point and we have this this point 2 are made of or we added to the markers layer which and you look through you add all your points to the markers layer and you end up with a bunch of balloons on you know we want click on people so we want to click on 1 of these and have a pop up showing we can do that as well you do that by by registering an event handler on the most and object and that to each of these markers on not all the JavaScript is here and you can see it on the on get have the general ideas your render the or you register the event handler the event handler will get involved on a click and the event held there within OpenLayers pop-up object it pop up object is that our pop up with the text for you click on the rural I can't it runs it creates a pop-up object with the description on which Israel and added that when you click the axis it'll disappear you put a different pop up it'll show you the pop-up data for that of Trenton
of whether that's a nice but sometimes I could do much do maps and Trent I can hand them out my friends you can make posters of them and there's tell can do maps for but there are a couple of things that are different for it printed matter that you have to keep in mind when you zoom in on a web map you zoom out you zoom in all data can be you know labels or whatever can disappear or be added as you move through zoom levels on a printed map people zooming by walking both the map or zoom by removing a further from their eyes and all of data that has to show up on the map has to be rendered at once and then it has to work for people people's so you know looking at it this far away and looking at this far away as you move yourself of the map it all has to work and a lot of the times the font sizes you would do for a web map will not work well for that you will have to a lot of what will work on a printed map depends on the size of the data printing to if you're printing size leaflets on you'll did make some choices about fonts sizes and what to display that will be very different if you're printing to would be posted at the the wall so that the dots per inch of Europe our printer and will affect your font sizes and what you display even after the sort of freestyle you map in tile males often if you wanna map the work well for both a web and change you will probably have to change some things with respect to the sizes and and the resolution but the general
idea is that you re style things instead of x exporting to a and the tiles you can export to SVG and you can pick a resolution when you x export SPG tile Mill will use this in deciding what features to pick if you have a resume are conditionals in style and you're going to want to as said look at the dots per inch and the size of your paper to get an idea of what to do sometimes you'll need do some trial and error to see what looks good on on your final media so you generate this SVG file and
I've been open up and in state is open source vector graphics software kind it's an equivalent for Adobe Illustrator you could use Adobe Illustrator as well now the answer files that map it generates are not the right arm were probably should be done there I'm sure the magnet people will welcome patches but the idea is you can open this in your graphics editor and will add some text maybe a description of the map and you might move things around when you're doing a web map of the world you can't go to every individual coffee shop and tweak our but if you're doing a map for current usually the number of objects on your map is finite and quite manageable and it's you know in this example a lot of the icons are covering letters of the road names there's ways in your map style can usually avoid that on that induced to keep things simple but sometimes you the rules for the automated placement are still not quite what you want in a couple cases you click on the object and shift to the right shifted to the left cartographers have been tweaking the position of maps and and the objects on the maps since they started making that long before the age of computer-assisted happy and you should not be afraid to do that so you might also change the sizes of something that make some icons that a more important bigger some icons less important smaller or delete a couple of things that are might be in your source data that you just don't wanna show because it doesn't make from that look pretty you would then gold standard 5 state-sector paper size in Inkscape a illustrator I often will print to on ledger 17 by 11 paper I find that a good size for map that you could sort of hold on often freaking color and when
doing printing I I find I usually do my friend and at Staples for like 20 copies of that I find that works well I will produce 18 PDF file from thinks that the printers are generally quite copy working with PDF files and you're a bit more sure what you're going get when you have the PDF file compared the SPG which they might not be as accustomed to critical at the lower and if you do in the high volumes you might do better printing services and they might have different graphic import formats that they'd rather see things on you know did not with turned anything you're gonna wanna do some samples before you do a lot to copies to make sure you've got it in all the colors right the arm bleeding right except track bleeding is so that when you print the MAP fainter will not usually trained to the exact edge of the paper they need to leave a bitter space that doesn't get ink on so you have to work with your printer or experiment with them and make sure you're not cutting off part of europe map image that you were expecting to be there are that's probably all is on sale on that centered on what the public you now
is maybe take some questions on the the the the new world OpenStreetMap is about the data so they give data and many people have died route planning with their data Mapquest has done a bunch of work with OpenStreetMap data if you opened up macroscopic hard you can get to the open armax website and they have a route planner and there's a bunch of other people that are done replenish the many people I I know there are many open source map a route planners I am not sure the map quest 1 is open-source remarked questions you all of what it is worth so much of this work yes I there probably are Torrance for the planet by you know all what the I think people do toward kind of fire on I don't have the address of that if you will for it is probably somewhere audio stream of working so no the Python 1 server those and the tireless 5 the end it has not on demand it is a static it's a sequel like database of PDT energies of the questions that only he is in the in the world who would allow you to use them for so in the post is databases are deserving is not managed and post a study it's been posters database includes the geometries of every object in full detail so are you know for something like a coastline a coastline will run in the in the light of the entire continent and there might be some is that some of the details might be a point every couple of meters someone might walked along the art each of the ocean and collected points every couple meters and that might be the detail that's in and PostGIS that's the detail story in the full thing so to do it if you're doing a zoom out for a map at a higher zoom level courses have always available you don't care about that you mean map generation task to reduce the data if possible so that I don't actually know in terms of how you know there are ways posters has a bunch of functions to simplify geometries so that's 1 way you could probably do it you have no idea in details of how some of the posters simplify functions work or bit beyond me so that I can answer any other questions that I have not I know OpenLayers will display a roster layer on and posters 2 . 0 it'll store after layers but I've not personally that work with the the the the people and so I for those who are not familiar with PostGIS PostGIS is a set of spatial extensions that are on top of PostgreSQL with PostGIS 2 . 0 you install it is simply I believe there's a creator extension command in trade extension posters and will install with posters 1 . 4 1 . 5 it's like any other post-stressed older-style prosperous extension you do just rarities PostGIS biased well file on you will have to compile and install so so it's not a modification of post-stressed source told this is all the usual level extensions anything else OK thank you


  675 ms - page object


AV-Portal 3.9.2 (c7d7a940c57b22d0bc6d7f70d6f13fde2ef2d4b8)