From 475002885b4cf89615c81aa39e0e7c026d85171d Mon Sep 17 00:00:00 2001
From: Peter W <techieshark@gmail.com>
Date: Mon, 5 Sep 2016 16:38:27 +1000
Subject: [PATCH] It's now possible (with Mapbox GL JS version 0.23) to set an
 offset between Marker and Popup
 (https://github.com/mapbox/mapbox-gl-js/pull/2906) so we use that to make
 sure the marker image is always visible (Mapbox puts the popup on whichever
 side has most room for it, offset appropriately).

This commit does the following:

 (1) get the latest mapbox, then (2) put a half-circle-width radius on the popups, and (3) recenter the marker image circles so the center of the image is over the lat/long we're adding.
---
 prototype/index.html | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/prototype/index.html b/prototype/index.html
index c57647b..83661eb 100644
--- a/prototype/index.html
+++ b/prototype/index.html
@@ -12,8 +12,8 @@
         <link rel="stylesheet" type="text/css" href="style.css">
         <link rel="stylesheet" type="text/css" href="css/loaders.min.css">
         <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
-        <script src='https://api.mapbox.com/mapbox-gl-js/v0.22.0/mapbox-gl.js'></script>
-        <link href='https://api.mapbox.com/mapbox-gl-js/v0.22.0/mapbox-gl.css' rel='stylesheet' />
+        <script src='https://api.mapbox.com/mapbox-gl-js/v0.23.0/mapbox-gl.js'></script>
+        <link href='https://api.mapbox.com/mapbox-gl-js/v0.23.0/mapbox-gl.css' rel='stylesheet' />
 
         <script src="https://use.typekit.net/tzz4als.js"></script>
         <script>try{Typekit.load({ async: true });}catch(e){}</script>
@@ -271,7 +271,10 @@
 
                             el.addEventListener('click', function() {
                                 closeAllPopups();
-                                var popup = new mapboxgl.Popup({closeOnClick: false})
+                                var popup = new mapboxgl.Popup({
+                                        closeOnClick: false,
+                                        offset: 20,
+                                    })
                                     .setLngLat(marker.geometry.coordinates)
                                     .setHTML(popupContent(marker))
                                     .addTo(map);
@@ -290,7 +293,9 @@
                             });
 
                             // add marker to map
-                            new mapboxgl.Marker(el)
+                            new mapboxgl.Marker(el, {
+                                    offset: [-20,-20] /* center circular marker (diameter = 40px) on location */
+                                })
                                 .setLngLat(marker.geometry.coordinates)
                                 .addTo(map);