OxyPlot is a plotting library for .NET. This is an unofficial library for cartography and maps plotting.
See the SimpleDemo for more details. The below example is implemented using Avalonia, but it will be very similar for other platforms.
var model = new PlotModel
{
IsLegendVisible = true,
PlotType = PlotType.Cartesian
};
model.Legends.Add(new Legend
{
LegendPlacement = LegendPlacement.Inside,
LegendPosition = LegendPosition.RightTop,
LegendBackground = OxyColor.FromAColor(200, OxyColors.White),
LegendBorder = OxyColors.Black,
});
model.Axes.Add(new LongitudeAxis
{
Position = AxisPosition.Bottom,
Minimum = -0.24,
Maximum = 0.04,
Title = "Longitude",
});
model.Axes.Add(new LatitudeWebMercatorAxis
{
Position = AxisPosition.Left,
Minimum = 51.42,
Maximum = 51.62,
Title = "Latitude"
});
var tileMapImageProvider = new HttpTileMapImageProvider(SynchronizationContext.Current)
{
Url = "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{Z}/{Y}/{X}",
MaxNumberOfDownloads = 2,
UserAgent = "OxyPlot.Cartography",
ImageConverter = new Func<byte[], byte[]>(bytes => // Optional
{
if (bytes.Length >= 2 && bytes[0] == 0x42 && bytes[1] == 0x4D)
{
return bytes; // Bmp
}
if (bytes.Length >= 4 && bytes[0] == 0x89 && bytes[1] == 0x50 && bytes[2] == 0x4E && bytes[3] == 0x47)
{
return bytes; //Png
}
using (var msInput = new MemoryStream(bytes))
using (var msOutput = new MemoryStream())
{
var bitmap = Bitmap.DecodeToWidth(msInput, 256);
bitmap.Save(msOutput);
return msOutput.ToArray();
}
return bytes;
})
};
var loadingImg = new Uri("avares://SimpleDemo/Assets/live-view.png");
var asset = AvaloniaLocator.Current.GetService<IAssetLoader>();
using (var streamImg = asset.Open(loadingImg))
{
// Add the tile map annotation
model.Annotations.Add(new MapTileAnnotation(streamImg, tileMapImageProvider)
{
CopyrightNotice = "OpenStreetMap",
MinZoomLevel = 0,
MaxZoomLevel = 19, // max OpenStreetMap value
IsTileGridVisible = true,
TileGridThickness = 3
});
}
model.Annotations.Add(new MapTileAnnotation(streamImg, tileMapImageProvider)
{
CopyrightNotice = "OpenStreetMap",
MinZoomLevel = 0,
MaxZoomLevel = 19, // max OpenStreetMap value
IsTileGridVisible = true,
TileGridThickness = 3
});
var loadingImg = new Uri("avares://SimpleDemo/Assets/live-view.png");
var asset = AvaloniaLocator.Current.GetService<IAssetLoader>();
using (var streamImg = asset.Open(loadingImg))
{
// Add the tile map annotation
model.Annotations.Add(new MapTileAnnotation(streamImg, tileMapImageProvider)
{
CopyrightNotice = "OpenStreetMap",
MinZoomLevel = 0,
MaxZoomLevel = 19, // max OpenStreetMap value
IsTileGridVisible = true,
TileGridThickness = 3
});
}
Map tiles are rendered as true squares, axis is not linear. You can use it in combination with LongitudeAxis
, which is basically a LinearAxis
.
Spherical Pseudo-Mercator projection
Most of OSM, including the main tiling system, uses a Pseudo-Mercator projection where the Earth is modelized as if it was a perfect a sphere. Combined with the zoom level, the system is known as a Web Mercator on Wikipedia.
This produces a fast approximation to the truer, but heavier elliptical projection, where the Earth would be projected on a more accurate ellipsoid (flattened on poles). As a consequence, direct mesurements of distances in this projection will be approximative, except on the Equator, and the aspect ratios on the rendered map for true squares measured on the surface on Earth will slightly change with latitude and angles not so precisely preserved by this spherical projection. https://wiki.openstreetmap.org/wiki/Mercator
model.Axes.Add(new LatitudeWebMercatorAxis
{
Position = AxisPosition.Left,
Minimum = 51.42,
Maximum = 51.62,
Title = "Latitude"
});
e.g. 48.86°N, 02.35°E
e.g. 38°53′23″N, 77°00′32″W
model.Axes.Add(new LongitudeAxis
{
Position = AxisPosition.Bottom,
Minimum = -0.24,
Maximum = 0.04,
Title = "Longitude",
LabelFormatter = (decDegrees) => CartographyHelper.DecimalDegreesToDegreesMinutesSeconds(decDegrees, false, 3)
});
model.Axes.Add(new LatitudeWebMercatorAxis
{
Position = AxisPosition.Left,
Minimum = 51.42,
Maximum = 51.62,
Title = "Latitude",
LabelFormatter = (decDegrees) => CartographyHelper.DecimalDegreesToDegreesMinutesSeconds(decDegrees, true, 3)
});
e.g. 38.8897°, -77.0089° or 38.8897,-77.0089
When using the basic Oxyplot LinearAxis
, the map tiles are not rendered as true squares.
var tileMapImageProvider = new LocalTileMapImageProvider(pathToFolder);
var tileMapImageProvider = new HttpTileMapImageProvider(SynchronizationContext.Current)
{
Url = "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{Z}/{Y}/{X}",
MaxNumberOfDownloads = 2,
UserAgent = "OxyPlot.Cartography"
};
var tileMapImageProvider = new HttpTileMapImageProvider(SynchronizationContext.Current)
{
Url = "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{Z}/{Y}/{X}",
MaxNumberOfDownloads = 2,
UserAgent = "OxyPlot.Cartography",
ImageConverter = new Func<byte[], byte[]>(bytes =>
{
if (bytes.Length >= 2 && bytes[0] == 0x42 && bytes[1] == 0x4D)
{
return bytes; // Bmp
}
if (bytes.Length >= 4 && bytes[0] == 0x89 && bytes[1] == 0x50 && bytes[2] == 0x4E && bytes[3] == 0x47)
{
return bytes; //Png
}
using (var msInput = new MemoryStream(bytes))
using (var msOutput = new MemoryStream())
{
var bitmap = Bitmap.DecodeToWidth(msInput, 256);
bitmap.Save(msOutput);
return msOutput.ToArray();
}
return bytes;
})
};
- http://tile.openstreetmap.org/{Z}/{X}/{Y}.png
- https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{Z}/{Y}/{X}
- https://maptiles.finncdn.no/tileService/1.0.3/norortho/{Z}/{X}/{Y}.png
- https://maptiles.finncdn.no/tileService/1.0.3/normap/{Z}/{X}/{Y}.png
- https://stackoverflow.com/questions/39101368/oxyplot-how-to-programmatically-get-the-scale-of-a-linearaxis-and-use-it-in-an
- https://gis.stackexchange.com/questions/110730/mercator-scale-factor-is-changed-along-the-meridians-as-a-function-of-latitude
- https://wiki.openstreetmap.org/wiki/Mercator
- https://en.wikipedia.org/wiki/Web_Mercator_projection