Plot pushpin using WKT format

Balasaheb Molawade 136 Reputation points
2023-09-01T13:18:35.6466667+00:00

Hi Team,

 We have developed an application using Bing Maps. The customer has made a specific request: they have their data in Well-Known Text (WKT) format, including X and Y coordinates, as depicted in the screenshot below. In the application, we plot data using latitude and longitude. Are there any methods in Bing Maps to convert the WKT format, as shown below, into the corresponding latitude and longitude coordinates.

We have attempted the code provided in the link below, but when we input the WKT format mentioned above, it does not display a pushpin; instead, it shows an empty map.

  var pin = Microsoft.Maps.WellKnownText.read('POINT(998546 172742)');

https://learn.microsoft.com/en-us/bingmaps/v8-web-control/map-control-concepts/well-known-text-examples/well-known-text-read-example

Thanks!

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
832 questions
{count} votes

1 answer

Sort by: Most helpful
  1. rbrundritt 20,836 Reputation points Microsoft Employee Moderator
    2023-09-01T22:26:44.2066667+00:00

    Bing Maps (and Azure Maps) support Well Known Text format, but for WGS84 decimal degrees coordinates (EPSG:4326). The numbers in the code block you provided appear to be northing and easting values in another projection system. You will need to find out what project system that is as there are literally thousands that look like this. I'm fairly certain it isn't EPSG:3857 as that would put the coordinates in the Atlantic Ocean. I suspect it is either using a UTM or state plane type projection/coordinate reference system. To use this, the data would need to be reprojected. Ideally that would be done on the server side before it reaches the frontend app. If the data is stored in Postgresql, they are likely using PostGIS which supports reprojecting the data natively (simple modification to the SQL query). If they are using SQL, there is not native reprojection support, I believe there are some external libraries, but it may be better to simply reproject the data in the backend service that is serving the data using a common library, like NetTopologySuite, or Proj4Net. If you can't change the backend and need to handle this on the front end, you will need to either manually parse the WKT (not overly difficult) and reproject the points using something like proj4js. If you want to skip the manual parsing part and leverage libraries, the following is one method:

    1. Convert the WKT to GeoJSON using https://github.com/mapbox/wellknown
    2. Project the GeoJSON data using https://github.com/DanielJDufour/reproject-geojson
    3. Use the Bing Maps GeoJSON module to load the data into the map.

    Here is a code sample

    <html>
    <head>
    	<title></title>
    	<style>
    	html, body, #myMap {
    		[adding: 0;
    		margin:0;
    		width: 100%;
    		height: 100%;
    		position: relative;
    	}
    	</style>
    </head>
    <body>
    	<div id="myMap"></div>
    	
    	<!-- Load a library to convert WKT to GeoJSON -->
    	<script src="https://cdn.jsdelivr.net/npm/wellknown@0.5.0/wellknown.min.js"></script>
    
    	<!-- Load library to reproject coordinates. -->
    	<script src="https://cdn.jsdelivr.net/npm/proj4@2.9.0/dist/proj4.min.js"></script>
    
    	<!-- Load a library to reproject GeoJSON -->
    	<script src="https://cdn.jsdelivr.net/npm/reproject-geojson@0.3.0/reproject-geojson.min.js"></script>
    	
    	<script>
    		var map;
    	
    		var inputWKT = 'POINT(998546 172742)';
    	
    		function GetMap(){
    			map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    				center: new Microsoft.Maps.Location(0,0),
    				zoom: 1
    			});
    			
    			//Load GeoJSON module for Bing Maps.
    			Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', importWKTData); 
    		}
    		
    		function importWKTData() {
    			var geojson = wellknown.parse(inputWKT);
    			
    			//Change "3857" to the EPSG code for the coordinate reference system of the input data.
    			var geojson4326 = reprojectGeoJSON(geojson, { from: 3857, to: 4326 });
    			
    			var shape = Microsoft.Maps.GeoJson.read(geojson4326, { 
    				pushpinOptions: { color: 'red' },
    				polylineOptions: { strokeColor: 'blue', strokeThickness: 5},
    				polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } 
    			});
    			
    			map.entities.push(shape);
    		}
    	</script>
    	
    	<!-- Load Bing Maps SDK -->
    	<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=YOUR_BING_MAPS_KEY' async defer></script>
    </body>
    </html>
    

    Note, it's possible that your customer data may have a mix of coordinate reference systems (EPSG codes) if for instance they are using state plane coordinate systems for accuracy but have data that cross several states. In that case they should know the coordinate reference system for each row of their data and be able to pass that down with the WKT data as a property in the data. If you are creating a reusable solution, it would make sense to have a way to support multiple project systems like this to make your solution more reusable.


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.