From 57759edad7ecc0ed134a1fafca62c31b8f422d11 Mon Sep 17 00:00:00 2001 From: Paul Norman Date: Thu, 17 Dec 2015 12:00:30 -0800 Subject: [PATCH 001/228] Initial commit of blank readme --- README | 1 + README.md | 0 2 files changed, 1 insertion(+) create mode 120000 README create mode 100644 README.md diff --git a/README b/README new file mode 120000 index 0000000..42061c0 --- /dev/null +++ b/README @@ -0,0 +1 @@ +README.md \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 From 3445ad76bb2a2af844d69775cf684c1af31f33d6 Mon Sep 17 00:00:00 2001 From: Paul Norman Date: Thu, 17 Dec 2015 12:30:23 -0800 Subject: [PATCH 002/228] Add basic design goals --- README.md | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/README.md b/README.md index e69de29..e321b87 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,45 @@ +# switch2osm # + +This repository is not what currently powers switch2osm.org, but is some ideas in the early conceptual stage. + +## Content design goals ## + +* Covers from first principles to technical how-tos. + + It's easy to be focused on technical guides (setting up a rendering server), but most users are more interested in how to switch their very small website from Google, so care more about how the monolithic Google Maps "API" is replaced by multiple components, and how to set up their webpage to use a free tile service. + +* Avoids lock-in with specific vendors or services +* Does not require specific external services, aside from OpenStreetMap itself + + We do not promote anything which can result in lock-in to a specific vendor, so guides need to be usable without relying on a third party. It's okay to use something as an example (e.g. tile.osm.org) where there are plenty of alternatives, but not if there are few alternatives or the service being used cannot be reproduced. + + Exceptions are + * planet.openstreetmap.org, for OSM data itself + * openstreetmapdata.com, for coastlines and other preprocessed data + * Natural Earth and other well-used public data sources + +## Technical design goals ## + +* Uses multiple steps to build understanding, rather than one shell script + + A single script which completes a long series of tasks can be useful, but builds no understanding of what is being done. As soon as someone wants to change the slightest aspect, they find they haven't gained any knowledge. These scripts also tend to be fragile. + +* Does not present bad practices, even in a demo + + People will copy/paste short demos. Don't use bad practices that work just because the demo is simple. + +* Avoids building from source + + Building from source adds significant complications while helping little with understanding. + +* Avoids binary blobs that cannot be reproduced + + The instructions should be able to be adapted to other OSes or distributions. This means that the user should be able to build from source if they need to. OS packaging systems and PPAs meet this. + +* Uses forwards-compatible portable instructions + + This is hard to do, but instructions should be crafted to work in the future, and to the extent possible, on future distributions. e.g. use output of config programs rather than hardcoding paths. + +* Uses OS distribution methods for software when possible + + Use apt-get or homebrew. With PPAs, it should be possible to get all software installed this way. From 65f3ac8faf987fb85ad02bbbb48e62549044c90e Mon Sep 17 00:00:00 2001 From: Paul Norman Date: Sat, 2 Jan 2016 21:41:27 -0800 Subject: [PATCH 003/228] Commit of basic Jekyll theme --- .gitignore | 3 + _config.yml | 17 +++ _includes/footer.html | 38 +++++ _includes/head.html | 12 ++ _includes/header.html | 27 ++++ _includes/icon-github.html | 1 + _includes/icon-github.svg | 1 + _includes/icon-twitter.html | 1 + _includes/icon-twitter.svg | 1 + _layouts/default.html | 20 +++ _layouts/page.html | 14 ++ _sass/_base.scss | 206 +++++++++++++++++++++++++++ _sass/_layout.scss | 242 ++++++++++++++++++++++++++++++++ _sass/_syntax-highlighting.scss | 71 ++++++++++ about.md | 15 ++ css/main.scss | 53 +++++++ feed.xml | 30 ++++ index.html | 23 +++ 18 files changed, 775 insertions(+) create mode 100644 .gitignore create mode 100644 _config.yml create mode 100644 _includes/footer.html create mode 100644 _includes/head.html create mode 100644 _includes/header.html create mode 100644 _includes/icon-github.html create mode 100644 _includes/icon-github.svg create mode 100644 _includes/icon-twitter.html create mode 100644 _includes/icon-twitter.svg create mode 100644 _layouts/default.html create mode 100644 _layouts/page.html create mode 100644 _sass/_base.scss create mode 100644 _sass/_layout.scss create mode 100644 _sass/_syntax-highlighting.scss create mode 100644 about.md create mode 100644 css/main.scss create mode 100644 feed.xml create mode 100644 index.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..45c1505 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +_site +.sass-cache +.jekyll-metadata diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..d0d56c4 --- /dev/null +++ b/_config.yml @@ -0,0 +1,17 @@ +# Welcome to Jekyll! +# +# This config file is meant for settings that affect your whole blog, values +# which you are expected to set up once and rarely need to edit after that. +# For technical reasons, this file is *NOT* reloaded automatically when you use +# 'jekyll serve'. If you change this file, please restart the server process. + +# Site settings +title: Switch2OSM +description: > # this means to ignore newlines until "baseurl:" + Switch to OpenStreetMap and discover how you can build beautiful maps from the world’s best map data. +baseurl: "" # the subpath of your site, e.g. /blog +url: "http://www.switch2osm.org" # the base hostname & protocol for your site +github_username: switch2osm + +# Build settings +markdown: kramdown diff --git a/_includes/footer.html b/_includes/footer.html new file mode 100644 index 0000000..72239f1 --- /dev/null +++ b/_includes/footer.html @@ -0,0 +1,38 @@ +
+ +
+ + + + + +
+ +
diff --git a/_includes/head.html b/_includes/head.html new file mode 100644 index 0000000..41340ae --- /dev/null +++ b/_includes/head.html @@ -0,0 +1,12 @@ + + + + + + {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %} + + + + + + diff --git a/_includes/header.html b/_includes/header.html new file mode 100644 index 0000000..b3f86db --- /dev/null +++ b/_includes/header.html @@ -0,0 +1,27 @@ + diff --git a/_includes/icon-github.html b/_includes/icon-github.html new file mode 100644 index 0000000..e501a16 --- /dev/null +++ b/_includes/icon-github.html @@ -0,0 +1 @@ +{% include icon-github.svg %}{{ include.username }} diff --git a/_includes/icon-github.svg b/_includes/icon-github.svg new file mode 100644 index 0000000..4422c4f --- /dev/null +++ b/_includes/icon-github.svg @@ -0,0 +1 @@ + diff --git a/_includes/icon-twitter.html b/_includes/icon-twitter.html new file mode 100644 index 0000000..e623dbd --- /dev/null +++ b/_includes/icon-twitter.html @@ -0,0 +1 @@ +{{ include.username }} diff --git a/_includes/icon-twitter.svg b/_includes/icon-twitter.svg new file mode 100644 index 0000000..dcf660e --- /dev/null +++ b/_includes/icon-twitter.svg @@ -0,0 +1 @@ + diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..e4ab96f --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,20 @@ + + + + {% include head.html %} + + + + {% include header.html %} + +
+
+ {{ content }} +
+
+ + {% include footer.html %} + + + + diff --git a/_layouts/page.html b/_layouts/page.html new file mode 100644 index 0000000..ce233ad --- /dev/null +++ b/_layouts/page.html @@ -0,0 +1,14 @@ +--- +layout: default +--- +
+ +
+

{{ page.title }}

+
+ +
+ {{ content }} +
+ +
diff --git a/_sass/_base.scss b/_sass/_base.scss new file mode 100644 index 0000000..0883c3c --- /dev/null +++ b/_sass/_base.scss @@ -0,0 +1,206 @@ +/** + * Reset some basic elements + */ +body, h1, h2, h3, h4, h5, h6, +p, blockquote, pre, hr, +dl, dd, ol, ul, figure { + margin: 0; + padding: 0; +} + + + +/** + * Basic styling + */ +body { + font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; + color: $text-color; + background-color: $background-color; + -webkit-text-size-adjust: 100%; + -webkit-font-feature-settings: "kern" 1; + -moz-font-feature-settings: "kern" 1; + -o-font-feature-settings: "kern" 1; + font-feature-settings: "kern" 1; + font-kerning: normal; +} + + + +/** + * Set `margin-bottom` to maintain vertical rhythm + */ +h1, h2, h3, h4, h5, h6, +p, blockquote, pre, +ul, ol, dl, figure, +%vertical-rhythm { + margin-bottom: $spacing-unit / 2; +} + + + +/** + * Images + */ +img { + max-width: 100%; + vertical-align: middle; +} + + + +/** + * Figures + */ +figure > img { + display: block; +} + +figcaption { + font-size: $small-font-size; +} + + + +/** + * Lists + */ +ul, ol { + margin-left: $spacing-unit; +} + +li { + > ul, + > ol { + margin-bottom: 0; + } +} + + + +/** + * Headings + */ +h1, h2, h3, h4, h5, h6 { + font-weight: $base-font-weight; +} + + + +/** + * Links + */ +a { + color: $brand-color; + text-decoration: none; + + &:visited { + color: darken($brand-color, 15%); + } + + &:hover { + color: $text-color; + text-decoration: underline; + } +} + + + +/** + * Blockquotes + */ +blockquote { + color: $grey-color; + border-left: 4px solid $grey-color-light; + padding-left: $spacing-unit / 2; + font-size: 18px; + letter-spacing: -1px; + font-style: italic; + + > :last-child { + margin-bottom: 0; + } +} + + + +/** + * Code formatting + */ +pre, +code { + font-size: 15px; + border: 1px solid $grey-color-light; + border-radius: 3px; + background-color: #eef; +} + +code { + padding: 1px 5px; +} + +pre { + padding: 8px 12px; + overflow-x: auto; + + > code { + border: 0; + padding-right: 0; + padding-left: 0; + } +} + + + +/** + * Wrapper + */ +.wrapper { + max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2)); + max-width: calc(#{$content-width} - (#{$spacing-unit} * 2)); + margin-right: auto; + margin-left: auto; + padding-right: $spacing-unit; + padding-left: $spacing-unit; + @extend %clearfix; + + @include media-query($on-laptop) { + max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit})); + max-width: calc(#{$content-width} - (#{$spacing-unit})); + padding-right: $spacing-unit / 2; + padding-left: $spacing-unit / 2; + } +} + + + +/** + * Clearfix + */ +%clearfix { + + &:after { + content: ""; + display: table; + clear: both; + } +} + + + +/** + * Icons + */ +.icon { + + > svg { + display: inline-block; + width: 16px; + height: 16px; + vertical-align: middle; + + path { + fill: $grey-color; + } + } +} diff --git a/_sass/_layout.scss b/_sass/_layout.scss new file mode 100644 index 0000000..9cbfdde --- /dev/null +++ b/_sass/_layout.scss @@ -0,0 +1,242 @@ +/** + * Site header + */ +.site-header { + border-top: 5px solid $grey-color-dark; + border-bottom: 1px solid $grey-color-light; + min-height: 56px; + + // Positioning context for the mobile navigation icon + position: relative; +} + +.site-title { + font-size: 26px; + font-weight: 300; + line-height: 56px; + letter-spacing: -1px; + margin-bottom: 0; + float: left; + + &, + &:visited { + color: $grey-color-dark; + } +} + +.site-nav { + float: right; + line-height: 56px; + + .menu-icon { + display: none; + } + + .page-link { + color: $text-color; + line-height: $base-line-height; + + // Gaps between nav items, but not on the last one + &:not(:last-child) { + margin-right: 20px; + } + } + + @include media-query($on-palm) { + position: absolute; + top: 9px; + right: $spacing-unit / 2; + background-color: $background-color; + border: 1px solid $grey-color-light; + border-radius: 5px; + text-align: right; + + .menu-icon { + display: block; + float: right; + width: 36px; + height: 26px; + line-height: 0; + padding-top: 10px; + text-align: center; + + > svg { + width: 18px; + height: 15px; + + path { + fill: $grey-color-dark; + } + } + } + + .trigger { + clear: both; + display: none; + } + + &:hover .trigger { + display: block; + padding-bottom: 5px; + } + + .page-link { + display: block; + padding: 5px 10px; + + &:not(:last-child) { + margin-right: 0; + } + margin-left: 20px; + } + } +} + + + +/** + * Site footer + */ +.site-footer { + border-top: 1px solid $grey-color-light; + padding: $spacing-unit 0; +} + +.footer-heading { + font-size: 18px; + margin-bottom: $spacing-unit / 2; +} + +.contact-list, +.social-media-list { + list-style: none; + margin-left: 0; +} + +.footer-col-wrapper { + font-size: 15px; + color: $grey-color; + margin-left: -$spacing-unit / 2; + @extend %clearfix; +} + +.footer-col { + float: left; + margin-bottom: $spacing-unit / 2; + padding-left: $spacing-unit / 2; +} + +.footer-col-1 { + width: -webkit-calc(35% - (#{$spacing-unit} / 2)); + width: calc(35% - (#{$spacing-unit} / 2)); +} + +.footer-col-2 { + width: -webkit-calc(20% - (#{$spacing-unit} / 2)); + width: calc(20% - (#{$spacing-unit} / 2)); +} + +.footer-col-3 { + width: -webkit-calc(45% - (#{$spacing-unit} / 2)); + width: calc(45% - (#{$spacing-unit} / 2)); +} + +@include media-query($on-laptop) { + .footer-col-1, + .footer-col-2 { + width: -webkit-calc(50% - (#{$spacing-unit} / 2)); + width: calc(50% - (#{$spacing-unit} / 2)); + } + + .footer-col-3 { + width: -webkit-calc(100% - (#{$spacing-unit} / 2)); + width: calc(100% - (#{$spacing-unit} / 2)); + } +} + +@include media-query($on-palm) { + .footer-col { + float: none; + width: -webkit-calc(100% - (#{$spacing-unit} / 2)); + width: calc(100% - (#{$spacing-unit} / 2)); + } +} + + + +/** + * Page content + */ +.page-content { + padding: $spacing-unit 0; +} + +.page-heading { + font-size: 20px; +} + +.post-list { + margin-left: 0; + list-style: none; + + > li { + margin-bottom: $spacing-unit; + } +} + +.post-meta { + font-size: $small-font-size; + color: $grey-color; +} + +.post-link { + display: block; + font-size: 24px; +} + + + +/** + * Posts + */ +.post-header { + margin-bottom: $spacing-unit; +} + +.post-title { + font-size: 42px; + letter-spacing: -1px; + line-height: 1; + + @include media-query($on-laptop) { + font-size: 36px; + } +} + +.post-content { + margin-bottom: $spacing-unit; + + h2 { + font-size: 32px; + + @include media-query($on-laptop) { + font-size: 28px; + } + } + + h3 { + font-size: 26px; + + @include media-query($on-laptop) { + font-size: 22px; + } + } + + h4 { + font-size: 20px; + + @include media-query($on-laptop) { + font-size: 18px; + } + } +} diff --git a/_sass/_syntax-highlighting.scss b/_sass/_syntax-highlighting.scss new file mode 100644 index 0000000..8fac597 --- /dev/null +++ b/_sass/_syntax-highlighting.scss @@ -0,0 +1,71 @@ +/** + * Syntax highlighting styles + */ +.highlight { + background: #fff; + @extend %vertical-rhythm; + + .highlighter-rouge & { + background: #eef; + } + + .c { color: #998; font-style: italic } // Comment + .err { color: #a61717; background-color: #e3d2d2 } // Error + .k { font-weight: bold } // Keyword + .o { font-weight: bold } // Operator + .cm { color: #998; font-style: italic } // Comment.Multiline + .cp { color: #999; font-weight: bold } // Comment.Preproc + .c1 { color: #998; font-style: italic } // Comment.Single + .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special + .gd { color: #000; background-color: #fdd } // Generic.Deleted + .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific + .ge { font-style: italic } // Generic.Emph + .gr { color: #a00 } // Generic.Error + .gh { color: #999 } // Generic.Heading + .gi { color: #000; background-color: #dfd } // Generic.Inserted + .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific + .go { color: #888 } // Generic.Output + .gp { color: #555 } // Generic.Prompt + .gs { font-weight: bold } // Generic.Strong + .gu { color: #aaa } // Generic.Subheading + .gt { color: #a00 } // Generic.Traceback + .kc { font-weight: bold } // Keyword.Constant + .kd { font-weight: bold } // Keyword.Declaration + .kp { font-weight: bold } // Keyword.Pseudo + .kr { font-weight: bold } // Keyword.Reserved + .kt { color: #458; font-weight: bold } // Keyword.Type + .m { color: #099 } // Literal.Number + .s { color: #d14 } // Literal.String + .na { color: #008080 } // Name.Attribute + .nb { color: #0086B3 } // Name.Builtin + .nc { color: #458; font-weight: bold } // Name.Class + .no { color: #008080 } // Name.Constant + .ni { color: #800080 } // Name.Entity + .ne { color: #900; font-weight: bold } // Name.Exception + .nf { color: #900; font-weight: bold } // Name.Function + .nn { color: #555 } // Name.Namespace + .nt { color: #000080 } // Name.Tag + .nv { color: #008080 } // Name.Variable + .ow { font-weight: bold } // Operator.Word + .w { color: #bbb } // Text.Whitespace + .mf { color: #099 } // Literal.Number.Float + .mh { color: #099 } // Literal.Number.Hex + .mi { color: #099 } // Literal.Number.Integer + .mo { color: #099 } // Literal.Number.Oct + .sb { color: #d14 } // Literal.String.Backtick + .sc { color: #d14 } // Literal.String.Char + .sd { color: #d14 } // Literal.String.Doc + .s2 { color: #d14 } // Literal.String.Double + .se { color: #d14 } // Literal.String.Escape + .sh { color: #d14 } // Literal.String.Heredoc + .si { color: #d14 } // Literal.String.Interpol + .sx { color: #d14 } // Literal.String.Other + .sr { color: #009926 } // Literal.String.Regex + .s1 { color: #d14 } // Literal.String.Single + .ss { color: #990073 } // Literal.String.Symbol + .bp { color: #999 } // Name.Builtin.Pseudo + .vc { color: #008080 } // Name.Variable.Class + .vg { color: #008080 } // Name.Variable.Global + .vi { color: #008080 } // Name.Variable.Instance + .il { color: #099 } // Literal.Number.Integer.Long +} diff --git a/about.md b/about.md new file mode 100644 index 0000000..d0e6de5 --- /dev/null +++ b/about.md @@ -0,0 +1,15 @@ +--- +layout: page +title: About +permalink: /about/ +--- + +This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](http://jekyllrb.com/) + +You can find the source code for the Jekyll new theme at: +{% include icon-github.html username="jglovier" %} / +[jekyll-new](https://github.com/jglovier/jekyll-new) + +You can find the source code for Jekyll at +{% include icon-github.html username="jekyll" %} / +[jekyll](https://github.com/jekyll/jekyll) diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..f2e566e --- /dev/null +++ b/css/main.scss @@ -0,0 +1,53 @@ +--- +# Only the main Sass file needs front matter (the dashes are enough) +--- +@charset "utf-8"; + + + +// Our variables +$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +$base-font-size: 16px; +$base-font-weight: 400; +$small-font-size: $base-font-size * 0.875; +$base-line-height: 1.5; + +$spacing-unit: 30px; + +$text-color: #111; +$background-color: #fdfdfd; +$brand-color: #2a7ae2; + +$grey-color: #828282; +$grey-color-light: lighten($grey-color, 40%); +$grey-color-dark: darken($grey-color, 25%); + +// Width of the content area +$content-width: 800px; + +$on-palm: 600px; +$on-laptop: 800px; + + + +// Use media queries like this: +// @include media-query($on-palm) { +// .wrapper { +// padding-right: $spacing-unit / 2; +// padding-left: $spacing-unit / 2; +// } +// } +@mixin media-query($device) { + @media screen and (max-width: $device) { + @content; + } +} + + + +// Import partials from `sass_dir` (defaults to `_sass`) +@import + "base", + "layout", + "syntax-highlighting" +; diff --git a/feed.xml b/feed.xml new file mode 100644 index 0000000..a6628bd --- /dev/null +++ b/feed.xml @@ -0,0 +1,30 @@ +--- +layout: null +--- + + + + {{ site.title | xml_escape }} + {{ site.description | xml_escape }} + {{ site.url }}{{ site.baseurl }}/ + + {{ site.time | date_to_rfc822 }} + {{ site.time | date_to_rfc822 }} + Jekyll v{{ jekyll.version }} + {% for post in site.posts limit:10 %} + + {{ post.title | xml_escape }} + {{ post.content | xml_escape }} + {{ post.date | date_to_rfc822 }} + {{ post.url | prepend: site.baseurl | prepend: site.url }} + {{ post.url | prepend: site.baseurl | prepend: site.url }} + {% for tag in post.tags %} + {{ tag | xml_escape }} + {% endfor %} + {% for cat in post.categories %} + {{ cat | xml_escape }} + {% endfor %} + + {% endfor %} + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..83d9398 --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ +--- +layout: default +--- + +
+ +

Posts

+ +
    + {% for post in site.posts %} +
  • + + +

    + {{ post.title }} +

    +
  • + {% endfor %} +
+ +

subscribe via RSS

+ +
From 351aed9118a9a042b50de70e0832c8ca6fd3778d Mon Sep 17 00:00:00 2001 From: Paul Norman Date: Sat, 2 Jan 2016 21:58:54 -0800 Subject: [PATCH 004/228] Get CI going --- .travis.yml | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 .travis.yml diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..1274b04 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,11 @@ +sudo: false +language: ruby +rvm: + - 2.0.0 +branches: + only: + - /^.*$/ +install: + - gem install +script: + - jekyll build --quiet --trace From 4ac7335915d850966386976b858ef5c988d33b66 Mon Sep 17 00:00:00 2001 From: Paul Norman Date: Sat, 2 Jan 2016 22:08:44 -0800 Subject: [PATCH 005/228] CI improvements --- .travis.yml | 6 +++--- Gemfile | 2 ++ 2 files changed, 5 insertions(+), 3 deletions(-) create mode 100644 Gemfile diff --git a/.travis.yml b/.travis.yml index 1274b04..bb0a01c 100644 --- a/.travis.yml +++ b/.travis.yml @@ -5,7 +5,7 @@ rvm: branches: only: - /^.*$/ -install: - - gem install +install: + - gem install bundler && bundle install script: - - jekyll build --quiet --trace + - bundle exec jekyll build --quiet --trace diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..053c27d --- /dev/null +++ b/Gemfile @@ -0,0 +1,2 @@ +source 'https://rubygems.org' +gem 'github-pages' From 930f41a2762a86299ae8cf3829f84021340712df Mon Sep 17 00:00:00 2001 From: Paul Norman Date: Sun, 10 Jan 2016 00:59:23 -0800 Subject: [PATCH 006/228] Copy some content from the old site for layout testing --- about.md | 15 -- find-out-more.md | 42 ++++++ using-tiles.md | 26 ++++ using-tiles/getting-started-with-leaflet.md | 131 ++++++++++++++++++ .../getting-started-with-openlayers.md | 63 +++++++++ why-switch.md | 28 ++++ 6 files changed, 290 insertions(+), 15 deletions(-) delete mode 100644 about.md create mode 100644 find-out-more.md create mode 100644 using-tiles.md create mode 100644 using-tiles/getting-started-with-leaflet.md create mode 100644 using-tiles/getting-started-with-openlayers.md create mode 100644 why-switch.md diff --git a/about.md b/about.md deleted file mode 100644 index d0e6de5..0000000 --- a/about.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -layout: page -title: About -permalink: /about/ ---- - -This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](http://jekyllrb.com/) - -You can find the source code for the Jekyll new theme at: -{% include icon-github.html username="jglovier" %} / -[jekyll-new](https://github.com/jglovier/jekyll-new) - -You can find the source code for Jekyll at -{% include icon-github.html username="jekyll" %} / -[jekyll](https://github.com/jekyll/jekyll) diff --git a/find-out-more.md b/find-out-more.md new file mode 100644 index 0000000..627094b --- /dev/null +++ b/find-out-more.md @@ -0,0 +1,42 @@ +--- +layout: page +title: Find Out More +permalink: /find-out-more/ +--- + +## Getting help + +OpenStreetMap is a decentralised, volunteer-run project so there’s no single contact e-mail address for your queries. Instead, our community’s knowledge can help resolve any issues you might have. + +* [OpenStreetMap IRC](http://irc.openstreetmap.org/) (Internet Relay Chat): 24-hour live OSM chat (use channel #osm or #osm-dev) +* [Interactive help system](http://help.openstreetmap.org/) +* [Developer FAQ](http://wiki.openstreetmap.org/wiki/Developer_FAQ) +* [Main FAQ](http://wiki.openstreetmap.org/wiki/FAQ) + +## Other tutorials on switching to OSM +* [Using MapBox and Leaflet](http://developmentseed.org/blog/2012/jan/12/open-source-with-leaflet-and-mapbox/) (Development Seed) +* [Kelso Cartography guide](https://github.com/nvkelso/geo-how-to/wiki) +* [Build a server using MapServer](http://trac.osgeo.org/mapserver/wiki/RenderingOsmDataUbuntu) + +## Editing OpenStreetMap +* [LearnOSM.org](http://www.learnosm.org/) guide for beginners + +## Books +* [OpenStreetMap: Using and Enhancing the Free Map of the World](http://openstreetmap.info/) (English/German) +* [OpenStreetMap: Be Your Own Cartographer](https://www.packtpub.com/openstreetmap/book) (English) +* [OpenStreetMap: A Beginner’s Guide](http://en.flossmanuals.net/openstreetmap/) (English/French) +* [OpenLayers 2.10 Beginners Guide](https://www.packtpub.com/openlayers-2-1-javascript-web-mapping-library-beginners-guide/book) (English) + +## Community resources +* OpenStreetMap Foundation +* Project wiki +* Mailing lists (searchable archive) + +## Press enquiries +Please contact the OSM Foundation’s Communications Working Group. + +# About switch2osm +Switch2osm is a community driven site coordinated by [Richard Fairhurst](http://www.systemed.net/) and [Paul Norman](http://www.paulnorman.ca/) with huge amounts of help from the OpenStreetMap community. You can [get involved on GitHub](https://github.com/switch2osm/switch2osm.github.io) + +Comments or suggestions? Please make contact via IRC at the first instance. + diff --git a/using-tiles.md b/using-tiles.md new file mode 100644 index 0000000..4e18248 --- /dev/null +++ b/using-tiles.md @@ -0,0 +1,26 @@ +--- +layout: page +title: Using Tiles +permalink: /using-tiles/ +--- + +You can switch a website to OpenStreetMap in under an hour. Choose a JavaScript API and a tile provider, and you’re ready to go. Then, as your needs increase, you can consider custom tiles, either from a specialist provider or generated yourself. + +# Choosing an API/library +Unlike commercial online map providers, OpenStreetMap does not provide an “official” JavaScript library which you are required to use. Rather, you can use any library that meets your needs. The two most popular are OpenLayers and Leaflet. Both are open source. + +Getting started with Leaflet – a new, lighter library + +Getting started with OpenLayers – a mature, feature-rich library + +If you choose to use MapQuest Open tiles (made from OSM data), you can also use the MapQuest Open API which adds routing and geocoding capabilities to the standard featureset. +Mapstraction is a library which enables you to switch from one mapping provider to another without changing your code. + +Choosing a tile provider +Apart from very limited testing purposes, you should not use the tiles supplied by OpenStreetMap.org itself. OpenStreetMap is a volunteer-run non-profit body and cannot supply tiles for large-scale commercial use. Rather, you should use a third party provider that makes tiles from OSM data, or generate your own. + +Free providers: +MapQuest Open + +Paid-for providers: see list. +Or go on to find out how to generate and serve your own tiles. \ No newline at end of file diff --git a/using-tiles/getting-started-with-leaflet.md b/using-tiles/getting-started-with-leaflet.md new file mode 100644 index 0000000..4867625 --- /dev/null +++ b/using-tiles/getting-started-with-leaflet.md @@ -0,0 +1,131 @@ +--- +layout: page +title: Getting started with Leaflet +permalink: /using-tiles/getting-started-with-leaflet/ +--- + +Leaflet is a new JavaScript library for embedding maps which is quickly gaining popularity. Simpler and smaller than OpenLayers, it is a good choice for those with fairly standard embedding needs. + +On this page, we explain how to create a simple embedded map with markers using Leaflet, as shown on a recent switcher to OpenStreetMap, property site PlotBrowser.com. + +# Downloading Leaflet +You can download Leaflet from its own site at leafletjs.com. The source is available as a .zip, or you can fork it on GitHub. + +Leaflet uses a permissive BSD open-source licence so can be incorporated into any site without legal worries. + +Copy the dist/ directory to the place on your webserver where the embedding page will be served from, and rename it `leaflet/`. + +Embedding Leaflet in your page +For ease of use, we’ll create a .js file with all our map code in it. You can of course put this inline in the main page if you like. Create this page in your leaflet/ directory and call it leafletembed.js. + +Use the following code in leafletembed.js: + + var map; + var ajaxRequest; + var plotlist; + var plotlayers=[]; + + function initmap() { + // set up the map + map = new L.Map('map'); + + // create the tile layer with correct attribution + var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; + var osmAttrib='Map data © OpenStreetMap contributors'; + var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 12, attribution: osmAttrib}); + + // start the map in South-East England + map.setView(new L.LatLng(51.3, 0.7),9); + map.addLayer(osm); + } + +Then include it in your embedding page like this: + + + + + +Add an appropriately-sized div called ‘map‘ to your embedding page; then, finally, add some JavaScript to your embedding page to initialise the map, either at the end of the page or on an onload event: `initmap();` + +Congratulations; you have embedded your first map with Leaflet. + +# Showing markers as the user pans around the map + +There are several excellent examples on the Leaflet website. Here we’ll demonstrate one more common case: showing clickable markers on the map, where the marker locations are reloaded from the server as the user pans around. + +First, we’ll add the standard AJAX code of the type you’ll have seen a thousand times before. At the top of the initmap function in leafletembed.js, add: + + + // set up AJAX request + ajaxRequest=getXmlHttpObject(); + if (ajaxRequest==null) { + alert ("This browser does not support HTTP Request"); + return; + } + +then add this new function elsewhere in leafletembed.js: + + function getXmlHttpObject() { + if (window.XMLHttpRequest) { return new XMLHttpRequest(); } + if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } + return null; + } + +Next, we’ll add a function to request the list of markers (in JSON) for the current map viewport: + + + function askForPlots() { + // request the marker info with AJAX for the current bounds + var bounds=map.getBounds(); + var minll=bounds.getSouthWest(); + var maxll=bounds.getNorthEast(); + var msg='leaflet/findbybbox.cgi?format=leaflet&bbox='+minll.lng+','+minll.lat+','+maxll.lng+','+maxll.lat; + ajaxRequest.onreadystatechange = stateChanged; + ajaxRequest.open('GET', msg, true); + ajaxRequest.send(null); + } + +This talks to a serverside script which simply returns a JSON array of the properties we want to display on the map, like this: + + [{"name":"Tunbridge Wells, Langton Road, Burnt Cottage", + "lon":"0.213102", + "lat":"51.1429", + "details":"A Grade II listed five bedroom wing in need of renovation."}] + (etc.) + +When this arrives, we’ll clear the existing markers and display the new ones, creating a rudimentary pop-up window for each one: + + function stateChanged() { + // if AJAX returned a list of markers, add them to the map + if (ajaxRequest.readyState==4) { + //use the info here that was returned + if (ajaxRequest.status==200) { + plotlist=eval("(" + ajaxRequest.responseText + ")"); + removeMarkers(); + for (i=0;i"+plotlist[i].name+""+plotlist[i].details); + plotlayers.push(plotmark); + } + } + } + } + + function removeMarkers() { + for (i=0;i + + + OpenLayers Basic Example + + + + + + + + + +

My HTML page with an embedded map

+
+ + + +This example shows how to initialise a map object which will appear within a div on your HTML page. A LonLat object is created to represent the centre point of the map. Try playing with the latitude, longitude values. A call to ‘transform’ sorts out the projections, and we use this same location to place a marker. + +# Downloading OpenLayers +The above example also shows how, with a script tag, you can reference the OpenLayers javascript hosted remotely at openlayers.org . There are advantages and disadvantages to this approach. The alternative is to download OpenLayers and host it yourself alongside your HTML. + +You can download a zip file from openlayers.org which contains many files, only some of which are needed. In fact you might use only OpenLayers.js a single file of compacted javascript. + +The ‘theme’ and ‘image’ directories are also needed if you wish to self-host all of the required resources. You can configure visual aspects of OpenLayers using those files. The ‘lib’ directory has the source javascript before it was compacted into a single file, but you can actually run OpenLayers in ‘multi-file’ mode from these. That can be a good idea as you develop with the OpenLayers API, since browser error reports will take you to line numbers showing something more meaningful. + +However you chose to work with OpenLayers, the library is fully open-source (under a modified BSD license) and can be used for free in your projects and commercial products. \ No newline at end of file diff --git a/why-switch.md b/why-switch.md new file mode 100644 index 0000000..d17f6bb --- /dev/null +++ b/why-switch.md @@ -0,0 +1,28 @@ +--- +layout: page +title: Why Switch? +permalink: /why-switch/ +--- + +# OpenStreetMap won’t charge you + +OpenStreetMap is open data. We won’t charge for it – ever. Our licence says that you can always copy our data for free. +This data is made into the “map tiles” that you show on your site. You can do this yourself. Or you can find a specialist to do it: some will charge for this, some won’t. But OpenStreetMap itself will never charge you for the data. + +# Make the maps suit you + +With other map providers, the map looks how the provider wants it to look. You might be able to do a bit of rudimentary recolouring. But it’s still their style of map, not yours. + +With OpenStreetMap, you’re in control. Turning the data into tiles can be done any way you like. Want to emphasise cycle routes and play down motorways? No problem. (Most other maps don’t even have cycle routes.) Want to label subway stops but ignore bus stops? Easy. + +# Rich, accurate, up-to-date map data + +Most commercial providers just do streets. OpenStreetMap might have “street” in the name, but we do much more. Natural features, bus routes, footpaths and cycleways, administrative boundaries, shops, rivers and canals… you name it. + +Commercial providers also only update their data every month, if you’re lucky. New roads and buildings can be missing from their datasets long after they’ve opened. OpenStreetMap data is constantly updated, and you can get those updates every day, every hour or even every minute if you want. + +All this is contributed by our volunteers (over 1,000,000 signed up so far, and growing every day) – the people who really know about their area. That’s why OpenStreetMap often shows new developments before any commercial provider. + +# It’s easier than you think + +There’s no limit to what you can do with OpenStreetMap. Yet it needn’t take long to get started. You can switch to OSM in under an hour using tools like the easy Leaflet API and MapQuest Open’s free tiles. Read the rest of this site to get started with the possibilities. \ No newline at end of file From c3f1d1919e8b2d1e880aad658387d823529fea3b Mon Sep 17 00:00:00 2001 From: Paul Norman Date: Sun, 10 Jan 2016 00:59:45 -0800 Subject: [PATCH 007/228] Slim down footer --- _config.yml | 2 ++ _includes/footer.html | 18 +----------------- 2 files changed, 3 insertions(+), 17 deletions(-) diff --git a/_config.yml b/_config.yml index d0d56c4..94ef858 100644 --- a/_config.yml +++ b/_config.yml @@ -9,6 +9,8 @@ title: Switch2OSM description: > # this means to ignore newlines until "baseurl:" Switch to OpenStreetMap and discover how you can build beautiful maps from the world’s best map data. +copyright: > + © 2013–2015 OpenStreetMap and contributors, CC BY-SA baseurl: "" # the subpath of your site, e.g. /blog url: "http://www.switch2osm.org" # the base hostname & protocol for your site github_username: switch2osm diff --git a/_includes/footer.html b/_includes/footer.html index 72239f1..65ec58b 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -7,26 +7,10 @@