I see that the click event doesn't get called for circleMarker, but does get called for normal Marker. Any help? https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet/issues/19
http://jsfiddle.net/abarik/crk3jrhp/2/
html
<div id="map"></div>
css
#map {
height: 440px;
}
javascript
map = L.map('map', {
center: [7.2, 40.9],
zoom: 2
});
L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
attribution: "Map: Tiles Courtesy of MapQuest (OpenStreetMap, CC-BY-SA)",
subdomains: ["otile1", "otile2", "otile3", "otile4"],
maxZoom: 12,
minZoom: 2
}).addTo(map);
var oms = new OverlappingMarkerSpiderfier(map);
var popup = new L.Popup();
oms.addListener('click', function(marker) {
popup.setContent(marker.__name);
popup.setLatLng(marker.getLatLng());
map.openPopup(popup);
});
var marker1 = new L.Marker([1, 1]);
marker1.__name = 'marker1'
map.addLayer(marker1);
oms.addMarker(marker1);
var marker2 = new L.Marker([1, 1]);
marker2.__name = 'marker2'
map.addLayer(marker2);
oms.addMarker(marker2);
var marker1 = new L.circleMarker([20, 20]);
marker1.__name = 'cirmarker1'
map.addLayer(marker1);
oms.addMarker(marker1);
var marker2 = new L.circleMarker([20, 20]);
marker2.__name = 'cirmarker2'
map.addLayer(marker2);
oms.addMarker(marker2);
Related
var map = L.map('map').setView([27.7172, 85.3240], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 160,
attribution: '© OpenStreetMap'
}).addTo(map);
var circle = L.circle([27.7172, 85.3240], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(map);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
var marker = L.marker([27.7172, 85.3240],
{ alt: 'Kathmandu' }).addTo(map) // "Kyiv" is the accessible name of this marker
.bindPopup('Kathmandu Nepal');
I have a polygon and two markers. The last marker (var power) I want to start only on mouseover or onclick the first marker (var myIcon). How can I do that? Could you please take a look on this code?
var polygon = new L.Polygon(line, {
color: pastel,
weight: 0.1,
opacity: 0.1,
fillColor: pastel,
fillOpacity: 0.04,
interactive: true
});
polygon.addTo(map)
}
var myIcon = L.divIcon({
className: 'divIcon',
iconSize: new L.Point(35, 15),
iconAnchor:[18, 20],
zIndexOffset: 1000,
html: '<?=$desc1[$i]?>'
});
var marker = L.marker([x1, y1], {icon: myIcon})
.addTo(map)
marker.refPoly = polygon;
marker.on('mouseover', function(e) {
e.target.refPoly.setStyle({
fillOpacity: 0.48
});
});
marker.on('mouseout', function(e) {
e.target.refPoly.setStyle({
fillOpacity: 0.04
});
});
var power = <?php echo json_encode($watt); ?>;
var power = power.reverse();
var myPower = L.divIcon({
className: 'divPower',
iconSize: new L.Point(25, 12),
iconAnchor:[12, 5],
html: power[b]
});
L.marker(pointC, {icon: myPower}).addTo(map)
.bindTooltip(350-b*10 + '°');
You can remove a marker with marker.removeFrom(map) and add it to the map with marker.addTo(map):
var marker = L.marker([x1, y1], {icon: myIcon})
.addTo(map)
marker.refPoly = polygon;
var power = <?php echo json_encode($watt); ?>;
var power = power.reverse();
var myPower = L.divIcon({
className: 'divPower',
iconSize: new L.Point(25, 12),
iconAnchor:[12, 5],
html: power[b]
});
// I removed .addTo(map). Then the marker is not displayed from beginning
var powerMarker = L.marker(pointC, {icon: myPower})
.bindTooltip(350-b*10 + '°');
marker.on('mouseover', function(e) {
e.target.refPoly.setStyle({
fillOpacity: 0.48
});
powerMarker.addTo(map);
});
marker.on('mouseout', function(e) {
e.target.refPoly.setStyle({
fillOpacity: 0.04
});
powerMarker.removeFrom(map);
});
marker.on('click', function(e) {
powerMarker.addTo(map);
});
I am creating a game map using leaflet and so far everything works fine, except centering the map. I would like the map be vertical centered in the browser.
Is there a way to fix this?
I tried changing L.latLng under //Declare Map Object, but this does not do the trick.
Here's how I have it set up currently:
// Variables
var mapSW = [608, 8026],
mapNE = [7574, 146];
// Declare Map Object
var map = L.map('map', {
center: L.latLng(0, 0),
zoom: 4
});
// Reference the tiles
L.tileLayer('maps/velen/{z}/{x}/{y}.png', {
minZoom: 2,
maxZoom: 5,
continuousWorld: false,
noWrap: true,
crs: L.CRS.Simple,
}).addTo(map);
map.setMaxBounds(new L.LatLngBounds(
map.unproject(mapSW, map.getMaxZoom()),
map.unproject(mapNE, map.getMaxZoom())
));
// Icons
var locat = L.icon({
iconUrl: 'images/locat_marker.png',
iconSize: [24, 30],
iconAnchor: [5, 30],
popupAnchor: [5, 44],
});
var quest_marker_lvl1 = L.icon({
iconUrl: 'images/quest_marker_lvl_0.png',
iconSize: [67, 39],
iconAnchor: [5, 39],
popupAnchor: [0, -39],
});
// Markers and Popups
// LatLng
var refmarker = L.marker([0, 0], {
draggable: true,
}).addTo(map);
refmarker.bindPopup('');
refmarker.on('dragend', function(e) {
refmarker.getPopup().setContent('Clicked ' +
refmarker.getLatLng().toString() + '<br />'
+ 'Pixels ' +map.project(refmarker.getLatLng(),
map.getMaxZoom().toString()))
.openOn(map);
});
// Pixels
// Locations
var popupContent = "Hanged Man's Tree";
var popupOptions =
{
autoClose: false,
closeOnClick: false,
closeButton : false,
'className' : 'locat_marker' // classname for another popup
}
var locat_hanged_mans_tree = L.marker(map.unproject([2172, 1924],
map.getMaxZoom()), {icon: locat})
.bindPopup(popupContent, popupOptions).addTo(map).openPopup();
// Quests lvl 1
var quest_fake_pass = L.marker(map.unproject([2033, 1693],
map.getMaxZoom()), {icon: quest_marker_lvl1})
.bindPopup("Fake Pass");
var quest_thou_shall_not_pass = L.marker(map.unproject([2089, 1717],
map.getMaxZoom()), {icon: quest_marker_lvl1})
.bindPopup("Thou Shall Not Pass");
// Layer Groups
var lg_quests = L.layerGroup([quest_fake_pass,
quest_thou_shall_not_pass]).addTo(map);
var lg_locat = L.layerGroup([locat_hanged_mans_tree]).addTo(map);
var baseLayers = {
};
var overlays = {
"Quests" : lg_quests,
"Locations" : lg_locat
};
// Add layer control
L.control.layers(baseLayers, overlays).addTo(map);
I have a requirement of using leaflet.js to add a map to my site. The site has an administration view where an admin can add markers and add description and image to each marker.
I used the leaflet.draw plugin, and on the create event I try to update the GeoJSON object I got using event.layer.toGeoJSON() to add some properties like image and text but with no luck.
Can any one help me on this?
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
});
map = new L.Map('map', {
layers: [osm],
center: new L.LatLng(31.9500, 35.9333),
zoom: 15
}),
drawnItems = L.geoJson().addTo(map);
map.addControl(new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
}));
map.on('draw:created', function(event) {
var layer = event.layer;
var json = event.layer.toGeoJSON();
json.properties.desc = null;
json.properties.image = null;
drawnItems.addLayer(L.GeoJSON.geometryToLayer(json));
addPopup(layer);
});
function addPopup(layer) {
var content = '<input id="markerDesc" type="text"/ onblur="saveData(layer);">';
layer.bindPopup(content).openPopup();
alert('out');
}
function saveData(layer) {
var markerDesc = $('#markerDesc').val();
var json = layer.toGeoJSON();
json.feature.properties.desc = markerDesc;
}
There is no need in your "draw:created" listener to convert into GeoJSON and then back to a layer.
By the way, you then add a popup to layer whereas you do not do anything with it, since you transformed it into GeoJSON data and created a new layer out of that data.
Simply create the following structure, so that the stored data can be converted into GeoJSON later on (if you ever need that functionality): layer.feature.type = "Feature" and layer.feature.properties.
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
});
map = L.map('map', {
layers: [osm],
center: [31.9500, 35.9333],
zoom: 15
});
var drawnItems = L.geoJson().addTo(map);
map.addControl(new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
}));
map.on('draw:created', function (event) {
var layer = event.layer,
feature = layer.feature = layer.feature || {};
feature.type = feature.type || "Feature";
var props = feature.properties = feature.properties || {};
props.desc = null;
props.image = null;
drawnItems.addLayer(layer);
addPopup(layer);
});
function addPopup(layer) {
var content = document.createElement("textarea");
content.addEventListener("keyup", function () {
layer.feature.properties.desc = content.value;
});
layer.on("popupopen", function () {
content.value = layer.feature.properties.desc;
content.focus();
});
layer.bindPopup(content).openPopup();
}
Demo: https://jsfiddle.net/ve2huzxw/314/
Edited: previous code did not actually implemented well the GeoJSON properties functionality (was saved on geometry instead of feature, due to missing layer.feature.type = "Feature", see also Leaflet Draw not taking properties when converting FeatureGroup to GeoJson)
I am creating an iPhone application in which i need to fetch the latitude longitude from gps.Now i am calling update-location delegate method and adding new location to the array after that i need to show all latitude longitude(locations ) on goggle map and the route between all locations.
Please help me out in showing the route.
Thanks in advance
Here is how you might do it with the GoogleMaps javascript api.
<style>
#map_canvas {
height: 190px;
width: 300px;
margin-top: 0.6em;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<div id="map_canvas" ></div>
<script language="javascript" type="text/javascript">
var latitude = 44.056389;
var longitude = -121.308056;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(latitude,longitude),
zoom: 9,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
// Create a draggable marker which will later on be binded to a
// Circle overlay.
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(latitude,longitude),
draggable: true
});
// Add a Circle overlay to the map.
var circle = new google.maps.Circle({
strokeColor: "#0000FF",
strokeOpacity: 0.4,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.20,
map: map,
radius: 16000 // meters
});
circle.bindTo('center', marker, 'position');
google.maps.event.addListener(marker, 'dragend', function() {
var location = marker.getPosition();
latitude = location.lat();
longitude = location.lng();
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
var location = place.geometry.location;
map.setCenter(location);
map.setZoom(9); // Why 9? Because it looks good.
marker.setPosition(location);
latitude = location.lat();
longitude = location.lng();
});
}
</script>