provide custom markers for map

show different icon depending on whether the monument has pictures
or not

see https://mingle.corp.wikimedia.org/projects/wlm_android_app/cards/119
WARNING: the api changes from version 0.3 to 0.4 for icons - so have future
proofed this for when we upgrade
TODO: icons currently have no shadow effect so don't look as good as they could

assets/www/js/geo.js

@@ -138,7 +138,18 @@ define(['jquery', '../leaflet/leaflet-src', 'leafclusterer'], function() {
 	}
 
 	function addMonument(monument, onClick) {
-		var marker = new L.Marker(new L.LatLng(monument.lat, monument.lon));
+		var url = 'images/', iconOptions;
+		url += monument.image ? 'pin.png' : 'pin-no-photos.png';
+		if ( L.VERSION === '0.3' ) { // TODO: upgrade leaflet to 4.0
+			 iconOptions = url;
+		} else {
+			iconOptions = {
+				iconUrl: url,
+				iconSize: [ 30, 50 ]
+			};
+		}
+		var markerIcon = new L.Icon( iconOptions );
+		var marker = new L.Marker( new L.LatLng( monument.lat, monument.lon ), { icon: markerIcon } );
 		var popup = "<div><strong>" + monument.name + "</strong></div>";
 		var popupDOM = $(popup).click(function() {
 			onClick(monument);