I have a list of links to several locations. I would like to add map marker to my OSM map and remove it when I hover out, while adding new one I hover over etc. I've been been able to add marker to the map on hover but I'm not able to remove them.
HTML
...
JS
function mkron(x) {
// some code to get lat lon
L.marker([lat, lon]).addTo(map);
}
function mkroff() {
markers.clearLayers();
}
What am I missing?
Your problem is that you add the marker directly to the map instead of adding it to the LayerGroup / FeatureGroup markers.
I don't know the rest of your code but it should look like that:
var markers = L.featureGroup().addTo(map);
function mkron(x) {
// some code to get lat lon
L.marker([lat, lon]).addTo(markers);
}
function mkroff() {
markers.clearLayers();
}
The other variant would be to store the layer in a global variable and then remove it from the map:
var marker;
function mkron(x) {
// some code to get lat lon
marker = L.marker([lat, lon]).addTo(map);
}
function mkroff() {
if(marker){
map.removeLayer(marker)
marker = null;
}
}
Related
I am trying to make a web map in which I can add a marker on map and at the same time get the lat lon coordinates of all markers to be saved on my database later on. I came up with this function to do that:
function newMarker(e) {
var new_mark = L.marker()
.setLatLng(e.latlng)
.addTo(map_4562f93a48a3459d95c4d292f52b5adc);
new_mark.dragging.enable();
new_mark.on("dblclick", function(e) {
map_4562f93a48a3459d95c4d292f52b5adc.removeLayer(e.target);
});
var latlngs = [];
var lat = e.latlng.lat.toFixed(4),
lng = e.latlng.lng.toFixed(4),
mark_latlon = new_mark.getLatLng();
map_4562f93a48a3459d95c4d292f52b5adc.eachLayer(function(layer) {
latlngs.push(mark_latlon);
console.log(latlngs);
});
new_mark.bindPopup("Waypoint");
}
map_4562f93a48a3459d95c4d292f52b5adc.on("click", newMarker);
The problem with this code is that it just adds the coordinates of the last marker every time a marker is created by clicking. I want all the coordinates to be appended to latlongs Array. And if possible I want to it to be updated when deleted or dragged. Can anyone help me on this?
I need to use the location a marker is placed to be able to load weather data via another API. I have my map dropping a loading and dropping a marker as well as a object "myPosition" which should contain the lat and lon of the marker. My issue is getting the myPosition.lat and .lng to update with the coordinates of the marker. Below is the code I have thus far and I am able to get the initialized data from myPosition in another file but I cant figure out how to get the coordinates. This is my first time using HTML and JS and I usually use C++ or Java so its a bit of a change for me.
var myPosition =
{
lat: 0,
lng: 0
};
function initMap()
{
var texas = {lat: 32.7767, lng: -96.7970};
var map = new google.maps.Map(document.getElementById('map'),
{
zoom: 10,
center: texas
});
var marker = new google.maps.Marker({
position: texas,
map: map
});
google.maps.event.addListener(map, 'click', function(event)
{
placeMarker(event.latLng);
});
function placeMarker(location)
{
if (marker == undefined)
{
marker = new google.maps.Marker(
{
position: location,
map: map,
animation: google.maps.Animation.DROP,
});
}
else
{
marker.setPosition(location);
}
map.setCenter(location);
}
}
Sounds like what you need is to think about the problem less as your 'other file' accessing the coordinates, and more as notifying your other module that a mouse click on the map has occurred by means of a callback.
Eg. In weather.js
function handleCoords(latlng){
//...Do whatever you want with latlng
}
// Export function as needed if you're using modules/webpack.
// (don't worry if you don't know what this means)
Then in your main.js in your embedded HTML embedded JS
// import {handleCoords} from './weather'
// Again ignore this if you're not using modules/don't know what this means.
google.maps.event.addListener(map, 'click', function(event){
placeMarker(event.latLng);
handleCoords(event.latLng); // This is how you pass the latlng
// along to weather.js
});
I am using google maps on my website to display 2 locations. I want one map and for the map to update when I press a button for the different locations. This is the JS code.
var map;
var lat = 53.4779168;
var lng = -2.2338925;
function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: { lat: lat, lng: lng }, zoom: 17 }); };
$(document).ready(function() {
$("#picadilly").click(function() {
lat = 53.4779168;
lng = -2.2338925;
});
$("#didsbury").click(function() {
lat = 53.410346;
lng = -2.229417;
});
});
It seems to be register that I'm pressing the button but it doesn't update the location of the map. Any ideas?
You can simply move the map with map.setCenter(LatLng) under click event function. This method will not use any other markers and will not erase existing markers. You could also move the map via the panTo(LatLng) function. Both methods are also available after the map has been initialized.
$("#picadilly").click(function() {
lat = 53.4779168;
lng = -2.2338925;
map.setCenter({lat:lat , lng:lng});
});
$("#didsbury").click(function() {
lat = 53.410346;
lng = -2.229417;
map.setCenter({lat:lat , lng:lng});
});
Here is the documentation for these methods.
I have a database of locations which I want to be able to print on a map. Ideally there should be one map with multiple pins for each location you have toggled on. So click a button for location X and it shows up on the map. Click the button for location Y and it shows up on the same map. Click X again and it hides from the map.
Currently I have it so I click on X and the map gets redrawn centered around point X.
Here is the HTML for each button:
<input type='button' data-lat='38.89864400' data-long='-77.05283400'
data-when='20 Aug at 2:00am' value='Location X' class='click' />
The jQuery I'm using is:
jQuery(document).ready(
function initialize() {
jQuery("input.click").click(function() {
showOnMap(jQuery(this).data('lat'), jQuery(this).data('long'), jQuery(this).data('when'));
});
}
);
function showOnMap(lat, long, message) {
var myLatlng = new google.maps.LatLng(lat, long);
var mapOptions = {
zoom: 13,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: message
});
google.maps.event.addDomListener(window, 'load', showOnMap);
}
Is there an easy way to switch from what I have to what I want? I've searched for a while but no one seems to be asking this use case in a browser, just Android (which I'm not doing).
Thanks!
There is an example in the documentation on how to hide/show markers. In short, a marker is:
hidden by setting its map to null
showed by setting its map to map
To do so, you will need to access each marker individually. If you have a definite number of locations, it can be done by naming them with different names (eg var markerLocationX, var markerLocationY, etc). Otherwise, the markers need to be stored in an array.
Supposing you have a definite number of known locations to toggle the markers, your javascript code may look like this:
function toggleMarker(markerName) {
if (markerName.getMap() == null) {
markerName.setMap(map);
} else {
markerName.setMap(null);
}
}
I have implemented a openlayer map with several markers with drupal. I want to get the longitude and latitude of the marker when I click on the marker. I have just write a code which shows the longitude and latitude when I click on the map. Instead I want to alert the position only when I click on the marker that I have plotted on the map. How to get the longitude and latitude of the marker?
jQuery(function ($) {
var ol_data = $('.openlayers-map').data('openlayers');
var map = ol_data.openlayers;
map.events.register("click", map, function (e) {
var lonlat = map.getLonLatFromPixel(e.xy);
alert("You clicked near " + lonlat.lat + " N, " + +lonlat.lon + " E");
});
This may help you
var markerslayer = map.getLayer('Markers');//get marker layer
var marker = markerslayer.markers[0];//get marker
var lonlat = marker.lonlat;//get marker latlon(position)
I have not found a way to do this in layer scope, but you can do this for every marker in the layer:
marker.events.register('click', marker, function (evt) {
alert("lon: "+evt.object.lonlat.lon+" , lat: "+evt.object.lonlat.lon);
});
jsFiddle: http://jsfiddle.net/Kenny806/SmMxW/1/
The problem with this attitude is, that with many markers you will get a lot of registered events and possibly performance issues.