Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

merge

  • Loading branch information...
commit 845ed1d2ff69c765dc04382c1eedc6eadd48c52d 1 parent 5b46ec5
bonniebogle authored
View
59 _posts/docs/crashcourse/0202-01-01-introduction.md
@@ -1,59 +0,0 @@
----
-layout: book
-section: documentation
-category: TileMill
-tag: Crash course
-title: "Overview"
-permalink: /docs/crashcourse/introduction
-nextup:
-- "[TileMill and GIS](/tilemill/docs/crashcourse/tilemill-gis/)"
-- "[Import data](/tilemill/docs/crashcourse/point-data) into a TileMill project."
----
-
-<style type='text/css'>
-
-.summary p {
- }
-
-.summary .icon {
- width: 60px;
- height: 60px;
- display: block;
- float: left;
- padding: 10px 10px 10px 0;
- }
-
-#icon1 { background: white url('/tilemill/assets/pages/docs-intro.png') 0px 13px no-repeat;}
-#icon2 { background: white url('/tilemill/assets/pages/docs-intro.png') -166px 13px no-repeat;}
-#icon3 { background: white url('/tilemill/assets/pages/docs-intro.png') -336px 13px no-repeat;}
-#icon4 { background: white url('/tilemill/assets/pages/docs-intro.png') -507px 13px no-repeat;}
-
-</style>
-
-
-## Step-by-step instructions for making maps
-
-This crash course walks through how to design custom web maps in TileMill. It will help you quickly get familiar with the basics of map design with TileMill, from importing and styling your data to designing and sharing your map.
-
-<small class='note' markdown='1'>
-<h3>Have you taken the tour?</h3>
-[Take the MapBox tour](http://www.mapbox.com/tour) to see what you can do with the toolset.
-</small>
-
-This guide focuses on the core functions of TileMill and links to documentation throughout for more advanced and specific techniques in map design.[Start here](/tilemill/docs/crashcourse/tilemill-gis) for an overview of TileMill. If you have any questions along the way, [start a discussion with our support team](http://support.mapbox.com).
-
-## What we'll cover
-
-<div class='summary'>
-
- <p><span class='icon' id='icon1'> </span><strong><a href='/tilemill/docs/crashcourse/point-data'>Importing data</a></strong><br /> We walk through how to download data and get it into TileMill. To work with more complex data and datasets, check out the <a href="/tilemill/docs/manual/adding-layers/">Adding Layers documentation</a>.</p>
-
- <p><span class='icon' id='icon2'> </span><strong><a href='/tilemill/docs/crashcourse/styling'>Styling data</a></strong><br /> Here we show the basics of using Carto - a CSS-like language - to style your data and make a truly custom map. For an a in-depth dive into how Carto works, check out the <a href="/tilemill/docs/manual/carto">Carto manual</a>.</p>
-
- <p><span class='icon' id='icon3'> </span><strong><a href='/tilemill/docs/crashcourse/tooltips'>Adding tooltips and legends</a></strong><br /> Making your map interactive and adding a legend is critical to communicating your data. Here we show how to add tooltip interactivity and legends to maps. The <a href="/tilemill/docs/manual/project-settings">Project Settings</a> documentation offers more advanced details on this. </p>
-
- <p><span class='icon' id='icon4'> </span><strong><a href='/tilemill/docs/crashcourse/exporting/'>Exporting your map</a></strong><br /> Maps made in TileMill can be shared quickly and easily in a number of formats. Here we show how to export an interactive map to the MBTiles format for uploading on the web. See our <a href="/tilemill/docs/manual/exporting/">Exporting docs</a> for an overview of all supported exporting formats.</p>
-
-</div>
-
-{% include nextup.html %}
View
31 _posts/docs/crashcourse/0202-02-01-tilemill-gis.md
@@ -1,31 +0,0 @@
----
-layout: book
-section: documentation
-category: TileMill
-tag: Crash&nbsp;course
-title: "TileMill and GIS"
-permalink: /docs/crashcourse/tilemill-gis
-prereq:
-- "[Installed](/tilemill/docs/install) TileMill on your computer."
-- "[Reviewed](/tilemill/docs/crashcourse/introduction/) the Crash Course introduction."
-nextup:
-- "[Import data](/tilemill/docs/crashcourse/point-data) into a TileMill project."
-- "[Style](/tilemill/docs/crashcourse/styling/) your point data."
-- "[Add tooltips and a legend](/tilemill/docs/crashcourse/tooltips/) to your map."
-- "[Export your map](/tilemill/docs/crashcourse/exporting/) to MBTiles format"
----
-
-{% include prereq.html %}
-TileMill is a desktop application for creating beautiful web maps. It was designed to easily integrate into existing GIS workflows to enhance design capabilities and flexibility.
-
-## Designing maps
-Map design is the core of TileMill. To manipulate geospatial data to be used on TileMill maps, you may need to look outside of tool or integrate it with other GIS software. Some spatial data can be worked with in Google Docs and Microsoft Excel, and for others GIS software like [QuantumGIS](http://www.qgis.org/) or [ESRI ArcGIS](http://www.esri.com/software/arcgis/index.html) may be needed. Spatial database software like [PostGIS](http://postgis.refractions.net/) and [SQLite](http://sqlite.org) can also be used to work with large spatial datasets and integrated into TileMill.
-
-The main output of TileMill is tiled maps - millions of 256 px by 256 px images that can be loaded quickly in interactive maps - exported in MBTiles format. Tiled maps are the basic technology behind the best panning and zooming maps on the web. You can also export PNG and PDF files from TileMill for static output or use in presentations - using the same map styles that power your highly interactive maps.
-
-## MBTiles
-These map tiles are stored in a package file, called an [MBTiles file](http://mapbox.com/mbtiles-spec). This allows them to be compressed, copied, and transferred easily from place to place. Unlike most tiled maps, the maps you make in TileMill can be interactive - hovering and clicking on map tiles can trigger popups and even site navigation. The interactivity data is also compressed and stored in MBTiles files.
-
-Unlike static maps, tiled maps tend to have many layers of detail - you’ll want to choose what features to show and hide at each zoom level. TileMill’s styling language Carto makes this easy, and it's fast to learn how to use it with a built-in reference, autocomplete, and error highlighting - and even easier if you’re already comfortable with CSS.
-
-{% include nextup.html %}
View
41 _posts/docs/crashcourse/0202-03-01-point-data.md
@@ -1,41 +0,0 @@
----
-layout: book
-section: documentation
-category: TileMill
-tag: Crash&nbsp;course
-title: "Importing data"
-permalink: /docs/crashcourse/point-data
-prereq:
-- "[Installed](/tilemill/docs/install) TileMill on your computer."
-- "[Reviewed](/tilemill/docs/crashcourse/introduction/) the Crash Course introduction."
-nextup:
-- "[Styling](/tilemill/docs/crashcourse/styling/) your point data."
-- "[Adding tooltips and a legend](/tilemill/docs/crashcourse/tooltips/) to your map."
-- "[Exporting](/tilemill/docs/crashcourse/exporting/) your map."
----
-
-{% include prereq.html %}
-
-To import data TileMill requires a CSV file with column headings on the first row. The CSV must have a column with a latitude and longitude geographic coordinate in degrees. We have hard coded TileMill to look at the column headers for any mention of "lat" or "latitude", so something like "geo_longitude" will even work.
-
-If your CSV contains place names or addresses instead of lat/lon coordinates, you will have to geocode the data before it will work in TileMill. We have a [handy plugin for Google Docs](http://developmentseed.org/blog/2011/10/12/mapping-google-doc-spreadsheet/) that makes geocoding easy.
-
-In this crash course, we'll use [earthquake data from the USGS](http://earthquake.usgs.gov/earthquakes/catalogs/) to make a map showing points for earthquakes that have occurred.
-
-1. Start TileMill and click on the "Add project" button on the main screen.
- ![Add project](/tilemill/assets/pages/csv-1.png)
-2. Enter a name for your project and click "Add". You can leave the other fields alone for now.
- ![Add project](/tilemill/assets/pages/csv-2.png)
-3. Click on the new project to open it. The project contains a default layer called `#countries` styled with some example Carto code.
-4. To add a CSV layer, first click the "Layers" button located on the bottom left to bring up the Layers panel.
- ![Add layer](/tilemill/assets/pages/csv-3.png)
-5. Now click "Add layer".
- ![Add layer](/tilemill/assets/pages/csv-4.png)
-6. Enter `earthquakes` in the ID field. You'll use this ID to to reference this layer in Carto selectors.
-7. Enter the URL `http://earthquake.usgs.gov/earthquakes/catalogs/eqs7day-M2.5.txt` into the Datasource field.
-8. Click the "Save & Style" button. This will add the layer to your project and insert a default Carto rule for the layer.
- ![Add layer](/tilemill/assets/pages/csv-7.png)
-9. Preview the result in the map preview pane.
- ![Styled map](/tilemill/assets/pages/earthquake-map.png)
-
-{% include nextup.html %}
View
77 _posts/docs/crashcourse/0202-04-01-styling.md
@@ -1,77 +0,0 @@
----
-layout: book
-section: documentation
-category: TileMill
-tag: Crash&nbsp;course
-title: "Styling data"
-permalink: /docs/crashcourse/styling
-prereq:
-- "[Installed](/tilemill/docs/install) TileMill on your computer."
-- "[Reviewed](/tilemill/docs/crashcourse/introduction/) the Crash Course introduction."
-- "[Imported data](/tilemill/docs/crashcourse/point-data) into a TileMill project."
-nextup:
-- "[Adding tooltips and a legend](/tilemill/docs/crashcourse/tooltips/) to your map."
-- "[Exporting](/tilemill/docs/crashcourse/exporting/) your map."
----
-
-{% include prereq.html %}
-
-
-TileMill uses a language called Carto to determine the look of a map. Colors, sizes, and shapes can all be manipulated by applying their relative Carto parameters in the stylesheet panel to the right of the map. Read the [Carto manual](/tilemill/docs/manual/carto/) for a more detailed introduction to the language.
-
-In the previous section on [Importing data](/tilemill/docs/crashcourse/point-data), we [added an earthquake point layer](/tilemill/docs/crashcourse/point-data) using the "Save & Style" button. This button automatically added several styling parameters to your stylesheet and gave them an initial value.
- ![Styling](/tilemill/assets/pages/styling-1.png)
-
-1. `#earthquakes`
-This is the layer to which the styles are applied.
-
-2. `marker-width`
-This determines the size of the markers. If `marker-height` is not specified, it is given the same value, resulting in a circle marker. You can experiment changing this by typing in a different number.
-
-3. Click the "Save" button to save your project and trigger the map preview to update.
- ![Save project](/tilemill/assets/pages/save-project.png)
-
-4. `marker-fill`
-This is the color of the inside of the marker. There are two methods for changing color values. You can either type in a new value, or you can use the color swatches at the bottom of the Carto panel. Try changing the marker color by clicking the light red swatch and selecting a new color.
- ![Styling](/tilemill/assets/pages/styling-3.png)
-
-5. Click "Save" in the color picker to see your changes. Notice the corresponding color value is updated in the Carto.
- ![](/tilemill/assets/pages/color-picker-1.png)
-
-6. `marker-line-color`
-This is the color of the border of the marker. This time try changing the color by replacing the hex value `#813` with `#000`, the code for black.
-
-7. Click "Save". Notice that the color swatch is updated with the new color.
-
-8. `marker-allow-overlap`
-This allows markers to be placed on top of each other. If this is not specified or set to `false`, potentially overlapping markers will not be displayed.
-
-### Conditional Styles
-
-Conditional Carto styles allow you to change the appearance of the points on your map based on attributes in the data. Here we will customize the earthquake points based on the magnitude of the quake.
-
-1. Review the available data for the layer in the feature inspector.
- ![Feature inspector](/tilemill/assets/pages/feature-inspector-1.png)
-2. Find the column called `Magnitude` and examine the range of values. This will help you decide how to scale the points.
- ![Feature inspector](/tilemill/assets/pages/feature-inspector-2.png)
-3. Add the following Carto rule to the bottom of your stylesheet. This Carto rule sets a larger `marker-width` for features that have a larger `Magnitude` value.
-
- #earthquakes {
- [Magnitude >= 2.5] { marker-width:3; }
- [Magnitude >= 3] { marker-width:4; }
- [Magnitude >= 3.5] { marker-width:5; }
- [Magnitude >= 4] { marker-width:6; }
- [Magnitude >= 4.5] { marker-width:7; }
- [Magnitude >= 5] { marker-width:8; }
- [Magnitude >= 5.5] { marker-width:9; }
- [Magnitude >= 6] { marker-width:10; }
- }
-
-4. Click "Save" to view your changes.
-5. Use the map preview to confirm that the style is working. Adjust the Carto rule until you are satisfied.
- ![Conditional style](/tilemill/assets/pages/conditional-style-1.png)
-
-These are just a few of the basic parameters for styling point data. For a comprehensive look at styling possibilities, checkout the [Carto reference](/tilemill/docs/manual/carto/) section in TileMill.
- ![Styling](/tilemill/assets/pages/styling-4.png)
-
-{% include nextup.html %}
View
67 _posts/docs/crashcourse/0202-05-01-tooltips.md
@@ -1,67 +0,0 @@
----
-layout: book
-section: documentation
-category: TileMill
-tag: Crash&nbsp;course
-title: "Adding tooltips and legends"
-permalink: /docs/crashcourse/tooltips
-code1: |
- {{{Magnitude}}} Magnitude Earthquake<br/>{{{Datetime}}}
-code2: `<strong>Magnitude 2.5+ Earthquakes (Past 7 Days)</strong><br/>Circle size indicates magnitude of earthquake.`
-prereq:
-- "[Installed](/tilemill/docs/install) TileMill on your computer."
-- "[Reviewed](/tilemill/docs/crashcourse/introduction/) the Crash Course introduction."
-- "[Imported data](/tilemill/docs/crashcourse/point-data) to a TileMill project."
-- "[Styled](/tilemill/docs/crashcourse/styling/) your point data."
-nextup:
-- "[Exporting](/tilemill/docs/crashcourse/exporting/) your map."
----
-
-{% include prereq.html %}
-
-Tooltips and legends allow you to add interactivity, additional information, and context to your maps. Below we'll walk through how to add each to your map.
-
-## Tooltips
-
-Tooltips allow you to make maps interactive with dynamic content that appears when a user hovers over or clicks on a map. They can contain HTML and are useful for revealing additional data, images, and other content.
-
-Previously in the [Importing data](/tilemill/docs/crashcourse/point-data) section of this guide, we created a map of earthquakes. Here we will add tooltips that reveal the magnitude, date, and time of each earthquake when users hovers over its point.
-
-1. Open the Templates panel by clicking on the pointer button on the bottom left.
- ![](/tilemill/assets/pages/tooltips-6.png)
-2. Click on the "Teaser" tab. Teaser content appears when you hover over a feature and Full content appears when you click on a feature. You can use the Location field to define a URL to be loaded when a feature is clicked.
- ![](/tilemill/assets/pages/tooltips-1.png)
-3. Select the "Earthquakes" layer to use it for interaction. TileMill only supports one interactive layer at a time.
- ![](/tilemill/assets/pages/tooltips-2.png)
-4. The data fields for the layer are displayed wrapped in curly [Mustache](http://mustache.github.com/) tags. These tags will be replaced by data when you interact with the map. Locate the fields you want to use.
- ![](/tilemill/assets/pages/tooltips-3.png)
-5. Write your template using the Mustache tags. Paste the following code into the Teaser field and use the preview to make sure it looks good:
-
- {{page.code1}}
- ![](/tilemill/assets/pages/tooltips-4.png)
-6. Click "Save" to save your settings and refresh the map. Close the panel by clicking the close button (X) or by pressing the ESC key. Move your mouse over some points to see the tooltips.
- ![](/tilemill/assets/pages/tooltips-5.png)
-
-## Legends
-
-A legend is permanently on a map and is useful for displaying titles, descriptions, and keys for what is being mapped. It can be styled using HTML, or it can simply contain an image.
-
-Let's add a legend that describes the theme of the map.
-
-1. Open the Templates panel by clicking on the pointer button in the bottom left.
- ![](/tilemill/assets/pages/tooltips-6.png)
-2. The Legend tab is open by default.
- ![](/tilemill/assets/pages/legend-1.png)
-3. Enter your legend text/html in the Legend field:
-
- {{page.code2}}<br>
- ![](/tilemill/assets/pages/legend-2.png)
-4. Click "Save" and close the panel. You will now see your legend in the bottom right corner of the map.
- ![](/tilemill/assets/pages/legend-3.png)
-
-<small class='note' markdown='1'>
-<h3>Allowed HTML</h3>
-For security, unsafe HTML in tooltips and legends are sanitized and JavaScript code is removed. If you want to build sophisticated map interaction with JavaScript on your own website, you can write custom code using the [Wax](http://mapbox.com/wax/) library.
-</small>
-
-{% include nextup.html %}
View
48 _posts/docs/crashcourse/0202-07-01-exporting.md
@@ -1,48 +0,0 @@
----
-layout: book
-section: documentation
-category: TileMill
-tag: Crash&nbsp;course
-title: "Exporting a map"
-permalink: /docs/crashcourse/exporting
-prereq:
-- "[Installed](/tilemill/docs/install) TileMill on your computer."
-- "[Reviewed](/tilemill/docs/crashcourse/introduction/) the Crash Course introduction."
-- "[Imported data](/tilemill/docs/crashcourse/point-data) to a TileMill project."
-- "[Styled](/tilemill/docs/crashcourse/styling/) your point data."
-- "[Added tooltips and a legend](/tilemill/docs/crashcourse/tooltips/) to your map."
-nextup:
-- "[Upload](/hosting/uploading/) your map to the web."
-- "[Sign up](/plans) for a Mapbox hosting account."
----
-
-{% include prereq.html %}
-
-TileMill can export maps to MBTiles, PNG, PDF, SVG, or Mapnik XML formats. A full listing and overview is in the [Exporting documentation](/tilemill/docs/manual/exporting/).
-
-So far we've [created a map of earthquakes](/tilemill/docs/crashcourse/point-data), [styled it](/tilemill/docs/crashcourse/styling), and [added tooltips and legends](/tilemill/docs/crashcourse/tooltips). Now we will export the map as an MBTile to create a fully interactive map.
-
-1. Click the "Export" button. A drop down menu will appear.
- ![](/tilemill/assets/pages/exporting-1.png)
-2. Click "MBTiles". The window will transition to the export tool.
- ![](/tilemill/assets/pages/exporting-2.png)
-3. Choose a "Filename"". The name of the project will be placed here by default.
- ![](/tilemill/assets/pages/exporting-3.png)
-4. Select Zoom levels. Set the furthest zoom to 1 by dragging the left end to the right. Set the closest zoom to 6 by dragging the right end to the left.
- ![](/tilemill/assets/pages/exporting-5.png)
-The numbers below the slider update as the zoom level is moved. These numbers indicate how large the exported file will be. The wider the bounds and the more zoom levels in a map, the larger the final size of the MBTile file will be.
-5. Select the "Center" of the map. This determines the starting center and zoom level of the map when it is first loaded. You can manually enter these values or click a point in the map preview. Zoom to level three and click the center of the United States.
- ![](/tilemill/assets/pages/exporting-6.png)
-6. Select the map "Bounds". This is the area of the map to be exported. By default the entire world is selected. If your map is allocated to a smaller region of the globe, you can save processing time and disk space by cropping to that area. This can be done by manually entering values in the Bounds fields, or by holding the SHIFT key and clicking and dragging on the map. Leave the default value.
- ![](/tilemill/assets/pages/exporting-4.png)
-6. Click "Export".
- ![](/tilemill/assets/pages/exporting-7.png)
-The window will transition back to your project and the exports panel will appear. Here is where you can access and find information about your exported files. The most recent will appear at the top of the list and display its progress as it is being processed.
- ![](/tilemill/assets/pages/exporting-8.png)
-7. When the export process is complete, the progress bar will be replaced by a Save button. This will save a copy of the file locally to a specified location.
- ![](/tilemill/assets/pages/exporting-9.png)
-
-### Congragulations!
-You just made your first map in TileMill! You can [upload it online with MapBox](http://tiles.mapbox.com/upload/create/) - the first seven days of hosting are free.
-
-{% include nextup.html %}
Please sign in to comment.
Something went wrong with that request. Please try again.