GISBOOTCAMP HTML IMPORTS

gisbootcamp.md

GeoJSON Data

{
	type: 'FeatureCollection',
	features: [
		{
			type: 'Feature',
			geometry: {
				type: 'Point',
				coordinates: [28, 41],
			},
			properties: {
				name: 'IBB-1',
			},
		},
		{
			type: 'Feature',
			geometry: {
				type: 'Point',
				coordinates: [29, 40],
			},
			properties: {
				name: 'IBB-2',
			},
		},
	],
}

Google Maps API

<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
		<script src="main.js" defer></script>
		<script
			src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBeUIcnMob3s1i4CfB8DuGRykFn2V-jQLc&callback=initMap&v=weekly"
			defer
		></script>

ArcGIS Javascript API

<link rel="stylesheet" href="../style.css" />
<link
	rel="stylesheet"
	href="https://js.arcgis.com/4.25/esri/themes/light/main.css"
/>
<script defer src="https://js.arcgis.com/4.25/"></script>
<script src="main.js" defer></script>

Openlayers

<script defer src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css" />

<script defer src="main.js"></script> 

Leaflet

<script
	defer
	src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
	integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
	crossorigin=""
></script>
<link
	rel="stylesheet"
	href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
	integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
	crossorigin=""
/>
<!-- Esri Leaflet and Esri Leaflet Vector -->
<script
	defer
	src="https://unpkg.com/esri-leaflet/dist/esri-leaflet.js"
></script>
<script
	defer
	src="https://unpkg.com/esri-leaflet-vector@3/dist/esri-leaflet-vector.js"
></script>
<script defer src="main.js"></script>

Maplibre GL JS

<script
	defer
	src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"
></script>
<script src="main.js" defer></script>
<link
	href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css"
	rel="stylesheet"
/>

getTileUrl: function (coord, zoom) {
				// "Wrap" x (longitude) at 180th meridian properly
				// NB: Don't touch coord.x: because coord param is by reference, and changing its x property breaks something in Google's lib
				var tilesPerGlobe = 1 << zoom;
				var x = coord.x % tilesPerGlobe;
				if (x < 0) {
					x = tilesPerGlobe + x;
				}
				// Wrap y (latitude) in a like manner if you want to enable vertical infinite scrolling

				return (
					'https://tile.openstreetmap.org/' +
					zoom +
					'/' +
					x +
					'/' +
					coord.y +
					'.png'
				);
			},