C# Polyline Digitizer

Click on map to create a poly line then check the javascript console for the points exported into C# format

by Daniel Latimer

HTML

<script src="https://momentjs.com/downloads/moment.js"></script>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

CSS

#map {
  height: 100%;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

const halifaxNsCanadaLocation = {lat:44.652342067408846,lng:-63.59395417111716}
const config = {
  startTime: moment('2018/02/14 2:35:00 pm' ,'YYYY/MM/DD, h:mm:ss a'),
  intervalBetweenPoints: moment.duration(1, 'minutes'),
  mapConfig: {
  	zoom: 14,
		center: halifaxNsCanadaLocation,
  }
}

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), config.mapConfig);
  const poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map
  });

  map.addListener('click', event => addLatLng(event, map, poly));
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event, map, poly) {
  const path = poly.getPath();
  path.push(event.latLng);
  
  new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map
  });
  
  console.log(serializeEvents(pointsToEvents(path.b)));
}

function pointsToEvents(points) {
	return points.map((point, index) => ({
    timestamp: moment(config.startTime).add(config.intervalBetweenPoints),  
    lat: point.lat(),
    lng: point.lng()
  }));
}

function serializeEvents(events){
	return "var points = new [] {" + 
  	events.map(event => serializeEvent(event)).join(",") + 
    "\n};";
}

function serializeEvent(event) {
  const eventSerialized = 
  	"\n  new {" + 
    "\n    lat = " + event.lat + "," + 
    "\n    lng = " + event.lng + "," + 
    "\n    date = " + serializeTimestamp(event.timestamp) + 
    "\n  }"
    
  return eventSerialized
}

function serializeTimestamp(timestamp) {
  const date = moment(timestamp).utc(); 
	return 'new DateTime(' + date.format('YYYY, M, D, H, m, s, ') + 'DateTimeKind.Utc)'
}