Navigation Functions (Heading)

by Lawrence Ross

HTML

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

CSS

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

JavaScript

var map;
var GeoJson;

function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: new google.maps.LatLng(-8.044474, -34.884578),
  });
  map.data.addGeoJson(mygeojson);
  map.data.setStyle(function(feature) {
    var pvalue = feature.getProperty('value');

    if (pvalue == 120) {
      color = 'Blue';
    }
    if (pvalue == 240) {
      color = '#ff5050';
    }
    if (pvalue == 480) {
      color = '#ff9933';
    }
    if (pvalue == 600) {
      color = 'yellow';
    }
    return {
      fillColor: color,
      strokeWeight: 1
    }
  });

}

var mygeojson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [-34.915172, -8.049481],
          [-34.914707, -8.055378],
          [-34.91162, -8.060598],
          [-34.910063, -8.061326],
          [-34.90985, -8.061371],
          [-34.90802, -8.060531],
          [-34.905952, -8.056527],
          [-34.903001, -8.050196],
          [-34.902767, -8.04958],
          [-34.902568, -8.045435],
          [-34.902587, -8.045258],
          [-34.906566, -8.041764],
          [-34.908749, -8.0408],
          [-34.908813, -8.040815],
          [-34.909764, -8.041281],
          [-34.90979, -8.041321],
          [-34.915152, -8.049235],
          [-34.915172, -8.049481]
        ]
      ]
    },
    "properties": {
      "group_index": 0,
      "value": 120,
      "center": [-34.909916, -8.05]
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [-34.929988, -8.047497],
          [-34.926252, -8.054765],
          [-34.924748, -8.062501],
          [-34.917848, -8.067531],
          [-34.910711, -8.074744],
          [-34.907147, -8.074238],
          [-34.902147, -8.067023],
          [-34.898236, -8.064276],
          [-34.896426, -8.063107],
          [-34.895983, -8.062843],
         ...