Interactive KML layer in ArcGIS mapping tool

Currently, I am working on enhancing an ArcGIS map by incorporating KML layers for interactivity.

This is a simplified version of the code I am currently using:

map = new Map("map", {
  basemap: "topo",
  center: [-108.663, 42.68],
  zoom: 6
});
parser.parse();

var kmlUrl = "https://dl.dropboxusercontent.com/u/2142726/esrijs-samples/Wyoming.kml";
var kml = new KMLLayer(kmlUrl);
map.addLayer(kml);
kml.on("load", function() {
  console.log("done");
});

You can view a demo here

I aim to achieve a similar effect as seen in this interactive map, where the layer highlighting occurs on hover. Although this example uses the FeatureLayer class, my data is in KML format and generated dynamically. Is it viable to create a feature layer from dynamic KML data?

Could someone provide guidance on how to detect mouseover events on a KML shape?

javascriptkmlarcgis

Answer №1

I finally cracked the code...

var kmlUrl = "https://dl.dropboxusercontent.com/u/2142726/esrijs-samples/Wyoming.kml";
var kml = new KMLLayer(kmlUrl);
map.addLayer(kml);
kml.on("load", function() {
  var layers = kml.getLayers();
  layers[0].on("mouse-over", function () {
            alert("testing");
        });
});

It turns out that the KML layer is actually made up of FeatureLayers. The trick is to retrieve the Feature Layers from the KMLLayer using the getLayers() method.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Require.js and R.js optimizer overlooks shimming configuration

I am facing an issue where R.js is not loading my shim properly, causing jQuery to load before tinyMCE which results in tiny being initialized before it has fully loaded. How can I resolve this problem? build-js.js: var requirejs = require('requirej ...

javascriptnode.jsrequirejs

What is the best way to make multiple HTML tables sortable?

I recently implemented an open-source JavaScript table sorter in my project. You can find more information about it here: However, I encountered an issue where only the most recently added table on my page is sortable. When users press a button, new table ...

javascriptjqueryhtmlajax

The justify-between utility in Tailwind is malfunctioning

Can someone help me figure out how to add justify-between between the hello and the user image & name? They are in different divs, but I've tried multiple ways without success. I'm fairly new to this, so any advice would be appreciated. This ...

javascriptnext.jstailwind-css

Discovering a device's model using JavaScript

How can I use Javascript to redirect users to different download pages based on their device model? ...

javascript

Add a container element resembling a div inside a table without implementing the table layout

I am working with a table that is rendered by DataTable, and I have the requirement to dynamically append new elements inside the table like this: The dark grey area represents the new DOM elements that need to be inserted dynamically. The first row cont ...

javascripthtmlcss

What steps should I take to display a Material UI grid in React without triggering the warning about the missing unique key

In my current project, I am utilizing React and Material UI to display a grid. The grid's rows are populated from an array of data, with each row containing specific information in columns structured like this: <Grid container> {myData.map((re ...

javascriptreactjsmaterial-ui

Using factories in controllers does not function properly in Angular 1.6

My head is spinning with this one. There are 3 files in play: app.js, app.services.provider.js, admin.js In app.js, I set up my module: (function() { angular.module('myApp', ['ngRoute']).config(function ($routeProvider) { ...

javascriptangularjsangularjs-1.6

While iterating through the material-ui rating component, the 'index' value remains constant at 0 within the 'onChange' function

For my e-commerce React.js web app, I want to show the rating value of each product. Using the JS map function, I was able to track which product was hovered by its index ('onChangeActive' is the handler for this). {products.map((product, index) ...

javascriptarraysreactjsmaterial-ui

mention the element to display on the pagination

I find the logic here quite puzzling. This particular code block seems to be related to pagination, as it involves a function that is triggered upon clicking. componentDidUpdate() { const { location } = this.context; const { query } = this; if ...

javascriptreactjs

What is the method for defining a monkey patched class in a TypeScript declarations file?

Let's say there is a class called X: class X { constructor(); performAction(): void; } Now, we have another class named Y where we want to include an object of class X as a property: class Y { xProperty: X; } How do we go about defining ...

javascripttypescripttypescript-definitions

Loading indicator displayed at the top of a div using JavaScript/jQuery

My current challenge involves implementing a progress bar, similar to the pace.js progress bar. The issue arises when the browser is refreshed, as the pace.js progress bar loads on top of the body instead of within a specified div. It is important that the ...

javascriptjqueryhtmlcss

What is the process for removing a selection in V-autocomplete in Vuetify?

One of the features I implemented in my project is using Vuetify's v-autocomplete component. It allows users to search for and retrieve necessary information from an API. However, I encountered a scenario where I needed to delete the selection after t ...

javascriptvue.jsvuetify.js

What is the best way to reposition the caret within an <input type="number"> element?

How can I make the caret move when an input is clicked? The code I found works with text, but not with number. Also, is there a way to pass the length without specifying a value (e.g. 55) in the parameters? HTML <input type="number" name="cost" value= ...

javascriptjqueryhtml

Send an AJAX request to the server without waiting for a response using a JavaScript variable

My click counter is not sending variables to the server. I have tried finding examples on how to do this, but no matter what I attempt, the data is not being sent to the server. It seems like using AJAX would be the best option, but I must be doing someth ...

javascriptphpajax

Adjusting the width of a div element using a button

I am currently diving into the world of JavaScript, React, and Node.js. My current challenge involves attempting to adjust the width of a div element using a button. However, I keep encountering the same frustrating error message stating "Cannot read prope ...

javascripthtmlcssreactjs

Django Ajax filter displaying issue on HTML page

I'm uncertain about the correctness of my Ajax implementation. When using Django's built-in tags, the objects I pass through Ajax are not appearing on my template HTML page. view_results.html <div> <input id="search" name="search" t ...

javascriptjquerypythonajaxdjango

Unable to load nested iframe

When working with an HTML document, I tried to add an iframe in the body without any cross-origin restrictions (same URL). However, when I tried to do the same thing within the appended iframe, although the nested iframe element was successfully added to ...

javascripthtmliframe

Events in EmberJS that occur after the content has been modified

Need assistance with implementing an alert event for a new tab added to the default ones. Solution: Develop a TabsController Create an initilizerView which uses a list parameter to manage the TabsController.Content Upon insertion of the view, add the ac ...

javascriptjqueryember.js

Refresh the information stored in the spliced array of objects

I've managed to splice the data and now I need to update its object from disabled = true to disabled = false. I have searched for another solution but couldn't find one... Any advice is welcomed. Thank you. This is my dropdown: const newDrop = ...

javascriptreactjs

How to send data from JavaScript to ASP.NET

$(document).ready(function () { $("#MainContent_ddlFieldName").on("change", function () { var id = $(this).val(); var name = $(this + "option:selected").text(); $('#<%= lblValue.ClientID %> ...

c#javascriptasp.netdynamic