I'm displaying some GeoJSON as markers in Cesium; they do not have altitude, so I'm using clampToGround: true. This all works.
When I try to label the markers, the labels only display when I'm zoomed far out. When I zoom in the labels disappear "underground", which is under the Terrain "layer".
How to solve this? I've looked at this, but it didn't help in my case. This neither.
The code:
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain(),
timeline: false, // Hide clock thing
animation: false, // ditto
});
// Add Cesium OSM Buildings, a global 3D buildings layer.
const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
// Fly the camera to the given longitude, latitude, and height.
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(11.952996, 57.671910, 400),
orientation : {
heading : Cesium.Math.toRadians(0.0),
pitch : Cesium.Math.toRadians(-15.0),
}
});
var promise = Cesium.GeoJsonDataSource.load('data/botaniska_play.geojson', {
clampToGround: true,
markerColor: Cesium.Color.DARKGREEN,
});
promise.then (function (dataSource) {
viewer.dataSources.add (dataSource);
var entities = dataSource["_entityCollection"]["_entities"]["_array"];
entities.forEach (entity => {
// Add (and poistion?) label
entity.label = new Cesium.LabelGraphics ({
text: entity['_properties']['art']._value,
//eyeOffset: new Cesium.Cartesian3 (0, 10, 0),
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0.0, -40.0), // Show above ground?
});
});
});
Snippet of the geojson:
{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[11.9531552705143,57.6814657645123]},"properties":{"ogc_fid":6,"geom":"{\"type\":\"Point\",\"coordinates\":[11.9531552705143,57.6814657645123]}","plats":"Test Plats","besikt_datum":"2013-06-07","trad_id":"6","art":"Magnolia stellata","status":null,"aldersfas":"Gammalt","hojd":9,"krondiameter":9,"stamdiameter":56,"skador":"Lindriga","vitalitet":"God","anmarkningar":"Vackert","rekommendationer":null,"risk":"Låg","resterande_risk":"-","atgards_datum":null,"atgard_gjort":null,"nasta_besiktning":"2014-06-07","stabiliserings_datum":null}},{"type":"Feature","geometry":{"type":"Point","coordinates":[11.9500765558289,57.6815427053798]},"properties":{"ogc_fid":21,"geom":"{\"type\":\"Point\",\"coordinates\":[11.9500765558289,57.6815427053798]}","plats":null,"besikt_datum":"2017-06-09","trad_id":null,"art":"Acer griseum","status":null,"aldersfas":"Vuxet","hojd":9,"krondiameter":8,"stamdiameter":50,"skador":null,"vitalitet":"God","anmarkningar":"Alléträd högt naturvärde\n","rekommendationer":null,"risk":"Låg","resterande_risk":null,"atgards_datum":null,"atgard_gjort":null,"nasta_besiktning":null,"stabiliserings_datum":null}},{"type":"Feature","geometry":{"type":"Point","coordinates":[11.9514171990732,57.6828566964894]},"properties":{"ogc_fid":3,"geom":"{\"type\":\"Point\",\"coordinates\":[11.9514171990732,57.6828566964894]}","plats":"Test Plats","besikt_datum":"2013-06-07","trad_id":"3","art":"Populus siemonii","status":null,"aldersfas":"Gammalt","hojd":15,"krondiameter":14,"stamdiameter":60,"skador":"Inga","vitalitet":"God","anmarkningar":"Fin","rekommendationer":null,"risk":"Låg","resterande_risk":"-","atgards_datum":null,"atgard_gjort":null,"nasta_besiktning":"2014-06-07","stabiliserings_datum":null}} ...
Try add disableDepthTestDistance: Number.POSITIVE_INFINITY to LabelGraphics options
I have two objects in right and left side of window.
I want to zoom those objects individually when I hover it.
var itsLeftControls, itsRightControls;
itsRightControls = new THREE.TrackballControls(itsRightCamera);
itsLeftControls = new THREE.TrackballControls(itsLeftCamera);
document.getElementById('SubContainerLeft').onmouseover = function () {
aMouseOverActivate(itsLeftControls);
aMouseOverDeactivate(itsRightControls);
};
document.getElementById('SubContainerRight').onmouseover = function () {
aMouseOverActivate(itsRightControls);
aMouseOverDeactivate(itsLeftControls);
};
function aMouseOverActivate(theControl)
{
theControl.zoomSpeed = 0.8;
}
function aMouseOverDeactivate(theControl)
{
theControl.zoomSpeed = 0.0;
}
function animateLeft()
{
requestAnimationFrame(animateLeft);
renderLeft();
}
function renderLeft()
{
itsLeftControls.update();
itsLeftRenderer.render(itsLeftScene, itsLeftCamera);
}
function animateRight()
{
requestAnimationFrame(animateRight);
renderRight();
}
function renderRight()
{
itsRightControls.update();
itsRightRenderer.render(itsRightScene, itsRightCamera);
}
if I hover in left side and try to zoom with mouse scrolling wheel, it is working fine. after that when I hover in right side, I can see that same zooming effect in right side also without scrolling mouse.
How to fix this?
TrachballControls take a optional second argument that is the dom element onto which it will attach the mouse event listeners.
If this argument is not supplied, it will attach the event listeners to the document.
This means that both your trackball controls are listening for events on the document (rather than their respective containers which I think you want.)
So just send your scene container divs as the second arguments to TrackballControlls and you should be good to go.
var leftContainer = document.getElementById('SubContainerLeft');
var rightContainer = document.getElementById('SubContainerRight');
var itsRightControls = new THREE.TrackballControls(itsRightCamera, rightContainer);
var itsLeftControls = new THREE.TrackballControls(itsLeftCamera, leftContainer);
With ref. to above subject, I am using wookmark plugin to scroll our home page data dynamically….I have studied the tutorial provided on wookmark and I m using the exact script provided by wookmark and working fine shorts of not 100% working.
Things it stucks when it reaches at bottom of the window then we slightly press the up arrow key, that loads the products again and this is happens randomly some time it scrolls perfectly and some time it stucks and if presses up arrow key it starts working again.
Kindly help me out where I m going wrong. Kindly provide me the easy working script for the same.
I m using following code :
(function ($) {
$('#main').imagesLoaded(function () {
var handler = null;
// Prepare layout options.
var options = {
itemWidth: 200, // Optional min width of a grid item
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#main'), // Optional, used for some extra CSS styling
offset: 20, // Optional, the distance between grid items
outerOffset: 20, // Optional the distance from grid to parent
flexibleWidth: 300 // Optional, the maximum width of a grid item
};
function applyLayout() {
$('#main').imagesLoaded(function () {
// Destroy the old handler
if (handler.wookmarkInstance) {
handler.wookmarkInstance.clear();
}
// Create a new layout handler.
handler = $('#display li');
handler.wookmark(options);
});
handler.wookmark(options);
}
/**
* When scrolled all the way to the bottom, add more tiles.
*/
function onScroll(event) {
// Check if we're within 100 pixels of the bottom edge of the broser window.
var winHeight = window.innerHeight ? window.innerHeight : $(window).height(); // iphone fix
//var closeToBottom = ($(window).scrollTop() >= $((document)).height() - $((window)).height() - $("#footer").height() - 500); //(($(window).scrollTop() - 100)); //+ "%"
var closeToBottom = ($(window).scrollTop() + winHeight > $(document).height() - 100);
if (closeToBottom) {
// Get the first then items from the grid, clone them, and add them to the bottom of the grid.
var items = $('#display li'),
firstTen = items.slice(0, 10);
//$('#display').append(firstTen.clone());
applyLayout();
}
};
// Capture scroll event.
$(window).bind('scroll', onScroll);
// Call the layout function.
handler = $('#display li');
handler.wookmark(options);
});
$(window).load(function () {
handler.wookmark(options);
});
})(jQuery);
If you commented out
//$('#display').append(firstTen.clone());
then the new items will not be loaded on the end of list. You need to uncomment that line to get new items.
In real life instead of
var items = $('#display li'),
firstTen = items.slice(0, 10);
$('#display').append(firstTen.clone());
you would need a code that will load new items.
Also I think it might make sense to change > to >=
var closeToBottom = ($(window).scrollTop() + winHeight >= $(document).height() - 100);
to load new items if scroll position is more or equal to the height of window - 100, where 100 is just some value - you could try 200 or even more to see if it will work better for you.
First of, newbie here. SO please bear with my question. :)
Let's say I have a location(lat/long) extracted from my database, and I want to use this location as the position of where the marker is plotted in the map.
How to do?
I've tried implementing some codes I've found here, but doesn't seem to work for me.
Here's what I have so far:
var center;
var myLatlng;
function initialize() {
myLatlng = new google.maps.LatLng(document.getElementById("txtLatLng"));
var mapOptions = {
zoom: 12,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addDomListener(window, 'load', initialize);
I'm trying to replace the value of myLatLng variable with txtbox value, but no luck.
PS. I'm aware that this is on event load. which leads me to my 2nd question, how to do all of this in event btnClick?
Thanks in advance!
Check example at jsbin.
You can use one input field as you started but you have to parse it. I left it there and add basic parsing. That part is not triggered with button click.
For me it's better to have separate input field for latitude and longitude: added two input fields and button which triggers function:
function setMarker() {
var latitude = latEl.value;
var longitude = lngEl.value;
if (latitude == '' || longitude == '') {
console.log('lat or lng not defined');
return;
}
var position = new google.maps.LatLng(parseFloat(latitude),
parseFloat(longitude));
var marker = new google.maps.Marker({
position: position,
map: map
});
map.setCenter(position);
}
setCenter() is called to position marker to the center. Otherwise it could happen that it is off the visible part.
I'm a newbie to jQuery and I have a map with a highlight plugin, when mouse over an area I want to change the text in a div with an ID and the text I will get it from the area attribute Alt="some text"
Here is the code that used for area loops, I'm pretty sure I can add a small function here but I couldn't figure it out.
//map
clicks$(".tabs area").click(function(){
//areas loop:
$(".tabs area").each(function(){
var d = $(this).data('maphilight') || {};
if(d.alwaysOn == true){
d.alwaysOn = false;
}
});
var data = $(this).data('maphilight') || {};
data.alwaysOn = true;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
if ($(this).hasClass("current") == false)
{
var thisTarget = $(this).attr("href");
$(this).parents(".tabs").find('area.current').removeClass('current');
$(this).addClass('current');
$(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function() {
$(thisTarget).fadeIn("fast");
});
}
return false;
});
Any help or suggestions on how I can get this done would be highly appreciated.
I'm not familiar with the highlights plugin, but I think you just wanna add a mouseover event to each area like so (you would place this before/after your .click declaration):
$(".tabs area").mouseover(function() {
var alt_text = $(this).attr('alt');
$("#YOUR_TEXT_DIV_ID").html(alt_text);
}).mouseout(function() {
//do something on mouseout
});