andrewharvey/index.html

## index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
        <style>
body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  width: 100%;
  height: 100%;
}
        </style>
    </head>
    <body>
        <div id='map'></div>
        <script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYWxhbnRnZW8tcHJlc2FsZXMiLCJhIjoiY2pxcmZ1cW1mMG1tcDN4bDVvYzA4MWg5MyJ9.7QtVj_0ythHwEg1n_zaRTQ';

var map = new mapboxgl.Map({
    container: 'map',
    style: {
        version: 8,
        sources: {
            countries: {
                type: 'geojson',
                data: 'https://www.alantgeo.com.au/share/countries.geojson',
                generateId: true
            },
            cities: {
                type: 'geojson',
                data: 'https://www.alantgeo.com.au/share/cities.geojson'
            }
        },
        glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
        layers: [
            {
                id: 'background',
                type: 'background',
                paint: {
                    'background-color': 'lightblue'
                }
            },
            {
                id: 'country-fill',
                type: 'fill',
                source: 'countries',
                paint: {
                    'fill-color': [
                        'case',
                        ['boolean', ['feature-state', 'hover'], false],
                        '#c5b5a9',
                        '#ffebda'
                    ]
                }
            },
            {
                id: 'country-line',
                type: 'line',
                source: 'countries',
                paint: {
                    'line-width': 0.5
                }
            },
            {
                id: 'city-dot',
                type: 'circle',
                source: 'cities',
                paint: {
                    'circle-color': 'white',
                    'circle-radius': 3,
                    'circle-stroke-width': 1,
                    'circle-stroke-color': 'black'
                }
            },
            {
                id: 'city-label',
                type: 'symbol',
                source: 'cities',
                paint: {
                    'text-halo-color': 'white',
                    'text-halo-width': 2
                },
                layout: {
                    'text-field': ['get', 'name'],
                    'text-variable-anchor': ['left', 'right', 'top-left', 'bottom-left', 'top-right', 'bottom-right'],
                    'text-justify': 'auto',
                    'text-radial-offset': 0.2,
                    'text-size': [
                        'interpolate', ['linear'],
                        ['zoom'],
                        // zoom 4 or less -> size is 10
                        2, 10,
                        // zoom  6 or more -> size is 14
                        3, 14
                    ]
                }
            }
        ]
    }
})

var navigation = new mapboxgl.NavigationControl({
    visualizePitch: true
});
map.addControl(navigation, 'top-right');

var geolocate = new mapboxgl.GeolocateControl({
    positionOptions: {
        enableHighAccuracy: true
    },
    trackUserLocation: true
});
map.addControl(geolocate, 'top-right');

var fullscreen = new mapboxgl.FullscreenControl();
map.addControl(fullscreen, 'top-right');

var scale = new mapboxgl.ScaleControl({
    unit: 'metric'
});
map.addControl(scale, 'bottom-right');

var marker = new mapboxgl.Marker({
    color: 'darkred',
    draggable: true
})
    .setLngLat([175, -45])
    .addTo(map);

var hoveredCountry;
map.on('mousemove', 'country-fill', function (e) {
    map.getCanvas().style.cursor = 'pointer';
    if (e.features.length) {
        if (hoveredCountry) {
            map.setFeatureState({
                source: 'countries',
                id: hoveredCountry
            }, {
                hover: false
            });
        }
        hoveredCountry = e.features[0].id;
        map.setFeatureState({
            source: 'countries',
            id: hoveredCountry
        }, {
            hover: true
        });
    }
});

map.on('mouseleave', 'country-fill', function (e) {
    map.getCanvas().style.cursor = '';
    if (hoveredCountry) {
        map.setFeatureState({
            source: 'countries',
            id: hoveredCountry
        }, {
            hover: false
        });
        hoveredCountry = null;
    }
});

map.on('click', 'country-fill', function (e) {
    var popup = new mapboxgl.Popup()
        .setText(e.features[0].properties.ADMIN)
        .setLngLat(e.lngLat)
        .addTo(map)

    map.fitBounds(e.features[0].properties.bbox.split(','), {
        padding: 20
    });
});

map.on('load', function (e) {
    map.loadImage('https://www.alantgeo.com.au/share/star-15.png', function (err, img) {
        if (err) throw err;
        map.addImage('star', img);
        map.setLayoutProperty('city-label', 'icon-image', 'star');
    });
});
        </script>
    </body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
	<style>
	body {
	margin: 0;
	padding: 0;
	}
	#map {
	position: absolute;
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<body>
	<div id='map'></div>
	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoiYWxhbnRnZW8tcHJlc2FsZXMiLCJhIjoiY2pxcmZ1cW1mMG1tcDN4bDVvYzA4MWg5MyJ9.7QtVj_0ythHwEg1n_zaRTQ';

	var map = new mapboxgl.Map({
	container: 'map',
	style: {
	version: 8,
	sources: {
	countries: {
	type: 'geojson',
	data: 'https://www.alantgeo.com.au/share/countries.geojson',
	generateId: true
	},
	cities: {
	type: 'geojson',
	data: 'https://www.alantgeo.com.au/share/cities.geojson'
	}
	},
	glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
	layers: [
	{
	id: 'background',
	type: 'background',
	paint: {
	'background-color': 'lightblue'
	}
	},
	{
	id: 'country-fill',
	type: 'fill',
	source: 'countries',
	paint: {
	'fill-color': [
	'case',
	['boolean', ['feature-state', 'hover'], false],
	'#c5b5a9',
	'#ffebda'
	]
	}
	},
	{
	id: 'country-line',
	type: 'line',
	source: 'countries',
	paint: {
	'line-width': 0.5
	}
	},
	{
	id: 'city-dot',
	type: 'circle',
	source: 'cities',
	paint: {
	'circle-color': 'white',
	'circle-radius': 3,
	'circle-stroke-width': 1,
	'circle-stroke-color': 'black'
	}
	},
	{
	id: 'city-label',
	type: 'symbol',
	source: 'cities',
	paint: {
	'text-halo-color': 'white',
	'text-halo-width': 2
	},
	layout: {
	'text-field': ['get', 'name'],
	'text-variable-anchor': ['left', 'right', 'top-left', 'bottom-left', 'top-right', 'bottom-right'],
	'text-justify': 'auto',
	'text-radial-offset': 0.2,
	'text-size': [
	'interpolate', ['linear'],
	['zoom'],
	// zoom 4 or less -> size is 10
	2, 10,
	// zoom 6 or more -> size is 14
	3, 14
	]
	}
	}
	]
	}
	})

	var navigation = new mapboxgl.NavigationControl({
	visualizePitch: true
	});
	map.addControl(navigation, 'top-right');

	var geolocate = new mapboxgl.GeolocateControl({
	positionOptions: {
	enableHighAccuracy: true
	},
	trackUserLocation: true
	});
	map.addControl(geolocate, 'top-right');

	var fullscreen = new mapboxgl.FullscreenControl();
	map.addControl(fullscreen, 'top-right');

	var scale = new mapboxgl.ScaleControl({
	unit: 'metric'
	});
	map.addControl(scale, 'bottom-right');

	var marker = new mapboxgl.Marker({
	color: 'darkred',
	draggable: true
	})
	.setLngLat([175, -45])
	.addTo(map);

	var hoveredCountry;
	map.on('mousemove', 'country-fill', function (e) {
	map.getCanvas().style.cursor = 'pointer';
	if (e.features.length) {
	if (hoveredCountry) {
	map.setFeatureState({
	source: 'countries',
	id: hoveredCountry
	}, {
	hover: false
	});
	}
	hoveredCountry = e.features[0].id;
	map.setFeatureState({
	source: 'countries',
	id: hoveredCountry
	}, {
	hover: true
	});
	}
	});

	map.on('mouseleave', 'country-fill', function (e) {
	map.getCanvas().style.cursor = '';
	if (hoveredCountry) {
	map.setFeatureState({
	source: 'countries',
	id: hoveredCountry
	}, {
	hover: false
	});
	hoveredCountry = null;
	}
	});

	map.on('click', 'country-fill', function (e) {
	var popup = new mapboxgl.Popup()
	.setText(e.features[0].properties.ADMIN)
	.setLngLat(e.lngLat)
	.addTo(map)

	map.fitBounds(e.features[0].properties.bbox.split(','), {
	padding: 20
	});
	});

	map.on('load', function (e) {
	map.loadImage('https://www.alantgeo.com.au/share/star-15.png', function (err, img) {
	if (err) throw err;
	map.addImage('star', img);
	map.setLayoutProperty('city-label', 'icon-image', 'star');
	});
	});
	</script>
	</body>
	</html>