Switch layer to cwm (#310)

* Switch to cwm layer * Update static maps, add atr to dynamic
cugos · Feb 6, 2024 · e12131f · e12131f
1 parent 3cb2f83
commit e12131f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/_layouts/meetings.html b/_layouts/meetings.html
@@ -23,7 +23,7 @@ <h2>All Meetings</h2>
   <ul id="meetings-list" class="cf">
     {% for meeting in site.categories.meetings %}
       <li><a href="{{ meeting.url }}">
-        <img src="https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s+555555({{ meeting.lng | default: 0.0 }},{{ meeting.lat | default: 0.0 }})/{{ meeting.lng | default: 0.0 }},{{ meeting.lat | default: 0.0 }},12,0/150x150?access_token=pk.eyJ1IjoiY3Vnb3MiLCJhIjoidGNnSlBNTSJ9.qPHDxAemDindkSskKNv90g">
+        <img height="150px" width="150px" src="https://maptools.clockworkmicro.com/v2/static?customer_id=5fb33922-a5e6-42b4-8e57-32864d2fbee9&map_id=65231ee5-2cbf-4710-bcfe-26a89ae463ab&x-api-key=OjNDnyNVSJ50uTxhPffMz8v2yiP26qPc3RfxY7EU&lat={{ meeting.lat | default: 0.0}}&lng={{ meeting.lng | default: 0.0 }}&showMarker=true&zoom=12&width=150&height=150">
         <p class="meeting-list-info"><span class="meeting-list-date">{{ meeting.date | date: "%m/%d/%Y" }}</span><br>
         Host: {{ meeting.location }}<br>
         <span class="meeting-list-address">Address: {{ meeting.address }}</span></p>

diff --git a/static/js/site.js b/static/js/site.js
@@ -73,11 +73,15 @@ function buildMapMarker(elem, markers) {
 
   L.mapbox.accessToken = 'pk.eyJ1IjoiY3Vnb3MiLCJhIjoidGNnSlBNTSJ9.qPHDxAemDindkSskKNv90g';
 
+  var url = 'https://maps.clockworkmicro.com/streets/v1/raster/{z}/{x}/{y}?x-api-key=QTAgfbPHPESSEpqPEGtk8PdMXpsUnld2Dzy53jh8';
+  var layer = L.tileLayer(url);
+  var map = L.mapbox.map(elem.id).addLayer(layer);
+
+  map.attributionControl.addAttribution(` © <a href="http://www.clockworkmicro.com/">CWM</a>, <a href="http://www.openstreetmap.org/copyright">OSM</a>, <a href="https://www.naturalearthdata.com/">Nat. Earth</a>`);
 
-  var map;
   if (!markers) {
     var coordinates = [elem.getAttribute('data-latitude'), elem.getAttribute('data-longitude')];
-    map = L.mapbox.map(elem.id).addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11')).setView(coordinates, 12);
+    map.setView(coordinates, 12);
     var marker = L.marker(coordinates, {
       icon: L.mapbox.marker.icon({
         'marker-size': 'large',
@@ -87,7 +91,7 @@ function buildMapMarker(elem, markers) {
     }).addTo(map);
     if (elem.getAttribute('data-popup')) marker.bindPopup(elem.getAttribute('data-popup'));
   } else {
-    map = L.mapbox.map(elem.id).addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11')).setView([0,0], 3);
+    map.setView([0,0], 3);
     var group = L.mapbox.featureLayer();
     for (var l = 0; l < markers.length; l++) {
       var mark = createMarker(markers[l]);