How to parse kml file to zoom in map

Question

I'm pretty new to Angular, and Im using kml file to locate lands and add few properies, im trying to create a button that focuses on a type of land according to the button name. The main idea is that the lands in the kml file would have an option to zoom in on the type of land i choose.

I got suggestion to use a json file, but not sure of how to using it properly.

<div> 
    <agm-map [latitude]="lat" [longitude]="lng" [fullscreenControl]='true' [mapTypeControl]='true' 
        [mapTypeId]="'hybrid'">
        <agm-kml-layer url="my-google-drive-link-to-the-kml"></agm-kml-layer>
      </agm-map>
      <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."> 

      <ul id="myUL">
        <li><a href="#">Land A</a></li>  <--- Button i click in order to focus on 
                                                                        this land
        <li><a href="#">Land B</a></li>  
        <li><a href="#">Land C</a></li>
        <li><a href="#">Land D</a></li>
      
      </ul> 
</div>

Thanks!

Answer 1

Theres some very nice article on how to do exactly this

This is parsing a KML layer, you can tie each land to a layer as a button/Land A, B,

var kmlLayer = new google.maps.KmlLayer();    

var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

var kmlLayer = new google.maps.KmlLayer(src, {
  suppressInfoWindows: true,
  preserveViewport: false,
  map: map
});

---

If you want to parse a local file, here is ref. a working fiddle

/**
 *  Renders specified a KML file on the map
 *
 *  Note that the maps data module http://js.api.here.com/v3/3.0/mapsjs-data.js
 *  must be loaded for KML parsing to occcur
 *
 * @param {H.Map} map A HERE Map instance within the application
 */
function renderKML(map) {
  // Center map on New York
  map.setCenter({lat: 37.4602, lng: -95.7475});
  map.setZoom(4);

  // Create a reader object passing in the URL of our KML file
  var reader = new H.data.kml.Reader('data/us-states.kml');

  // Parse the document
  reader.parse();

  // Get KML layer from the reader object and add it to the map
  map.addLayer(reader.getLayer());
}


/**
 * Boilerplate map initialization code starts below:
 */

// Step 1: initialize communication with the platform
var platform = new H.service.Platform({
  app_id: 'DemoAppId01082013GAL',
  app_code: 'AJKnXv84fjrb0KIHawS0Tg',
  useCIT: true
});
var defaultLayers = platform.createDefaultLayers();

// Step 2: initialize a map
var map = new H.Map(document.getElementById('map'), defaultLayers.normal.map, {
  zoom: 1
});

// Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Step 4: create the default UI component, for displaying bubbles
var ui = H.ui.UI.createDefault(map, defaultLayers);

// Step 5: main logic goes here
renderKML(map);

$('head').append('<link rel="stylesheet" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" type="text/css" />');