Community

Hello,

658
3
Jump to solution
10-28-2016 05:02 AM
stefankriechbaum
by
New Contributor
‎10-28-2016 05:02 AM

I want to Display a kml file in with the Javascript API.

It is working so far. But there are no names from the Point Features displayed on the map.

There is only the pin...

How i can Display the Name of the Point Feature above the pin?

the kml File: ny.kml

and the javascriptfile: index2.html

Thank you very much


 

ny.kml.zip
index2.html.zip
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎10-28-2016 06:31 AM

Stefan,

  By default a KMLLayer will take the label info from the KML and add it as the popup info (when you click on the feature). You can force it to label by adding a LabelClass to the KMLLayers internal FeatureLayer:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Create circles</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
        html,
        body,
        #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #controls {
            background: #fff;
            box-shadow: 0 6px 6px -6px #999;
            color: #444;
            font-family: sans-serif;
            height: auto;
            left: 1em;
            padding: 1em;
            position: absolute;
            top: 1em;
            width: auto;
            z-index: 40;
        }

        #controls div {
            padding: 0 0 1em 0;
        }
    </style>

    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
        require([
            "esri/map",
            "esri/layers/KMLLayer",
            "esri/layers/LabelClass",  
            "esri/symbols/TextSymbol",
            "dojo/on",
            "dojo/_base/lang",
            "dojo/domReady!"          
        ], function(Map,  KMLLayer,  LabelClass, TextSymbol, on, lang)  {              
            var  map  =  new  Map("map",   {                 
                basemap:   "gray",
                center:  [-74.006393, 40.714172],
                 // longitude, latitude      
                zoom:  4,
                showLabels: true           
            });               // A KML Layer: We must explicitly state the full URL (relative URLs will throw errors!)  
                    
            var  layer  =  new  KMLLayer("http://www.sfkweb.comuf.com/ny.kml",   {  });          
            layer.on("load",  lang.hitch(this, function()  {
                var json = {
                    "labelExpressionInfo": {
                        "value": "{name}"
                    },
                    "useCodedValues": false,
                    "fieldInfos": [{
                        fieldName: "name",
                    }]
                };
                var layers = layer.getLayers();
                //create instance of LabelClass
                var lc = new LabelClass(json);
                lc.symbol = new TextSymbol();
                layers[0].setLabelingInfo([lc]);
            }));
            map.addLayer(layer);  // Add the layer to the map       
        });
    </script>
</head>

<body>
    <div id="map"></div>
    <div id="controls">
        <div>Click the map.</div>
        <input type="checkbox" id="geodesic">
        <label for="geodesic">Geodesic?</label>
    </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

3 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎10-28-2016 06:31 AM

Stefan,

  By default a KMLLayer will take the label info from the KML and add it as the popup info (when you click on the feature). You can force it to label by adding a LabelClass to the KMLLayers internal FeatureLayer:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Create circles</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
        html,
        body,
        #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #controls {
            background: #fff;
            box-shadow: 0 6px 6px -6px #999;
            color: #444;
            font-family: sans-serif;
            height: auto;
            left: 1em;
            padding: 1em;
            position: absolute;
            top: 1em;
            width: auto;
            z-index: 40;
        }

        #controls div {
            padding: 0 0 1em 0;
        }
    </style>

    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
        require([
            "esri/map",
            "esri/layers/KMLLayer",
            "esri/layers/LabelClass",  
            "esri/symbols/TextSymbol",
            "dojo/on",
            "dojo/_base/lang",
            "dojo/domReady!"          
        ], function(Map,  KMLLayer,  LabelClass, TextSymbol, on, lang)  {              
            var  map  =  new  Map("map",   {                 
                basemap:   "gray",
                center:  [-74.006393, 40.714172],
                 // longitude, latitude      
                zoom:  4,
                showLabels: true           
            });               // A KML Layer: We must explicitly state the full URL (relative URLs will throw errors!)  
                    
            var  layer  =  new  KMLLayer("http://www.sfkweb.comuf.com/ny.kml",   {  });          
            layer.on("load",  lang.hitch(this, function()  {
                var json = {
                    "labelExpressionInfo": {
                        "value": "{name}"
                    },
                    "useCodedValues": false,
                    "fieldInfos": [{
                        fieldName: "name",
                    }]
                };
                var layers = layer.getLayers();
                //create instance of LabelClass
                var lc = new LabelClass(json);
                lc.symbol = new TextSymbol();
                layers[0].setLabelingInfo([lc]);
            }));
            map.addLayer(layer);  // Add the layer to the map       
        });
    </script>
</head>

<body>
    <div id="map"></div>
    <div id="controls">
        <div>Click the map.</div>
        <input type="checkbox" id="geodesic">
        <label for="geodesic">Geodesic?</label>
    </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
stefankriechbaum
by
New Contributor
‎10-28-2016 08:50 AM

Thank you Robert!
Works fine

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎10-28-2016 08:51 AM

Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.

0 Kudos