Add Innerhtml Within Title Of Popuptemplate (arcgis-js-api 4.xx)
I have tried it stand alone like this: myLayer.popupTemplate = { <--- have also tried defining this as popupShake title: function(feature) { let spl = document.
Solution 1:
If what you want is to simply style the title, then what you can do is to re define esri-popup__header-title css class.
<html><head><metacharset="utf-8"><metaname="viewport"content="initial-scale=1, maximum-scale=1, user-scalable=no"><title>ArcGIS API for JavaScript Hello World App</title><style>html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.disclaimer {
font-size: 14px;
font-style: italic;
color: white;
background-color: black;
}
.esri-popup__header-title {
color: grey;
background-color: whitesmoke;
font-size: smaller;
font-weight: lighter;
font-style: italic;
}
</style><linkrel="stylesheet"href="https://js.arcgis.com/4.15/esri/css/main.css"><scriptsrc="https://js.arcgis.com/4.15/"></script><script>require([
'esri/Map',
'esri/views/MapView',
'esri/layers/FeatureLayer'
], function (Map, MapView, FeatureLayer) {
let author = 'by @cabesuon';
const map = newMap({
basemap: 'streets-navigation-vector'
});
const view = newMapView({
container: 'viewDiv',
map: map,
zoom: 12,
center: {
latitude: 32.7353,
longitude: -117.1490
}
});
functiontoGraphic(lon, lat, ObjectID, title, addrs, url) {
return {
geometry: {
type: 'point',
longitude: lon,
latitude: lat
},
attributes: {
ObjectID,
title,
addrs,
url
}
}
}
const graphics = [
toGraphic(
-117.1560632,
32.727482,
1,
'Automotive Museum',
'2080 Pan American Plaza, San Diego, CA 92101, United States',
'http://sdautomuseum.org/'
),
toGraphic(
-117.1763293,
32.7136902,
2,
'USS Midway Museum',
'910 N Harbor Dr, San Diego, CA 92101, United States',
'http://www.midway.org/'
),
toGraphic(
-117.2284536,
32.7641112,
3,
'SeaWorld',
'500 Sea World Dr, San Diego, CA 92109, United States',
'https://seaworld.com/san-diego'
),
toGraphic(
-117.1557741,
32.7360032,
4,
'Zoo',
'2920 Zoo Dr, San Diego, CA 92101, United States',
'https://zoo.sandiegozoo.org/'
)
];
functionpopupContent (feature) {
const div = document.createElement('div');
div.innerHTML =
`Address: ${feature.graphic.attributes.addrs}<br>` +
`<a href='${feature.graphic.attributes.url}'>${feature.graphic.attributes.url}</a><br><br>` +
`<span class="disclaimer">${author}</span>`;
return div;
}
const layer = newFeatureLayer({
source: graphics,
fields: [
{
name: 'ObjectID',
alias: 'ObjectID',
type: 'oid'
}, {
name: 'title',
alias: 'title',
type: 'string'
}, {
name: 'addrs',
alias: 'addrs',
type: 'string'
}, {
name: 'url',
alias: 'url',
type: 'string'
}
],
objectIDField: ['ObjectID'],
geometryType: 'point',
renderer: {
type: 'simple',
symbol: {
type: 'text',
color: 'red',
text: '\ue61d',
font: {
size: 30,
family: 'CalciteWebCoreIcons'
}
}
},
popupTemplate: {
title: '{title}',
content: popupContent,
outFields: ['*']
}
});
map.add(layer);
});
</script></head><body><divid="viewDiv"></div></body></html>If you want to full custom it, you can always play with css or/and javascript to change it all.
Take a look at next example, there I hide the header of the popup redefining esri-popup__header css style, and then add a simple header in the content.
<html><head><metacharset="utf-8"><metaname="viewport"content="initial-scale=1, maximum-scale=1, user-scalable=no"><title>ArcGIS API for JavaScript Hello World App</title><style>html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.disclaimer {
font-size: 14px;
font-style: italic;
color: white;
background-color: black;
}
.esri-popup__header-title {
color: grey;
background-color: whitesmoke;
font-size: smaller;
font-weight: lighter;
font-style: italic;
}
.esri-popup__header {
display: none !important;
}
</style><linkrel="stylesheet"href="https://js.arcgis.com/4.15/esri/css/main.css"><scriptsrc="https://js.arcgis.com/4.15/"></script><script>require([
'esri/Map',
'esri/views/MapView',
'esri/layers/FeatureLayer'
], function (Map, MapView, FeatureLayer) {
let author = 'by @cabesuon';
const map = newMap({
basemap: 'streets-navigation-vector'
});
const view = newMapView({
container: 'viewDiv',
map: map,
zoom: 12,
center: {
latitude: 32.7353,
longitude: -117.1490
}
});
functiontoGraphic(lon, lat, ObjectID, title, addrs, url) {
return {
geometry: {
type: 'point',
longitude: lon,
latitude: lat
},
attributes: {
ObjectID,
title,
addrs,
url
}
}
}
const graphics = [
toGraphic(
-117.1560632,
32.727482,
1,
'Automotive Museum',
'2080 Pan American Plaza, San Diego, CA 92101, United States',
'http://sdautomuseum.org/'
),
toGraphic(
-117.1763293,
32.7136902,
2,
'USS Midway Museum',
'910 N Harbor Dr, San Diego, CA 92101, United States',
'http://www.midway.org/'
),
toGraphic(
-117.2284536,
32.7641112,
3,
'SeaWorld',
'500 Sea World Dr, San Diego, CA 92109, United States',
'https://seaworld.com/san-diego'
),
toGraphic(
-117.1557741,
32.7360032,
4,
'Zoo',
'2920 Zoo Dr, San Diego, CA 92101, United States',
'https://zoo.sandiegozoo.org/'
)
];
functionpopupContent (feature) {
const div = document.createElement('div');
div.innerHTML =
`<h2 class="esri-popup__header-title">${feature.graphic.attributes.title}<h2/>` +
`Address: ${feature.graphic.attributes.addrs}<br>` +
`<a href='${feature.graphic.attributes.url}'>${feature.graphic.attributes.url}</a><br><br>` +
`<span class="disclaimer">${author}</span>`;
return div;
}
const layer = newFeatureLayer({
source: graphics,
fields: [
{
name: 'ObjectID',
alias: 'ObjectID',
type: 'oid'
}, {
name: 'title',
alias: 'title',
type: 'string'
}, {
name: 'addrs',
alias: 'addrs',
type: 'string'
}, {
name: 'url',
alias: 'url',
type: 'string'
}
],
objectIDField: ['ObjectID'],
geometryType: 'point',
renderer: {
type: 'simple',
symbol: {
type: 'text',
color: 'red',
text: '\ue61d',
font: {
size: 30,
family: 'CalciteWebCoreIcons'
}
}
},
popupTemplate: {
title: '{title}',
content: popupContent,
outFields: ['*']
}
});
map.add(layer);
});
</script></head><body><divid="viewDiv"></div></body></html>
Post a Comment for "Add Innerhtml Within Title Of Popuptemplate (arcgis-js-api 4.xx)"