Skip to content

Commit ac42ac8

Browse files
author
farah-alyasari
committed
switching branch
1 parent f326fc9 commit ac42ac8

File tree

1 file changed

+21
-22
lines changed

1 file changed

+21
-22
lines changed

articles/azure-maps/migrate-from-google-maps-web-app.md

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ ms.custom:
1313

1414
# Migrate a web app from Google Maps
1515

16-
Most web apps, which use Google Maps are using the Google Maps V3 JavaScript SDK. The Azure Maps Web SDK is the suitable Azure-based SDK to migrate to. The Azure Maps Web SDK lets you customize interactive maps with your own content and imagery. You can run your app on both web or mobile applications. This control makes use of WebGL, allowing you to render large data sets with high performance. Develop with this SDK using JavaScript or TypeScript.
16+
Most web apps, which use Google Maps, are using the Google Maps V3 JavaScript SDK. The Azure Maps Web SDK is the suitable Azure-based SDK to migrate to. The Azure Maps Web SDK lets you customize interactive maps with your own content and imagery. You can run your app on both web or mobile applications. This control makes use of WebGL, allowing you to render large data sets with high performance. Develop with this SDK using JavaScript or TypeScript.
1717

18-
If migrating an existing web application, check to see if it is using an open-source map control library. Examples of open-source map control library are: Cesium, Leaflet, and OpenLayers. If it is and you do not want to use the Azure Maps Web SDK, another option for migrating your application is to continue using the open-source map control and connect it to the Azure Maps tile services ([road tiles](https://docs.microsoft.com/rest/api/maps/render/getmaptile)
18+
If migrating an existing web application, check to see if it is using an open-source map control library. Examples of open-source map control library are: Cesium, Leaflet, and OpenLayers. If your application uses an open-source map control library, and you do not want to use the Azure Maps Web SDK, you can still migrate. In this case, connect your application to the Azure Maps tile services ([road tiles](https://docs.microsoft.com/rest/api/maps/render/getmaptile)
1919
\| [satellite tiles](https://docs.microsoft.com/rest/api/maps/render/getmapimagerytile)). The following points detail on how to use Azure Maps in some commonly used open-source map control libraries.
2020

2121
- Cesium - A 3D map control for the web. [Code sample](https://azuremapscodesamples.azurewebsites.net/index.html?sample=Raster%20Tiles%20in%20Cesium%20JS) \| [Documentation](https://cesiumjs.org/)
@@ -24,7 +24,7 @@ If migrating an existing web application, check to see if it is using an open-so
2424

2525
## Key features support
2626

27-
The following table lists key API features in the Google Maps V3 JavaScript SDK and the supported API feature in the Azure Maps Web SDK.
27+
The table lists key API features in the Google Maps V3 JavaScript SDK and the supported API feature in the Azure Maps Web SDK.
2828

2929
| Google Maps feature | Azure Maps Web SDK support |
3030
|-------------------------|:--------------------------:|
@@ -44,26 +44,25 @@ The following table lists key API features in the Google Maps V3 JavaScript SDK
4444

4545
## Notable differences in the web SDKs
4646

47-
The following are some of the key differences between the Google Maps and Azure Maps Web SDKs, to be aware of:
47+
The following are some key differences between the Google Maps and Azure Maps Web SDKs, to be aware of:
4848

49-
- In addition to providing a hosted endpoint for accessing the Azure Maps Web SDK, an NPM package is also available for embedding the Web
50-
SDK into apps if preferred. For more information, see this [documentation](how-to-use-map-control.md). This package also includes TypeScript definitions.
51-
- After creating an instance of the Map class in Azure Maps, your code should wait for the maps `ready` or `load` event to fire before interacting with the map. This order will ensure that all the map resources have been loaded and are ready to be accessed.
52-
- Both platforms use a similar tiling system for the base maps, however the tiles in Google Maps are 256 pixels in dimension while the tiles in Azure Maps are 512 pixels in dimension. As such, to get the same map view in Azure Maps as Google Maps, a zoom level used in Google Maps needs to be subtracted by one in Azure Maps.
53-
- Coordinates in Google Maps are referred to as "latitude, longitude", while Azure Maps uses "longitude, latitude". The Azure Maps format is aligned with the standard `[x, y]` which is followed by most GIS platforms.
54-
- Shapes in the Azure Maps Web SDK are based on the GeoJSON schema. Helper classes are exposed through the [*atlas.data* namespace](https://docs.microsoft.com/javascript/api/azure-maps-control/atlas.data?view=azure-iot-typescript-latest). There's also the [*atlas.Shape*](https://docs.microsoft.com/javascript/api/azure-maps-control/atlas.shape) class. This class can be used to wrap GeoJSON objects and make them easy to update and maintain in a data bindable way.
55-
- Coordinates in Azure Maps are defined as Position objects. A coordinate is specified as a number array in the format `[longitude, latitude]`, or specified using new atlas.data.Position(longitude, latitude).
49+
- In addition to providing a hosted endpoint for accessing the Azure Maps Web SDK, an NPM package is available. Embed the Web SDK package into apps. For more information, see this [documentation](how-to-use-map-control.md). This package also includes TypeScript definitions.
50+
- You first need to create an instance of the Map class in Azure Maps. Wait for the maps `ready` or `load` event to fire before programmatically interacting with the map. This order will ensure that all the map resources have been loaded and are ready to be accessed.
51+
- Both platforms use a similar tiling system for the base maps. The tiles in Google Maps are 256 pixels in dimension; however, the tiles in Azure Maps are 512 pixels in dimension. To get the same map view in Azure Maps as Google Maps, subtract Google Maps zoom level by the number one in Azure Maps.
52+
- Coordinates in Google Maps are referred to as "latitude, longitude", while Azure Maps uses "longitude,latitude". The Azure Maps format is aligned with the standard `[x, y]`, which is followed by most GIS platforms.
53+
- Shapes in the Azure Maps Web SDK are based on the GeoJSON schema. Helper classes are exposed through the [*atlas.data* namespace](https://docs.microsoft.com/javascript/api/azure-maps-control/atlas.data?view=azure-iot-typescript-latest). There's also the [*atlas.Shape*](https://docs.microsoft.com/javascript/api/azure-maps-control/atlas.shape) class. Use this class to wrap GeoJSON objects, to make it easy to update and maintain the data bindable way.
54+
- Coordinates in Azure Maps are defined as Position objects. A coordinate is specified as a number array in the format `[longitude,latitude]`. Or, it's specified using new atlas.data.Position(longitude, latitude).
5655
> [!TIP]
57-
> The Position class has a static helper method for importing coordinates that are in "latitude, longitude" format. The [atlas.data.Position.fromLatLng](https://docs.microsoft.com/javascript/api/azure-maps-control/atlas.data.position?view=azure-iot-typescript-latest) method can often be replaced with the `new google.maps.LatLng` method in Google Maps code.
58-
- Rather than specifying styling information on each shape that is added to the map, Azure Maps separates styles from the data. Data is stored in data sources is connected to rendering layers. Azure Maps code uses data sources to render the data. This approach provides enhanced performance benefit. Additionally, many layers support data-driven styling where business logic can be added to layer style options. This support changes how individual shapes are rendered within a layer based on properties defined in the shape.
56+
> The Position class has a static helper method for importing coordinates that are in "latitude,longitude" format. Often, you can replace the [atlas.data.Position.fromLatLng](https://docs.microsoft.com/javascript/api/azure-maps-control/atlas.data.position?view=azure-iot-typescript-latest) method with the `new google.maps.LatLng` method in Google Maps code.
57+
- Azure Maps separates styles from the data. Separating data and styles is more performance efficient than specifying styling information on each shape that's added to the map. Data is stored in data sources is connected to rendering layers. Azure Maps code uses data sources to render the data. This approach provides enhanced performance benefit. Additionally, many layers support data-driven styling where business logic can be added to layer style options. This support changes how individual shapes are rendered within a layer, based on properties defined in the shape.
5958

6059
## Web SDK side-by-side examples
6160

62-
The following collection has code samples for each platform, each covering common use cases. It is intended to help you migrate your web application from Google Maps V3 JavaScript SDK to the Azure Maps Web SDK. Code samples related to web applications are provided in JavaScript. However, Azure Maps also provides TypeScript definitions as an additional option through an [NPM module](how-to-use-map-control.md).
61+
This collection has code samples for each platform, each sample covers a common use cases. It is intended to help you migrate your web application from Google Maps V3 JavaScript SDK to the Azure Maps Web SDK. Code samples related to web applications are provided in JavaScript. However, Azure Maps also provides TypeScript definitions as an additional option through an [NPM module](how-to-use-map-control.md).
6362

6463
### Load a map
6564

66-
Loading a map follows the same set of steps in both SDKs:
65+
Both SDKs have the same steps to load a map:
6766

6867
- Add a reference to the Map SDK.
6968
- Add a `div` tag to the body of the page, which will act as a placeholder for the map.
@@ -78,13 +77,13 @@ Loading a map follows the same set of steps in both SDKs:
7877
- Coordinates in Azure Maps are defined as Position objects, which can be specified as a simple number array in the format `[longitude, latitude]`.
7978
- The zoom level in Azure Maps is one level lower than the zoom level in Google Maps. This discrepancy is due to the difference in the sizes of tiling system of the two platforms.
8079
- Azure Maps doesn't add any navigation controls to the map canvas. So, by default, a map doesn't have zoom buttons and map style buttons. There are however controls for adding a map style picker, zoom buttons, compass or rotation control, and a pitch control.
81-
- An event handler is added in Azure Maps to monitor the `ready` event of the map instance. This event will fire when the map has finished loading the WebGL context and all the needed resources. Add any code you want to run, after the map completes loading, to this event handler.
80+
- An event handler is added in Azure Maps to monitor the `ready` event of the map instance. This event will fire when the map has finished loading the WebGL context and all the needed resources. Add any code you want to run after the map completes loading, to this event handler.
8281

83-
The examples below show how to load a basic map such that is centered over New York at coordinates (longitude: -73.985, latitude: 40.747) and is at zoom level 12 in Google Maps.
82+
The basic examples below uses Google Maps to load a map centered over New York at coordinates. The longitude: -73.985, latitude: 40.747, and the map is at zoom level of 12.
8483

8584
**Before: Google Maps**
8685

87-
The following code is an example of how to display a Google Map centered and zoomed over a location.
86+
Display a Google Map centered and zoomed over a location.
8887

8988
```html
9089
<!DOCTYPE html>
@@ -123,7 +122,7 @@ Running this code in a browser will display a map that looks like the following
123122

124123
**After: Azure Maps**
125124

126-
The following code shows how to load a map with the same view in Azure Maps along with a map style control and zoom buttons.
125+
Load a map with the same view in Azure Maps along with a map style control and zoom buttons.
127126

128127
```html
129128
<!DOCTYPE html>
@@ -180,14 +179,14 @@ Running this code in a browser will display a map that looks like the following
180179

181180
![Simple Azure Maps](media/migrate-google-maps-web-app/simple-azure-maps.png)</center>
182181

183-
Detailed documentation on how to set up and use the Azure Maps map control in a web app can be found [here](how-to-use-map-control.md).
182+
Find detailed documentation on how to set up and use the Azure Maps map control in a web app, by clicking [here](how-to-use-map-control.md).
184183

185184
> [!NOTE]
186-
> Unlike Google Maps, Azure Maps does not require an initial center and a zoom level to be specified when loading the map. If this information is not provided when loading the map, the map will try to determine which city the user is in and will center and zoom the map there.
185+
> Unlike Google Maps, Azure Maps does not require an initial center and a zoom level to load the map. If this information is not provided when loading the map, Azure maps will try to determine city of the user. It will center and zoom the map there.
187186
188187
**Additional resources:**
189188

190-
- Azure Maps also provides navigation controls for rotating and pitching the map view as documented [here](map-add-controls.md).
189+
- Azure Maps also provides navigation controls for rotating and pitching the map view, as documented [here](map-add-controls.md).
191190

192191
### Localizing the map
193192

0 commit comments

Comments
 (0)