Develop Reference

How to add a icon to cesium map instead of point

I want to add icon to a cesium map intead drawing a point.
Currently I doing the below code, but want to replace the point below with an actual icon. I have been looking through the cesium documentation and cannot find anything that will do this. Thanks for any suggestions
var points = scene.primitives.add(new Cesium.PointPrimitiveCollection());
points.add({
position : new Cesium.Cartesian3.fromDegrees(longitude, latitude),
color : colorDot,
outlineColor : Cesium.Color.WHITE,
outlineWidth : width
});

In Cesium, this is called a billboard. They are created in basically the same way as a point, except the image is generally loaded from a URL.
https://cesiumjs.org/Cesium/Build/Documentation/BillboardCollection.html
// Create a billboard collection with two billboards
var billboards = scene.primitives.add(new Cesium.BillboardCollection());
billboards.add({
position : new Cesium.Cartesian3(1.0, 2.0, 3.0),
image : 'url/to/image'
});
billboards.add({
position : new Cesium.Cartesian3(4.0, 5.0, 6.0),
image : 'url/to/another/image'
});

Adding to #paraquat's correct answer about Billboards: Cesium includes a "Pin Builder" that can be used to make typical map icons as billboards. Here's a demo.
var viewer = new Cesium.Viewer('cesiumContainer');
var pinBuilder = new Cesium.PinBuilder();
var url = Cesium.buildModuleUrl('Assets/Textures/maki/grocery.png');
var groceryPin = Cesium.when(pinBuilder.fromUrl(url, Cesium.Color.GREEN, 48), function(canvas) {
return viewer.entities.add({
name : 'Grocery store',
position : Cesium.Cartesian3.fromDegrees(-75.1705217, 39.921786),
billboard : {
image : canvas.toDataURL(),
verticalOrigin : Cesium.VerticalOrigin.BOTTOM
}
});
});

How can i an add image overlay depending on the options in the polygon properties in a leaflet map?

I have a multi-polygon geojson file ( mapInfo ) that has one of the properties named "field_hazards". The hazards include "gale/storm, heavy rain, thunderstorm and Freezing rain "
How can i an add image overlay depending on the field_hazard options?
Note the geojson file is got dynamically as a drupal feed. I have made the following code but it returns an empty map, the polygons are not rendered.
function getImage(d) {
return d === 'Freezing Rain' ? "http://mymap:8082/images/weather-images/43n.png" :
d === 'Thunderstorm' ? "http://mymap:8082/images/weather-images/11.png" :
d === 'Heavy Rain' ? "http://my:8082/weather-images/02n.png" :
d === 'Gale\/Storm' ? "http://mymap:8082/images/weather-images/15.png" :
"http://my:8082/images/weather-images/09.png";
}
var imageUrl = getImage(feature.properties.field_hazards);
var imageLayer = L.imageOverlay(imageUrl, imageBounds).addTo(map).bringToBack();
var boxOptions = {fillOpacity:0, opacity:0, onEachFeature: onEachBox};
//create the image interaction box
var imageBox = L.geoJson(mapInfo, boxOptions).addTo(map);
//zoom in to fit GeoJSON layer
map.fitBounds(imageBox.getBounds());
I have looked at this example " add image to rect polygon in leaflet
", but it requires me to have the image url preset as a property its self.

I got a solution from this link. Posted it in case some else is interested.
Adding image overly in leaflet map from a property

Heatmap.js Leaflet Heatmap

Im Trying to implement a heatmap to Leaflet via the Leafletplugin//www.patrick-wied.at/static/heatmapjs/plugin-leaflet-layer.html,
but for some reason it seams to ignore my "Value" so all datapoints have the same colour
window.onload = function() {
var baseLayer = L.tileLayer(
'http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png',{
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade',
maxZoom: 20
}
);
var cfg = {
// radius should be small ONLY if scaleRadius is true (or small radius is intended)
"radius": 0.00007,
minOpacity: 0.5,
maxOpacity: 1,
// scales the radius based on map zoom
"scaleRadius": true,
// if set to false the heatmap uses the global maximum for colorization
// if activated: uses the data maximum within the current map boundaries
// (there will always be a red spot with useLocalExtremas true)
"useLocalExtrema": false,
// which field name in your data represents the latitude - default "lat"
latField: 'lat',
// which field name in your data represents the longitude - default "lng"
lngField: 'lng',
// which field name in your data represents the data value - default "value"
value: 'sig',
blur:0,
gradient: {
// enter n keys between 0 and 1 here
// for gradient color customization
'1': 'red',
'.3': 'yellow',
'0.9': 'green'
},
};
var heatmapLayer = new HeatmapOverlay(cfg);
var map = new L.Map('map-canvas', {
center: new L.LatLng(52.400458, 13.052260),
zoom: 14,
layers: [baseLayer, heatmapLayer]
});
heatmapLayer.setData(testData);
// make accessible for debugging
layer = heatmapLayer;
};
my data looks like this:
var testData = {
data:[{lat:52.40486, lng:13.04916, sig:30}, {lat:52.40486, lng:13.04916, sig:70}, {lat:52.40496, lng:13.04894, sig:67}, {lat:52.40496, lng:13.04894, sig:72}, {lat:52.40486, lng:13.04916, sig:74}, {lat:52.40486, lng:13.04916, sig:78}, {lat:52.40493, lng:13.04925, sig:67},]}
you can se it live on http://www.frief.de/heatmap/test2.html
would be great if someone has an idea, mybe Im just to stupid

Just a quick suggestion.
Have you tried using the Leaflet.Heatmap plug-in by Vladimir Agafonkin(the author of Leaflet.js himself). It seems it's not listed on the plug-ins page.
I think it's faster and probably will be a better solution: https://github.com/Leaflet/Leaflet.heat
http://mourner.github.io/simpleheat/demo/

I think this is not working because your code is wrong around here:
<div class="wrapper">
<div class="heatmap" id="map-canvas">
</div>
</div>
</script> <----THIS <script src="src/heatmap.js"></script>
<script src="src/leaflet-heatmap.js"></script>
Open link you said is a demo page and inspect code. Fix this orphaned </script tag and see if it's working now.

I know this is old, but I just ran into this issue, so here's how I solved it.
In the library "pa7_leaflet_hm.min.js" there's a part where it sets the min/max values, and it's hardcoded to 1 and 0
this._data = [];
this._max = 1;
this._min = 0;
Apparently this controls the intensity of the spots based on the value, and this is only overwritten if useLocalExtrema is set to false, which would always set it to the highest visible spot.
If you don't wish to always check the highest value based on the visible area, you can just change the this._max value to something higher, or maybe even set it to a value from the config, to expose it
this._data = [];
this._max = (this.cfg.max ? this.cfg.max : 1);
this._min = (this.cfg.min ? this.cfg.min : 0);
this way you would get a more traditional functioning heatmap

How to get whether PointText is hit or not using hitTest in paper.js

I am using paper.js. I have written some text using PointText on canvas. Now I want to select that text by double click.
For this I used hitTest but it tells me only for stroke and segments, not for PointText.
code :
var hit = scope.project.hitTest(e.point, {
segments : true,
stroke : true,
fill : true,
tolerance : 5,
type : 'PointText'
});
scope.project.activeLayer.selected = false;
if (hit && hit.item && hit.item._index > 0) {
var it=hit.type
alert(it)
hit.item.selected = true;
}
Please help me to find solution!

HitTest on PointText was recently fixed. Are you using the latest version?

Titanium Geolocation Not Working in Android Emulator

I get this error:
[ERROR][GeolocationModule( 278)] (KrollRuntimeThread) [633,2564] Unable to get current position, location is null
and I have followed other people's advice without any luck.
Could someone lead me in the right direction? I would be so grateful. Thank you!
var win1 = Titanium.UI.createWindow({
title : 'map_landing',
backgroundColor : '#fff'
});
var win2 = Titanium.UI.createWindow({
title : 'hails_window',
backgroundColor : '#fff'
});
var win3 = Titanium.UI.createWindow({
title : 'cabs_window',
backgroundColor : '#fff'
});
User = {
location : {}
};
var hail_button = Titanium.UI.createButton({
title : 'Hail Cab',
top : 10,
width : 200,
height : 50
});
var find_button = Titanium.UI.createButton({
title : 'Find People',
bottom : 10,
width : 200,
height : 50
});
var options = {
accessKeyId : '',
secretAccessKey : ''
}
Ti.Geolocation.purpose = "Receive user location";
Titanium.Geolocation.getCurrentPosition(function(e) {
if (e.error) {
alert('HFL cannot get your current location');
return;
}
User.location.longitude = e.coords.longitude;
User.location.latitude = e.coords.latitude;
User.location.accuracy = e.coords.accuracy;
User.location.speed = e.coords.speed;
User.location.timestamp = e.coords.timestamp;
var mapview = Titanium.Map.createView({
mapType : Titanium.Map.STANDARD_TYPE,
region : {
latitude : User.location.latitude,
longitude : User.location.longitude,
latitudeDelta : 0.01,
longitudeDelta : 0.01
},
animate : true,
regionFit : true,
userLocation : true
});
win1.add(mapview);
win1.add(hail_button);
win1.add(find_button);
hail_button.addEventListener('click', function(e) {
alert('hello');
$.ajax('http://hail.pagodabox.com/add_hail', {
type : 'POST',
lat : User.location.latitude,
lang : User.location.longitude,
success : function(response) {
alert(response)
}
})
});
find_button.addEventListener('click', function(e) {
});
win1.open();
});

It took me some time to track this down, but I think I've found the steps needed to "fix" the lack of a location in the Android emulator (from this answer):
First, open ddms (Dalvik Debug Monitor). On Windows, navigate to the
android-sdk\tools directory and run ddms.bat. The first line in the
top-left pane will read something like "emulator-####" such as
emulator-5560.
Open a command prompt window. Enter 'telnet localhost ####'
substituting the number you found above. This will open a telnet
window to your android emulator.
Enter the following command (substitute your own longitude & latitude,
in that order, if you'd like):
geo fix -82.411629 28.054553
(I'm pretty sure you can add elevation as a third number.) The GPS
icon will appear in the emulator's notification bar. Geolocation is
now available. At this point, I could get location data in my app and
in other apps, such as Maps.