I have two combo box's working independently. I would like to get them to work together. I either get State name queried or Farm Acreage queried. I cannot get them both to filter together.
Query Texas and 4 Acres. Get all the 4 acre counties in Texas. Right now it will either give me All of Texas or All 4 acre counties in the US.
The if statements are in the "app" object.
<!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>Drop Down Test</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<style>
html,
body,
#mainWindow {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
#header {
height: 3%;
overflow: auto;
}
</style>
<script>
var dojoConfig = {
parseOnLoad: true
};
</script>
<script src="http://js.arcgis.com/3.10/"></script>
<script>
var map;
require([
"esri/map",
"dojo/on",
"esri/tasks/query",
"esri/layers/FeatureLayer",
"dojo/store/Memory",
"dojo/_base/array",
"dojo/_base/lang",
"esri/request",
"dojo/json",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/Button",
"dijit/form/ComboBox",
"dojo/domReady!"
], function(
Map, on, Query, FeatureLayer, Memory, array, lang, esriRequest, json
) {
map = new Map("map", {
basemap: "topo",
center: [-98.579729, 39.828366],
zoom: 5
});
var crops = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/USA_County_Crops_2007/FeatureServer/0", {
mode: FeatureLayer.MODE_SELECTION,
outFields: ["*"]
});
map.addLayers([crops]);
map.on("layers-add-result", lang.hitch(this, function(){
var url = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/USA_County_Crops_2007/FeatureServer/0/generateRenderer";
var classificationDef = {"type":"uniqueValueDef","uniqueValueFields":["STATE"]};
var classificationDef2 = {"type":"uniqueValueDef","uniqueValueFields":["TotalFarmedAcres"]};
var str = json.stringify(classificationDef);
var str2 = json.stringify(classificationDef2);
esriRequest({
url:url,
content:{
classificationDef:str,
f:'json'
},
handleAs:'json',
callbackParamName:'callback',
timeout:15000
}).then(lang.hitch(this,function(response){
var uniqueValueInfos = response && response.uniqueValueInfos;
if(uniqueValueInfos){
var store2 = new Memory({data:[]});
dijit.byId("uniqueValuesSelect").set('store',store2);
var data = array.map(uniqueValueInfos,lang.hitch(this,function(info,index){
var value = info.value;
//value = parseFloat(value);
var dataItem = {
id:index,
name:value
};
return dataItem;
}));
store2 = new Memory({data:data});
dijit.byId("uniqueValuesSelect").set('store',store2);
}
}),lang.hitch(this,function(error){
console.error(error);
}));
esriRequest({
url:url,
content:{
classificationDef:str2,
f:'json'
},
handleAs:'json',
callbackParamName:'callback',
timeout:15000
}).then(lang.hitch(this,function(response){
var uniqueValueInfos2 = response && response.uniqueValueInfos;
if(uniqueValueInfos2){
var store3 = new Memory({data:[]});
dijit.byId("uniqueValuesSelect2").set('store',store3);
var data2 = array.map(uniqueValueInfos2,lang.hitch(this,function(info,index){
var value2 = info.value;
//value2 = parseFloat(value2);
var dataItem2 = {
id:index,
name:value2
};
return dataItem2;
}));
store3 = new Memory({data:data2});
dijit.byId("uniqueValuesSelect2").set('store',store3);
}
}),lang.hitch(this,function(error){
console.error(error);
}));
}));
app = {
zoomRow: function(id, which){
crops.clearSelection();
var query = new Query();
if(which == "statename"){
query.where = "STATE='" + (id).toString() + "'";
}if(which == "FarmedAcres"){
query.where = "TotalFarmedAcres='" + (id).toString() + "'";
}
console.info(query.where);
query.returnGeometry = true;
crops.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {
//var thePoly = features[0].geometry;
//var theExtent = thePoly.getExtent().expand(2); //Zoom out slightly from the polygon's extent
//map.setExtent(theExtent);
});
}
};
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="padding:0px;margin:0px;">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="overflow:hidden;border:none;border-bottom: 3px solid #CC9900;font-family: Windows;font-size:14pt; color: #FFFFFF;background: #000000; "> Select a State and total Acres farmed:
<input id="uniqueValuesSelect" data-dojo-type="dijit.form.ComboBox" value="statename" onchange="app.zoomRow(document.getElementById('uniqueValuesSelect').value, 'statename');" />
<input id="uniqueValuesSelect2" data-dojo-type="dijit.form.ComboBox" value="FarmedAcres" onchange="app.zoomRow(document.getElementById('uniqueValuesSelect2').value, 'FarmedAcres');" />
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:100%;height:95%;border:none;padding:0px;margin:0px;"></div>
</div>
</body>
</html>
You need to have access to both comboboxes so you can do something like this:
app = {
zoomRow: function(stateId, acresId){
crops.clearSelection();
var query = new Query();
query.where = "STATE='" + (stateId).toString() + "' AND TotalFarmedAcres='" + (acresId).toString() + "'";
console.info(query.where);
query.returnGeometry = true;
crops.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {
//var thePoly = features[0].geometry;
//var theExtent = thePoly.getExtent().expand(2); //Zoom out slightly from the polygon's extent
//map.setExtent(theExtent);
});
}
};
this means that the html should be something like this
<input id="uniqueValuesSelect" data-dojo-type="dijit.form.ComboBox" value="statename" onchange="app.zoomRow(document.getElementById('uniqueValuesSelect').value, document.getElementById('uniqueValuesSelect2').value);" />
<input id="uniqueValuesSelect2" data-dojo-type="dijit.form.ComboBox" value="FarmedAcres" onchange="app.zoomRow(document.getElementById('uniqueValuesSelect').value, document.getElementById('uniqueValuesSelect2').value);" />
Add corresponding validations to stateId, acresId for avoiding null or undefined values
Related
How to position the polygon I painted, I want to get a coordinate.
Use arcgis api for javascript to draw polygons, I use the official website of the example, I draw a lot of polygons I want when i click to a certain i can target itenter link description here
<html>
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Landuse</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;
overflow:hidden;
}
#header {
border:solid 2px #462d44;
background:#fff;
color:#444;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: sans-serif;
font-size: 1.1em
padding-left:20px;
}
#map {
padding:1px;
border:solid 2px #444;
-moz-border-radius: 4px;
border-radius: 4px;
}
#rightPane {
border:none;
padding: 0;
width:228px;
}
.templatePicker {
border: solid 2px #444;
}
</style>
<script src="https://js.arcgis.com/3.21/"></script>
<script>
var map;
require([
"esri/map",
"esri/toolbars/draw",
"esri/toolbars/edit",
"esri/graphic",
"esri/config",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/dijit/editing/TemplatePicker",
"dojo/_base/array",
"dojo/_base/event",
"dojo/_base/lang",
"dojo/parser",
"dijit/registry",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/form/Button", "dojo/domReady!"
], function(
Map, Draw, Edit, Graphic, esriConfig,
FeatureLayer,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
TemplatePicker,
arrayUtils, event, lang, parser, registry
) {
parser.parse();
// refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
esriConfig.defaults.io.proxyUrl = "/proxy/";
// This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
esriConfig.defaults.geometryService = new esri.tasks.GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map = new Map("map", {
basemap: "streets",
center: [-83.244, 42.581],
zoom: 15
});
map.on("layers-add-result", initEditing);
var landusePointLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/6", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
var landuseLineLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/8", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
var landusePolygonLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/9", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
map.addLayers([landusePointLayer, landuseLineLayer, landusePolygonLayer]);
function initEditing(evt) {
console.log("initEditing", evt);
// var map = this;
var currentLayer = null;
var layers = arrayUtils.map(evt.layers, function(result) {
return result.layer;
});
console.log("layers", layers);
var editToolbar = new Edit(map);
editToolbar.on("deactivate", function(evt) {
currentLayer.applyEdits(null, [evt.graphic], null);
});
arrayUtils.forEach(layers, function(layer) {
var editingEnabled = false;
layer.on("dbl-click", function(evt) {
event.stop(evt);
if (editingEnabled === false) {
editingEnabled = true;
editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic);
} else {
currentLayer = this;
editToolbar.deactivate();
editingEnabled = false;
}
});
layer.on("click", function(evt) {
event.stop(evt);
if (evt.ctrlKey === true || evt.metaKey === true) { //delete feature if ctrl key is depressed
layer.applyEdits(null,null,[evt.graphic]);
currentLayer = this;
editToolbar.deactivate();
editingEnabled=false;
}
});
});
var templatePicker = new TemplatePicker({
featureLayers: layers,
rows: "auto",
columns: 2,
grouping: true,
style: "height: auto; overflow: auto;"
}, "templatePickerDiv");
templatePicker.startup();
var drawToolbar = new Draw(map);
var selectedTemplate;
templatePicker.on("selection-change", function() {
if( templatePicker.getSelected() ) {
selectedTemplate = templatePicker.getSelected();
}
switch (selectedTemplate.featureLayer.geometryType) {
case "esriGeometryPoint":
drawToolbar.activate(Draw.POINT);
break;
case "esriGeometryPolyline":
drawToolbar.activate(Draw.POLYLINE);
break;
case "esriGeometryPolygon":
drawToolbar.activate(Draw.POLYGON);
break;
}
});
drawToolbar.on("draw-end", function(evt) {
drawToolbar.deactivate();
editToolbar.deactivate();
var newAttributes = lang.mixin({}, selectedTemplate.template.prototype.attributes);
var newGraphic = new Graphic(evt.geometry, null, newAttributes);
selectedTemplate.featureLayer.applyEdits([newGraphic], null, null);
});
}
});
</script>
Use ctrl or cmd + click on graphic to delete. Double click on graphic to edit vertices.
To be able to move the polygons, you just have to activate that "MOVE" tool in the edit toolbar, as specified in the API https://developers.arcgis.com/javascript/3/jsapi/edit-amd.html#activate
In the link you provided, only "EDIT_VERTICES" is activated.
So, replace the line
editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic);
with
editToolbar.activate(Edit.EDIT_VERTICES | Edit.MOVE, evt.graphic);
I want to append result of a custom search in a Geocoder text box in arcgis javascript api by over ridding the default result.
I have written below code for that but i am not getting satisfactory result.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Geocoder</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
html, body, #map
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#search
{
display: block;
position: absolute;
z-index: 3;
top: 20px;
left: 75px;
}
.spotlight
{
z-index: -1;
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
opacity: 0;
box-shadow: inset rgba(0,0,0,0.25) 0px 0px 20px 20px, rgba(0,0,0,0.25) 0px 0px 0px 1000px;
transition: all 1000ms;
-moz-transition: all 1000ms;
-webkit-transition: all 1000ms;
}
.spotlight-active
{
z-index: 2;
opacity: 1;
}
</style>
<script src="http://js.arcgis.com/3.11/"></script>
<script type="text/javascript">
require([
"esri/map",
"esri/dijit/Geocoder",
"esri/graphic",
"esri/symbols/SimpleMarkerSymbol",
"esri/geometry/screenUtils",
"dojo/dom",
"dojo/dom-construct",
"dojo/query",
"dojo/_base/Color",
"esri/tasks/locator",
"esri/geometry/Polygon",
"dojo/_base/array",
"dojo/domReady!"
], function (
Map, Geocoder,
Graphic, SimpleMarkerSymbol, screenUtils,
dom, domConstruct, query, Color, Locator, Polygon, arrayUtils
) {
var _RLCCspatialReference = new esri.SpatialReference({ "wkt": 'classified' });
//var _RMapsExt = new esri.geometry.Extent(-4086033.961945721, -806460.9357572012, 3756052.906228016, 5050597.693910059, _RLCCspatialReference);
var _RMapsExt = new esri.geometry.Extent(-2498256.744659858, 887180.8538370342, 2243086.071359108, 4139445.6917000436, _RLCCspatialReference);
// create a map and instance of the geocoder widget here
var map = new esri.Map("map", { logo: false, nav: false, wrapAround180: true });
map.spatialReference = _RLCCspatialReference;
map.fullExtent = _RMapsExt;
map.initialExtent = _RMapsExt;
var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://xxxx.rxx.com/arcgis/rest/services/Rmaps_Updated/MapServer");
map.addLayer(tiledMapServiceLayer);
map.setScale(14000000);
map.setExtent(_RMapsExt, true);
var gc = [{
url: "http://11.66.22.33:6080/arcgis/rest/services/Locator_Comb_Prd/GeocodeServer",
name: "Locator_Comb_Prd",
singleLineFieldName: "SingleLine"
}];
var geocoder = new Geocoder({
map: map,
arcgisGeocoder: false,
geocoders: gc,
autoNavigate: false,
autoComplete: true,
showResults: true,
geocoders: gc,
geocoderMenu: false,
}, dom.byId("search"));
//"search" dom.byId("search")
geocoder.startup();
geocoder.on("select", showLocation);
geocoder.on("FindResults", showLocation);
dojo.connect(geocoder, 'onAutoComplete', function (results) {
$("#search_input").autocomplete({
source: function (request, response) {
$.support.cors = true;
$.ajax({
dataType: "json",
type: 'POST',
url: 'http://11.66.22.44/Geocoder/Query.aspx',
crossdomain: true,
timeout: 100000,
cache: true,
data: { RequestType: "AutoComplete", AutoCompleteValue: $("#search_input").val() },
success: function (data) {
//$('input.suggest-user').removeClass('ui-autocomplete-loading'); // hide loading image
if (data != null) {
response(data);
}
},
error: function (data) {
alert("error:" + data.statusText);
//$('input.suggest-user').removeClass('ui-autocomplete-loading');
}
});
},
minLength: 3,
open: function () {
},
close: function () {
},
focus: function (event, ui) {
},
select: function (event, ui) {
}
});
//console.log('autocomplete', results);
});
function showLocation(evt) {
var point = null;
if (evt.result.feature.geometry.type == "point" && evt.result.feature.geometry.x != 0 && evt.result.feature.geometry.y != 0) {
point = evt.result.feature.geometry;
map.graphics.clear();
var symbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_SQUARE).setColor(new Color([255, 0, 0, 0.5]));
var graphic = new Graphic(point, symbol);
map.graphics.add(graphic);
map.infoWindow.setTitle("Search Result");
map.infoWindow.setContent(evt.result.name);
map.infoWindow.show(evt.result.feature.geometry);
}
else {
map.graphics.clear();
locator = new Locator("http://11.66.66.33:6080/arcgis/rest/services/Locator_Comb_Prd/GeocodeServer");
locator.on("address-to-locations-complete", showResults);
var address = {
"SingleLine": evt.result.name
};
var resultName = evt.result.name;
locator.outSpatialReference = map.spatialReference;
var options = {
address: address,
outFields: ["Loc_name"]
};
locator.addressToLocations(options);
function showResults(evt) {
var symbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_SQUARE).setColor(new Color([255, 0, 0, 0.5]));
var geom;
arrayUtils.every(evt.addresses, function (candidate) {
if (candidate.location.type == "point" && candidate.location.x != 0 && candidate.location.y != 0) {
console.log(candidate.score);
if (candidate.score > 80) {
console.log(candidate.location);
var attributes = {
address: candidate.address,
score: candidate.score,
locatorName: candidate.attributes.Loc_name
};
geom = candidate.location;
point = geom;
var graphic = new Graphic(point, symbol);
//add a graphic to the map at the geocoded location
map.graphics.add(graphic);
//add a text symbol to the map listing the location of the matched address.
map.infoWindow.setTitle("Search Result");
map.infoWindow.setContent(resultName);
map.infoWindow.show(point);
return false; //break out of loop after one candidate with score greater than 80 is found.
}
}
else {
var polygonGeom = new Polygon(candidate.location.spatialReference);
polygonGeom.addRing(candidate.location.rings[0]);
geom = polygonGeom.getCentroid();
point = geom;
console.log(candidate.score);
if (candidate.score > 80) {
console.log(candidate.location);
var attributes = {
address: candidate.address,
score: candidate.score,
locatorName: candidate.attributes.Loc_name
};
point = geom;
var graphic = new Graphic(point, symbol);
//add a graphic to the map at the geocoded location
map.graphics.add(graphic);
//add a text symbol to the map listing the location of the matched address.
map.infoWindow.setTitle("Search Result");
map.infoWindow.setContent(resultName);
map.infoWindow.show(point);
return false; //break out of loop after one candidate with score greater than 80 is found.
}
}
});
if (geom !== undefined) {
map.centerAndZoom(geom, 14);
}
}
}
if (point != undefined || point != null) {
map.centerAndZoom(point, 14);
}
}
});
</script>
<script type="text/javascript">
$(function () {
$("#map").css("height", $(window).height());
$("#map").css("width", $(window).width());
//map_root
$("#map_root").css("height", $(window).height());
$("#map_root").css("height", $(window).width());
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="search">
</div>
<div id="map" style="width: 100%; height: 100%;">
</div>
</form>
</body>
</html>
anyone any suggestion?
Yes i found solution to this problem basically I can append the data which i am receiving using Jquery.
After all it is just an HTML!
But still there can be a better solution please do post it.
$.ajax({
dataType: "json",
type: 'POST',
//url: 'http://11.66.22.44/Geocoder/Query.aspx',
url: 'Query.aspx',
//crossdomain: true,
timeout: 500000,
cache: true,
data: { RequestType: "AutoComplete", AutoCompleteValue: $("#search_input").val() },
success: function (data) {
//$('input.suggest-user').removeClass('ui-autocomplete-loading'); // hide loading image
var actualLength = $(".esriGeocoderResults ul").length;
if (data != null) {
//response(data);
if ($(".esriGeocoderResults ul").length == 0) {
$(".esriGeocoderResults").append('<ul role="presentation">');
}
if ($("#search").hasClass("esriGeocoderResultsOpen") == false) {
$("#search").addClass("esriGeocoderResultsOpen");
}
$(".esriGeocoderResults").css("display", "block");
for (var index = 0; index < data.length; index++) {
if ($(".esriGeocoderResults ul").text().indexOf(data[index]) == -1) {
if (actualLength % 2 == 0) {
$(".esriGeocoderResults ul").append('<li onClick = "locatorClick(this);" class="esriGeocoderResult esriGeocoderResultEven" title="' + data[index] + '" role="menuitem" tabindex="0" data-index="' + (actualLength) + '" data-item="true" data-text="' + data[index] + '">' + data[index] + '</li>');
actualLength++;
}
else {
$(".esriGeocoderResults ul").append('<li onClick = "locatorClick(this);" class="esriGeocoderResult esriGeocoderResultOdd" title="' + data[index] + '" role="menuitem" tabindex="0" data-index="' + (actualLength) + '" data-item="true" data-text="' + data[index] + '">' + data[index] + '</li>');
actualLength++;
}
}
}
$(".esriGeocoderResults ul").bind();
//alert($(".esriGeocoderResults ul").length);
//$(".esriGeocoderResults ul").append('<li><span class="tab">Message Center</span></li>');
}
},
error: function (data) {
alert("error:" + data.statusText);
//$('input.suggest-user').removeClass('ui-autocomplete-loading');
}
});
I have to show multiple chart on a HTML page, but i can't make multiple query (directly on a google spreedsheet).
Actually, I have just the first query who is display.
My code :
<html>
<head>
<meta charset="utf-8">
<title>Page de pilotage</title>
<link rel=stylesheet type="text/css" href="style.css">
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/xxx/gviz/tq?sheet=visites');
var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/xxx/gviz/tq?sheet=transactions');
query.send(handleQueryResponse);
query2.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var options = {
pointSize: 4,
title: '',
}
var data = response.getDataTable();
var chart = new google.visualization.LineChart(document.getElementById('visites'));
var chart2 = new google.visualization.LineChart(document.getElementById('transactions'));
chart.draw(data, options);
chart2.draw(data, options);
}
</script>
</head>
<body>
<h1>Page de pilotage - KPI/PROGRESSION</h1>
<p>Cette page WEB rassemble des informations générales pour aider au pilotage du site</p>
<h2>PROGRESSION</h2>
<div style="width:1200px;">
<div style="width:599px; float:left;">
<h3>NOMBRE DE VISITES</h3>
<div id="visites" style="height: 280px; z-index: 1; margin-top: -25px; border-right:1px solid #ccc;"></div>
</div>
<div style="width:599px; float:right;">
<h3>NOMBRE DE TRANSACTIONS</h3>
<div id="transactions" style="height: 280px; z-index: 1; margin-top: -25px;"></div>
</div>
</div>
</body>
</html>
I think the problem was on these lines :
query.send(handleQueryResponse);
query2.send(handleQueryResponse);
function drawChart() {
var visites = new google.visualization.Query('https://docs.google.com/spreadsheets/d/xxx/gviz/tq?sheet=visites');
var transactions = new google.visualization.Query('https://docs.google.com/spreadsheets/d/xxx/gviz/tq?sheet=transactions');
visites.send(handleQueryResponse);
transactions.send(handleQueryResponse2);
conversion.send(handleQueryResponse3);
rebond.send(handleQueryResponse4);
}
function handleQueryResponse(response) {
var options = {
pointSize: 4,
title: '',
}
var data = response.getDataTable();
var chart = new google.visualization.LineChart(document.getElementById('visites'));
chart.draw(data, options);
}
function handleQueryResponse2(response) {
var options = {
pointSize: 4,
title: '',
}
var data = response.getDataTable();
var chart2 = new google.visualization.LineChart(document.getElementById('transactions'));
chart2.draw(data, options);
}
i try this code
for(i=0; i<num ;i++)
{
points.push([lats[i], lngs[i]]);
if(i==0) str = 'S';
else if(i==num-1) str = 'E';
else str = '';
var marker = new nokia.maps.map.Marker(
[lats[i], lngs[i]],
{
title: str,
visibility: true,
icon: img,
anchor: new nokia.maps.util.Point(5, 5)
});
marker.addListener('click', function(evt){
$('.loc').html(times[i]);
});
map.objects.add(marker);
}
but it just does not fire click event. is anything wrong with code?
lats and lngs and times are defined and points is to be used later.
Edit:
Problem solved. See comment for answer below.
It looks like the problem is with the line:
$('.loc').html(times[i]);
Within the marker listener. The event hasn't got access to the array element when it is fired and therefore fails. I think you need to add an attribute to the marker and access it as shown:
var marker = new nokia.maps.map.Marker(
[lats[i], lngs[i]],
{
title: str,
visibility: true,
icon: img,
anchor: new nokia.maps.util.Point(29, 71),
$html : times[i]
});
marker.addListener('click', function(evt){
//$('.loc').html(times[i]);
alert (evt.target.$html);
});
Try the following (with your own App Id and token of course):
<!DOCTYPE HTML SYSTEM>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.3/jsl.js"></script>
<style type="text/css">
html {
overflow:hidden;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
position: absolute;
}
#mapContainer {
width:100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript">
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
var mapContainer = document.getElementById("mapContainer");
var DefaultLatitude = 52.516237;
var DefaultLongitude = 13.377686;
var defaultZoomLevel = 16;
var mapOptions =
{
baseMapType: nokia.maps.map.Display.NORMAL,
center: new nokia.maps.geo.Coordinate(DefaultLatitude, DefaultLongitude),
zoomLevel: defaultZoomLevel,
components: [
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.Overview(),
new nokia.maps.map.component.ScaleBar(),
new nokia.maps.map.component.ContextMenu()
]
};
var map = new nokia.maps.map.Display(mapContainer, mapOptions);
var str ="";
var img = "http://api.maps.nokia.com/en/playground/examples/maps/res/markerHouse.png";
var points= new Array();
var lats = new Array();
var lngs = new Array();
var times = new Array();
var num;
lats[0] = 52.516237;
lngs[0] = 13.377686;
times[0] = "brandenburg gate";
num = 1;
for(var i=0; i<num ;i++)
{
points.push([lats[i], lngs[i]]);
if(i==0) str = 'S';
else if(i==num-1) str = 'E';
else str = '';
var marker = new nokia.maps.map.Marker(
[lats[i], lngs[i]],
{
title: str,
visibility: true,
icon: img,
anchor: new nokia.maps.util.Point(29, 71),
$html : times[i]
});
marker.addListener('click', function(evt){
//$('.loc').html(times[i]);
alert (evt.target.$html);
});
map.objects.add(marker);
}
</script>
</body>
</html>
I have the following code which addes 3 markers to the map along with there popup boxes what I want to do is have a list of location at bottom of page and using the id of the marker when click a place in the list it just make that places popup appear on the map.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Open Street Map</title>
<style type="text/css">
body { font: normal 10pt Helvetica, Arial; }
#map { width: 100%; height: 100%; border: 0px; padding: 0px; }
</style>
<script src="lib/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript">
var iconSize = new OpenLayers.Size(21, 25);
var iconOffset = new OpenLayers.Pixel(-(iconSize.w / 2), -iconSize.h);
var icon = new OpenLayers.Icon("img/fourmarker.png",
iconSize, iconOffset);
var zoom, center, currentPopup, map, lyrMarkers;
var popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
"autoSize": true,
"minSize": new OpenLayers.Size(300, 50),
"maxSize": new OpenLayers.Size(500, 300),
"keepInMap": true
});
var bounds = new OpenLayers.Bounds();
function addMarker(id, lng, lat, info) {
var pt = new OpenLayers.LonLat(lng, lat)
.transform(new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject());
bounds.extend(pt);
var feature = new OpenLayers.Feature(lyrMarkers, pt);
feature.closeBox = true;
feature.popupClass = popupClass;
feature.data.popupContentHTML = info ;
feature.data.overflow = "auto";
var marker = new OpenLayers.Marker(pt, icon.clone());
var markerClick = function(evt) {
if (currentPopup != null && currentPopup.visible()) {
currentPopup.hide();
}
if (this.popup == null) {
this.popup = this.createPopup(this.closeBox);
map.addPopup(this.popup);
this.popup.show();
} else {
this.popup.toggle();
}
currentPopup = this.popup;
OpenLayers.Event.stop(evt);
};
marker.events.register("mousedown", feature, markerClick);
lyrMarkers.addMarker(marker);
}
function initMap() {
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
numZoomLevels: 19,
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-0.13011, -0.13011, 51.51039, 51.51039)
};
map = new OpenLayers.Map("map", options);
map.addControl(new OpenLayers.Control.DragPan());
var lyrOsm = new OpenLayers.Layer.OSM();
map.addLayer(lyrOsm);
lyrMarkers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(lyrMarkers);
//add marker on given coordinates
addMarker('1',-0.12519,51.51112 , '<b>Tescos</b><br/>Covent garden');
addMarker('2',-0.13264,51.50918 , '<b>Spar</b><br/>Leicester Square');
addMarker('3', -0.12498,51.50807 , '<b>M & S</b><br/>Embankment');
center = bounds.getCenterLonLat();
map.setCenter(center, map.getZoomForExtent(bounds) - 1);
zoom = map.getZoom();
}
</script>
</head>
<body onload="initMap()" style="margin:0; border:0; padding:0; width:1000px; height:500px;">
<div id="map"></div>
</body>
</html>
EXTRA INFORMATION
I am going to add a list to bottom of map like so:
<ul>
<li>location1</li>
<li>location2</li>
<li>location3</li>
</ul>
What i want to get working is when the user clicks so location1 alink then that relevent popup box will show and the other will be removed.
How would this be done.
This very fast example (modify addMarker function):
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Open Street Map</title>
<style type="text/css">
body { font: normal 10pt Helvetica, Arial; }
#map { width: 100%; height: 100%; border: 0px; padding: 0px; }
#list > div { background-color: #aaa; margin-top: 10px; }
</style>
<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"> </script>
</head>
<body onload="initMap()" style="margin:0; border:0; padding:0; width:1000px; height:500px;">
<div id="map"></div>
<div id="list" style="width:100%; height: 100%"></div>
</body>
<script type="text/javascript">
var iconSize = new OpenLayers.Size(21, 25);
var iconOffset = new OpenLayers.Pixel(-(iconSize.w / 2), -iconSize.h);
var icon = new OpenLayers.Icon("img/fourmarker.png",
iconSize, iconOffset);
var list = document.getElementById('list');
var zoom, center, currentPopup, map, lyrMarkers;
var popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
"autoSize": true,
"minSize": new OpenLayers.Size(300, 50),
"maxSize": new OpenLayers.Size(500, 300),
"keepInMap": true
});
var bounds = new OpenLayers.Bounds();
function addMarker(id, lng, lat, info) {
var pt = new OpenLayers.LonLat(lng, lat)
.transform(new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject());
bounds.extend(pt);
var feature = new OpenLayers.Feature(lyrMarkers, pt);
feature.closeBox = true;
feature.popupClass = popupClass;
feature.data.popupContentHTML = info ;
feature.data.overflow = "auto";
var marker = new OpenLayers.Marker(pt, icon.clone());
var markerClick = function(evt) {
if (currentPopup != null && currentPopup.visible()) {
currentPopup.hide();
}
if (this.popup == null) {
this.popup = this.createPopup(this.closeBox);
map.addPopup(this.popup);
this.popup.show();
} else {
this.popup.toggle();
}
currentPopup = this.popup;
OpenLayers.Event.stop(evt);
};
marker.events.register("mousedown", feature, markerClick);
lyrMarkers.addMarker(marker);
// add items
var listItem = OpenLayers.Util.createDiv(this.id, null, null, null, 'relative', null);
listItem.innerHTML = info;
list.appendChild(listItem);
var callback = function(e) {
marker.events.triggerEvent('mousedown');
console.log(marker);
OpenLayers.Event.stop(e);
};
OpenLayers.Event.observe(listItem, "touchend", OpenLayers.Function.bindAsEventListener(callback, this));
OpenLayers.Event.observe(listItem, "click", OpenLayers.Function.bindAsEventListener(callback, this));
}
function initMap() {
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
numZoomLevels: 19,
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-0.13011, -0.13011, 51.51039, 51.51039)
};
map = new OpenLayers.Map("map", options);
map.addControl(new OpenLayers.Control.DragPan());
var lyrOsm = new OpenLayers.Layer.OSM();
map.addLayer(lyrOsm);
lyrMarkers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(lyrMarkers);
//add marker on given coordinates
addMarker('1',-0.12519,51.51112 , '<b>Tescos</b><br/>Covent garden');
addMarker('2',-0.13264,51.50918 , '<b>Spar</b><br/>Leicester Square');
addMarker('3', -0.12498,51.50807 , '<b>M & S</b><br/>Embankment');
center = bounds.getCenterLonLat();
map.setCenter(center, map.getZoomForExtent(bounds) - 1);
zoom = map.getZoom();
}
</script>
</html>