Is there a way to put images on an infobox in bing maps? Thanks everyone.
Yes, supply your own html via the htmlContent Property. You can make the infobox appear however you'd like.
You can add HTML through the htmlContent Property, which is added in the options hash. For example:
var infoboxOptions = {
width :200,
height :100,
showCloseButton: true,
zIndex: 0,
offset:new Microsoft.Maps.Point(10,0),
showPointer: true,
htmlContent:'<img src="source/of/image></img>"'
};
Related
I have a mapbox marker pop up and i want to remove the "x"(close) symbol as it is over my text. I have searched and couldn't find a solution for this. Thanks for reading.
This is how it looks now.
Set closebutton = false
Like:
this.#popup = new Popup({
closeButton: false,//<----
closeOnClick: false,
closeOnMove: true,
maxWidth: "auto"
});
Read here
Just a quick question, if anyone has ever replaced the Mapbox default marker with a Maki icon. I've only seen examples of using Maki icons for point tilesets/layers, but I'm wanting to use it for non-tileset features, specifically replacing the marker that adds after geocoding, at the location of the address just geocoded.
Or, trying to find something that is similar to Google Maps symbols below. Any suggestions appreciated.
var pinImage = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#ff4b00',
fillOpacity: .9,
scale: 5,
strokeColor: '#CDDC39',
strokeWeight: 0,
strokeOpacity: .5
}
The MapboxGeocoder control has a marker option https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#parameters which controls the marker placed on the map when you select a result.
There is an example at https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/ to create a Marker with a custom icon.
So you could create an HTML Element which contains either an SVG or PNG icon from Maki and use that as your element in your custom Marker passed to the MapboxGeocoder control.
I think this sample is what you are looking for Use a custom render function with a geocoder
It allows you to add a custom render function including the icon...
var geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
types: 'poi',
// see https://docs.mapbox.com/api/search/#geocoding-response-object for information about the schema of each response feature
render: function(item) {
// extract the item's maki icon or use a default
var maki = item.properties.maki || 'marker';
return (
"<div class='geocoder-dropdown-item'><img class='geocoder-dropdown-icon' src='https://unpkg.com/#mapbox/maki#6.1.0/icons/" +
maki +
"-15.svg'><span class='geocoder-dropdown-text'>" +
item.text +
'</span></div>'
);
},
mapboxgl: mapboxgl
});
map.addControl(geocoder);
I want to show a single world map and wrap it around so that each area is shown only once on the screen. Please refer the fiddle http://jsfiddle.net/8m13d6vs/
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osm = L.tileLayer(osmUrl, {
noWrap: false,
attribution: "<a href='http://openstreetmap.org'>OpenStreetMap</a>"
});
var map = L.map('map').setView([0, 0], 1).addLayer(osm);
In the above fiddle, wrap is on, but the world map is duplicated. I want a single world map, and on left/right mouse drag, it should wrap around. It should be responsive to the area as well. Is there any way to achieve this? Hope my problem statement is understandable.
There's the Leaflet worldCopyJump option:
var map = L.map('map', {worldCopyJump: true}).setView([0, 0], 1).addLayer(osm);
It defaults to false, but setting this to true will copy the contents of the map over as the user pans beyond the map boundaries.
This sounds like a misunderstanding of the definition of "wrap":
In the context of Leaflet's Tile Layer / Grid Layer option noWrap, it says:
Whether the layer is wrapped around the antimeridian. If true, the GridLayer will only be displayed once at low zoom levels.
So it sounds like simply noWrap: true should achieve your objective.
Updated JSFiddle: http://jsfiddle.net/8m13d6vs/3/
BTW you should consider upgrading Leaflet version to 1+
I am use leaflet-directive to create map using leaflet.
Is it possible to remove leaflet link and OSM copyright from the map.
I wish to put in leaflet image instead.
When creating the map object, try this:
var map = L.map('map', { attributionControl:false });
It worked for me
A reference to the attribution control instance is being stored in the attributionControl property of your L.Map instance:
var map = new L.Map('map').setView([0, 0], 0);
attribution = map.attributionControl;
When you've got that you can use the setPrefix method to set a new prefix:
attribution.setPrefix('<img src="image.png">');
http://leafletjs.com/reference.html#control-attribution-setprefix
It's probably not legal to remove copy-right information, but if you're familiar with javascript search in the leaflet code for
'leaflet-control-attribution'
Greetings
I'm following the example here but I don't get to see the text, only the pushpins themselves. What can I be missing?
for (index in centers)
map.entities.push(new Microsoft.Maps.Pushpin(centers[index]),
{ text: "A", visible: true, textOffset: new Microsoft.Maps.Point(0, 5) });
The array centers is just a set of points and, since I get the pushpins to appear at the right locations, I believe that the error is in the options.
Note that I'm trying to reuse the default pushpins as far as I can and intentionally omit the custom icon. In case I have to use a custom icon (which would be a shame), where can I find a set of pushpins looking like the default one (possibly in various colors)?
From bing interactive sdk.
Just delete the line with the custom pin from you pushpinOptions and you will get the default push pin with text.
The error in you code that you pass the pushpinOptions as parameter to map.entities.push method, but the options is a parameter of new Microsoft.Maps.Pushpin method.
var offset = new Microsoft.Maps.Point(0, 5);
var pushpinOptions = { text : '1', visible: true, textOffset: offset};
var pushpin= new Microsoft.Maps.Pushpin(
new Microsoft.Maps.Location(47.6, -122.33),
pushpinOptions);
map.entities.push(pushpin);