mapbox small fixes

pages/_data/maps.yml

@@ -7,9 +7,30 @@ light:
   zoom: 11
   style: light-v10
 
-card:
+markers:
   title: Light map style
   center: [0, 0]
   zoom: 1
+  style: light-v10
+  card: true
+  markers:
+    - name: Buenos Aires
+      center: [-34.58333333, -58.666667]
+    - name: Vienna
+      center: [48.2, 16.366667]
+    - name: Beijing
+      center: [39.91666667, 116.383333]
+    - name: Canberra
+      center: [-35.26666667, 149.133333]
+    - name: Muscat
+      center: [23.61666667, 58.583333]
+    - name: Washington
+      center: [38.883333, -77]
+
+card:
+  title: Full-card map
+  center: [0, 0]
+  zoom: 1
   style: satellite-v9
-  card: true
\ No newline at end of file
+  card: true
+

pages/_includes/ui/map.html

@@ -4,7 +4,7 @@
 {% if data %}
 	<div class="embed-responsive embed-responsive-{{ data.ratio | default: include.ratio | default: '16by9' }}">
 		<div class="embed-responsive-item">
-			<div id="map-{{ id }}" class="w-100 h-100"></div>
+			<div id="map-{{ id }}" class="w-100 h-100{% if data.card %} rounded{% endif %}"></div>
 		</div>
 	</div>
 
@@ -12,6 +12,8 @@
 	{% capture_global scripts %}
 	<script>
 		// @formatter:off
+		{% if jekyll.environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %}
+
 		document.addEventListener("DOMContentLoaded", function() {
 			mapboxgl.accessToken = '{{ site.mapbox_key }}';
 			var map = new mapboxgl.Map({
@@ -19,11 +21,18 @@
 				style: 'mapbox://styles/mapbox/{{ data.style | default: "streets-v11" }}',
 				zoom: {{ data.zoom | default: 13 }},
 				{% if data.center %}
-					center: [{{ data.center[1] }}, {{ data.center[0] }}],
+				center: [{{ data.center[1] }}, {{ data.center[0] }}],
 				{% else %}
-					center: [13.404900, 52.518827],
+				center: [13.404900, 52.518827],
 				{% endif %}
 			});
+
+			{% for marker in data.markers %}
+
+			new mapboxgl.Marker({ color: "{{ 'blue' | tabler_color }}" }).setLngLat([{{ marker.center[1] }}, {{ marker.center[0] }}]).addTo(map);
+			{% endfor %}
+
+			{% if jekyll.environment == 'development' %}window.tabler_map["map-{{ map-id }}"] = map;{% endif %}
 		});
 		// @formatter:on
 	</script>

pages/maps.html

@@ -10,7 +10,7 @@ menu: base.maps
 		{% if map[1].card %}
 			<div class="col-lg-12">
 				<div class="card">
-					{% include ui/map.html map-id=map-id ratio="16by9" %}
+					{% include ui/map.html map-id=map-id ratio="2by1" %}
 				</div>
 			</div>
 		{% else %}