The UDMap component is a robust control that provides a huge set of features. You can select base layers, configure togglable layers, set markers, define vectors and interact with other Universal App components.
Basic Map
This basic map defines a simple base layer using the wmflabs.org tile server. You can use your own custom tile server by specifying a URL. The map is position over Hailey, Idaho.
Copy New-UDMap - Endpoint {
New-UDMapRasterLayer - TileServer 'https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'
} - Latitude 43.52107 - Longitude -114.31644 - Zoom 13 - Height '100vh'
Layer Control
You can enable the layer control by using the New-UDMapLayerControl cmdlet. This map defines several layers with components that you can toggle on and off. You can only have one base layer selected as a time. Map overlay layers can toggle on and off.
Copy New-UDMap - Endpoint {
New-UDMapLayerControl - Content {
New-UDMapBaseLayer - Name 'Black and White' - Content {
New-UDMapRasterLayer - TileServer 'https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'
} - Checked
New-UDMapBaseLayer - Name 'Color' - Content {
New-UDMapRasterLayer - TileServer 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
}
New-UDMapOverlay - Name 'Marker' - Content {
New-UDMapMarker - Latitude 51.505 - Longitude -0.09
} - Checked
New-UDMapOverlay - Name 'Marker 2' - Content {
New-UDMapMarker - Latitude 51.555 - Longitude -0.00
} - Checked
}
} - Latitude 51.505 - Longitude -0.09 - Zoom 13 - Height '100vh' Markers
Markers are used to highlight particular locations.
Copy New-UDMap - Endpoint {
New-UDMapRasterLayer - TileServer 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
New-UDMapMarker - Latitude "51.100" - Longitude "-0.5"
} - Latitude 51.505 - Longitude -0.09 - Zoom 13 - Height '100vh' Custom Icons
You can specify custom icons for markers using the -Icon parameter.
Copy New-UDMap - Endpoint {
New-UDMapRasterLayer - TileServer 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
New-UDMapMarker - Latitude "51.100" - Longitude "-0.5"
} - Latitude 51.505 - Longitude -0.09 - Zoom 13 - Height '100vh' - Icon ( New-UDMapIcon - Url = "https://ironmansoftware.com/img/ps-logo.png" )
} You can create a popup when clicking the marker by using the -Popup parameter and the New-UDMapPopup cmdlet.
Copy New-UDMapMarker - Latitude "51.$RandomLat" - Longitude "-0.$Random" - Popup (
New-UDMapPopup - Content {
New-UDAlert - Text "Hello"
} - MinWidth 200
) Heatmaps
Heatmaps can be defined by creating a heatmap layer. The intesity and location of the heatmap clusters can be defined by using the New-UDMapHeatmapLayer cmdlet.
Copy New-UDMap - Endpoint {
New-UDMapRasterLayer - TileServer 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
New-UDMapHeatmapLayer - Points @ (
@ ( -37.9019339833 , 175.3879181167 , "625" ) ,
@ ( -37.90920365 , 175.4053418167 , "397" ) ,
@ ( -37.9057407667 , 175.39478875 , "540" ) ,
@ ( -37.9243174333 , 175.4220341833 , "112" ) ,
@ ( -37.8992012333 , 175.3666729333 , "815" ) ,
@ ( -37.9110874833 , 175.4102195833 , "360" ) ,
@ ( -37.9027096 , 175.3913196333 , "591" ) ,
@ ( -37.9011183833 , 175.38410915 , "655" ) ,
@ ( -37.9234701333 , 175.4155696333 , "181" ) ,
@ ( -37.90254175 , 175.3926162167 , "582" ) ,
@ ( -37.92450575 , 175.4246711167 , "90" ) ,
@ ( -37.9242924167 , 175.4289432833 , "47" ) ,
@ ( -37.8986079833 , 175.3685293333 , "801" )
)
} - Height '100vh' Marker Clusters
Marker clusters group together markers that are close to each other. As you zoom in or out, the clusters will either combine or explode.
Copy New-UDMap - Endpoint {
New-UDMapRasterLayer - TileServer 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
New-UDMapMarkerClusterLayer - Id 'cluster-layer' - Markers @ (
1 .. 100 | ForEach-Object {
$Random = Get-Random - Minimum 0 - Maximum 100
$RandomLat = $Random + 400
New-UDMapMarker - Latitude "51.$RandomLat" - Longitude "-0.$Random"
}
)
} - Latitude 51.505 - Longitude -0.09 - Zoom 13 - Height '100vh' Interactive Maps
Maps provide a series of interactive capabilities for add components to and manipulating the map.
Copy New-UDButton - Text 'Add Circle' - OnClick {
Add-UDElement - ParentId 'Feature-Group' - Content {
New-UDMapVectorLayer - Id 'Vectors' - Circle - Latitude 51.505 - Longitude -0.09 - Radius 500 - Color blue - FillColor blue - FillOpacity .5
}
}
New-UDButton - Text 'Remove Circle' - OnClick {
Remove-UDElement - Id 'Vectors'
}
New-UDButton - Text 'Add Marker' - OnClick {
Add-UDElement - ParentId 'Feature-Group' - Content {
New-UDMapMarker - Id 'marker' - Latitude 51.505 - Longitude -0.09 - Popup (
New-UDMapPopup - Content {
New-UDCard - Title "Test"
} - MaxWidth 600
)
}
}
New-UDButton - Text 'Remove Marker' - OnClick {
Remove-UDElement - Id 'marker'
}
New-UDButton - Text 'Add Layer' - OnClick {
Add-UDElement - ParentId 'layercontrol' - Content {
New-UDMapOverlay - Id 'MyNewLayer' - Name "MyNewLayer" - Content {
New-UDMapFeatureGroup - Id 'Feature-Group2' - Content {
1 .. 100 | % {
New-UDMapVectorLayer - Id 'test' - Circle - Latitude "51. $_ " - Longitude -0.09 - Radius 50 - Color red - FillColor blue - FillOpacity .5
}
}
} - Checked
}
}
New-UDButton - Text 'Remove Layer' - OnClick {
Remove-UDElement - Id 'MyNewLayer'
}
New-UDButton - Text 'Move' - OnClick {
Set-UDElement - Id 'map' - Attributes @ {
latitude = 51.550
longitude = -0.09
zoom = 10
}
}
New-UDButton - Text "Add marker to cluster" - OnClick {
Add-UDElement - ParentId 'cluster-layer' - Content {
$Random = Get-Random - Minimum 0 - Maximum 100
$RandomLat = $Random + 400
New-UDMapMarker - Latitude "51.$RandomLat" - Longitude "-0.$Random"
}
}
New-UDButton - Text "Add points to heatmap" - OnClick {
Add-UDElement - ParentId 'heatmap' - Content {
@ (
@ ( 51.505 , -0.09 , "625" ) ,
@ ( 51.505234 , -0.0945654 , "625" ) ,
@ ( 51.50645 , -0.098768 , "625" ) ,
@ ( 51.5056575 , -0.0945654 , "625" ) ,
@ ( 51.505955 , -0.095675 , "625" ) ,
@ ( 51.505575 , -0.09657 , "625" ) ,
@ ( 51.505345 , -0.099876 , "625" ) ,
@ ( 51.505768 , -0.0923432 , "625" ) ,
@ ( 51.505567 , -0.02349 , "625" ) ,
@ ( 51.50545654 , -0.092342 , "625" ) ,
@ ( 51.5045645 , -0.09342 , "625" )
)
}
}
New-UDButton - Text "Clear heatmap" - OnClick {
Clear-UDElement - Id 'heatmap'
}
New-UDMap - Id 'map' - Endpoint {
New-UDMapLayerControl - Id 'layercontrol' - Content {
New-UDMapBaseLayer - Name "Black and White" - Content {
New-UDMapRasterLayer - TileServer 'https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'
}
New-UDMapBaseLayer - Name "Mapnik" - Content {
New-UDMapRasterLayer - TileServer 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
}
New-UDMapBaseLayer - Name "Bing" - Content {
New-UDMapRasterLayer - Bing - ApiKey 'asdf3rwf34afaw-sdfasdfa23feaw-23424dfsdfa' - Type Road
} - Checked
New-UDMapOverlay - Name "Markers" - Content {
New-UDMapFeatureGroup - Id 'Feature-Group' - Content {
New-UDMapMarker - Id 'marker' - Latitude 51.505 - Longitude -0.09
} - Popup (
New-UDMapPopup - Content {
New-UDCard - Title "Test123"
} - MaxWidth 600
)
} - Checked
New-UDMapOverlay - Name 'Vectors' - Content {
New-UDMapFeatureGroup - Id 'Vectors' - Content {
}
} - Checked
New-UDMapOverlay - Name "Heatmap" - Content {
New-UDMapHeatmapLayer - Id 'heatmap' - Points @ ()
} - Checked
New-UDMapOverlay - Name "Cluster" - Content {
New-UDMapMarkerClusterLayer - Id 'cluster-layer' - Markers @ (
1 .. 100 | ForEach-Object {
$Random = Get-Random - Minimum 0 - Maximum 100
$RandomLat = $Random + 400
New-UDMapMarker - Latitude "51.$RandomLat" - Longitude "-0.$Random"
}
)
} - Checked
}
} - Latitude 51.505 - Longitude -0.09 - Zoom 13 - Height '100vh' - Animate 
