I've been doing some experimenting with Mapbox and it looks like a very feasible replacement for google for alert maps. You still need an API key but no credit card on file. As far as I can tell from the documentation, if you go beyond the freebie volume, the user experience just degrades.
The basics:
The Google code that defines a map looks like this:
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 42.15, lng: -71.7},
mapTypeId: 'roadmap'
});
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=your key&callback=initMap">
</script>
For Mapbox, it looks like this:
<script>
mapboxgl.accessToken = 'your key';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v10',
center: [-71.7, 42.15],
zoom: 6.5
});
</script>
Adding polygons with Google:
var polyc0 = [
{lat: FIRST LATITUDE POINT, long: FIRST LONGITUDE POINT},
... etc ...
]
var mapoly0 = new google.maps.Polygon({
paths: polyc0,
strokeColor: "COLOR",
strokeOpacity: OPACITY,
strokeWeight: "WEIGHT",
fillColor: "FILL COLOR",
fillOpacity: FILL OPACITY
});
mapoly0.setMap(map);
Adding polygons with Mapbox:
map.on('load', function() {
map.addLayer({
'id': 'poly0 ',
'type': 'fill',
'source': {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [ [
[FIRST LONGITUDE POINT, FIRST LATITUDE POINT],
... etc ...
] ]
}
}
},
'layout': {},
'paint': {
'fill-color': 'FILL COLOR',
'fill-opacity': FILL OPACITY
}
});
// more map.addLayer definitions can go here
});
There doesn't seem to be a way to get a different stroke color for the boundary without adding another polygon layer, but the alerts code uses the same color for the stroke and fill anyway.
I recently did a lot of additions to the alert code on my site to include maps even when there is no polygon in the NWS alert (using geocode definitions of counties and zones) so my code is far afield from the base Saratoga. However, I'd be willing to help someone get this running with the base code if Ken and the rest of us (especially Ken) think this is a good way to go.
My Mapbox stuff is still in my sandbox but when I take it live I can let you all know if you'd like to see it in action (although the weather here is supposed to be nice and boring this week).