Plotting co-ordinates and showing lines between those in OneMap

Hi Team,

We are currently trying to leverage and integrate OneMap in our application.
We would like to check the feasibility for the following functionality with OneMap where we need to show distance between one postal code and a set of postal codes.

  1. Plotting a postal code on the map with one color.
  2. Plotting a set of postal codes on the map with another color and show the distance from postal code in step 1(highlighted as lines).
  3. Zoom in and zoom out from postal code in step 1 based on a specific radius(in kms).

Kindly let us know if we can achieve this with OneMap.

@samad do you meant that you have a set of postal codes created (in step 2) to compare the distance for each of them to that single postal code created in step 1? There’s no need to compare each of the sets to each other within that set right?

In that case, you can use TurfJS’s distance: http://turfjs.org/docs/#distance

  1. Use OneMap’s Search API to obtain LATITUDE, LONGITUDE using GET method. ( For example: https://developers.onemap.sg/commonapi/search?searchVal=119963&returnGeom=Y&getAddrDetails=Y&pageNum=1 )
  2. Create a variable for step 1 to store the single LATITUDE, LONGITUDE as the source and an array to traverse through the API to store LATITUDE, LONGITUDE as step 2 to fulfill your needs.
  3. Create a variable for distance result and compare each of them to that source LATITUDE, LONGITUDE with the given parameter in ‘kilometers’, distance result will be at your disposal.

Note: kilometers will be set by default… but its not in radius as this will behave like a polyline between 2 points

@kyroskoh :
Hi Kyros,

do you meant that you have a set of postal codes created (in step 2) to compare the distance for each of them to that single postal code created in step 1? There’s no need to compare each of the sets to each other within that set right?
- Yes, thats right. One postal code against a set of postal codes.
For example Source: S1, Destination: D1, D2… Dn.
We need to calculate the following:

     1. S1 to D1
     2. S1 to D2
     .....
     3. S1 to Dn.

But for this requirement, I need to plot all these points in OneMap and show lines between each of the above pairs. Is that achievable ?. Kindly advise.

Hello @samad, it can be achieved by creating your own application using our OneMap API and TurfJS as I have mentioned. However you can’t do such visualisation within OneMap website.

You can use LeafletJS for your development, starting by consuming our Basemap: https://docs.onemap.sg/maps

			<html>
			<head>
				<title>OneMap2 XYZ (Default)</title>
				<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
				<script src="https://cdn.onemap.sg/leaflet/onemap-leaflet.js"></script>
			</head>
			<body>
				<h1>Singapore Map</h1>
				<div id='mapdiv' style='height:800px;'></div>
			</body>
			<script>
				var center = L.bounds([1.56073, 104.11475], [1.16, 103.502]).getCenter();
				var map = L.map('mapdiv').setView([center.x, center.y], 12);

				var basemap = L.tileLayer('https://maps-{s}.onemap.sg/v3/Default/{z}/{x}/{y}.png', {
					detectRetina: true,
					maxZoom: 18,
					minZoom: 11
				});

				map.setMaxBounds([[1.56073, 104.1147], [1.16, 103.502]]);

				basemap.addTo(map);

				function getLocation() {
					if (navigator.geolocation) {
						navigator.geolocation.getCurrentPosition(showPosition);
					} 
				}

				function showPosition(position) {						
					marker = new L.Marker([position.coords.latitude, position.coords.longitude], {bounceOnAdd: false}).addTo(map);						 
					var popup = L.popup()
					.setLatLng([position.coords.latitude, position.coords.longitude]) 
					.setContent('You are here!')
					.openOn(map);					
				}
			</script>
			</html>

Then explore on our example skeleton codes as your guidance at our GitHub: https://github.com/sla-onemap/onemap-leaflet/tree/master/examples on Reverse Geocoding part.

Then make use of TurfJS’s distance function at http://turfjs.org/docs/#distance

i have tried the above code but current location not showing.kindly pls let me khow if i need do add anything.

Hi @thangae, have you posted your partial source code on stackoverflow / gis exchange for the community to help to troubleshoot?

Hi @kyroskoh , Thanks for your reply. I have resolved the issue after download the latest leaflet.js file from leaflet . Thanks