maps-with-markdown/index.html at master · titaniumbones/maps-with-markdown · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>

  <head>
    <title>Title Here | by Your Name</title>
    <meta name="description" content="a markdown-based mapping exercise." />
    <!-- these script tags load important javascript "libraries"
         that our own little scripts depend on.  These are complex
         programs way beyond our capacities to construct; but we can
         make use of them nonetheless -->

    <!-- jQuery is an important framework used by many web projects  -->
    <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
    <!-- remarkable is our markdown parser, which translates markdown into HTML -->
    <script src="https://cdn.jsdelivr.net/remarkable/1.7.1/remarkable.min.js"></script>
    <!-- Our Bootstrap theme. To use another copy the appropriate URL from  -->
    <!-- https://www.bootstrapcdn.com/bootswatch/?theme=0 -->
    <link rel="stylesheet" type="text/css" media="all"
          href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/solar/bootstrap.min.css" />

    <script src="http://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyCVtRhi_zYbrx6XcR6c5Wu_VKmXWvnYz5E"></script>

    <!-- this line is NOT present in the jsbin version -->
    <link rel="stylesheet" href="./style.css" type="text/css" media="screen" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  </head>

  <!-- note the 'onload' attribute here.
       it calls the function "initialize"
       when the body has finished loading.  That's because the
       Javascript will not run properly unless it
       waits for the elements inside the body to load.  Therefore
       we don't run the most important parts of the code until the page has finished loading.
    -->
  <body onload="initializePage();">
    <!-- these next 2 divs place the main content inside a box with margins from the screen edge -->
    <div class="container">
      <div class = "row">

        <div id="contentdiv">
          <!-- Please don't add content to this div manually unless you're abolutely sure you want to. the contents of index.md will be rendered here, and you can include raw HTML in that file, too, if you wish.   -->
        </div>
      </div>
    </div>

    <!-- this line is NOT present in the jsbin version, and calls your custom js -->
    <script src="./script.js"></script>
      <script>
        // we define the main actions of the script as a function which wil lbe run when the
        // page resources have been completely loaded.
        var initializePage = function() {
          // instantiate the parser object and declare the
          // placeholder variable for the rendered content
          // while storing the original content so as not to lose it
          var md = new Remarkable({
              html: true,
              linkify: true}),
              renderedcontent = "",
              origContent = $("#contentdiv").html();

          md.block.ruler.enable([
            'footnote',
            'deflist'
          ]);
          md.inline.ruler.enable([
            'footnote_inline',
            'ins',
            'mark',
            'sub',
            'sup'
          ]);
          //retrieve the markdown file, parse it,
          // and use it to replace the content of #contentdiv.
          // wait till that's fine before attempting to load popcorn
          $.get("./index.md", function (response) {
            content = response;
            renderedcontent = md.render(content);
            $("#contentdiv").html(origContent + renderedcontent);
            initializeMap();
          });
        }
      </script>

  </body>

</html>