how to get a feature layer on button click and display.
S_layer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/...../MapServer/0",{
mode: FeatureLayer.MODE_SELECTION,
outFields: ["*"]
});
map.addLayer(S_layer);
function soil()
{
queryTask = new esri.tasks.QueryTask("http://localhost:6080/arcgis/rest/services/...../MapServer/0");
var query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["soil"];
var name = document.getElementById("combo1").value.toString();
query.where = "NAME = '" + name;
<!-- queryTask.execute(query); -->
S_layer.selectFeatures(query, queryTask.SELECTION_NEW, function (features) {
if(features[0]){
thePoly = features[0].geometry;
theExtent = thePoly.getExtent().expand(1.8); //Zoom out slightly from the polygon's extent
map.setExtent(theExtent);
}
});
}
<button type="button" id="btn" class = "button" class="btn-default" onclick = soil(); >Soil</button>
<br></br>
but this query does not run it gives error of "init.js:89 Error: Unable to complete operation.
at Object.g.load".
As I understood, you want to add a layer on button click.
Below is the code for this:
<!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>Hydrography - Selection mode</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: white;
overflow: hidden;
font-family: sans-serif;
}
</style>
</head>
<body class="claro">
<br>
Add layers-
<button type="button" id="addWaterBodies" class = "button" >water Bodies</button>
<button type="button" id="addRivers" class = "button" >River</button> <br> <br>
<div id="map" >
</div>
<script src="https://js.arcgis.com/3.21/"></script>
<script>
var map;
require([
"esri/map",
"esri/dijit/editing/Editor", "esri/dijit/editing/TemplatePicker",
"esri/tasks/GeometryService",
"esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer",
"dojo/i18n!esri/nls/jsapi", "esri/config",
"dojo/_base/array", "dojo/keys", "dojo/parser",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map,
Editor, TemplatePicker,
GeometryService,
ArcGISDynamicMapServiceLayer, FeatureLayer,
esriBundle, esriConfig,
arrayUtils, keys, parser
) {
parser.parse();
map = new Map("map", {
basemap: "hybrid",
center: [-96.325, 37.855],
zoom: 13
});
map.infoWindow.resize(400,300);
function addWaterBodies(){
var waterBodiesLayer= map.getLayer("waterLayerId");
if(!waterBodiesLayer){
waterBodiesLayer = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0", {
id : "waterLayerId",
outFields: ["*"],
});
map.addLayer(waterBodiesLayer);
} else {
alert("water bodies layer already added");
}
}
function addRivers(){
var riversLayer= map.getLayer("riverLayerId");
if(!riversLayer){
riversLayer = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1", {
id:"riverLayerId",
outFields: ["*"]
});
map.addLayer( riversLayer);
} else {
alert("River layer already added");
}
}
document.getElementById("addWaterBodies").onclick = addWaterBodies;
document.getElementById("addRivers").onclick = addRivers;
});
</script>
</body>
</html>
Related
I am trying to get popups from the ArcGIS API JS to display using the framework Vue-CLI 3.
But even with a simple sample code, I cannot make it work: Here is the code in vanilla JS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Popup actions | Sample | ArcGIS API for JavaScript 4.17</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.17/"></script>
<script>
require([
"esri/Map",
"esri/layers/FeatureLayer",
"esri/views/MapView",
"esri/geometry/geometryEngine"
], function (Map, FeatureLayer, MapView, geometryEngine) {
// Create the Map
var map = new Map({
basemap: "gray-vector"
});
// Create the MapView
var view = new MapView({
container: "viewDiv",
map: map,
center: [-117.08, 34.1],
zoom: 11
});
var template = {
// autocasts as new PopupTemplate()
title: "Trail run",
content: "{name}",
};
var featureLayer = new FeatureLayer({
url:
"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/TrailRuns/FeatureServer/0",
outFields: ["*"],
popupTemplate: template,
});
map.add(featureLayer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
As you can see, when clicking a feature, a popup appears.
If I try to implement this in my vue-CLI project I can not make it work. When clicking on the a feature, it will highlight, but nothing will open. Here is my code .vue:
<template>
<div></div>
</template>
<script>
import { loadModules } from "esri-loader";
export default {
name: "web-map",
mounted() {
// lazy load the required ArcGIS API for JavaScript modules and CSS
loadModules([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
]).then(([ArcGISMap, MapView, FeatureLayer]) => {
const map = new ArcGISMap({
basemap: "topo-vector",
});
this.view = new MapView({
container: this.$el,
map: map,
center: [-117.08, 34.1],
zoom: 11,
});
var template = {
// autocasts as new PopupTemplate()
title: "Trail run",
content: "{name}",
};
var featureLayer = new FeatureLayer({
url:
"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/TrailRuns/FeatureServer/0",
outFields: ["*"],
popupTemplate: template,
});
map.add(featureLayer);
});
},
beforeDestroy() {
if (this.view) {
// destroy the map view
this.view.destroy();
}
},
};
</script>
<style scoped>
div {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
</style>
Am I missing something? (I followed arcgis api js tutorial to get it work in vue-cli -https://developers.arcgis.com/javascript/latest/guide/vue/ )
Thank you very much for your help!
Julien
Your code is fine, you are just not adding css. You are missing { css: true }, that's all.
loadModules(
["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"],
{ css: true } // <-- HERE
).then(([ArcGISMap, MapView, FeatureLayer]) => {
//...
}
HERE code with the fix.
I'm trying to plot a graph in vue-chartjs.
I want to get the required values from my MySQL database and store them into an array. And then use them to plot the charts. But I can't quite figure out the logic on how to get those records from the DB.
This is the code I tried
<?php
$servername = "172.18.2.2";
$username = "cs161050";
$password = "aman";
$dbname = "0187cs161050";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT progress FROM wf_progress";
$result = $conn->query($sql);
if ($result->num_rows) {
// output data of each row
while($row = $result->fetch_assoc()) {
return $row;
}
}
$conn->close();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Circle Gauge Chart - Multiple</title>
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts#latest"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var options = {
chart: {
height: 250,
type: 'radialBar',
},
plotOptions: {
radialBar: {
dataLabels: {
name: {
fontSize: '22px',
},
value: {
fontSize: '16px',
},
total: {
show: true,
label: 'Total',
formatter: function (w) {
return 249
}
}
}
}
},
series: []
},
methods: {
concatArray: function() {
axios.get('script.php')
.then(function (response) {
this.series = this.series.concat(response.data);
})
.catch(function(error) {
console.log(error);
})
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
Can anyone tell what am I doing wrong here?
YouTube iFrame API “setPlaybackQuality” not working.i want to change video qulity to lowest.but i cant change it by the api.i used player.setPlaybackQuality('small').it not worked.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<button id="change_quality">Change Quality</button>
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '6LV3JdR5aZw',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
$("#change_quality").click(function() {
event.target.playVideo();
var d=player.getPlaybackQuality()
console.log("before");
console.log(d);
player.setPlaybackQuality('small')
var v=player.getPlaybackQuality()
console.log("after");
console.log(v);
});
}
}
</script>
</body>
</html>
it is not working in youtube demo also
Demo
i am trying to develop a multipage app where i will be able to load many page but my task is to when loading page #2 i need the page2 function hello to run.
when clicking on func "change" i am able to load page2 but i need to run function "hello".
main.js
var pagesHistory = [];
var currentPage = {};
var path = "";
var busyIndicator = null;
function wlCommonInit(){
busyIndicator = new WL.BusyIndicator();
// Special case for Windows Phone 8 only.
if (WL.Client.getEnvironment() == WL.Environment.WINDOWS_PHONE_8) {
path = "/www/default/";
}
$("#pageload").load(path + "pages/page1.html", function(){
$.getScript(path + "js/page1.js", function() {
if (currentPage.init) {
currentPage.init();
}
});
});
}
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!--
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-->
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body style="display: none;">
<div id="pageload">
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.touchSwipe.min.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
page1.js
currentPage = {};
currentPage.init = function(){
WL.Logger.debug("Page1 :: init");
};
function funchange()
{
$("#pageload").load(path + "pages/page2.html");
}
page1.html
<script>
$.getScript(path + "js/page1.js");
</script>
<input type="button" value="click" onclick="funcchange();">
Page2.js
currentPage = {};
currentPage.init = function(){
WL.Logger.debug("Page2 :: init");
};
function hello()
{
alert("hello");
}
page2.html
<script>
$.getScript(path + "js/page2.js");
</script>
You can simply create a function in main.js:
function wlCommonInit() {
...
...
}
function test() {
alert ("test");
}
Then in Page2.js, simply call test();.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { width: 1000px; height: 600px } /* ID */
</style>
<!--Include the Maps API JavaScript using a script tag.-->
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
//Function called when the window loads shown below in the addDomlistener
function initialize() {
var geocoder = new google.maps.Geocoder();
var mapOptions = { center: new google.maps.LatLng(40.5, -75.5), zoom: 8 };
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
function calcAddress(address)
{
var address = document.getElementById("address").value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//Got result, center the map and put it out there
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<input id="address" type="text">
<input type="button" value="Search" onclick="calcAddress()" />
</div>
<div id="map-canvas"/>
</body>
</html>
I'm learning about google maps API, and I am just trying to get a simple address search to work, what am I missing? I've seen similar posts, but can't find what isn't right, might need some fresh eyes.
Varaibles map and geocoder are not visible outside of initialize() function. If you open console there is error written:
ReferenceError: geocoder is not defined
They should be made global like:
var map,
geocoder;
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = { center: new google.maps.LatLng(40.5, -75.5), zoom: 8 };
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
Additionaly, div tag is not self-closing.
<div id="map-canvas"/>
should be changed to
<div id="map-canvas"></div>