You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/azure-maps/migrate-from-google-maps-web-app.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -29,7 +29,7 @@ Also:
29
29
> [!div class="checklist"]
30
30
> * How to accomplish common mapping tasks using the Azure Maps Web SDK.
31
31
> * Best practices to improve performance and user experience.
32
-
> * Tips on how to make your application using more advanced features available in Azure Maps.
32
+
> * Tips on how to make your application use more advanced features available in Azure Maps.
33
33
34
34
If migrating an existing web application, check to see if it's using an open-source map control library. Examples of open-source map control library are: Cesium, Leaflet, and OpenLayers. You can still migrate your application, even if it uses an open-source map control library, and you don't want to use the Azure Maps Web SDK. In such case, connect your application to the Azure Maps [Render] services ([road tiles] | [satellite tiles]). The following points detail on how to use Azure Maps in some commonly used open-source map control libraries.
35
35
@@ -39,7 +39,7 @@ If migrating an existing web application, check to see if it's using an open-sou
39
39
40
40
If developing using a JavaScript framework, one of the following open-source projects may be useful:
41
41
42
-
*[ng-azure-maps] - Angular 10 wrapper around Azure maps.
42
+
*[ng-azure-maps] - Angular 10 wrapper around Azure Maps.
43
43
*[AzureMapsControl.Components] - An Azure Maps Blazor component.
44
44
*[Azure Maps React Component] - A react wrapper for the Azure Maps control.
45
45
*[Vue Azure Maps] - An Azure Maps component for Vue application.
@@ -120,15 +120,15 @@ Both SDKs have the same steps to load a map:
120
120
121
121
**Some key differences**
122
122
123
-
* Google maps requires an account key to be specified in the script reference of the API. Authentication credentials for Azure Maps are specified as options of the map class. This credential can be a subscription key or Azure Active Directory information.
123
+
* Google Maps requires an account key to be specified in the script reference of the API. Authentication credentials for Azure Maps are specified as options of the map class. This credential can be a subscription key or Azure Active Directory information.
124
124
* Google Maps accepts a callback function in the script reference of the API, which is used to call an initialization function to load the map. With Azure Maps, the onload event of the page should be used.
125
125
* When referencing the `div` element in which the map renders, the `Map` class in Azure Maps only requires the `id` value while Google Maps requires a `HTMLElement` object.
126
126
* Coordinates in Azure Maps are defined as Position objects, which can be specified as a simple number array in the format `[longitude, latitude]`.
127
127
* The zoom level in Azure Maps is one level lower than the zoom level in Google Maps. This discrepancy is because the difference in the sizes of tiling system of the two platforms.
128
128
* 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. But, there are control options for adding a map style picker, zoom buttons, compass or rotation control, and a pitch control.
129
129
* An event handler is added in Azure Maps to monitor the `ready` event of the map instance. This event fires 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.
130
130
131
-
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.
131
+
The following examples use 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.
132
132
133
133
#### Before: Google Maps
134
134
@@ -227,7 +227,7 @@ Running this code in a browser displays a map that looks like the following imag
227
227
For more information on how to set up and use the Azure Maps map control in a web app, see [Use the Azure Maps map control].
228
228
229
229
> [!NOTE]
230
-
> 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.
230
+
> 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.
231
231
232
232
**More resources:**
233
233
@@ -796,7 +796,7 @@ map.events.add('click', marker, function () {
796
796
797
797
Google Maps supports loading and dynamically styling GeoJSON data via the `google.maps.Data` class. The functionality of this class aligns more with the data-driven styling of Azure Maps. But, there's a key difference. With Google Maps, you specify a callback function. The business logic for styling each feature it processed individually in the UI thread. But in Azure Maps, layers support specifying data-driven expressions as styling options. These expressions are processed at render time on a separate thread. The Azure Maps approach improves rendering performance. This advantage is noticed when larger data sets need to be rendered quickly.
798
798
799
-
The following examples load a GeoJSON feed of all earthquakes over the last seven days from the USGS. Earthquakes data renders as scaled circles on the map. The color and scale of each circle is based on the magnitude of each earthquake, which is stored in the `"mag"` property of each feature in the data set. If the magnitude is greater than or equal to five, the circle is red. If it's greater or equal to three, but less than five, the circle is orange. If it's less than three, the circle is green. The radius of each circle will be the exponential of the magnitude multiplied by 0.1.
799
+
The following examples load a GeoJSON feed of all earthquakes over the last seven days from the USGS. Earthquakes data renders as scaled circles on the map. The color and scale of each circle is based on the magnitude of each earthquake, which is stored in the `"mag"` property of each feature in the data set. If the magnitude is greater than or equal to five, the circle is red. If it's greater or equal to three, but less than five, the circle is orange. If it's less than three, the circle is green. The radius of each circle is the exponential of the magnitude multiplied by 0.1.
800
800
801
801
#### Before: Google Maps
802
802
@@ -957,7 +957,7 @@ GeoJSON is the base data type in Azure Maps. Import it into a data source using
957
957
958
958
### Marker clustering
959
959
960
-
When visualizing many data points on the map, points may overlap each other. Overlapping makes the map looks cluttered, and the map becomes difficult to read and use. Clustering point data is the process of combining data points that are near each other and representing them on the map as a single clustered data point. As the user zooms into the map, the clusters break apart into their individual data points. Cluster data points to improve user experience and map performance.
960
+
When visualizing many data points on the map, points may overlap each other. Overlapping makes the map look cluttered, and the map becomes difficult to read and use. Clustering point data is the process of combining data points that are near each other and representing them on the map as a single clustered data point. As the user zooms into the map, the clusters break apart into their individual data points. Cluster data points to improve user experience and map performance.
961
961
962
962
In the following examples, the code loads a GeoJSON feed of earthquake data from the past week and adds it to the map. Clusters are rendered as scaled and colored circles. The scale and color of the circles depends on the number of points they contain.
Traffic data can be overlaid both Azure and Google maps.
1354
+
Traffic data can be overlaid both Azure and Google Maps.
1355
1355
1356
1356
#### Before: Google Maps
1357
1357
@@ -1390,7 +1390,7 @@ If you select one of the traffic icons in Azure Maps, more information is displa
1390
1390
1391
1391
### Add a ground overlay
1392
1392
1393
-
Both Azure and Google maps support overlaying georeferenced images on the map. Georeferenced images move and scale as you pan and zoom the map. In Google Maps, georeferenced images are known as ground overlays while in Azure Maps they're referred to as image layers. They're great for building floor plans, overlaying old maps, or imagery from a drone.
1393
+
Both Azure and Google Maps support overlaying georeferenced images on the map. Georeferenced images move and scale as you pan and zoom the map. In Google Maps, georeferenced images are known as ground overlays while in Azure Maps they're referred to as image layers. They're great for building floor plans, overlaying old maps, or imagery from a drone.
1394
1394
1395
1395
#### Before: Google Maps
1396
1396
@@ -1509,7 +1509,7 @@ Use the `atlas.layer.ImageLayer` class to overlay georeferenced images. This cla
1509
1509
1510
1510
### Add KML data to the map
1511
1511
1512
-
Both Azure and Google maps can import and render KML, KMZ and GeoRSS data on the map. Azure Maps also supports GPX, GML, spatial CSV files, GeoJSON, Well Known Text (WKT), Web-Mapping Services (WMS), Web-Mapping Tile Services (WMTS), and Web Feature Services (WFS). Azure Maps reads the files locally into memory and in most cases can handle larger KML files.
1512
+
Both Azure and Google Maps can import and render KML, KMZ and GeoRSS data on the map. Azure Maps also supports GPX, GML, spatial CSV files, GeoJSON, Well Known Text (WKT), Web-Mapping Services (WMS), Web-Mapping Tile Services (WMTS), and Web Feature Services (WFS). Azure Maps reads the files locally into memory and in most cases can handle larger KML files.
| Snap to Road | See [Calculate routes and directions] section. |
44
44
| Speed Limits | See [Reverse geocode a coordinate] section. |
45
45
| Static Map |[Render]|
46
-
| Time Zone |[Timezone]|
46
+
| Time Zone |[Timezone]|
47
47
48
48
The following service APIs aren't currently available in Azure Maps:
49
49
50
50
* Geolocation - Azure Maps does have a service called Geolocation, but it provides IP Address to location information, but doesn't currently support cell tower or WiFi triangulation.
51
51
* Places details and photos - Phone numbers and website URL are available in the Azure Maps search API.
52
52
* Map URLs
53
-
* Nearest Roads - This is achievable using the Web SDK as demonstrated in the [Basic snap to road logic] sample, but is not currently available as a service.
53
+
* Nearest Roads - Achievable using the Web SDK as demonstrated in the [Basic snap to road logic] sample, but isn't currently available as a service.
54
54
* Static street view
55
55
56
56
Azure Maps has several other REST web services that may be of interest:
@@ -192,7 +192,7 @@ Calculate routes and directions using Azure Maps. Azure Maps has many of the sam
192
192
193
193
* Arrival and departure times.
194
194
* Real-time and predictive based traffic routes.
195
-
* Different modes of transportation. Such as, driving, walking, bicycling.
195
+
* Different modes of transportation. Such as driving, walking and bicycling.
196
196
197
197
> [!NOTE]
198
198
> Azure Maps requires all waypoints to be coordinates. Addresses must be geocoded first.
@@ -224,17 +224,17 @@ The table cross-references the Google Maps API parameters with the comparable AP
224
224
> [!TIP]
225
225
> By default, the Azure Maps route API only returns a summary. It returns the distance and times and the coordinates for the route path. Use the `instructionsType` parameter to retrieve turn-by-turn instructions. And, use the `routeRepresentation` parameter to filter out the summary and route path.
226
226
227
-
Azure Maps routing API has other features that aren't available in Google Maps. When migrating your app, consider using these features, you might find them useful.
227
+
Azure Maps routing API has other features that aren't available in Google Maps. When migrating your app, consider using these features:
228
228
229
229
* Support for route type: shortest, fastest, trilling, and most fuel efficient.
230
-
* Support for other travel modes: bus, motorcycle, taxi, truck, and van.
230
+
* Support for other travel modes: bus, motorcycle, taxi, truck and van.
231
231
* Support for 150 waypoints.
232
232
* Compute multiple travel times in a single request; historic traffic, live traffic, no traffic.
233
233
* Avoid other road types: carpool roads, unpaved roads, already used roads.
234
234
* Specify custom areas to avoid.
235
-
* Limit the elevation, which the route may ascend.
236
-
* Route based on engine specifications. Calculate routes for combustion or electric vehicles based on engine specifications, and the remaining fuel or charge.
237
-
* Support commercial vehicle route parameters. Such as, vehicle dimensions, weight, number of axels, and cargo type.
235
+
* Limit the elevation that the route may ascend.
236
+
* Route based on engine specifications. Calculate routes for combustion or electric vehicles based on engine specifications and the remaining fuel or charge.
237
+
* Support commercial vehicle route parameters. Such as vehicle dimensions, weight, number of axels and cargo type.
238
238
* Specify maximum vehicle speed.
239
239
240
240
In addition, the route service in Azure Maps supports [Get Route Range]. Calculating routable ranges is also known as isochrones. It entails generating a polygon covering an area that can be traveled to in any direction from an origin point. All under a specified amount of time or amount of fuel or charge.
@@ -256,10 +256,10 @@ The table cross-references the Google Maps API parameters with the comparable AP
256
256
|`format`|`format` – specified as part of URL path. Currently only PNG supported. |
257
257
|`key`|`subscription-key` – For more information, see [Authentication with Azure Maps]. |
258
258
|`language`|`language` – For more information, see [Localization support in Azure Maps]. |
259
-
|`maptype`|`layer` and `style` – See [Supported map styles] documentation. |
259
+
|`maptype`|`layer` and `style` – For more information, see [Supported map styles]. |
260
260
|`markers`|`pins`|
261
261
|`path`|`path`|
262
-
|`region`|*N/A* – This is a geocoding related feature. Use the `countrySet` parameter when using the Azure Maps geocoding API. |
262
+
|`region`|*N/A* – A geocoding related feature. Use the `countrySet` parameter when using the Azure Maps geocoding API. |
263
263
|`scale`|*N/A*|
264
264
|`size`|`width` and `height` – Max size is 8192 x 8192. |
265
265
|`style`|*N/A*|
@@ -271,7 +271,7 @@ The table cross-references the Google Maps API parameters with the comparable AP
271
271
272
272
For more information, see [Render custom data on a raster map].
273
273
274
-
In addition to being able to generate a static map image, the Azure Maps render service provides the ability to directly access map tiles in raster (PNG) and vector format:
274
+
In addition to being able to generate a static map image, the Azure Maps render service enables direct access of map tiles in raster (PNG) and vector format:
275
275
276
276
*[Get Map Static Image]: Retrieve raster (PNG) and vector tiles for the base maps (roads, boundaries, background).
277
277
*[Get Map Tile]: Retrieve aerial and satellite imagery tiles.
@@ -364,7 +364,7 @@ Add three pins with the label values '1', '2', and '3':
364
364
365
365
**Before: Google Maps**
366
366
367
-
Add lines and polygon to a static map image using the `path` parameter in the URL. The `path` parameter takes in a style and a list of locations to be rendered on the map, as shown below:
367
+
Add lines and polygon to a static map image using the `path` parameter in the URL. The `path` parameter takes in a style and a list of locations to be rendered on the map:
368
368
369
369
```text
370
370
&path=pathStyles|pathLocation1|pathLocation2|...
@@ -374,7 +374,7 @@ Use other styles by adding extra `path` parameters to the URL with a different s
374
374
375
375
Path locations are specified with the `latitude1,longitude1|latitude2,longitude2|…` format. Paths can be encoded or contain addresses for points.
376
376
377
-
Add path styles with the `optionName:value` format, separate multiple styles by the pipe (\|) characters. And, separate option names and values with a colon (:). Like this: `optionName1:value1|optionName2:value2`. The following style option names can be used to style paths in Google Maps:
377
+
Add path styles with the `optionName:value` format, separate multiple styles by the pipe (\|) characters. Also separate option names and values with a colon (:). For example: `optionName1:value1|optionName2:value2`. The following style option names can be used to style paths in Google Maps:
378
378
379
379
*`color` – The color of the path or polygon outline. Can be a 24-bit hex color (`0xrrggbb`), a 32-bit hex color (`0xrrggbbbaa`) or one of the following values: black, brown, green, purple, yellow, blue, gray, orange, red, white.
380
380
*`fillColor` – The color to fill the path area with (polygon). Can be a 24-bit hex color (`0xrrggbb`), a 32-bit hex color (`0xrrggbbbaa`) or one of the following values: black, brown, green, purple, yellow, blue, gray, orange, red, white.
0 commit comments