<commit_before>import React from "react/addons";

import {
  Appear, BlockQuote, Cite, CodePane, Deck, Fill, Fit,
  Heading, Image, Layout, Link, ListItem, List, Quote, S, Slide, Text
} from "../src/spectacle";



import preloader from "../src/utils/preloader";

import Interactive from "./interactive";
import LeafletMap from "./LeafletMap";

const images = {
  city: require("./city.jpg"),
  kat: require("./kat.png"),
  logo: require("./formidable-logo.svg"),
  osmWorld: require("./osm-whole-world.png"),
  hotLogo: require("./hot-osm-logo.png"),
  IDPCamps: require("./ny-times-kathmandu-camps.png"),
  taskManager: require("./nepal-hotosm-task-manager.png"),
  nepalRescueMap: require("./nepal-canadian-rescue-map.png"),
  missingMapsProcess: require("./missing-maps-process.svg"),

  //https://www.flickr.com/photos/isohedral/14675824683/
  espressoPour: require("./moon-shot-espresso-cup-14675824683_c17e10c8a2_k.jpg"),

  //https://www.flickr.com/photos/biblarte/9963929406/in/photolist-gbtK5j-cvXbGE-hghPwY-gbu4kV-67UZCU-6RYpHp-fEAYXj-os4AMh-bNtVQ-55AERH-3bxdXe-n71Tt2-7ziHrZ-o5erp3-fUApRE-bm1Y1H-9916kg-hUnRYZ-5CSMrX-hSwQbK-apAQwp-4Q8dXu-63obju-gbzS6G-gbAcQP-63iUS4-37sjB-51ffP-aBgQeQ-7NqwRf-fDZWw5-nFvACJ-4rt2p8-nHjfEd-nHju1d-nHjinN-qGRGFt-nr4PAh-nGByxE-nHKHpL-nr4JBu-nKNa1F-nGNZZH-pWgN8p-nGwaar-nKMUKB-nGNNYz-nK8JZk-nqdEDN-nqRYxu
  pracaDoComercio: require("./praca-do-comercio-9963929406_4ba50c00e3_o.jpg"),
};

const huge = {
  width: '100%'
}

preloader([images.city, images.kat]);

export default class extends React.Component {
  render() {
    return (
      <Deck transition={["fade"]} transitionDuration={300} progress="bar">
        <Slide
          bgColor="primary"
          notes="Audience Questions: Who has heard of OSM? Used OSM? Edited OSM?"
        >
          <Heading size={1} fit caps textColor="secondary">
            OpenStreetMap!
          </Heading>
        </Slide>

        <Slide bgImage={images.osmWorld.replace("/", "")} bgDarken={0}
          notes="Let's start off talking about what OpenStreetMap is."
        >
        </Slide>

        <Slide transitionDuration={1000} bgColor="primary" bgImage={images.osmWorld.replace("/", "")} bgDarken={0.75}>
          <Heading size={1} bold fit caps textColor="primary">
            OpenStreetMap is
          </Heading>
          <Appear fid="1">
            <Heading size={2} caps fill textColor="tertiary">"Wikipedia of maps"</Heading>
          </Appear>
          <Appear fid="2">
            <Heading size={2} caps fill textColor="tertiary">Map of the planet</Heading>
          </Appear>
          <Appear fid="3">
            <Heading size={2} caps fill textColor="tertiary">Free to edit</Heading>
          </Appear>
          <Appear fid="4">
            <Heading size={2} caps fill textColor="tertiary">Free to use*</Heading>
            <Heading size={4} caps fill textColor="tertiary">*under ODbL</Heading>
          </Appear>
        </Slide>



        <Slide full bgColor="primary" margin="0px" width="100%" height="100%">
          <LeafletMap
            view='portugal'
            url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          />
        </Slide>

        <Slide bgColor="primary" margin="0px" width="100%" height="100%">
          <LeafletMap
            view='lisboa'
            url='http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          />
        </Slide>

        <Slide bgColor="primary">
          <LeafletMap
            view='lisboa'
            url='http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png'
            attribution='&copy; Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
          />
        </Slide>

        <Slide bgColor="primary">
          <LeafletMap
            view='lisboa'
            url='http://{s}.tiles.mapbox.com/v3/examples.3hqcl3di/{z}/{x}/{y}.png'
            attribution='&copy; Map data © OpenStreetMap contributors'
          />
        </Slide>

        <Slide bgColor="primary">
          <LeafletMap
            view='lisboa'
            url='http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png'
            attribution='&copy; Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
          />
        </Slide>

        <Slide bgColor="primary" margin="0px" width="100%" height="100%">
          <LeafletMap
            view='porto'
            url='http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          />
        </Slide>

        <Slide bgColor="primary">
          <LeafletMap
            view='porto'
            url='http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'
            attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
          />
        </Slide>

        <Slide bgColor="primary">
          <LeafletMap
            view='porto'
            url='http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png'
            attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
          />
        </Slide>

        <Slide bgColor="primary"
          notes="There is also a serious side to OpenStreetMap. I think this is pretty cool, so I'm going to take a few minutes to talk about this."
        >
          <Image src={images.hotLogo.replace('/','')} margin="0px" width="100%" height="100%"/>
        </Slide>


        <Slide transition={["slide"]} bgColor="secondary"
          notes="In their own words..."
        >
          <BlockQuote>
            <Quote>The Humanitarian OpenStreetMap Team [HOT] applies the principles of open source and open data sharing for humanitarian response and economic development.</Quote>
            <Cite>hotosm.org</Cite>
          </BlockQuote>
        </Slide>

        <Slide bgImage={images.nepalRescueMap.replace("/", "")} bgDarken={0.75}
          notes="This is literally saving lives with open data. That's incredibly powerful."
        >
          <Heading size={1} caps fit textColor="tertiary">
            saving lives
          </Heading>
          <Heading size={1} caps fit textColor="primary">
            with open data
          </Heading>
        </Slide>

        <Slide bgColor="primary" bgFill={true} bgImage={images.missingMapsProcess.replace('/','')}
          notes="What does that look like? This is from the missing maps project, which is focused on non-crisis mapping. Remote volunteers fill in the map by tracing high resolution imagery that has been donated by companies and governments. Details get filled in by people on the ground and then humanitarian organizations can use the maps to do their work. This is more or less how things work in crisis mapping, but under a very compressed timeline."<commit_msg>add placeholder reminders to get some examples from tangrams and mapsense<commit_after>import React from "react/addons";

import {
  Appear, BlockQuote, Cite, CodePane, Deck, Fill, Fit,
  Heading, Image, Layout, Link, ListItem, List, Quote, S, Slide, Text
} from "../src/spectacle";



import preloader from "../src/utils/preloader";

import Interactive from "./interactive";
import LeafletMap from "./LeafletMap";

const images = {
  city: require("./city.jpg"),
  kat: require("./kat.png"),
  logo: require("./formidable-logo.svg"),
  osmWorld: require("./osm-whole-world.png"),
  hotLogo: require("./hot-osm-logo.png"),
  IDPCamps: require("./ny-times-kathmandu-camps.png"),
  taskManager: require("./nepal-hotosm-task-manager.png"),
  nepalRescueMap: require("./nepal-canadian-rescue-map.png"),
  missingMapsProcess: require("./missing-maps-process.svg"),

  //https://www.flickr.com/photos/isohedral/14675824683/
  espressoPour: require("./moon-shot-espresso-cup-14675824683_c17e10c8a2_k.jpg"),

  //https://www.flickr.com/photos/biblarte/9963929406/in/photolist-gbtK5j-cvXbGE-hghPwY-gbu4kV-67UZCU-6RYpHp-fEAYXj-os4AMh-bNtVQ-55AERH-3bxdXe-n71Tt2-7ziHrZ-o5erp3-fUApRE-bm1Y1H-9916kg-hUnRYZ-5CSMrX-hSwQbK-apAQwp-4Q8dXu-63obju-gbzS6G-gbAcQP-63iUS4-37sjB-51ffP-aBgQeQ-7NqwRf-fDZWw5-nFvACJ-4rt2p8-nHjfEd-nHju1d-nHjinN-qGRGFt-nr4PAh-nGByxE-nHKHpL-nr4JBu-nKNa1F-nGNZZH-pWgN8p-nGwaar-nKMUKB-nGNNYz-nK8JZk-nqdEDN-nqRYxu
  pracaDoComercio: require("./praca-do-comercio-9963929406_4ba50c00e3_o.jpg"),
};

const huge = {
  width: '100%'
}

preloader([images.city, images.kat]);

export default class extends React.Component {
  render() {
    return (
      <Deck transition={["fade"]} transitionDuration={300} progress="bar">
        <Slide
          bgColor="primary"
          notes="Audience Questions: Who has heard of OSM? Used OSM? Edited OSM?"
        >
          <Heading size={1} fit caps textColor="secondary">
            OpenStreetMap!
          </Heading>
        </Slide>

        <Slide bgImage={images.osmWorld.replace("/", "")} bgDarken={0}
          notes="Let's start off talking about what OpenStreetMap is."
        >
        </Slide>

        <Slide transitionDuration={1000} bgColor="primary" bgImage={images.osmWorld.replace("/", "")} bgDarken={0.75}>
          <Heading size={1} bold fit caps textColor="primary">
            OpenStreetMap is
          </Heading>
          <Appear fid="1">
            <Heading size={2} caps fill textColor="tertiary">"Wikipedia of maps"</Heading>
          </Appear>
          <Appear fid="2">
            <Heading size={2} caps fill textColor="tertiary">Map of the planet</Heading>
          </Appear>
          <Appear fid="3">
            <Heading size={2} caps fill textColor="tertiary">Free to edit</Heading>
          </Appear>
          <Appear fid="4">
            <Heading size={2} caps fill textColor="tertiary">Free to use*</Heading>
            <Heading size={4} caps fill textColor="tertiary">*under ODbL</Heading>
          </Appear>
        </Slide>



        <Slide full bgColor="primary" margin="0px" width="100%" height="100%">
          <LeafletMap
            view='portugal'
            url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          />
        </Slide>

        <Slide bgColor="primary" margin="0px" width="100%" height="100%">
          <LeafletMap
            view='lisboa'
            url='http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          />
        </Slide>

        <Slide bgColor="primary">
          <LeafletMap
            view='lisboa'
            url='http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png'
            attribution='&copy; Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
          />
        </Slide>

        <Slide bgColor="primary">
          <LeafletMap
            view='lisboa'
            url='http://{s}.tiles.mapbox.com/v3/examples.3hqcl3di/{z}/{x}/{y}.png'
            attribution='&copy; Map data © OpenStreetMap contributors'
          />
        </Slide>

        <Slide bgColor="primary">
          <LeafletMap
            view='lisboa'
            url='http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png'
            attribution='&copy; Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
          />
        </Slide>

        <Slide bgColor="primary" margin="0px" width="100%" height="100%">
          <LeafletMap
            view='porto'
            url='http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          />
        </Slide>

        <Slide bgColor="primary">
          <LeafletMap
            view='porto'
            url='http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'
            attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
          />
        </Slide>

        <Slide bgColor="primary">
          <LeafletMap
            view='porto'
            url='http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png'
            attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
          />
        </Slide>

        <Slide bgColor="primary"
        >
          tangrams
        </Slide>

        <Slide bgColor="primary"
        >
          mapsense
        </Slide>

        <Slide bgColor="primary"
          notes="There is also a serious side to OpenStreetMap. I think this is pretty cool, so I'm going to take a few minutes to talk about this."
        >
          <Image src={images.hotLogo.replace('/','')} margin="0px" width="100%" height="100%"/>
        </Slide>


        <Slide transition={["slide"]} bgColor="secondary"
          notes="In their own words..."
        >
          <BlockQuote>
            <Quote>The Humanitarian OpenStreetMap Team [HOT] applies the principles of open source and open data sharing for humanitarian response and economic development.</Quote>
            <Cite>hotosm.org</Cite>
          </BlockQuote>
        </Slide>

        <Slide bgImage={images.nepalRescueMap.replace("/", "")} bgDarken={0.75}
          notes="This is literally saving lives with open data. That's incredibly powerful."
        >
          <Heading size={1} caps fit textColor="tertiary">
            saving lives
          </Heading>
          <Heading size={1} caps fit textColor="primary">
            with open data
          </Heading>
        </Slide>

        <Slide bgColor="primary" bgFill={true} bgImage={images.missingMapsProcess.replace('/','')}
          notes="What does that look like? This is from the missing maps project, which is focused on non-crisis mapping. Remote volunteers fill in the map by tracing high resolution imagery that has been donated by companies and governments. Details get filled in by people on the ground and then humanitarian organizations can use the maps to do their work. This is more or less how things work in crisis mapping, but under a very compressed timeline."
{'fraction_non_alphanumeric': 0.1595132164354881, 'fraction_numerical': 0.021983773881182937, 'mean_word_length': 2.6075053103611046, 'pattern_counts': {'":': 0, '<': 209, '<?xml version=': 0, '>': 207, 'https://': 4, 'lorem ipsum': 0, 'www.': 12, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6573680', 'n_tokens_mistral': 5460, 'n_tokens_neox': 5116, 'n_words': 975}