It's now possible (with Mapbox GL JS version 0.23) to set an offset b…

…etween Marker and Popup (mapbox/mapbox-gl-js#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

@@ -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);