diff --git a/samples/map-projection-simple/README.md b/samples/map-projection-simple/README.md new file mode 100644 index 00000000..c4ff6495 --- /dev/null +++ b/samples/map-projection-simple/README.md @@ -0,0 +1,40 @@ +# Google Maps JavaScript Sample + +This sample is generated from @googlemaps/js-samples located at +https://github.com/googlemaps-samples/js-api-samples. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/map-projection-simple` +`npm start` + +### Build an individual example + +`cd samples/map-projection-simple` +`npm run build` + +From 'samples': + +`npm run build --workspace=map-projection-simple/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/map-projection-simple` +`npx eslint index.ts` + +## Feedback + +For feedback related to this sample, please open a new issue on +[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues). diff --git a/samples/map-projection-simple/index.html b/samples/map-projection-simple/index.html new file mode 100644 index 00000000..9bb17f0b --- /dev/null +++ b/samples/map-projection-simple/index.html @@ -0,0 +1,24 @@ + + + + + + Custom Map Projections + + + + + + + + +
+ + + + diff --git a/samples/map-projection-simple/index.ts b/samples/map-projection-simple/index.ts new file mode 100644 index 00000000..60d9a75f --- /dev/null +++ b/samples/map-projection-simple/index.ts @@ -0,0 +1,156 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_map_projection_simple] +// This example defines an image map type using the Gall-Peters +// projection. +// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection +const mapElement = document.querySelector("gmp-map") as google.maps.MapElement; +let innerMap; + +async function initMap() { + // Request the needed libraries. + await google.maps.importLibrary("maps"); + + // Create a map. + innerMap = mapElement.innerMap; + innerMap.setOptions({ + mapTypeControl: false, + }); + + // Set the Gall-Peters map type. + initGallPeters(); + innerMap.mapTypes.set("gallPeters", gallPetersMapType); + innerMap.setMapTypeId("gallPeters"); + + // Show the lat and lng under the mouse cursor. + const coordsDiv = document.getElementById("coords") as HTMLElement; + + innerMap.addListener("mousemove", (event: google.maps.MapMouseEvent) => { + coordsDiv.textContent = + "lat: " + + Math.round(event.latLng!.lat()) + + ", " + + "lng: " + + Math.round(event.latLng!.lng()); + }); + + // Add some markers to the map. + innerMap.data.setStyle((feature) => { + return { + title: feature.getProperty("name") as string, + optimized: false, + }; + }); + innerMap.data.addGeoJson(cities); +} + +let gallPetersMapType; + +function initGallPeters() { + const GALL_PETERS_RANGE_X = 800; + const GALL_PETERS_RANGE_Y = 512; + + // Fetch Gall-Peters tiles stored locally on our server. + gallPetersMapType = new google.maps.ImageMapType({ + getTileUrl: function (coord, zoom) { + const scale = 1 << zoom; + + // Wrap tiles horizontally. + const x = ((coord.x % scale) + scale) % scale; + + // Don't wrap tiles vertically. + const y = coord.y; + + if (y < 0 || y >= scale) return ""; + + return ( + "gall-peters_" + + zoom + + "_" + + x + + "_" + + y + + ".png" + ); + }, + tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y), + minZoom: 0, + maxZoom: 1, + name: "Gall-Peters", + }); + + // Describe the Gall-Peters projection used by these tiles. + gallPetersMapType.projection = { + fromLatLngToPoint: function (latLng) { + const latRadians = (latLng.lat() * Math.PI) / 180; + return new google.maps.Point( + GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360), + GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians)) + ); + }, + fromPointToLatLng: function (point, noWrap) { + const x = point.x / GALL_PETERS_RANGE_X; + const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y)); + + return new google.maps.LatLng( + (Math.asin(1 - 2 * y) * 180) / Math.PI, + -180 + 360 * x, + noWrap + ); + }, + }; +} + +// GeoJSON, describing the locations and names of some cities. +const cities = { + type: "FeatureCollection", + features: [ + { + type: "Feature", + geometry: { type: "Point", coordinates: [-87.65, 41.85] }, + properties: { name: "Chicago" }, + }, + { + type: "Feature", + geometry: { type: "Point", coordinates: [-149.9, 61.218] }, + properties: { name: "Anchorage" }, + }, + { + type: "Feature", + geometry: { type: "Point", coordinates: [-99.127, 19.427] }, + properties: { name: "Mexico City" }, + }, + { + type: "Feature", + geometry: { type: "Point", coordinates: [-0.126, 51.5] }, + properties: { name: "London" }, + }, + { + type: "Feature", + geometry: { type: "Point", coordinates: [28.045, -26.201] }, + properties: { name: "Johannesburg" }, + }, + { + type: "Feature", + geometry: { type: "Point", coordinates: [15.322, -4.325] }, + properties: { name: "Kinshasa" }, + }, + { + type: "Feature", + geometry: { type: "Point", coordinates: [151.207, -33.867] }, + properties: { name: "Sydney" }, + }, + { + type: "Feature", + geometry: { type: "Point", coordinates: [0, 0] }, + properties: { name: "0°N 0°E" }, + }, + ], +}; + +initMap(); +// [END maps_map_projection_simple] diff --git a/samples/map-projection-simple/package.json b/samples/map-projection-simple/package.json new file mode 100644 index 00000000..88e8a927 --- /dev/null +++ b/samples/map-projection-simple/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/map-projection-simple", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh map-projection-simple && bash ../app.sh map-projection-simple && bash ../docs.sh map-projection-simple && npm run build:vite --workspace=. && bash ../dist.sh map-projection-simple", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "dependencies": { + + } +} diff --git a/samples/map-projection-simple/public/gall-peters_0_0_0.png b/samples/map-projection-simple/public/gall-peters_0_0_0.png new file mode 100644 index 00000000..f9019415 Binary files /dev/null and b/samples/map-projection-simple/public/gall-peters_0_0_0.png differ diff --git a/samples/map-projection-simple/public/gall-peters_1_0_0.png b/samples/map-projection-simple/public/gall-peters_1_0_0.png new file mode 100644 index 00000000..d2a41280 Binary files /dev/null and b/samples/map-projection-simple/public/gall-peters_1_0_0.png differ diff --git a/samples/map-projection-simple/public/gall-peters_1_0_1.png b/samples/map-projection-simple/public/gall-peters_1_0_1.png new file mode 100644 index 00000000..2a5bff9f Binary files /dev/null and b/samples/map-projection-simple/public/gall-peters_1_0_1.png differ diff --git a/samples/map-projection-simple/public/gall-peters_1_1_0.png b/samples/map-projection-simple/public/gall-peters_1_1_0.png new file mode 100644 index 00000000..1b6114e4 Binary files /dev/null and b/samples/map-projection-simple/public/gall-peters_1_1_0.png differ diff --git a/samples/map-projection-simple/public/gall-peters_1_1_1.png b/samples/map-projection-simple/public/gall-peters_1_1_1.png new file mode 100644 index 00000000..47950d0b Binary files /dev/null and b/samples/map-projection-simple/public/gall-peters_1_1_1.png differ diff --git a/samples/map-projection-simple/style.css b/samples/map-projection-simple/style.css new file mode 100644 index 00000000..2886c37d --- /dev/null +++ b/samples/map-projection-simple/style.css @@ -0,0 +1,31 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_map_projection_simple] */ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +#coords { + background-color: black; + color: white; + padding: 5px; +} + +/* [END maps_map_projection_simple] */ \ No newline at end of file diff --git a/samples/map-projection-simple/tsconfig.json b/samples/map-projection-simple/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/map-projection-simple/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "es2015", + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } +}