Create a KML layer on a Google Map by uploading from a text input field

Question

Create a KML layer on a Google Map by uploading from a text input field

Is there a way to use the javascript api to draw a kml layer on a google map by copying the kml code from a textarea, similar to how it can be done on this page?

Most examples in the documentation I found demonstrate loading the kml layer from a file.

javascript google-maps google-maps-api-3

Answer 1

Answer №1

Check out this example, it showcases the use of the geoxml3 third-party KML parser along with another library for editing KML files.

For a working fiddle demonstration, you can refer to this link.

Here's a snippet of the code provided:

var geocoder;
var map;

// More JavaScript code snippets go here...

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

You'll need to include the following scripts in your HTML file: - Google Maps API script - geoxml3.js script - ProjectedOverlay.js script In addition, make sure to add a div element with an id of "map_canvas" to display the map and an input button to trigger the parsing of KML to the map. Feel free to explore the full code provided above!

Answer 2

Check out this example, it showcases the use of the geoxml3 third-party KML parser along with another library for editing KML files.

For a working fiddle demonstration, you can refer to this link.

Here's a snippet of the code provided:

var geocoder;
var map;

// More JavaScript code snippets go here...

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

You'll need to include the following scripts in your HTML file: - Google Maps API script - geoxml3.js script - ProjectedOverlay.js script In addition, make sure to add a div element with an id of "map_canvas" to display the map and an input button to trigger the parsing of KML to the map. Feel free to explore the full code provided above!

Answer 3

Answer №2

One way to approach this is by converting kml files to GeoJSON format and utilizing the Data Layer feature instead of directly using Google Maps API. You can achieve this by employing the toGeoJSON library provided by Mapbox, which offers additional functionalities.

An important point to note is that toGeoJSON does not support kmz format, hence you would need to extract the file before processing it. In my experience, I had to adjust the kml polygon as toGeoJSON requires closed polygons with the same first and last coordinate for proper functioning.

To further explore the implementation, you can refer to the code available in this Fiddle link.

//initialize infoWindow object
var infWindow = new google.maps.InfoWindow();

function setMapFromKML(kmlString) {
  if (kmlString.length == 0) {
    return false;
  }
  if (typeof toGeoJSON == "undefined") { 
    alert("toGeoJSON.js not included");
    return;
  }
  
  var domparser = new DOMParser();
  var kml = domparser.parseFromString(kmlString, "text/xml");

  var geojson = toGeoJSON.kml(kml);

  var features = map.data.addGeoJson(geojson);

  var bounds = new google.maps.LatLngBounds();

  features.forEach(function(feature) {

    feature.getGeometry().forEachLatLng(function(latlng) {
      bounds.extend(latlng);
    });

  });

  map.fitBounds(bounds);

  map.data.addListener('click', function(event) {
    var infContent = GetContent(event);
    var latlng;
    if (typeof event.feature.getGeometry().get !== "undefined") { //for point
      latlng = event.feature.getGeometry().get();
    } else { //polygon/multi,etc...
      var polybounds = new google.maps.LatLngBounds()
      event.feature.getGeometry().forEachLatLng(function(featurelatlng) {
        polybounds.extend(featurelatlng);
      });

      latlng = polybounds.getCenter();
    }

    openInfowindow(latlng, infContent);

  });

}

function GetContent(event) {
  var content = '<div><h3>' + event.feature.getProperty('name') + '</h3>' + event.feature.getGeometry().
  getType() + '<br></div>';
  return content;
}

function openInfowindow(latLng, content) {
  var div = document.createElement('div');
  div.innerHTML = content;

  infWindow.setContent(div);
  infWindow.setPosition(latLng);
  infWindow.open(map);
}

Answer 4

One way to approach this is by converting kml files to GeoJSON format and utilizing the Data Layer feature instead of directly using Google Maps API. You can achieve this by employing the toGeoJSON library provided by Mapbox, which offers additional functionalities.

An important point to note is that toGeoJSON does not support kmz format, hence you would need to extract the file before processing it. In my experience, I had to adjust the kml polygon as toGeoJSON requires closed polygons with the same first and last coordinate for proper functioning.

To further explore the implementation, you can refer to the code available in this Fiddle link.

//initialize infoWindow object
var infWindow = new google.maps.InfoWindow();

function setMapFromKML(kmlString) {
  if (kmlString.length == 0) {
    return false;
  }
  if (typeof toGeoJSON == "undefined") { 
    alert("toGeoJSON.js not included");
    return;
  }
  
  var domparser = new DOMParser();
  var kml = domparser.parseFromString(kmlString, "text/xml");

  var geojson = toGeoJSON.kml(kml);

  var features = map.data.addGeoJson(geojson);

  var bounds = new google.maps.LatLngBounds();

  features.forEach(function(feature) {

    feature.getGeometry().forEachLatLng(function(latlng) {
      bounds.extend(latlng);
    });

  });

  map.fitBounds(bounds);

  map.data.addListener('click', function(event) {
    var infContent = GetContent(event);
    var latlng;
    if (typeof event.feature.getGeometry().get !== "undefined") { //for point
      latlng = event.feature.getGeometry().get();
    } else { //polygon/multi,etc...
      var polybounds = new google.maps.LatLngBounds()
      event.feature.getGeometry().forEachLatLng(function(featurelatlng) {
        polybounds.extend(featurelatlng);
      });

      latlng = polybounds.getCenter();
    }

    openInfowindow(latlng, infContent);

  });

}

function GetContent(event) {
  var content = '<div><h3>' + event.feature.getProperty('name') + '</h3>' + event.feature.getGeometry().
  getType() + '<br></div>';
  return content;
}

function openInfowindow(latLng, content) {
  var div = document.createElement('div');
  div.innerHTML = content;

  infWindow.setContent(div);
  infWindow.setPosition(latLng);
  infWindow.open(map);
}

Create a KML layer on a Google Map by uploading from a text input field

Answer №1

Answer №2

Similar questions

Facing difficulties in Angular 8 while trying to import firestore and firebase for an authentication system

Creating a single Vuetify expansion panel: A step-by-step guide

What is the best way to incorporate an image zoom-in effect into a flexible-sized block?

transferring JSON information to a template in a NodeJs application

Why does the AngularJS ngRepeat filter permanently remove null values?

A tutorial on making a POST request using axios in a React application

What is the best method to ensure that none of the select option values are left empty?

Change the position of a Div by clicking on a different Div using JQuery for custom movements

VueD3tree successfully fetches data, however, it is not being displayed on the screen

Require a v-alert notification to appear on every page, ensuring visibility across the site

Requesting CORs on Web API version 2.0

What setting should I adjust in order to modify the color in question?

PHP/MySQL clarification regarding time slots

Struggling to retrieve the fake JavaScript data for my Vue.js table

Guide to managing .glb model animations in A-FRAME using Three.js

The replacement of classes in ReactJS using JavaScript seems to be malfunctioning

What is the formula to determine if x is greater than y and also less than z?

Ensure that scripts with the type of "module" are completed before proceeding to execute the following script

How can I pass a dynamic scope variable to a JavaScript function in AngularJS that is being updated within an ng-repeat loop?

Utilizing modal functionality for seamless integration of new data into mui-datatable