I was fiddling a bit with Here Maps and with some some of the examples Here Javascript API Explorer and Here Maps on GitHub.
I tried to see if there's already a way to just add a visual bearing attribute in addition to longitude and latitude and have something like a small tip appear to the marker. This feels like something that many would like to have, so just to check I haven't missed anything obvious...
Is there a way to add visual bearing information to markers?
If not, does anyone know if there's an example of using a custom marker to achieve this I just couldn't locate?
There is no bearing/heading control ready available within the API - you will have to create a custom map component of your own. The usual way of doing this would be to inject some HTML as a new DOM element within the map control.
Firstly define your custom HtmlControl as shown:
function extend(B, A) {
function I() {}
I.prototype = A.prototype;
B.prototype = new I();
B.prototype.constructor = B;
}
function HtmlControl (html, id) {
nokia.maps.map.component.Component.call(this);
this.init(html, id);
}
extend(HtmlControl,
nokia.maps.map.component.Component);
HtmlControl.prototype.init = function (html, id) {
that = this;
that.id = id
that.set("node", document.createElement("div"));
that.node.innerHTML = html;
};
HtmlControl.prototype.getId = function() {
return "HtmlControl." + this.id;
};
HtmlControl.prototype.attach = function(map) {
map.getUIContainer().appendChild(this.node);
};
HtmlControl.prototype.detach = function(display) {
map.getUIContainer().removeChild(this.node);
};
Then set up the map and add the custom component as shown:
htmlControl = new HtmlControl(
"<img id='compass' style='left:4em;top:1em;width:100px;height:100px' src='...'/>", "Compass");
map.components.add(htmlControl);
The source file for the <img> element will need to hold the compass image. This is most likely to be an image with due North pointing upwards since the map control is based on the Normalized Mercator projection
Alternatively look at using the Map Image API and investigate the ra parameter to rotate the map.
Related
I was trying Azure maps Symbol feature. I wanted to add a custom image as symbol.
When i used path of local image, it was not working.
"All resources, such as icon images, must be loaded into the WebGL context."
Please help me how to make local image to be loaded as webGL context.
You must add your image to the maps image sprite before you the symbol layer can use it. You would pass the URL and a unique name for the image into the map.imageSprite.add function. This is a Promise that you have to wait for as the image is loaded asynchronously. Once loaded, you can then set the image option of the symbol layers iconOptions to the unique name of the image.
Some additional code samples can be found here: https://samples.azuremaps.com/?sample=custom-symbol-image-icon
Update:
Here is a code block show how to add an image to the maps image sprite (WebGL context).
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Load the custom image icon into the map resources.
map.imageSprite.add('my-custom-icon', '/images/icons/showers.png').then(function () {
//Add a layer for rendering point data as symbols.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
//Pass in the id of the custom icon that was loaded into the map resources.
image: 'my-custom-icon'
}
}));
});
});
If you have multiple images you want to use, you can create an array of the imade add promises, then use Promise.all. Here is a good code sample: https://samples.azuremaps.com/?sample=data-driven-symbol-icons And here is a simply code block example:
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Create an array of custom icon promises to load into the map.
var iconPromises = [
map.imageSprite.add('gas_station_icon', '/images/icons/gas_station_pin.png'),
map.imageSprite.add('grocery_store_icon', '/images/icons/grocery_cart_pin.png'),
map.imageSprite.add('restaurant_icon', '/images/icons/restaurant_pin.png'),
map.imageSprite.add('school_icon', '/images/icons/school_pin.png'),
];
//Load all the custom image icons into the map resources.
Promise.all(iconPromises).then(function () {
//Add a layer for rendering point data as symbols.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
//Use a data driven expression based on properties in the features to determine which image to use for each feature.
image: [
'match',
//In this example each feature has a "EntityType" property that we use to select the appropriate icon.
['get', 'EntityType'],
//For each entity type, specify the icon name to use.
'Gas Station', 'gas_station_icon',
'Grocery Store', 'grocery_store_icon',
'Restaurant', 'restaurant_icon',
'School', 'school_icon',
//Default fallback icon.
'marker-blue'
]
}
}));
});
Can you provide us your code?
I've tried to add local file as image to Azure Maps symbol layer. See examples here: click.
Local file file:///D:/showers.png failed with error: URL scheme must be "http" or "https" for CORS request., but same file on localhost server worked well:
P.S. Maybe I do not clearly understand the problem?
Thanks in advance. I'm trying to figure out how to add client faces (images) to certain locations on a map using the Nokia Here Map Image API.
I am able to do this via the Javascript API, but unfortunately I also need to be able to download an image for use in a generated PDF file, and I can't figure out how to add external images to the map.
Any help would be much appreciated. :)
I didn't exactly understand your requirement but if you want to convert the canvas which shows the map to an Image, you can do that with the map caprutre event, something like following should work
map.capture(function(canvas) {
if (canvas) {
var img = new Image();
img.src = canvas.toDataURL("img/jpeg");
window.open(img.src);
} else {
// For example when map is in Panorama mode
alert('Capturing is not supported');
}
}, [ui], 0, 0, document.getElementById("mapContainer").offsetWidth, document.getElementById("mapContainer").offsetHeight);
The new feature for StreetView API 3 is that there is a label (called description) over the links (arrows of possible movement direction) on panorama.
I can turn on/off the links by the StreetViewPanoramaOptions.linksControl option, but I've found no way to display links without the labels, like in API 2.
I tried to intercept link-change event and overwrite link definitions, but it seems that the StreetViewPanorama.getLinks() returns a copy of the list: there is no effect on panorama image when I change the result array.
Is it possible to do it?
Well, I tried again and find out that my original statement about the links being unmodifiable was incorrect. With the following code, I was able to erase all the labels:
this.displayInContainer = function( container ) {
validatePano = new google.maps.StreetViewPanorama(
document.getElementById(container),
this.currentPanoramaOptions);
var obj = this;
google.maps.event.addListener(validatePano, 'links_changed', function() {
var links = obj.panoObject.getLinks();
for(var i = 0; i < links.length; i++ ) {
links[i].description = "";
}
});
}
How i can remember in older versions of Gmaps API was it possible, to make a custom Overlay for adding a Markers on it and than add or remove from main map. Also it was possible to make different groups of results and show/hide it in only one command. In the new reference i can not find it, did they have rename it?
You're talking about a GLayer - https://developers.google.com/maps/documentation/javascript/v2/reference#GLayer
It has, in fact, been removed from the v3 API.
In API v3, it's been left up to the developer to keep track of their overlays and add/remove them from the map as they wish.
The best way to do this is keep your overlays in an array (or an object) and loop through them.
For example, if you had two distinct sets of overlays (infoWindows and markers), you could do something like this:
var overlays = {
markers : [],
infoWindows : []
};
//create a marker and put it in markers
var marker = new google.maps.Marker();
overlays.markers.push(marker);
//create an infoWindow and put it in infoWindows
var infoWindow = new google.maps.InfoWindow();
overlays.infoWindows.push(infoWindow);
//remove all infoWindows from the map
for(var i=0;i<overlays.infoWindows.length;i++) {
overlays.infoWindows[i].setMap(null);
}
//remove all markers from the map
for(var i=0;i<overlays.markers.length;i++) {
overlays.markers[i].setMap(null);
}
It's a simplistic example, but hopefully you get the idea: that adding, managing, and removing "groups" of overlays in v3 is left up to the developer.
I might be missing something, but it seems that Meteor's "magic" revolves around binding data to DOM elements, and updating text and HTML fragments via handlebars: http://docs.meteor.com/#reactivity
This is great, however, when trying to write a meteor app that displays live data in a <canvas> element, I cannot figure out the "meteor way" to update my canvas when the live data changes, since the canvas is populated via JS code like:
var g = canvas.getContext('2d')
g.fillRect(x, y, w, h)
and not data-backed text in the HTML template.
I am trying to draw on the canvas using data from a Meteor.Collection.
My only thought was to embed canvas-drawing JS code in the HTML template in a script tag populated by handlebar vars, but this seems wrong since meteor's events and data-binding code is already client-side JS.
Is there some way listen for live data changes, which triggers drawing on the canvas via JS instead of HTML elements/text?
Please let me know if I can clarify the question in some way
Update:
Tom's answer below made me notice Meteor.deps, which look to allow executing arbitrary code in a reactive context:
http://docs.meteor.com/#on_invalidate
I will try this out and update here if it works.
Perhaps the answer to your question is to use Collection.observe (http://docs.meteor.com/#observe) and trigger the relevant redrawing code in the various callbacks.
For instance, something like:
Rectangles.observe({
added: function(rect) {
var g = canvas.getContext('2d');
g.fillRect(rect.x, rect.y, rect.w, rect.h);
},
// etc
})
This works:
var Shapes = new Meteor.Collection('shapes')
if (Meteor.is_client) {
// Function that redraws the entire canvas from shapes in Meteor.Collection
function drawShapes() {
var shapes = Shapes.find({})
shapes.forEach(function(shape) {
// draw each on canvas
})
}
var startUpdateListener = function() {
// Function called each time 'Shapes' is updated.
var redrawCanvas = function() {
var context = new Meteor.deps.Context()
context.on_invalidate(redrawCanvas) // Ensures this is recalled for each update
context.run(function() {
drawShapes()
})
}
redrawCanvas()
}
Meteor.startup(function() {
startUpdateListener()
})
}
I had some trouble with updating the canvas so I created this simple game demo:
https://github.com/randompast/Meteor-SimpleGame