In my form autocomplete search input and Map route is not working togetherly.
autocomplete search is working when I add async defer in script
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&key=*key*&libraries=places&callback=initAutocomplete"
>
</script>
and Map route is working when I remove async defer in script
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&key=AIzaSyBNHI4xFw5CzYJSvbotLPu93C81q69ZbZA&libraries=places&callback=initAutocomplete"
async defer>
</script>
this is my complete code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&key=AIzaSyBNHI4xFw5CzYJSvbotLPu93C81q69ZbZA&libraries=places&callback=initAutocomplete"
async defer>
</script>
</head>
<body>
<form method="post">
<div id="locationField">
<input id="autocomplete" name="txtpickup" placeholder="Enter your address"
onFocus="geolocate()" type="text" style="width:20em;"></input>
<br/>
<br/>
<input id="autocomplete1" name="txtdrop" placeholder="Enter your address"
onFocus="geolocate()" type="text" style="width:20em;"></input>
<br/>
<br/>
<input id="checkprice" type="submit" value="checkprice" name="checkprice" style="width:20em;"></input>
</div>
<form>
<?php
if (isset($_POST['checkprice']))
{
$pickupaddress = $_POST['txtpickup'];
$dropaddress = $_POST['txtdrop'];
$geo = file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?address='.urlencode($pickupaddress).'&sensor=false');
$geo = json_decode($geo, true);
if ($geo['status'] == 'OK') {
$latitude = $geo['results'][0]['geometry']['location']['lat'];
$longitude = $geo['results'][0]['geometry']['location']['lng'];
}
//------- drop coordnates -----------
$geo1 = file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?address='.urlencode($dropaddress).'&sensor=false');
$geo1 = json_decode($geo1, true);
if ($geo1['status'] == 'OK') {
$latitude1 = $geo1['results'][0]['geometry']['location']['lat'];
$longitude1 = $geo1['results'][0]['geometry']['location']['lng'];
}
echo '<div><input id="anything" type="button" value="Show Route" onClick="updatePos(\''.str_replace("'", "\\'", $latitude).'\', \''.str_replace("'", "\\'", $longitude).'\', \''.str_replace("'", "\\'", $latitude1).'\', \''.str_replace("'", "\\'", $longitude1).'\');" ></div>';
}
// -------- distance -------------
function distance($lat1, $lon1, $lat2, $lon2, $unit) {
$theta = $lon1 - $lon2;
$dist = sin(deg2rad($lat1)) * sin(deg2rad($lat2)) + cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * cos(deg2rad($theta));
$dist = acos($dist);
$dist = rad2deg($dist);
$miles = $dist * 60 * 1.1515;
$unit = strtoupper($unit);
if ($unit == "K") {
return ($miles * 1.609344);
} else if ($unit == "N") {
return ($miles * 0.8684);
} else {
return $miles;
}
}
?>
<div id="map_canvas" style="float:left;width:70%;height:400px;"></div>
<ul></ul>
<p id="pMsg"></p>
</body>
<script type="text/javascript">
function updatePos(latitude,longitude,latitude1,longitude1){
ginit(latitude,longitude,latitude1,longitude1);
}
function initAutocomplete() {
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),
{types: ['geocode']});
autocomplete1 = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete1')),
{types: ['geocode']});
}
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
var directions = {};
var bounds = new google.maps.LatLngBounds();
function ginit(latitude,longitude,latitude1,longitude1) {
var opts = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(52.524268, 13.406290000000013)
}
map = new google.maps.Map(document.getElementById("map_canvas"), opts);
var routes = [{
label: 'Erkner',
request: {
origin: new google.maps.LatLng(latitude, longitude),
destination: new google.maps.LatLng(latitude1, longitude1),
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
rendering: {
marker: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
draggable: true
}
}
];
var dists = [10000, 5000, 3000, 1000];
var selects = document.createElement('select');
list = document.getElementsByTagName('ul')[0];
for (var d = 0; d < dists.length; ++d) {
selects.options[selects.options.length] = new Option(dists[d], dists[d], d == 0, d == 0);
}
for (var r = 0; r < routes.length; ++r) {
bounds.extend(routes[r].request.destination);
bounds.extend(routes[r].request.origin);
routes[r].rendering.routeId = 'r' + r + new Date().getTime();
routes[r].rendering.dist = dists[0];
var select = selects.cloneNode(true);
select.setAttribute('name', routes[r].rendering.routeId);
select.onchange = function () {
directions[this.name].renderer.dist = this.value;
setMarkers(this.name)
};
list.appendChild(document.createElement('li'));
list.lastChild.appendChild(select);
list.lastChild.appendChild(document.createTextNode(routes[r].label));
requestRoute(routes[r], map);
}
map.fitBounds(bounds);
}
function setMarkers(ID) {
var direction = directions[ID],
renderer = direction.renderer,
dist = renderer.dist,
marker = renderer.marker,
map = renderer.getMap(),
dirs = direction.renderer.getDirections();
marker.map = map;
for (var k in direction.sets) {
var set = directions[ID].sets[k];
set.visible = !! (k === dist);
for (var m = 0; m < set.length; ++m) {
set[m].setMap((set.visible) ? map : null);
}
}
if (!direction.sets[dist]) {
if (dirs.routes.length) {
var route = dirs.routes[0];
var az = 0;
for (var i = 0; i < route.legs.length; ++i) {
if (route.legs[i].distance) {
az += route.legs[i].distance.value;
}
}
dist = Math.max(dist, Math.round(az / 100));
direction.sets[dist] = gMilestone(route, dist, marker);
}
}
}
function requestRoute(route, map) {
if (!window.gDirSVC) {
window.gDirSVC = new google.maps.DirectionsService();
}
var renderer = new google.maps.DirectionsRenderer(route.rendering);
var renderer = new google.maps.DirectionsRenderer(route.rendering);
renderer.setMap(map);
renderer.setOptions({
preserveViewport: true
})
google.maps.event.addListener(renderer, 'directions_changed', function () {
if (directions[this.routeId]) {
//remove markers
for (var k in directions[this.routeId].sets) {
for (var m = 0; m < directions[this.routeId].sets[k].length; ++m) {
directions[this.routeId].sets[k][m].setMap(null);
}
}
}
directions[this.routeId] = {
renderer: this,
sets: {}
};
setMarkers(this.routeId);
});
window.gDirSVC.route(route.request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
renderer.setDirections(response);
}
});
}
function gMilestone(route, dist, opts) {
var markers = [],
geo = google.maps.geometry.spherical,
path = route.overview_path,
point = path[0],
distance = 0,
leg,
overflow,
pos;
for (var p = 1; p < path.length; ++p) {
leg = Math.round(geo.computeDistanceBetween(point, path[p]));
d1 = distance + 0
distance += leg;
overflow = dist - (d1 % dist);
if (distance >= dist && leg >= overflow) {
if (overflow && leg >= overflow) {
pos = geo.computeOffset(point, overflow, geo.computeHeading(point, path[p]));
opts.position = pos;
markers.push(new google.maps.Marker(opts));
distance -= dist;
}
while (distance >= dist) {
pos = geo.computeOffset(point, dist + overflow, geo.computeHeading(point, path[p]));
opts.position = pos;
markers.push(new google.maps.Marker(opts));
distance -= dist;
}
}
point = path[p]
}
console.log(markers); //alert(markers);
for (var key in markers) {
var obj = markers[key];
console.log(obj);
if (markers[key].hasOwnProperty("position")) {
document.getElementById("pMsg").innerHTML += key+":"+markers[key].getPosition().toUrlValue(6) +"<br>";
}
}
return markers;
}
</script>
</html>
any help would be appreciated
You should use the asynchronous version of the API.
Related
function checkCollisiontofloor() {
var cube = scene.getObjectByName('floor');
var originPoint = cube.position.clone();
for (var vertexIndex = 0; vertexIndex < cube.geometry.vertices.length; vertexIndex++) {
var localVertex = cube.geometry.vertices[vertexIndex].clone();
var globalVertex = localVertex.applyMatrix4(cube.matrix);
var directionVector = globalVertex.sub(cube.position);
var ray = new THREE.Raycaster(originPoint, directionVector.clone().normalize());
var collisionResults = ray.intersectObjects(cubearr);
if (collisionResults.length > 0 && collisionResults[0].distance < directionVector.length()) {
limit++;
console.log(limit);
collisionResults[0].object.visible = false;
if (limit == num)
{
createCubes(num+=5);
level++;
var l = "level";
var final = (l + " " + level);
console.log (final);
document.getElementById("Level").innerHTML = final;
speed+= 0.1;
}
}
}
}
The Whole Code
<canvas id="scene"></canvas>
<script src="lib/three.min.js"></script>
<script src="lib/OrbitControls.js"></script>
<html>
<style>
#myText2
{
font-weight: bolder;
font-size: 30px;
}
.buttons
{
position: fixed;
top: 20px;
}
</style>
<body>
<div class="buttons">
<label style="color:red;"><span id="myText2"></span></label>
<h1>Score: <span id="myText"></span></h1>
<h1> <span id="Level"></span></h1>
</div>
<script>
var ww = 1500,
wh = 500;
var scene;
var k=0.02;
var Up=60;
var count=0;
var flag = true;
var speed=0.4;
var cubearr = [];
var num = 10;
var max=48 , min=-48;
var limit = 0;
var level = 1;
function init()
{
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(ww, wh);
renderer.setClearColor(0xFFFFFF, 1);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(40, ww/wh,1,1000);
camera.position.z = 100;
camera.position.y = 5;
camera.name = 'cam';
camera.lookAt(new THREE.Vector3(0,0,0));
scene.add(camera);
light = new THREE.PointLight( 0xFFFFFF, 1, 10000 );
light.position.set( 0, 20, 50 );
light.name = 'light';
scene.add( light );
text();
createCubes(num);
window.addEventListener("keydown", moveSphere);
dir();
renderer.render(scene,camera);
};
function text()
{
//THREE.ImageUtils.crossOrigin = '';
elements = new THREE.Object3D();
loader = new THREE.CubeTextureLoader();
loader.setPath( 'C:/xampp/htdocs/graphics/' );
// Create sphere
sphereG = new THREE.SphereGeometry(4, 100, 100, 0, Math.PI * 2, 0, Math.PI * 2);
spherem = new THREE.MeshLambertMaterial({color: 0xff2255});
texture2 = new THREE.TextureLoader().load('spheretex.jpg');
material2 = new THREE.MeshBasicMaterial( { map: texture2 } );
sphere = new THREE.Mesh(sphereG, material2);
sphere.position.y = -13;
sphere.name = 'sp';
elements.add(sphere);
//Create floor
planeG = new THREE.BoxGeometry( 100, 5, 10 );
material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
texture1 = new THREE.TextureLoader().load('texturefloor.jpg');
texture1.wrapS = THREE.RepeatWrapping;
texture1.wrapT = THREE.RepeatWrapping;
texture1.repeat.set( 100, 10 );
material1 = new THREE.MeshBasicMaterial( { map: texture1 } );
//texture msh shaghl fa hatet material bas msh material1 3ashn ahtulu color
floor= new THREE.Mesh( planeG, material1 );
floor.position.y = -20;
floor.name = ("floor");
elements.add(floor);
scene.add(elements);
//renderer.render(scene,camera);
};
function createCubes(x)
{
document.getElementById("Level").innerHTML = "Level 1";
geometry2 = new THREE.BoxGeometry(5,5,5);
texture = new THREE.TextureLoader().load( '25649.jpg' );
materialtex = new THREE.MeshBasicMaterial( { map: texture } );
for (let i = 0; i < x; i++)
{
cubearr[i] = new THREE.Mesh(geometry2, materialtex);
cubearr[i].position.x =(Math.random() * (max - min)) + min;
cubearr[i].position.y = Up;
Up = Up+10;
scene.add(cubearr[i]);
//cubes.push(cubearr[i]);
}
renderer.render(scene,camera);
}
function dir()
{
var s = scene.getObjectByName("sp");
if (flag == false)
{
return;
}
requestAnimationFrame(dir);
sphere.position.y +=speed;
camera.position.y +=speed;
floor.position.y+=speed;
checkCollisiontosphere();
checkCollisiontofloor();
renderer.render(scene, camera);
}
function moveSphere(e)
{
moveDistance = 0.30;
sp = scene.getObjectByName('sp');
cam = scene.getObjectByName('cam');
light = scene.getObjectByName('light');
if (e.keyCode == '39')
{
if(sp.position.x < 48)
{
sp.rotation.z -= moveDistance;
sp.position.x += 3;
sp.rotation.x += 3;
light.position.x += 3;
count++;
document.getElementById("myText").innerHTML = count;
}
}
else if (e.keyCode == '37')
{
if(sp.position.x > -48)
{
sp.rotation.z += moveDistance;
sp.position.x-= 3;
sp.rotation.x -= 3;
light.position.x -= 3;
count++;
document.getElementById("myText").innerHTML = count;
}
}
else if(e.keyCode == '27')
{
if (flag)
{
flag = false;
}
else
{
flag = true;
dir();
}
}
};
window.addEventListener("keydown", moveSphere);
function checkCollisiontosphere() {
var cube = scene.getObjectByName('sp');
var originPoint = cube.position.clone();
for (var vertexIndex = 0; vertexIndex < cube.geometry.vertices.length; vertexIndex++) {
var localVertex = cube.geometry.vertices[vertexIndex].clone();
var globalVertex = localVertex.applyMatrix4(cube.matrix);
var directionVector = globalVertex.sub(cube.position);
var ray = new THREE.Raycaster(originPoint, directionVector.clone().normalize());
var collisionResults = ray.intersectObjects(cubearr);
if (collisionResults.length > 0 && collisionResults[0].distance < directionVector.length()) {
document.getElementById("myText2").innerHTML = "GAME OVER";
flag=false }
}
}
function checkCollisiontofloor() {
var cube = scene.getObjectByName('floor');
var originPoint = cube.position.clone();
for (var vertexIndex = 0; vertexIndex < cube.geometry.vertices.length; vertexIndex++) {
var localVertex = cube.geometry.vertices[vertexIndex].clone();
var globalVertex = localVertex.applyMatrix4(cube.matrix);
var directionVector = globalVertex.sub(cube.position);
var ray = new THREE.Raycaster(originPoint, directionVector.clone().normalize());
var collisionResults = ray.intersectObjects(cubearr);
if (collisionResults.length > 0 && collisionResults[0].distance < directionVector.length()) {
limit++;
console.log(limit);
collisionResults[0].object.visible = false;
if (limit == num)
{
createCubes(num+=5);
level++;
var l = "level";
var final = (l + " " + level);
console.log (final);
document.getElementById("Level").innerHTML = final;
speed+= 0.1;
}
}
}
}
function levels()
{
if(count == 30)
{
document.getElementById("Level").innerHTML = "Level 2";
speed=0.6;
}
if(count == 60)
{
document.getElementById("Level").innerHTML = "Level 3";
speed=0.8;
}
if(count == 90)
{
document.getElementById("Level").innerHTML = "Level 4";
speed=1;
}
}
init();
</script>
</body>
</html>
I'm new with JS and I have this extension from Qlik Sense that I'm trying to change, I need to point some pins according to a variable. If value of variable $type is 'A' I use some pin, if value is 'B' another and so on. But I really don't know how this extension get values from QS. Any help please?
Follow the JS:
require.config({
paths: {
async: '/extensions/GoogleMaps-Sense/lib/async',
markerclusterer: '/extensions/GoogleMaps-Sense/lib/markerclusterer'
},
shim: {
'markerclusterer': {
exports: 'MarkerClusterer'
}
}
});
define(['qlik', './src/properties', './src/styles', 'markerclusterer', './src/abbreviateNumber', 'qvangular', 'async!https://maps.googleapis.com/maps/api/js?key=AIzaSyASz5bdD789VzsLyki1JCKhSnCd5pEPY3Q'], function(qlik, properties, styles, MarkerClusterer, abbreviateNumber, qv) {
var BASE_URL = '/extensions/GoogleMaps-Sense/';
if (typeof(Number.prototype.toRad) === "undefined") {
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}
}
if (typeof(Number.prototype.toDeg) === "undefined") {
Number.prototype.toDeg = function() {
return this * 180 / Math.PI;
}
}
return {
initialProperties: {
version: 1,
qHyperCubeDef: {
qSuppressZero: true,
qSuppressMissing: true
},
gmaps: {
cluster: {
oneStyle: false,
maxZoom: 10
},
map: {
mode: 'cluster',
customIcon: null,
iconUrl: '',
maxZoom: 18,
style: 'default'
}
}
},
definition: properties,
snapshot: {
canTakeSnapshot: true
},
paint: function($element, layout) {
$element.empty();
this.backendApi.cacheCube.enabled = false;
var _this = this;
var markers = [];
var selectedMarkers = [];
var rectangles = [];
var selectedRects = [];
var columns = layout.qHyperCube.qSize.qcx;
var totalheight = layout.qHyperCube.qSize.qcy;
var pageheight = Math.floor(10000 / columns);
var numberOfPages = Math.ceil(totalheight / pageheight);
var Promise = qv.getService('$q');
var promises = Array.apply(null, Array(numberOfPages)).map(function(data, index) {
var page = {
qTop: (pageheight * index) + index,
qLeft: 0,
qWidth: columns,
qHeight: pageheight
};
return this.backendApi.getData([page]);
}, this)
Promise.all(promises).then(function(data) {
render(data);
});
function render(data) {
var useCustomStyle = layout.gmaps.map.style !== 'default';
var hasMeasure = layout.qHyperCube.qMeasureInfo.length >= 1 ? true : false;
var hasPopup = layout.qHyperCube.qMeasureInfo.length === 2 ? true : false;
//The bounds object, used to determain which part of the map to show based on data
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
maxZoom: layout.gmaps.map.maxZoom,
panControl: true,
zoomControl: true,
overviewMapControl: false,
overviewMapControlOptions: {
opened: false
},
scaleControl: false,
streetViewControl: true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.HYBRID, 'map_style']
}
};
//Put the map on the page so give some visual feedback
var map = new google.maps.Map($element.get(0), mapOptions);
if (useCustomStyle) {
var selectedStyle = styles.filter(function(d) {
return d.key === layout.gmaps.map.style
});
var styledMap = new google.maps.StyledMapType(selectedStyle[0].data, {
name: layout.gmaps.map.style
});
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
};
//Create a marker for each row of data
data.forEach(function(obj) {
obj[0].qMatrix.forEach(function(row, index) {
if (row[0].qText == '-') return;
//Parse the dimension
var latlng = JSON.parse(row[0].qText);
//Reverse the order as QS sends long lat
var point = new google.maps.LatLng(latlng[1], latlng[0]);
//Create our marker - if we have a expression then use that otherwise default to just show locations
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var marker = new google.maps.Marker({
position: point,
title: '',
icon: image,
customData: hasMeasure ? row[1].qText : 1,
qElem: row[0].qElemNumber
});
//If we have popup values for each marker create the popup windows
if (hasPopup) {
marker.infoWindow = new google.maps.InfoWindow({
content: row[2].qText
});
google.maps.event.addListener(marker, 'mouseover', function() {
this.infoWindow.open(map, this);
});
google.maps.event.addListener(marker, 'mouseout', function() {
this.infoWindow.close();
});
};
//Add click handler
google.maps.event.addListener(marker, 'click', (function(value) {
return function() {
_this.selectValues(0, [value], true);
highlightMarkers(value)
}
})(row[0].qElemNumber));
bounds.extend(point);
markers.push(marker);
});
});
//Fit map to bounds
map.fitBounds(bounds);
//Clustering enabled
if (layout.gmaps.map.mode === 'cluster') {
if (layout.gmaps.cluster.oneStyle) {
var clusterStyles = [{
opt_textColor: 'black',
url: BASE_URL + 'images/singlecluster.png',
height: 56,
width: 55
}];
};
var mcOptions = {
imagePath: BASE_URL + 'images/m',
styles: clusterStyles,
maxZoom: layout.gmaps.cluster.maxZoom
};
//Draw clusters onto map
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
markerCluster.setCalculator(function(markers, clusterStyles) {
var index = 0,
count = markers.length,
total = count;
while (total !== 0) {
//Create a new total by dividing by a set number
total = parseInt(total / 5, 10);
//Increase the index and move up to the next style
index++;
}
index = Math.min(index, clusterStyles);
var measure = 0;
for (var i = 0, k = count; i < k; i++) {
measure += parseInt(markers[i].customData)
}
var abbreviatedValue = abbreviateNumber(measure)
return {
text: abbreviatedValue,
index: index
};
});
};
if (layout.gmaps.map.mode === 'marker') {
markers.forEach(function(d) {
d.setMap(map);
})
};
if (layout.gmaps.map.mode === 'boxes') {
markers.forEach(function(d) {
var distance = d.customData > 1 ? d.customData : 10;
var lat = d.position.lat();
var lng = d.position.lng();
var boxbounds = new google.maps.LatLngBounds(box(lat, lng, 225, distance), box(lat, lng, 45, distance))
var rect = new google.maps.Rectangle({
strokeColor: layout.gmaps.boxes.strokeFill,
strokeOpacity: +layout.gmaps.boxes.strokeOpacity,
strokeWeight: +layout.gmaps.boxes.strokeWeight,
fillColor: layout.gmaps.boxes.fillColor,
fillOpacity: +layout.gmaps.boxes.fillOpacity,
qElem: d.qElem,
map: map,
bounds: boxbounds
});
//Add click handler
google.maps.event.addListener(rect, 'click', (function(value) {
return function() {
_this.selectValues(0, [value], true);
highlightRects(value)
}
})(d.qElem));
rectangles.push(rect);
})
};
};
//In selection mode - loop over markers to highlight markers scheduled for selection.
function highlightMarkers(qElem) {
var idx = selectedMarkers.indexOf(qElem);
if (idx > -1) {
selectedMarkers.splice(idx, 1)
} else {
selectedMarkers.push(qElem)
}
markers.forEach(function(marker) {
if (selectedMarkers.indexOf(marker.qElem) === -1) {
marker.setOpacity(0.5)
} else {
marker.setOpacity(1);
}
});
};
//In selection mode - loop over markers to highlight markers scheduled for selection.
function highlightRects(qElem) {
var idx = selectedRects.indexOf(qElem);
if (idx > -1) {
selectedRects.splice(idx, 1)
} else {
selectedRects.push(qElem)
}
rectangles.forEach(function(marker) {
if (selectedRects.indexOf(marker.qElem) === -1) {
marker.setOptions({
fillOpacity: +layout.gmaps.boxes.fillOpacity / 2,
strokeOpacity: +layout.gmaps.boxes.strokeOpacity / 2
})
} else {
marker.setOptions({
fillOpacity: +layout.gmaps.boxes.fillOpacity,
strokeOpacity: +layout.gmaps.boxes.strokeOpacity
})
}
});
};
function box(lat, lng, brng, dist) {
this._radius = 6371;
var dist = dist / this._radius;
var brng = brng.toRad();
var lat1 = lat.toRad();
var lon1 = lng.toRad();
var lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) +
Math.cos(lat1) * Math.sin(dist) *
Math.cos(brng));
var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) *
Math.cos(lat1), Math.cos(dist) -
Math.sin(lat1) * Math.sin(lat2));
lon2 = (lon2 + 3 * Math.PI) % (2 * Math.PI) - Math.PI;
return new google.maps.LatLng(lat2.toDeg(), lon2.toDeg());
}
}
};
});
I think this might help
/**
* Retrieve the values of a list of variables.
*
* Since $q.all fails on the first error, we have to resolve all first
*
* #param {string[]} `varList` - The variable names.
* #param {object} `app` - The (Qlik Sense) app.
*
* #returns {Promise}
*
* #api public
*/
this.getEngineVarListValues = function ( app, varList ) {
if ( varList && Array.isArray( varList ) ) {
var promises = [];
varList.forEach( function ( variable ) {
promises.push( self.getEngineVarValue( app, variable ) )
} );
return $q.all( promises );
}
return $q.reject( new Error( 'getEngineVarListValues variable list passed.' ) );
};
Taken from https://github.com/stefanwalther/sense-extension-utils/blob/master/src/variable-utils.js
var app = qlik.currApp();
//get the variable content
app.variable.getContent('MYVAR',function ( reply ){
alert( JSON.stringify( reply ) );
});
source: http://help.qlik.com/en-US/sense-developer/June2017/Subsystems/APIs/Content/CapabilityAPIs/qlik-variable-interface.htm
I'm using the Google Maps Places Library to work on something similar to the following: http://codepen.io/maudulus/pen/oxNXod. As you can see, when you load the page there are a number of markers that can be filtered using the State select. You can also use the search box to find markers within one standard deviation of the location you search.
However, I'm trying to combine these two features (for example, someone searches for a location, and then filters the results by state). I'm not sure why this doesn't currently work...my guess is that it might be double-adding points, because it does seem to be wanting to filter locations (you can see them flicker when you change the select).
LOCATION CODE
var map;
var originalStores = [];
var markersArr = [];
var geocoder = new google.maps.Geocoder();
var typingTimer; //timer identifier
var doneTypingInterval = 1000; //time in ms, 5 second for example
var $location = $('#location');
$location.on('keyup', function(e) {
clearTimeout(typingTimer);
typingTimer = setTimeout(queryLocation, doneTypingInterval);
});
$location.on('keydown', function() {
clearTimeout(typingTimer);
});
function queryLocation(urlParamLocation) {
var queryingLocation = (urlParamLocation) ? urlParamLocation : $('#location').val();
getLatLong(queryingLocation, function(discoveredLatLng) {
replotMap(discoveredLatLng);
});
}
function getLatLong(address, cb) {
var tempCurrentPosition = {
latitude: "",
longitude: ""
};
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
tempCurrentPosition.latitude = results[0].geometry.location.lat();
tempCurrentPosition.longitude = results[0].geometry.location.lng();
cb(tempCurrentPosition);
}
});
}
function replotMap(locationValue) {
if (locationValue) {
$.each(originalStores, function(index, thisLocale) {
thisLocale.distance = getDistanceFromLatLon(locationValue.latitude, locationValue.longitude, thisLocale.latitude, thisLocale.longitude);
});
var sdCompliant = withinOneSD(originalStores, standardDeviation(originalStores));
addMapMarkers(sdCompliant);
}
}
function initialize() {
var input = document.getElementById('location');
var autocomplete = new google.maps.places.Autocomplete(input);
}
initialize();
function initializeMap() {
var myLatlng = new google.maps.LatLng(39.768408, -86.157975);
var mapOptions = {
zoom: 7,
center: myLatlng,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: true,
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
plotAllMarkers();
}
initializeMap();
function plotAllMarkers() {
removeExtraneousMarkers();
$.each($('#locations-ul li'), function(index, store) {
var thisStoreObj = {};
thisStoreObj.Address = $(store).attr('address');
thisStoreObj.latitude = $(store).attr('data-latitude');
thisStoreObj.longitude = $(store).attr('data-longitude');
thisStoreObj.Store = $(store).attr('data-store');
thisStoreObj.distance = "";
originalStores.push(thisStoreObj);
});
originalStores = originalStores.sort(compare);
$.each(originalStores, function(index, thisStore) {
if (thisStore.Store) {
plotTableRow(thisStore);
}
});
addMapMarkers(originalStores);
}
function addMapMarkers(arr, allArr) {
removeExtraneousMarkers();
deleteMarkers();
var bounds = new google.maps.LatLngBounds();
$.each(arr, function(index, thisLocation) {
plotTableRow(thisLocation);
var currentState = findState(thisLocation.Address);
var currLatlng = new google.maps.LatLng(thisLocation.latitude, thisLocation.longitude);
var marker = new google.maps.Marker({
position: currLatlng,
map: map,
title: thisLocation.Store,
state: currentState
});
markersArr.push(marker);
});
for (var i = 0; i < markersArr.length; i++) {
bounds.extend(markersArr[i].getPosition());
}
map.fitBounds(bounds);
adjustPlottedMarkersToBounds(markersArr);
}
function filterByState(stateMarkerArr) {
$('#state-select').on('change', function() {
var stateCode = $(this).val();
$('.locations-table .locations-div').hide();
$.each($('.locations-table .locations-div.filtered-location'), function(index, thisLocation) {
var addressText = $(thisLocation).find('h4').text();
if (addressText.indexOf(stateCode) > -1) {
$(thisLocation).show();
}
});
clearMarkers();
$.each(stateMarkerArr, function(index, thisStateMarker) {
if (thisStateMarker.state == stateCode) {
thisStateMarker.setMap(map);
}
});
});
}
function adjustPlottedMarkersToBounds(allArr) {
google.maps.event.addListener(map, 'bounds_changed', function() {
removeExtraneousMarkers();
var markersArrStateFilter = [];
for (var i = 0; i < allArr.length; i++) {
if (map.getBounds().contains(allArr[i].getPosition())) {
// markers[i] in visible bounds
markersArrStateFilter.push(allArr[i]);
allArr[i].setMap(map);
$.each(originalStores, function(index, thisStore) {
if (thisStore.Store == allArr[i].title) {
plotTableRow(thisStore, "filtered-location");
}
});
} else {
// markers[i] is not in visible bounds
allArr[i].setMap(null);
}
}
filterByState(markersArrStateFilter);
});
};
function removeExtraneousMarkers() {
$('.locations-div').remove()
$('#state-select').val('').change();
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < markersArr.length; i++) {
markersArr[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
}
function deleteMarkers() {
clearMarkers();
markersArr = [];
}
function findState(subStr) {
if (subStr.indexOf('OH') > -1) {
return 'OH';
} else if (subStr.indexOf('IL') > -1) {
return 'IL';
} else if (subStr.indexOf('MO') > -1) {
return 'MO';
} else if (subStr.indexOf('MI') > -1) {
return 'MI';
} else if (subStr.indexOf('IN') > -1) {
return 'IN';
}
}
function plotTableRow(thisStore, addedClass) {
$('.locations-table').append('<div class="columns small-12 medium-6 locations-div ' + addedClass + '"><div class="row"><div class="columns small-3"><img src="https://cdn1.iconfinder.com/data/icons/mirrored-twins-icon-set-hollow/512/PixelKit_point_marker_icon.png"></div><div class="columns small-9"><h3>Marker</h3><h4>' + thisStore.Address + '</h4></div></div></div>');
};
APPENDIX CODE:
function compare(a, b) {
if (a.distance < b.distance)
return -1;
if (a.distance > b.distance)
return 1;
return 0;
}
function getDistanceFromLatLon(lat1, lon1, lat2, lon2) {
var R = 6371; // Radius of the earth in km
var dLat = deg2rad(lat2 - lat1); // deg2rad below
var dLon = deg2rad(lon2 - lon1);
var a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c; // Distance in km
return getMiles(d);
}
function deg2rad(deg) {
return deg * (Math.PI / 180)
}
//converts to miles
function getMiles(i) {
return i * 0.621371192;
}
function withinOneSD(arr, sd) {
var tempArr = [];
var arrMax = Math.max.apply(Math, numArr);
var arrMin = Math.min.apply(Math, numArr);
$.each(arr, function(index, currValue) {
if (currValue.distance <= (arrMin + sd)) {
tempArr.push(currValue);
}
});
return tempArr;
}
var numArr;
function standardDeviation(values) {
numArr = [];
$.each(values, function(index, currentValue) {
numArr.push(currentValue.distance);
})
var avg = average(numArr);
var squareDiffs = numArr.map(function(value) {
var diff = value - avg;
var sqrDiff = diff * diff;
return sqrDiff;
});
var avgSquareDiff = average(squareDiffs);
var stdDev = Math.sqrt(avgSquareDiff);
return stdDev;
}
function average(data) {
var sum = data.reduce(function(sum, value) {
return sum + value;
}, 0);
var avg = sum / data.length;
return avg;
}
See it here: http://codepen.io/maudulus/pen/oxNXod
One problem is this code, which only shows markers, doesn't hide them if they don't match the state, doesn't seem like clearMarkers is doing what you think:
function filterByState(stateMarkerArr) {
$('#state-select').on('change', function() {
var stateCode = $(this).val();
$('.locations-table .locations-div').hide();
$.each($('.locations-table .locations-div.filtered-location'), function(index, thisLocation) {
var addressText = $(thisLocation).find('h4').text();
if (addressText.indexOf(stateCode) > -1) {
$(thisLocation).show();
}
});
clearMarkers();
$.each(stateMarkerArr, function(index, thisStateMarker) {
if (thisStateMarker.state == stateCode) {
thisStateMarker.setMap(map);
}
});
});
}
Add an else to the if (thisStateMarker.state == stateCode) {
function filterByState(stateMarkerArr) {
$('#state-select').on('change', function() {
var stateCode = $(this).val();
$('.locations-table .locations-div').hide();
$.each($('.locations-table .locations-div.filtered-location'), function(index, thisLocation) {
var addressText = $(thisLocation).find('h4').text();
if (addressText.indexOf(stateCode) > -1) {
$(thisLocation).show();
}
});
clearMarkers();
$.each(stateMarkerArr, function(index, thisStateMarker) {
if (thisStateMarker.state == stateCode) {
thisStateMarker.setMap(map);
} else {
thisStateMarker.setMap(null);
}
});
});
}
I've attempted to embed a map inside an InfoWindow in order to create a pop up with a preview of the clustering. However once the InfoWindow is closed, the map div fails to render.
My attempt of a simplified jsfiddle, http://jsfiddle.net/behewur2/
function initialize() {
var mapOptions = {
center: {
lat: -34.9290,
lng: 138.6010
},
zoom: 8,
streetViewControl: false,
overviewMapControl: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var mcOptions = {
gridSize: 30,
zoomOnClick: false
};
var mcOptionsZoom = {
gridSize: 30,
zoomOnClick: true
};
var mc = new MarkerClusterer(map, [], mcOptions);
google.maps.event.addListener(mc, 'clusterclick',
function (cluster) {
if (typeof infowindow !== 'undefined') prevInfoWindow = infowindow;
infowindow = new google.maps.InfoWindow({
content: $('#inner-map-canvas')[0]
});
if (typeof prevInfoWindow !== 'undefined') prevInfoWindow.close();
infowindow.setPosition(cluster.getCenter());
infowindow.open(map);
google.maps.event.trigger(innermap, 'resize');
innermap.setZoom(innermap.getZoom());
for (var i = 0; i < cluster.getMarkers().length; i++) {
innermc.addMarker(
new google.maps.Marker({
position: cluster.getMarkers()[i].position,
map: innermap,
icon: cluster.getMarkers()[i].icon,
title: cluster.getMarkers()[i].title
}),
false);
}
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(mapOptions.center.lat, mapOptions.center.lng),
map: map,
icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=0|FF0000|000000'
});
mc.addMarker(marker, false);
var innermap = new google.maps.Map(document.getElementById("inner-map-canvas"), mapOptions);
var innermc = new MarkerClusterer(innermap, [], mcOptionsZoom);
}
google.maps.event.addDomListener(window, 'load', initialize);
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDKxl8sh1TEN61taio3wdbGwuSI8FVeQ5k"></script>
<script type="text/javascript" src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer_packed.js"></script>
<div id="map-canvas"></div>
<div id="inner-map-canvas">
</dev>
It would be better to dynamically create the div node in the infowindow, it is destroyed when the infowindow is closed.
google.maps.event.addListener(mc, 'clusterclick', function (cluster) {
if (typeof infowindow !== 'undefined') prevInfoWindow = infowindow;
var innermapNode = document.createElement("div");
innermapNode.setAttribute("id", "inner-map-canvas");
innermapNode.style.height = "300px";
innermapNode.style.width = "300px";
infowindow = new google.maps.InfoWindow({
content: innermapNode
});
if (typeof prevInfoWindow !== 'undefined') prevInfoWindow.close();
infowindow.setPosition(cluster.getCenter());
infowindow.open(map);
innermap = new google.maps.Map(innermapNode, mapOptions);
innermc = new MarkerClusterer(innermap, [], mcOptionsZoom);
google.maps.event.addListener(infowindow, 'domready', function () {
google.maps.event.trigger(innermap, 'resize');
// innermap.setZoom(innermap.getZoom());
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < cluster.getMarkers().length; i++) {
innermc.addMarker(
new google.maps.Marker({
position: cluster.getMarkers()[i].position,
map: innermap,
icon: cluster.getMarkers()[i].icon,
title: cluster.getMarkers()[i].title,
keycount: cluster.getMarkers()[i].keycount
}),
false);
bounds.extend(cluster.getMarkers()[i].position);
}
google.maps.event.trigger(innermap, 'resize');
innermap.fitBounds(bounds);
});
});
proof of concept fiddle
code snippet:
function colorForCount(count) {
if (count == 1) return '4080FE';
if (count == 2) return 'F7C207';
if (count > 2 && count < 5) return 'F50D07';
if (count >= 5) return 'FF00F0';
else return 'B600FF';
}
var innermap;
var innermc;
function initialize() {
var mapOptions = {
center: {
lat: -34.9290,
lng: 138.6010
},
zoom: 8,
streetViewControl: false,
overviewMapControl: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var mcStyles = [{
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png",
height: 53,
width: 53
}, {
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m2.png",
height: 53,
width: 53
}, {
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m3.png",
height: 53,
width: 53
}, {
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m4.png",
height: 53,
width: 53
}, {
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m5.png",
height: 53,
width: 53
}];
var mcOptions = {
gridSize: 30,
zoomOnClick: false,
styles: mcStyles
};
var mcOptionsZoom = {
gridSize: 30,
zoomOnClick: true,
styles: mcStyles
};
var mc = new MarkerClusterer(map, [], mcOptions);
mc.setCalculator(function(markers, numStyles) {
var count = markers.length;
var total = 0;
var max = 0;
var index = 0;
if (max == 1) index = 0;
if (max == 2) index = 2;
if (max > 2 && max < 5) index = 3;
if (max >= 5) index = 4;
return {
text: count,
index: index
};
});
google.maps.event.addListener(mc, 'clusterclick',
function(cluster) {
if (typeof infowindow !== 'undefined') prevInfoWindow = infowindow;
var innermapNode = document.createElement("div");
innermapNode.setAttribute("id", "inner-map-canvas");
innermapNode.style.height = "300px";
innermapNode.style.width = "300px";
infowindow = new google.maps.InfoWindow({
content: innermapNode
});
if (typeof prevInfoWindow !== 'undefined') prevInfoWindow.close();
infowindow.setPosition(cluster.getCenter());
infowindow.open(map);
innermap = new google.maps.Map(innermapNode, mapOptions);
innermc = new MarkerClusterer(innermap, [], mcOptionsZoom);
google.maps.event.addListener(infowindow, 'domready', function() {
google.maps.event.trigger(innermap, 'resize');
// innermap.setZoom(innermap.getZoom());
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < cluster.getMarkers().length; i++) {
innermc.addMarker(
new google.maps.Marker({
position: cluster.getMarkers()[i].position,
map: innermap,
icon: cluster.getMarkers()[i].icon,
title: cluster.getMarkers()[i].title,
keycount: cluster.getMarkers()[i].keycount
}),
false);
bounds.extend(cluster.getMarkers()[i].position);
}
google.maps.event.trigger(innermap, 'resize');
innermap.fitBounds(bounds);
});
});
google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
var mapBnds = map.getBounds();
var mapSpan = mapBnds.toSpan();
for (var i = 0; i < 25; i++) {
var latRan = (Math.random() * mapSpan.lat() / 2) + mapSpan.lat() / 4;
var lngRan = (Math.random() * mapSpan.lng() / 2) + mapSpan.lng() / 4;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(mapBnds.getSouthWest().lat() + latRan, mapBnds.getSouthWest().lng() + lngRan),
map: map,
icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=' + i + '|FF0000|000000'
});
mc.addMarker(marker, false);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
/**
* Pull out the unique keys and counts.
* #param {Object} json The Inventory object.
* #return {Array.<{portal:{portalGuid:string,portalLocation:string,
* portalImageUrl:string,portalTitle:string,portalAddress:string},
* count:number}>}
*/
function getKeys(json) {
// parse the json string
var inventory = json.gameBasket.inventory;
// loop over the inventory items to find keys
var keys = [];
var iitckeys = {};
for (var i = 0; i < inventory.length; i++) {
// if it's a key, attempt to add to the key list
var item = inventory[i];
if (item[2].resource && item[2].resource.resourceType == "PORTAL_LINK_KEY") {
addKey(keys, iitckeys, item[2].portalCoupler);
} else if (item[2].resource && (item[2].resource.resourceType == "CAPSULE" || item[2].resource.resourceType == "INTEREST_CAPSULE")) {
parseCapsule(keys, iitckeys, item[2].container.stackableItems);
}
}
// return back the keys
return {
keys: keys,
iitckeys: iitckeys
};
}
/**
* Parse the items within a capsule.
* #param {Array.<{portal:{portalGuid:string,portalLocation:string,
* portalImageUrl:string,portalTitle:string,portalAddress:string},
* count:number}>} keys The current key array.
* #param {Array.<Object>} items The capsule's contents.
*/
function parseCapsule(keys, iitckeys, items) {
for (var i = 0; i < items.length; i++) {
if (typeof items[i].exampleGameEntity[2].resource !== 'undefined') {
if (items[i].exampleGameEntity[2].resource.resourceType == "PORTAL_LINK_KEY") {
var count = items[i].itemGuids.length;
while (count > 0) {
addKey(keys, iitckeys, items[i].exampleGameEntity[2].portalCoupler);
count--;
}
}
}
}
}
/**
* Add a key def to the keys list.
* #param {Array.<{portal:{portalGuid:string,portalLocation:string,
* portalImageUrl:string,portalTitle:string,portalAddress:string},
* count:number}>} keys The current key array.
* #param {{portalGuid:string,portalLocation:string,portalImageUrl:string,
* portalTitle:string,portalAddress:string}} keyDef The key definition.
*/
function addKey(keys, iitckeys, keyDef) {
// try to find the key and increment the count
console.log("keyDef : " + keyDef);
for (var i = 0; i < keys.length; i++) {
if (keys[i].portal.portalGuid == keyDef.portalGuid) {
keys[i].count++;
iitckeys[keyDef.portalGuid] ++;
return;
}
}
// couldn't find the key, add it
keys.push({
portal: keyDef,
count: 1
});
iitckeys[keyDef.portalGuid] = 1;
}
function getLatLng(location) {
var newLoc = parseInt(location, 16);
//if MSB is set
if ((newLoc & 0x80000000) !== 0x00000000) {
console.log("neg");
return (newLoc - 0x100000000) / 1E6;
} else {
console.log("pos");
return newLoc / 1E6;
}
}
body,
html {
height: 100%;
width: 100%;
}
#map-canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.cluster img {
width: 53px;
height: 53px;
}
#commands {
width: 100%;
}
#inner-map-canvas {
width: 300px;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<div id="map-canvas"></div>
<div id="keyjson"></div>
I have drop down in my page, when the drop down value changes the contents of the map i.e the data to be loaded should change.It successfully loads for the first time but when again changed it is not changing. I am new to ArcGis map and want to reload the map. tried several methods but that doesn't help. Below is my code please suggest the way to fix this.
require([
"esri/map",
"esri/TimeExtent", "esri/dijit/TimeSlider",
"esri/geometry/Point",
"esri/symbols/PictureMarkerSymbol", "esri/graphic",
"esri/layers/GraphicsLayer",
"esri/geometry/Polyline",
"dojo/_base/array", "dojo/dom", "dojo/domReady!"
], function (
Map, TimeExtent, TimeSlider,
Point, PictureMarkerSymbol, Graphic,
GraphicsLayer, Polyline,
arrayUtils, dom
) {
var globalLocationArray = //my json data with latitude and longitude
var map;
var longitude = 96.07677;
var latitude = 16.97986;
var point = new Point(longitude, latitude);
var layer = new GraphicsLayer();
var layer1 = new GraphicsLayer();
map = new Map("mapDiv", {
basemap: "osm",
center: point, // longitude, latitude
zoom: 7,
maxZoom: 15,
minZoom: 3,
});
map.on("load", function () {
map.infoWindow.resize(250, 100);
//layer.clear();
//layer1.clear();
//map.removeLayer(layer)
//map.removeLayer(layer1)
//map.refresh();
//map.setExtent(map.extent)
});
layer1.on("click", function (evt) {
console.log(evt);
map.infoWindow.setTitle("Information");
var dataDisplay ="Contents";
map.infoWindow.setContent(dataDisplay);
map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
});
function createMarker(longitude, latitude, externalCause, date) {
var point = new Point(longitude, latitude);
point = esri.geometry.geographicToWebMercator(point);
var symbol;
if (externalCause == "SUCCESS") {
symbol = new PictureMarkerSymbol(
"http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png", 32, 32)
.setOffset(0, 15);
} else {
symbol = new PictureMarkerSymbol(
"http://static.arcgis.com/images/Symbols/Shapes/RedPin1LargeB.png", 32, 32)
.setOffset(0, 15);
}
//var symbol= symbol = new PictureMarkerSymbol("http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png", 32, 32).setOffset(0, 15);
var graphic = new esri.Graphic(point, symbol);
layer1.add(graphic);
}
function createPolyLine(sourcePoint, destPoint) {
var point1 = new Point(sourcePoint[0], sourcePoint[1]);
var point2 = new Point(destPoint[0], destPoint[1]);
var line = new esri.geometry.Polyline();
var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 255, 0.5]), 3);
line.addPath([point1, point2]);
var graphic = new Graphic(line, lineSymbol);
layer.add(graphic);
}
function drawGeoMap(data) {
console.info(data);
for (var row in data) {
var rowObj = createObject(data[row]);
createMarker(rowObj.long, rowObj.lat, rowObj.externalCause, rowObj.date,rowObj.cellName,rowObj.bts);
createMarker(rowObj.sbLong, rowObj.sbLat, rowObj.sbExternalCause, rowObj.sbDate,rowObj.sbCellName,rowObj.sbBts);
createPolyLine([rowObj.long, rowObj.lat], [rowObj.sbLong, rowObj.sbLat]);
}
map.addLayer(layer);
map.addLayer(layer1);
}
function createObject(rowData) {
var count = 0;
var obj = {
sbLat: rowData[count++],
sbLong: rowData[count++],
sbExternalCause: rowData[count++],
sbDate: rowData[count++],
sbCellName: rowData[count++],
sbBts: rowData[count++],
lat: rowData[count++],
long: rowData[count++],
externalCause: rowData[count++],
date: rowData[count++],
cellName: rowData[count++],
bts: rowData[count++]
};
return obj;
}
initSlider();
function initSlider() {
var timeSlider = new TimeSlider({
style: "width: 100%;"
}, dom.byId("timeSliderDiv"));
var timeExtent = new TimeExtent();
timeExtent.startTime = new Date("2/14/2015");
timeExtent.endTime = new Date("2/15/2015");
timeSlider.setThumbCount(2);
timeSlider.createTimeStopsByTimeInterval(timeExtent, 30, "esriTimeUnitsMinutes");
timeSlider.setThumbIndexes([0, 1]);
timeSlider.setThumbMovingRate(2000);
timeSlider.startup();
//add labels for every other time stop
var labels = arrayUtils.map(timeSlider.timeStops, function (timeStop, i) {
console.log(timeStop)
if (i % 2 === 0) {
var minutes;
if (timeStop.getMinutes() < 10) {
minutes = "0" + timeStop.getMinutes();
} else {
minutes = timeStop.getMinutes();
}
return timeStop.getHours() + ":" + minutes;
} else {
return "";
}
});
timeSlider.setLabels(labels);
timeSlider.on("time-extent-change", function (evt) {
layer.clear();
layer1.clear();
map.infoWindow.hide();
var startMinutes;
var endminutes;
if (new Date(evt.startTime).getMinutes() < 10) {
startMinutes = "0" + new Date(evt.startTime).getMinutes();
} else {
startMinutes = new Date(evt.startTime).getMinutes();
}
if (new Date(evt.endTime).getMinutes() < 10) {
endminutes = "0" + new Date(evt.endTime).getMinutes();
} else {
endminutes = new Date(evt.endTime).getMinutes();
}
var startValString = new Date(evt.startTime).getHours() + ":" + startMinutes;
var endValString = new Date(evt.endTime).getHours() + ":" + endminutes;
var start=globalArrayWithLocationAndImsi.length;
var end = 0
for(var i=0;i<globalArrayWithLocationAndImsi.length;i++)
{
var srt = parseInt(globalArrayWithLocationAndImsi[i].start.split(' ')[1].split(':')[0])
if(srt>= new Date(evt.startTime).getHours() && srt<=new Date(evt.endTime).getHours())
{
console.log(srt);
console.log(globalArrayWithLocationAndImsi[i].start);
if(start>i)
{
start=i;
}
if(end<i)
{
end=i;
}
}
}
console.log(start);
console.log(end);
for (var j = start; j < end; j++) {
drawGeoMap([[globalArrayWithLocationAndImsi[j].latitude, globalArrayWithLocationAndImsi[j].longitude, globalArrayWithLocationAndImsi[j].externalCause, globalArrayWithLocationAndImsi[j].timeStamp1,globalArrayWithLocationAndImsi[j].cellName, globalArrayWithLocationAndImsi[j].bts,globalArrayWithLocationAndImsi[j + 1].latitude, globalArrayWithLocationAndImsi[j + 1].longitude, globalArrayWithLocationAndImsi[j + 1].externalCause, globalArrayWithLocationAndImsi[j + 1].timeStamp1,globalArrayWithLocationAndImsi[j+1].cellName, globalArrayWithLocationAndImsi[j+1].bts]]);
}
dom.byId("daterange").innerHTML = "<i>" + startValString + " and " + endValString + "<\/i>";
});
}
});
Also time extent needs to be refreshed. Note: when the dropdown changes I call the entire function above. Please suggest a way to refresh the contents to be loaded to the arcGIS map. Thank you in advance