following the example on the google developpers website, I would like to have an infowindow open on click within the results of a search (instead of just the tile on hover)
There are a few similar questions but I did't find an answer that does just this.
Can somebody tell me how to fix it please ?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
.controls {
margin-top: 16px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
#pac-input:focus {
border-color: #4d90fe;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
</style>
<title>Places search box</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script>
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
function initialize() {
var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
map.fitBounds(defaultBounds);
// Create the search box and link it to the UI element.
var input = /** #type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** #type {HTMLInputElement} */(input));
// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
// [END region_getplaces]
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#target {
width: 345px;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>
</body>
</html>
Thanks.
For some reason, I can't make a jsfiddle with this (maybe it's a domain permission issue) and I can't upload an image since i'm new here
Try putting this into a jsfiddle referencing https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places in the External Resources.
After an address/place is selected from the searchbox, the marker and infoWindow render with the infoWindow open and populated.
<div id="map_canvas"></div>
<div id="locationField">
<input id="autocomplete" name="autocomplete" type="text" placeholder="Location Search" onFocus="geolocate()" />
</div>
function initialize() {
var placeSearch;
var mapOptions = {
center: new google.maps.LatLng(41.877461, -87.638085),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
disableDefaultUI: true,
streetViewControl: false,
panControl: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var input = /** #type {HTMLInputElement} */
(
document.getElementById('autocomplete'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
google.maps.event.addListener(autocomplete, 'place_changed', function () {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(12); // Why 17? Because it looks good.
}
marker.setIcon( /** #type {google.maps.Icon} */ ({
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(25, 34),
scaledSize: new google.maps.Size(50, 50)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
'Place ID: ' + place.place_id + '<br>' + place.formatted_address);
infowindow.open(map, marker);
});
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
});
}
}
}
initialize();
html, body, #map_canvas {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#autocomplete {
height: 60px;
width: 100%;
border: 2px solid #fff;
color: #1c1c1c;
font-size: 15px;
text-align: center;
background-color: #fff;
font-family: Roboto;
font-weight: 300;
text-overflow: ellipsis;
}
#autocomplete:focus {
border-color: #4d90fe;
}
Related
I changed images "id" and now they aren't clickable, before I make these changes just first image was clickable and opens on click. Where is "mistake"?
<img id="myImg74" src="https://cdn.shopify.com/s/files/1/0414/1626/1789/files/WhatsApp_Image_2020-10-26_at_13.22.37_600x600.jpg?v=1603779634" alt="" width="300" height="300">
<img id="myImg75" src="https://cdn.shopify.com/s/files/1/0414/1626/1789/files/WhatsApp_Image_2020-10-26_at_13.22.38_600x600.jpg?v=1603779652" alt="" width="300" height="300">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
var arr = ["myImg0","myImg1","myImg2", "myImg3", "myImg4", "myImg5", "myImg6",
"myImg7", "myImg8", "myImg9", "myImg10", "myImg11", "myImg12", "myImg13",
"myImg14", "myImg15", "myImg16", "myImg17", "myImg18", "myImg19", "myImg20", "myImg21", "myImg22", "myImg23", "myImg24", "myImg25", "myImg26", "myImg27", "myImg28", "myImg29", "myImg30", "myImg31", "myImg32", "myImg33", "myImg34", "myImg35", "myImg36", "myImg37", "myImg38", "myImg39", "myImg40", "myImg41", "myImg42", "myImg43", "myImg44", "myImg45", "myImg46", "myImg47", "myImg48", "myImg49", "myImg50", "myImg51", "myImg52", "myImg53", "myImg54", "myImg55", "myImg56", "myImg57", "myImg58", "myImg59", "myImg60", "myImg61", "myImg62", "myImg63", "myImg64", "myImg65", "myImg66", "myImg67", "myImg68", "myImg69", "myImg70", "myImg71", "myImg72", "myImg73", "myImg74", "myImg75"];
for(var i=0;i< arr.length;i++)
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById(arr[i]);
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
SOLVED!!!
<div id="myModal" class="modal">
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = $('.myImg');
var modalImg = $("#img01");
var captionText = document.getElementById("caption");
$('.myImg').click(function(){
modal.style.display = "block";
var newSrc = this.src;
modalImg.attr('src', newSrc);
captionText.innerHTML = this.alt;
});
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
HEAD!!!
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ffffff;
padding: 10px 10px;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
</style>
</head> ~~~
I am having difficulty displaying and toggling layers on and off. I have followed the tutorial: https: // www. mapbox. com /mapbox-gl-js/example/toggle-layers/
From the tutorial and other help documents it is not clear what values i should be using. All my data and styles have been created using Mapbox Studio. I am confused about the different values for addLayer 'source' , 'source-layer' vs addSource.
In this help file: https://www.mapbox.com/help/mapbox-gl-js-fundamentals/ - it makes no mention of addSource, suggesting that it isn't needed at all, but when i exclude this from my code it doesn't display map layers correctly - why is this?
You can see my map here: http://www.heavenlygardens.org.uk/maps/6/index3.html
Please can someone explain specifically what i'm doing wrong?
You don't need to add the layer again since you have added it in mapbox studio
The layer name which you give in the mapbox studio should be used to show and hide them
Since you have named the Heavenly Gardens layer as hg in mapbox studio same has to be used here
mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuaWlzaCIsImEiOiJ5dzJfM19rIn0.s8DcOH767tjpUznJhAAkaw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/daniish/cj1m2ndxd001j2spd09ne38vm',
zoom: 14.5,
center: [1.2964, 52.6291]
});
var toggleableLayerIds = [ 'hg', 'Churchyards' ];
for (var i = 0; i < toggleableLayerIds.length; i++) {
var id = toggleableLayerIds[i];
var link = document.createElement('a');
link.href = '#';
link.className = 'active';
link.textContent = id;
link.onclick = function (e) {
var clickedLayer = this.textContent;
e.preventDefault();
e.stopPropagation();
var visibility = map.getLayoutProperty(clickedLayer, 'visibility');
if (visibility === 'visible') {
map.setLayoutProperty(clickedLayer, 'visibility', 'none');
this.className = '';
} else {
this.className = 'active';
map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
}
};
var layers = document.getElementById('menu');
layers.appendChild(link);
}
#menu {
background: #fff;
position: absolute;
z-index: 1;
top: 10px;
right: 10px;
border-radius: 3px;
width: 120px;
border: 1px solid rgba(0,0,0,0.4);
font-family: 'Open Sans', sans-serif;
}
#menu a {
font-size: 13px;
color: #404040;
display: block;
margin: 0;
padding: 0;
padding: 10px;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,0.25);
text-align: center;
}
#menu a:last-child {
border: none;
}
#menu a:hover {
background-color: #f8f8f8;
color: #404040;
}
#menu a.active {
background-color: #3887be;
color: #ffffff;
}
#menu a.active:hover {
background: #3074a4;
}
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css" rel="stylesheet"/>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js"></script>
<nav id="menu"></nav>
<div id="map"></div>
I am using a custom map on my node add form. My marker is set to my current location using lat and log. Now I want, whenever a user will drag or move map, marker should be in center (fixed). I tried lot of things like:
$cordovaGeolocation.getCurrentPosition(options).then(function(position) {
$scope.latlong = position.coords.latitude + "," + position.coords.longitude;
$rootScope.lati= position.coords.latitude ;
$rootScope.long = position.coords.longitude;
$scope.map.center = {
lat: position.coords.latitude,
lng: position.coords.longitude,
zoom: 20
};
$scope.map.markers.now = {
lat: position.coords.latitude,
lng: position.coords.longitude,
message: "Usted esta aqui!",
draggable: false,
focus: true
};
if ($rootScope.locationresults == undefined) {
Util.getAddressOf(position.coords.latitude, position.coords.longitude).then(function(location) {
$rootScope.locationresults = location[0].formatted_address;
console.log(location);
}, function(error) {
console.error(error);
});
}
$scope.$on("leafletDirectiveMap.move", function(event, args) {
$scope.map.markers.now.setLatLng([0,0]).update();
//$scope.map.markers.now.lat = $scope.map.center.lat;
//$scope.map.markers.now.lng = $scope.map.center.lng;
console.info(JSON.stringify($scope.map.markers.now));
});
$scope.$on("leafletDirectiveMap.drag", function(event, args){
console.log(JSON.stringify($scope.map.center));
//$scope.map.markers.now.setLatLng(0,0);
$scope.map.markers.now.lat = $scope.map.center.lat;
$scope.map.markers.now.lng = $scope.map.center.lng;
});
$scope.$on("leafletDirectiveMarker.dragend", function(event, args) {
console.log("moviendo");
$rootScope.lati= args.model.lat ;
$rootScope.long = args.model.lng;
Util.getAddressOf(args.model.lat, args.model.lng).then(function(location) {
$rootScope.locationresults = location[0].formatted_address;
$scope.latlong = args.model.lat + "," + args.model.lng;
console.log(location);
}, function(error) {
console.error(error);
});
});
}, function(error) {
console.log(error);
});
You could place a fake marker, placing a div with background image on top of the map and placing it with absolute position and pointing always to the center of the map.
Example:
.map-container{
position: relative;
width: 300px;
height: 400px;
}
.map-marker-centered{
background-image: url('https://img.icons8.com/color/48/000000/marker--v1.png') no-repeat;
width: 50px;
height: 60px;
position: absolute;
z-index: 20;
left: calc(50% - 25px);
top: calc(50% - 60px);
transition: all 0.4s ease;
}
<div class="map-container">
<div class="map-marker-centered"></div>
<div class="map"></div>
</div>
Result:
You can place a "fake" marker composed from a background image placed always at the center of the map. You can also detect when map moves and get the coordinates to where the marker points to. Run the snippet:
var mymap = L.map('mapid').setView([51.505, -0.09], 13)
// add the OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{ subdomains: ['a', 'b', 'c'] })
.addTo(mymap)
mymap.on("moveend", function () {
console.log(mymap.getCenter().toString());
});
.map {
height: 280px;
z-index: 1;
}
.map-container {
position: relative;
width: 300px;
height: 300px;
}
.map-marker-centered {
background-image: url("https://img.icons8.com/color/48/000000/marker--v1.png");
width: 50px;
height: 48px;
position: absolute;
z-index: 2;
left: calc(50% - 25px);
top: calc(50% - 50px);
transition: all 0.4s ease;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<div class="map-container">
<div class="map-marker-centered"></div>
<div id="mapid" class="map"></div>
</div>
I'm trying to make one map where you can toggle between three different layers, and keep the same legend visible for all. I'm currently following this documentation:
http://docs.cartodb.com/tutorials/toggle_map_view.html
My map in CartoDB has three separate layers (w/ three datasets for the years 2013, 2014 and 2015).
I'm trying to make a toggle map like the one in the documentation. Here's what I go so far:
<html>
<head>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.js"></script>
<style>
html, body {width:100%; height:100%; padding: 0; margin: 0;}
#map { width: 100%; height:100%; background: black;}
#menu { position: absolute; top: 5px; right: 10px; width: 400px; height:60px; background: transparent; z-index:10;}
#menu a {
margin: 15px 10px 0 0;
float: right;
vertical-align: baseline;
width: 70px;
padding: 10px;
text-align: center;
font: bold 11px "Helvetica",Arial;
line-height: normal;
color: #555;
border-radius: 4px;
border: 1px solid #777777;
background: #ffffff;
text-decoration: none;
cursor: pointer;
}
#menu a.selected,
#menu a:hover {
color: #F84F40;
}
</style>
<script>
var map;
function init(){
// initiate leaflet map
map = new L.Map('map', {
center: [20,-20],
zoom: 3
})
L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
attribution: 'Mapbox Terms & Feedback'
}).addTo(map);
var layerUrl = 'http://heathermartino.cartodb.com/api/v2/viz/415f8ed2-d493-11e4-b129-0e018d66dc29/viz.json';
var sublayers = [];
cartodb.createLayer(map, layerUrl)
.addTo(map)
.on('done', function(layer) {
// change the query for the first layer
var subLayerOptions = {
sql: "SELECT * FROM gdp_2014",
cartocss: "#gdp_2014{marker-fill: #F84F40; marker-width: 8; marker-line-color: white; marker-line-width: 2; marker-clip: false; marker-gdp_2015ow-overlap: true;}"
}
var sublayer = layer.getSubLayer(0);
sublayer.set(subLayerOptions);
sublayers.push(sublayer);
}).on('error', function() {
//log the error
});
//we define the queries that will be performed when we click on the buttons, by modifying the SQL of our layer
var LayerActions = {
GDP_2015: function(){
sublayers[0].setSQL("SELECT * FROM gdp_2015");
return true;
},
GDP_2014: function(){
sublayers[0].setSQL("SELECT * FROM gdp_2014");
return true;
},
GDP_2013: function() {
sublayers[0].set({
sql: "SELECT * FROM gdp_2013 WHERE cartodb_georef_status = true",
//as it is said, you can also add some CartoCSS code to make your points look like you want for the different queries
// cartocss: "#ne_10m_populated_places_simple{ marker-fill: black; }"
});
return true;
}
}
$('.button').click(function() {
$('.button').removeClass('selected');
$(this).addClass('selected');
//this gets the id of the different buttons and cgdp_2015s to LayerActions which responds according to the selected id
LayerActions[$(this).attr('id')]();
});
L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
attribution: 'Mapbox Terms & Feedback'
}).addTo(map);
}
</script>
</head>
<body onload="init()">
<div id='map'></div>
<div id='menu'>
2013
2014
2015
</div>
</body>
</html>
Right now when you click on the different buttons for 2013, 2014 and 2015, nothing happens. For reference, my map in carto is http://cdb.io/1Bzm2tD. Any ideas? Thanks in advance!
You have the layers. No need to run SQL again. This should work.
<html>
<head>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#map {
width: 100%;
height: 100%;
background: black;
}
#menu {
position: absolute;
top: 5px;
right: 10px;
width: 400px;
height: 60px;
background: transparent;
z-index: 10;
}
#menu a {
margin: 15px 10px 0 0;
float: right;
vertical-align: baseline;
width: 70px;
padding: 10px;
text-align: center;
font: bold 11px "Helvetica", Arial;
line-height: normal;
color: #555;
border-radius: 4px;
border: 1px solid #777777;
background: #ffffff;
text-decoration: none;
cursor: pointer;
}
#menu a.selected,
#menu a:hover {
color: #F84F40;
}
.cartodb-layer-selector-box,
.cartodb-searchbox,
.cartodb-share {
display: none !important;
}
</style>
<script>
var layer;
function init() {
var url = 'http://heathermartino.cartodb.com/api/v2/viz/415f8ed2-d493-11e4-b129-0e018d66dc29/viz.json';
var visualizacion = cartodb.createVis("map", url)
.done(function(vis, layers) {
layer = layers[1];
});
}
function showLayer(layerToShow) {
//turn off all layers
layer.getSubLayers().forEach(function(i) {
i.hide()
});
switch (layerToShow.id) {
case "gdp_2013":
layer.getSubLayer(0).show();
break;
case "gdp_2014":
layer.getSubLayer(1).show();
break;
case "gdp_2015":
layer.getSubLayer(2).show();
break;
}
return true;
}
</script>
</head>
<body onload="init()">
<div id='map'></div>
<div id='menu'>
2013
2014
2015
</div>
</body>
</html>
I have created something similar - see if this helps. The trick for me was getting the sublayers separated with a for loop, then creating the buttons to act on each.
function loadPosition(position) {
lati = position.coords.latitude;
longi = position.coords.longitude;
map = L.map('map', {zoomControl: false}).setView([lati, longi], 15);
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {maxZoom: 19,}).addTo(map);
L.control.scale({position: 'bottomright'}).addTo(map);
/*CARTODB LAYERS*/
var layerSource = {
user_name: 'YOUR USER NAME',
type: 'cartodb',
cartodb_logo: false,
sublayers: [{
sql: "SELECT * FROM winston_survey_tool WHERE point_class LIKE 'Orientation point'",
cartocss: '#winston_survey_tool{marker-fill:#D94C38;marker-opacity:1;line-color:#FFF;line-width:1;line-opacity:1;marker-allow-overlap:true; [zoom >= 15] {marker-width: 15} [zoom >= 19] {marker-width: 20}}'
},
{
sql: "SELECT * FROM winston_survey_tool WHERE point_class LIKE 'Survey point'",
cartocss: '#winston_survey_tool{marker-fill:#E0D03D;marker-opacity:1;line-color:#FFF;line-width:1;line-opacity:1;marker-allow-overlap:true; [zoom >= 15] {marker-width: 15} [zoom >= 19] {marker-width: 20}}'
}]
};
// STORE SUBLAYERS
var sublayers = [];
// ADD LAYER TO MAP
cartodb.createLayer(map,layerSource)
.addTo(map)
.done(function(layer) {
// SEPARATE THE SUBLAYERS
for (i = 0; i < layer.getSubLayerCount(); i++) {
sublayers[i] = layer.getSubLayer(i);
sublayers[i].hide();
};
// BUTTONS
$('#orientationCheck').click(function () {
orientationValue = $("#orientationCheck").val();
var query = "SELECT * FROM winston_survey_tool WHERE date LIKE'%";
yearSelectVal = $("#yearSelect").val();
query = query + yearSelectVal + "' AND point_class LIKE 'Orientation point'";
sublayers[0] = sublayers[0].setSQL(query);
if(orientationValue=="ON"){
sublayers[0].hide();
$('#orientationCheck').val("OFF");
$("#orientationCheck").addClass("off");
}
else{
sublayers[0].show();
$('#orientationCheck').val("ON");
$("#orientationCheck").removeClass("off");
};
});
$('#surveyCheck').click(function () {
surveyValue = $("#surveyCheck").val();
var query = "SELECT * FROM winston_survey_tool WHERE date LIKE'%";
yearSelectVal = $("#yearSelect").val();
query = query + yearSelectVal + "' AND point_class LIKE 'Survey point'";
sublayers[1] = sublayers[1].setSQL(query);
if(surveyValue=="ON"){
sublayers[1].hide();
$('#surveyCheck').val("OFF");
$("#surveyCheck").addClass("off");
}
else{
sublayers[1].show();
$('#surveyCheck').val("ON");
$("#surveyCheck").removeClass("off");
};
});
});
I'm using the Oculus plugin with Cesium and I have no problem passing from "Viewer visualization" to "oculus visualization", the point is I'm not able to come back to the "Viewer visualization". How can I reset the scene, and eliminate postprocessing and the frustum offesetting introduced by the oculus plugin?
Thanks in advance.
here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>try</title>
<script src="lib/Cesium/Cesium.js"></script>
<script src="src/canvas-copy.js"></script>
<script src="src/cesium-oculus.js"></script>
<script src="lib/vr.js/vr.js"></script>
<script src="lib/jquery-1.11.1.js"></script>
<style>
#import url(lib/Cesium/Widgets/widgets.css);
body,html {
height: 100%;
}
body {
padding: 0;
border: 0;
margin: 0;
overflow: hidden;
}
#cesiumContainer {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
padding: 0;
font-family: sans-serif;
}
#stereo div {
pointer-events: none;
height: 100%;
width: 50%;
border: 0px solid red;
margin-left: 0px;
float: left;
}
.eyeLeft {
display: 'block';
float: left;
width: 100%;
height: 100%;
border: 0px solid red;
}
.eyeRight {
display: 'none';
float: left;
width: 50%;
height: 100%;
border: 0px solid red;
}
.fullSize {
display: block;
position: relative;
top: 0;
left: 0;
border: none;
width: 100%;
height: 100%;
}
.myButton{
position: absolute;
left: 10px;
border: 1px solid #edffff;
}
#oculus{
top: 8%;
}
#viewer{
top: 12%;
}
</style>
</head>
<body>
<div style="width: 100%; height: 100%">
<div id="cesiumContainerLeft" class="eyeLeft"></div>
<div id="cesiumContainerRight" class="eyeRight"></div>
</div>
<button id="oculus" type="button" class="cesium-button myButton" title="oculus">oculus</button>
<button id="viewer" type="button" class="cesium-button myButton" title="viewer">viewer</button>
<!-- library -->
<script src="src/cesium-oculus.js"></script>
<script src="src/canvas-copy.js"></script>
<!-- app -->
<script>
//-------------------------------INITIAL SETTINGS--------------------
//create the viewer in the left div
var viewer = new Cesium.Viewer('cesiumContainerLeft');
viewer.scene.debugShowFramesPerSecond = true;
var canvasL = viewer.canvas;
canvasL.className = "fullSize";
//create the right canvas in the right div
var canvasR = document.createElement('canvas');
canvasR.className = "fullSize";
document.getElementById('cesiumContainerRight').appendChild(canvasR);
$('#oculus').bind('click', { param1: viewer}, oculusRules);
$('#viewer').bind('click', { param1: viewer}, backToViewer);
//--------------------OCULUS VIEW-------------------------------
function oculusRules(event){
$('.eyeRight').css({display: 'block'});
$('.eyeLeft').css({width: '50%'});
var viewer = event.data.param1;
var canvasCopy = new CanvasCopy(canvasR, false);
var cesiumOculus = new CesiumOculus(run);
function run() {
var scene = viewer.scene;
scene.camera.frustum.fovy = Cesium.Math.toRadians(90.0);
var camera = scene.camera;
var eyeSeparation = 2.0;
var tick = function() {
// Render right eye
cesiumOculus.setSceneParams(scene, 'right');
scene.initializeFrame();
scene.render();
canvasCopy.copy(canvasL);
// Render left eye
var originalCamera = scene.camera.clone();
CesiumOculus.slaveCameraUpdate(originalCamera, scene.camera, -eyeSeparation);
cesiumOculus.setSceneParams(scene, 'left');
scene.render();
// Restore state
CesiumOculus.slaveCameraUpdate(originalCamera, scene.camera, 0.0);
Cesium.requestAnimationFrame(tick);
};
tick();
var onResizeScene = function(canvas, scene) {
var supersample = 1.0;
var width = canvas.clientWidth * supersample;
var height = canvas.clientHeight * supersample;
if (canvas.width === width && canvas.height === height) {
return;
}
canvas.width = width;
canvas.height = height;
scene.camera.frustum.aspectRatio = width / height;
};
var onResize = function() {
onResizeScene(canvasL, scene);
onResizeScene(canvasR, scene);
};
window.setTimeout(onResize, 60);
window.addEventListener('resize', onResize, false);
}
}
function backToViewer(event){
$('.eyeRight').css({display: 'none'});
$('.eyeLeft').css({width: '100%'});
var viewer = event.data.param1;
}
</script>
</body>
</html>
We'll soon be adding toggling to the example code to demonstrate this. In the meantime you can view the PR here...
https://github.com/NICTA/cesium-oculus-plugin/pull/5