studland/map.html at master · djcarter85/studland · 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
87
88
89
90
91
92
93
94
95
96
97
98
---
layout: default
permalink: /map
category: map
---

<div class="section">
  <h1>Map</h1>
</div>

<div class="section">
  <div id="map"></div>
</div>

<div class="section">
  <div class="box p-0">
    <table class="table is-fullwidth is-narrow">

      {% assign locations = site.data.locations | sort: "name" %}
      {% for location in locations %}
      <tr>
        <td class="px-3">{{ location.name }}</td>
        <td>
          {% assign url = 'https://www.google.com/maps/search/?api=1&query=' | append: location.lat | append: '%2C' |
          append: location.lng %}
          {% if location.googlePlaceId %}
          {% assign url = url | append: '&query_place_id=' | append: location.googlePlaceId %}
          {% endif %}
          {% include map_link.html icon='googlemaps' url=url title='Google Maps' %}
        </td>
        <td>
          {% assign url = 'https://www.waze.com/ul?' %}
          {% if location.wazeVenueId %}
          {% assign url = url | append: 'preview_venue_id=' | append: location.wazeVenueId %}
          {% else %}
          {% assign url = url | append: 'll=' | append: location.lat | append: '%2C' | append: location.lng %}
          {% endif %}
          {% include map_link.html icon='waze' url=url title='Waze' %}
        </td>
      </tr>
      {% endfor %}

    </table>
  </div>
</div>

<script>
  var globals = {{ site.data.globals | jsonify }};
  var locations = {{ site.data.locations | jsonify }};

  var map = L.map('map', { fullscreenControl: true }).setView([globals.mapCentre.lat, globals.mapCentre.lng], 13);

  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  }).addTo(map);

  // Add a polygon to show the Studland Site.
  var polygon = L.polygon([
    [50.640645, -1.944750],
    [50.640159, -1.944485],
    [50.640053, -1.944572],
    [50.640048, -1.944223],
    [50.640323, -1.944302],
    [50.640676, -1.943460],
    [50.640325, -1.943183],
    [50.640393, -1.941799],
    [50.640549, -1.941665],
    [50.640950, -1.942770]
  ]).addTo(map);

  locations.forEach(function (location) {
    var googleUrl = "https://www.google.com/maps/search/?api=1&query=" + location.lat + "%2C" + location.lng;
    if (location.googlePlaceId) {
      googleUrl += "&query_place_id=" + location.googlePlaceId;
    }

    var wazeUrl = "https://www.waze.com/ul?";
    if (location.wazeVenueId) {
      wazeUrl += "preview_venue_id=" + location.wazeVenueId;
    } else {
      wazeUrl += "ll=" + location.lat + "%2C" + location.lng;
    }

    var popupText =
      "<div class='ss-popup'>" +
      "<h3>" + location.name + "</h3>" +
      "<ul>" +
      "<li><a href='" + googleUrl + "'><iconify-icon icon='simple-icons:googlemaps'></iconify-icon>Google Maps</a></li>" +
      "<li><a href='" + wazeUrl + "'><iconify-icon icon='simple-icons:waze'></iconify-icon>Waze</a></li>" +
      "</ul>" +
      "</div>"

    L.marker([location.lat, location.lng])
      .addTo(map)
      .bindPopup(popupText);
  });
</script>