I would like to add images to my pushpin infoboxes but I am not sure how. I thought maybe htmlContent would do this but then the info box seems to be overwritten.
I really don't want to create a new popout just add images to the existing one. Is this possible?
Use HTML and an img tag, then pass this in as the description value of the infobox. Here is a simple code sample:
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key',
center: new Microsoft.Maps.Location(47.60357, -122.32945)
});
var center = map.getCenter();
var infobox = new Microsoft.Maps.Infobox(center, { title: 'Map Center',
description: 'Here is my image: <img src="https://www.bingmapsportal.com/Content/images/poi_custom.png" />' });
infobox.setMap(map);
Related
I am trying to display my custom map from Mapbox in Openlayers 5.3.0. I am trying to follow the example HERE.
I am able to show the standard Mapbox background, but as soon as I change to my personal map style it breaks and shows a blank screen...
Here is example code:
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3ZlbnB0IiwiYSI6ImNqc2Vxa3Q5MzBqcTAzeW1kOWRiajV4ZzYifQ.xpDqTM6B41sS6QjZPwb6yQ' //this works
/*
url: 'https://api.mapbox.com/styles/v1/svenpt/cjsbq6vq716ye1fpgw10kvitp.html?access_token=pk.eyJ1Ijoic3ZlbnB0IiwiYSI6ImNqc2Vxa3Q5MzBqcTAzeW1kOWRiajV4ZzYifQ.xpDqTM6B41sS6QjZPwb6yQ' //this doesn't work
url: 'https://api.mapbox.com/styles/v1/svenpt/cjsbq6vq716ye1fpgw10kvitp.html/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3ZlbnB0IiwiYSI6ImNqc2Vxa3Q5MzBqcTAzeW1kOWRiajV4ZzYifQ.xpDqTM6B41sS6QjZPwb6yQ' //this doesn't work either
*/
})
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
Credits to Mike for the answer!
The correct url is:
url: 'https://api.mapbox.com/styles/v1/svenpt/cjsbq6vq716ye1fpgw10kvitp/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3ZlbnB0IiwiYSI6ImNqc2Vxa3Q5MzBqcTAzeW1kOWRiajV4ZzYifQ.xpDqTM6B41sS6QjZPwb6yQ'
I had to delte the .html from:
url: 'https://api.mapbox.com/styles/v1/svenpt/cjsbq6vq716ye1fpgw10kvitp.html/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3ZlbnB0IiwiYSI6ImNqc2Vxa3Q5MzBqcTAzeW1kOWRiajV4ZzYifQ.xpDqTM6B41sS6QjZPwb6yQ'
I am using Mapbox GL directions plugin inside my app where I set the origin on map load and set driving destination upon user click on any location on the map. I am now trying to remove the top left search origin / destination box yet after extensive research can't figure out how to do so, can someone please help by telling me how to do so? Thanks.
Code I am using in my app below:
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v8',
center: [userCoordinates.coords.longitude, userCoordinates.coords.latitude],
zoom: 15
});
var directions = new mapboxgl.Directions({
unit: 'metric',
profile: 'driving'
});
map.addControl(directions);
directions.setOrigin([userCoordinates.coords.longitude, userCoordinates.coords.latitude]);
map.on('click', function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['gsLayer'] });
if (!features.length) {
return;
}
var feature = features[0];
directions.setDestination([feature.geometry.coordinates[0], feature.geometry.coordinates[1]]);
});
I couldn’t figure this out either since there is no documentation, but finally I read through the mapbox-gl-directions.js file and I think I found out how to do it.
In your example, you should embed the controls like this in order to remove the origin / destination box:
var directions = new mapboxgl.Directions({
unit: 'metric',
profile:'driving',
container:'directions', // Specify an element thats not the map container.
// UI controls
controls: {
inputs: false,
instructions: true
}
});
map.addControl(directions);
I'll assume you are using Mapbox GL Javascript, and looking at this example it appears map.addControl(new mapboxgl.Directions()); is what is adding the controller. Within your code you gave you also have this map.addControl(directions);. Try removing it and see what happens.
Hope this helps!
I am creating a map page with a single image,
and I would like to use GeoLocation to show where the user is as a blue dot (somewhat like iOS maps).
I already have the JavaScript for finding the location, and it works great.
I just need help with how to place a marker - just a simple image - on the page according to the output of position.coords.latitude and position.coords.longitude.
Is there any way that this can be done, and if so, how?
Thanks in advance.
You can simply use GMarker in your javascript, something like this:
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
You can customize its image like that:
var image = 'beachflag.png';
marker.icon = image;
I am showing custom marker with click event on it. It shows information when I clicked but the info window is not showing well. I used some css in it. I also need to customize it further. This map is shown in phonegap app in iPhone (iOS 5). Every other thing working find (including direction, GPS).
I have used google map js v3 API.
I got this output.
How to show correct infoWindow? And customize as my need.
here is the code
function setMap(myLat, myLng){
// Define Marker properties
var image = new google.maps.MarkerImage('images/pick.png',
new google.maps.Size(30, 40),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 9,36.
new google.maps.Point(9, 36)
);
var my_place = new google.maps.LatLng(myLat, myLng);
var myOptions = {
zoom:14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
center: my_place
}
mer_map = new google.maps.Map(document.getElementById("mer_map_canvas"), myOptions);
mer_marker = new google.maps.Marker({
position: my_place,
map: mer_map,
clickable : true,
animation: google.maps.Animation.DROP,
icon: image
});
var contentString = '<div id="mer_map_info" style="border:3px solid red; color:#FFF; background-color:#000;"><p>this is just a test...</p></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(mer_marker, 'click', function(event) {
infowindow.open(mer_map,mer_marker);
});}
Give this a try. I had a similar problem with phonegap and google maps.
#map_canvas img {
max-width: none;
}
I use Bing Maps Ajax V7. I want on right click to get an infobox and show my links inside.
function GetMap(){
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:""});
attachrightclick = Microsoft.Maps.Events.addHandler(map, 'rightclick',showPopupMenu);
}
function showPopupMenu(e){
var latlong = new Microsoft.Maps.Location(e.getY(),e.getX());
var defaultInfobox = new Microsoft.Maps.Infobox(latlong, {title: '<div>My Pushpin<div>', visible: true} );
map.entities.push(defaultInfobox);
}
Infobox added but unfortunately have no sense with to point I clicks... I adds on other latlon...
Have a anyone an idea:
1)How to make info window load on position where I right click.
2)Disable default right click of browser so only shows info box and not and right click menu
Thanks a lot.
Question number 1:
var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), null);
pushpinClick= Microsoft.Maps.Events.addHandler(pushpin, 'rightclick', displayEventInfo);
map.entities.push(pushpin);
function displayEventInfo(e){
var pushpin = e.target;
var infoboxOptions = {width :200, height :100, showCloseButton: true, zIndex: 0, offset:new Microsoft.Maps.Point(10,0), showPointer: true};
var defaultInfobox = new Microsoft.Maps.Infobox(pushpin.getLocation(), infoboxOptions );
map.entities.push(defaultInfobox);
defaultInfobox.setHtmlContent('html content goes here!');
}
Question number 2:
<body oncontextmenu="return false">
...
</body>