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;
Related
I have a marker in my leaflet map like
marker = new L.Marker([lat,lon],{icon:flagIcon,title: "Drage me to change your location"}).addTo(map);
marker.dragging.enable();
marker.on('dragend', function(e){
var coords = e.target.getLatLng();
var lat = coords.lat;
var lon = coords.lng;
console.log("Lat : "+lat+" Lng: "+lon);
document.getElementById("lat").value=lat;
document.getElementById("long").value=lon;
document.getElementById("placeName").value="location on map";
updateAnchor();
map.panTo({lon:lon,lat:lat})
if(flag!=0){
map.removeLayer(cir);
cir = L.circle([lat,lon],circleOptions).addTo(map);
refreshMarkers(flag);
}
});
If the marker is already exist i want to remove it and and a new one.For that i added a code like
if (marker) {
map.removeLayer(marker); // remove
}
But i couldn't remove the older marker.How to solve this issue
The marker you're adding isn't the same object as the marker that's already on the map. If you want to be able to reference (eg to remove) a marker later, save a copy of the marker object in a global.
var oldmarker;
marker = <your code here>
oldmarker = marker;
Then
if (map.hasLayer(oldmarker)) {
map.removeLayer(oldmarker);
}
Try:
if (map.hasLayer(marker)) {
map.removeLayer(marker); // remove
}
If this is not helping pls add more code to your question, when do you want to remove the marker and how you add the new one
How to add a custom icon in mapbox?
var map = L.mapbox.map('map', 'mapbox.streets').setView([0, 0], 1);
var geojson = { type: 'LineString', coordinates: value};
var start = value[0];
var end = value[value.length-1];
geojson.coordinates.push((start,end).slice());
// Add this generated geojson object to the map.
L.geoJson(geojson).addTo(map);
// Create a marker and add it to the map.
var marker = L.marker(end, {
icon: L.mapbox.marker.icon({
"iconUrl": "https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png"
})
}).addTo(map);
});
I can't able to add a custom icon in above code. Please help me..
Thanks.
First you will have to create a var, for example 'myIcon', then simply replace the iconUrl with a path that specifies the custom marker you want to use.
You can use the iconSize option to specify the size of your marker
You can use the iconAnchor option to specify which part of your masker should be placed on the latlng.
myIcon=L.icon({
iconUrl:'img/custom-marker.png',
iconSize: [25,30]
});
Then create the marker, set the lat lng where you want your marker to be placed. And specify the icon you want to use.
var Marker = new L.Marker ( latlng, {icon:myIcon});
Finally add your market to the map:
map.addlayer(Marker);
I have a map of bing maps and I use has created pushpin do with double click. And now I want to make limits pushpin only <= 20.
If it has been over the limit point is then automatically pushpin cannot be displayed. Although double click in map.
But I don't understand how to create it. Can you help me? Thanks a lot. Gbu.
My code to show pushpin
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
Microsoft.Maps.Events.addHandler(map, 'dblclick',getLatlng );
}
//show pushpin
function getLatlng(e) {
if (e.targetType == "map")
{
var point = new Microsoft.Maps.Point(e.getX(), e.getY());
var locTemp = e.target.tryPixelToLocation(point);
var location = new Microsoft.Maps.Location(locTemp.latitude, locTemp.longitude);
alert(locTemp.latitude + "&" + locTemp.longitude);
var pin = new Microsoft.Maps.Pushpin(location, { 'draggable': false });
map.entities.push(pin);
alert("Done");
Microsoft.Maps.event.addListener(map, 'click', function (event)
{
}
// limit pushpin
*How to create limit pushpin?*
In the getlatlng function you can do a simple check to see how many shapes are on the map. You can get the number of shapes on the map in your application by doing the following:
var cnt = map.entities.getLength();
How to disable mobile touch event after the bing map is initialized?
We can disable before initializing by below code, using MapOptions object. However I'm looking after the Bing Map is initialized.
// Set the map and view options, setting the map style to Road and
// removing the user's ability to change the map style
var mapOptions = {credentials:"Bing Maps Key",
height: 400,
width: 400,
mapTypeId: Microsoft.Maps.MapTypeId.road,
disableTouchInput : true,
};
// Initialize the map
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
Any help is highly appreciated. Thanks in advance!!!
Most of the MapOptions do work when passed into the setOptions method of the map. For instance try this: map.setOptions({disableTouchInput: true});
Note that I've only tested this in IE. If you simply want to disable panning and zooming you can do this in a number of different ways. The first is to use map options, the other is to use the viewchange event, store the original map position and keep setting the map to the same view to lock it.
Since you can't set most of the MapOptions once the map is created you can only do this by swapping out your map for a new map with the options you want. This is a very basic example, but here is an example that shows and hides the bing logo which is one of the settings that you can't change with setOptions.
function switchMapOptions(active, inactive) {
try {
var newMap = new MM.Map($(inactive)[0], options);
for (var i = 0; i < map.entities.getLength(); i++) {
var loc = map.entities.get(i).getLocation();
newMap.entities.push(new MM.Pushpin(loc));
}
newMap.setView({center: map.getCenter(), zoom: map.getZoom(), animate: false});
map.dispose();
map = newMap;
}
catch (e) {
alert(e.message);
}
}
Full code at Jsfiddle: http://jsfiddle.net/bryantlikes/zhH5g/4/
I've an issue with the leaflet openPopup method.
showMap = function(elements) {
var jsonp = 'http://a.tiles.mapbox.com/v3/blahblahblah.jsonp';
var m = new L.Map("my_map").setView(new L.LatLng(51.5, -0.09), 15);
var geojsonLayer = new L.GeoJSON();
var PlaceIcon = L.Icon.extend({
iconSize: new L.Point(25, 41),
shadowSize: new L.Point(40, 35),
popupAnchor: new L.Point(0, -30)
});
var icon = new PlaceIcon(__HOME__ + '/images/leaflet/marker.png');
var marker;
for (var i = 0; i < elements.length; i++) {
var address = $("<div/>").html(elements[i].address).text();
var latlng = new L.LatLng(elements[i].latitude, elements[i].longitude);
marker = new L.Marker(latlng, {icon: icon}).bindPopup(address);
if (i == 0) {
marker.openPopup();
}
m.addLayer(geojsonLayer).addLayer(marker);
}
// Get metadata about the map from MapBox
wax.tilejson(jsonp, function(tilejson) {
m.addLayer(new wax.leaf.connector(tilejson));
});
}
When I click on a marker I have the popup open. But I would like to have the first popup open when the map is loaded. (and open other popups on markers click)
AnNy ideas ?
Put openPopup call after you add the marker to the map and you should be fine.
I'm assuming that when you click on a marker you see the popup but you're not getting the popup of the first marker to show automatically when the map is loaded?
First, it doesn't look like you're actually using GeoJSON so a GeoJSON layer isn't necessary (you can just use a FeatureLayer) but that shouldn't cause any issues. Whatever layer group you use you should only be adding it to the map once and then adding all child layers to the LayerGroup. You're currently adding the geojsonLayer multiple times in your "for" loop which you don't want to do.
Second, you have to call marker.openPopup() after the marker is added to the map.
Try changing your code around to looks something like this:
var layerGroup = new L.FeatureGroup();
layerGroup.addTo( m );
for (var i = 0; i < elements.length; i++) {
var address = $("<div/>").html(elements[i].address).text();
var latlng = new L.LatLng(elements[i].latitude, elements[i].longitude);
marker = new L.Marker(latlng, {icon: icon}).bindPopup(address);
//You don't add the marker directly to the map. The layerGroup has already
//been added to the map so it will take care of adding the marker to the map
layerGroup.addLayer( marker );
if (i == 0) {
marker.openPopup();
}
}
I had this issue and fixed it with adding a timeout right after I added the marker on the map.
marker.addTo(this.map).bindPopup('Info');
setTimeout(() => {
marker.openPopup();
}, 500);
I don't know why but on some page, I need to apply timeout. In any case it's my workaround, hope this works for some of you too.
First add your map then put openPopup():
L.marker([lat, long]).bindPopup('Your message').addTo(map).openPopup();