Map/polygon conversion from KML/JSON/VARIOUS mapit source to Lat/Long polygon?

Question

I'd like to change the map zone I have in my custom backend at work.

The current inputs result in a map that is not correct.

The format this backend uses looks like

51.258548 -0.187498

51.302355 -0.30708

51.30872 -0.393738

51.328764 -0.469456

51.401552 -0.527588

51.500036 -0.489758

51.563533 -0.530822

etc etc

But I need to have the map file hosted at https://mapit.mysociety.org/area/2247.html instead.

My issue is they seem incompatible and I've not been able to Google search a tool that will do this for me? (There's not of converters, but nothing that covered the task at hand)

Apologies if it's a 'dumb' question, even finding out the name of the mapping syntax in my backend would help enormously

Answer 1

Theses are a (partial) list of co-ordinates which represent points withing a polygon area.

My issue is they seem incompatible and I've not been able to Google search a tool that will do this for me?

Just type them in for a simple solution. Depending on technology uses pass the to the javascript as an array and read them plotting them on the map.

But I need to have the map file hosted at https://mapit.mysociety.org/area/2247.html instead.

With the co-ordinates you gave you can achieve the following with Google-maps-api:

Link to JSFiddle: https://jsfiddle.net/y6f9fre6/

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {
      lat: 51.401552,
      lng:  -0.527588
    },
    mapTypeId: 'roadmap'
  });

  //your co-ordinates go here
  var triangleCoords = [{
      lat: 51.258548,
      lng: -0.187498
    }, {
      lat: 51.302355,
      lng: -0.30708
    }, {
      lat: 51.30872,
      lng: -0.393738
    },

    {
      lat: 51.328764,
      lng: -0.469456
    },

    {
      lat: 51.401552,
      lng: -0.527588
    },

    {
      lat: 51.500036,
      lng: -0.489758
    },

    {
      lat: 51.563533,
      lng: -0.530822
    },
  ];

  // Construct the polygon.
  var coordinates = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  coordinates.setMap(map);
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

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

<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>