I am trying to add multiple pushpin with separate infobox. that means each pushpin will have their own infobox with own info.
there is a loop.inside that
latlng = new Microsoft.Maps.Location(latitude[pointerCount], longtitue[pointerCount]);
MarkingLocation[pointerCount] = new Microsoft.Maps.Pushpin(latlng, {icon:"marker2.ico", height:50, width:50, anchor:new Microsoft.Maps.Point(0,50)});
myInfobox = new Microsoft.Maps.Infobox(latlng, myinfoboxOption);
Microsoft.Maps.Events.addHandler(MarkingLocation[pointerCount], 'click', function() {myInfobox.setOptions({ visible:true });});
map.entities.push(MarkingLocation[pointerCount]);
map.entities.push(myInfobox);
Problem is that it's showing the last infobox only for every pushpin. Suppose I've 4 pushpin in Londom,France,Germany,America. now no matter which pin I've clicked, it's only show the America infobox on America pushpin.please can anyone help that what I've been missing.........
And one more thing, can anyone please show the way to use htmlContent in infobox. I've tried to set it thrugh option,but it's not woring......
myinfoboxoption = {width:300,
height: 100,
title: str_loc,
htmlContent: htmlc,
showPointer: false,
offset: new Microsoft.Maps.Point(-100,0)};
Please help........
This is how I implemented multiple infobox:
<html>
<head>
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script>
var pinInfoBox; //the pop up info box
var infoboxLayer = new Microsoft.Maps.EntityCollection();
var pinLayer = new Microsoft.Maps.EntityCollection();
var apiKey = "YourKey";
function GetMap() {
map = new Microsoft.Maps.Map(document.getElementById("map"), {credentials: apiKey});
// Create the info box for the pushpin
pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
infoboxLayer.push(pinInfobox);
for (var i = 0 ; i < 10; i++){
//add pushpins
var latLon = new Microsoft.Maps.Location(Math.random()*180-90, Math.random()*360-180);
var pin = new Microsoft.Maps.Pushpin(latLon);
pin.Title = name;//usually title of the infobox
pin.Description = "blahblahblah, "+ i; //information you want to display in the infobox
pinLayer.push(pin); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
}
map.entities.push(pinLayer);
map.entities.push(infoboxLayer);
}
function displayInfobox(e) {
pinInfobox.setOptions({title: e.target.Title, description: e.target.Description, visible:true, offset: new Microsoft.Maps.Point(0,25)});
pinInfobox.setLocation(e.target.getLocation());
}
function hideInfobox(e) {
pinInfobox.setOptions({ visible: false });
}
</script>
<style>
#map { position: absolute; top: 20; left: 10; width: 700px; height: 500px; border:#555555 2px solid;}
</style>
</head>
<body onload="GetMap()">
<div id="map">
</div>
</body>
In the end, you will get something like this:
Correction:
pin.Title = "TITLE: "+ i; //usually title of the infobox
Related
I have this modal in my index.html:
<div id="myModal" class="modal">
<span class="close1">×</span>
<div id="mapImage1"></div>
<div id="caption"></div>
</div>
The <div id="mapImage1"> is the leaflet map <div>
Then I have the function, which should load the Leaflet map into the modal. The parameter image is the image which I would like to show on the leaflet map.
function modalImage(modal,image,modalDiv,text,close) {
// Get the modal
var modal = document.getElementById(modal);
var img = document.getElementById(image);
var modalDiv = document.getElementById(modalDiv);
console.log(modalDiv);
var captionText = document.getElementById(text);
img.onclick = function () {
modal.style.display = "block";
initLeafletimage(modalDiv,img);
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName(close)[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
}
}
The map itself is generated by this code:
function initLeafletimage(map,image){
console.log(image.src)
var imgDimensions={width:300, height:300} //this is the height and width of the image. It hasn't been loaded yet.
var map = L.map(map, {
maxZoom: 24,
minZoom: -24,
crs: L.CRS.Simple
}).setView([imgDimensions.height/2, imgDimensions.width/2], 0);
var imageUrl = image.src;
var imageBounds = [
[imgDimensions.width , 0],
[0, imgDimensions.height]
];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
}
modalImage('myModal','left','mapImage1','caption','close1');
The map is not even showing up in the modal.
What have I missed?
Unfortunately, like #ghybs pointed out, I missed to define the height and width of the map div. That is why no map was present. With this css it works perfectly:
#mapImage1{
height: 100%;
width: 100%;
position: fixed;
}
I'm using custom polyline drawer from Leaflet.draw
let polylineDrawer = new L.Draw.Polyline(map, {})
polylineDrawer.enable()
I need to programmatically add starting point to polyline
I've tried calling addVertex of L.Draw.Polyline. Looks like it's doesn't work with custom polyline drawer cause of addHooks or something... Tried to change sources, no results.
Also tried firing click on map after drawer is enabled. Like so:
let point = new L.LatLng(x, y)
map.fireEvent('click', {
latlng: point,
layerPoint: map.latLngToLayerPoint(point),
containerPoint: map.latLngToContainerPoint(point),
})
Also doesn't work
EDIT: Actually, AddVertex does work with custom polylines. It "didn't work" because I passed wrong arguments in my function. Somehow, I missed that.
Using addVertex on your drawer object does let you add a starting point to your line :
var polylineDrawer = new L.Draw.Polyline(map, {})
polylineDrawer.enable();
var latlng = L.latLng(48.8583736, 2.2922926);
polylineDrawer.addVertex(latlng);
and a demo
var style = {
stroke: true,
color: 'red',
weight: 4,
opacity: 0.5
};
var map = L.map(document.getElementById('map')).setView([48.8583736, 2.2922926], 15);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var drawnItems = new L.geoJson(null, {style: style}).addTo(map);
map.on(L.Draw.Event.CREATED, function (event) {
var layer = event.layer;
drawnItems.addLayer(layer);
});
var polylineDrawer = new L.Draw.Polyline(map, {})
polylineDrawer.enable();
var latlng = L.latLng(48.8583736, 2.2922926);
polylineDrawer.addVertex(latlng);
html, body {
height: 100%;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.12/leaflet.draw.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.12/leaflet.draw.js"></script>
<div id='map'></div>
I would like to draw a polyline on a map with leaflet. The basic gesture that I would like to apply is:
User clicks and holds on the mouse button -> that defines the first marker. If the user holds the mouse button, and moves the mouse, a corresponding "rubber band" is displayed.
User releases the mouse button -> a second marker is added to the map and the 2 markers are linked by a line.
Starting from the second marker, the user can continue building a second line using the the same procedure as above.
The final result should be the set of coordinates/markers, linked by a polyline.
As Julien V and IvanSanchez said, you can implement some of the draw-like plugins
In example below:
You can see usage of Leaflet.draw plugin. Hope it helps :)
// center of the map
var center = [46.165164, 15.750443];
// Create the map
var map = L.map('map').setView(center,15);
// Set up the OSM layer
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Data © OpenStreetMap',
maxZoom: 18
}).addTo(map);
// Initialise the FeatureGroup to store editable layers
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
var options = {
position: 'topleft',
draw: {
polygon: {
allowIntersection: false, // Restricts shapes to simple polygons
drawError: {
color: '#e1e100', // Color the shape will turn when intersects
message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
},
shapeOptions: {
color: '#97009c'
}
},
polyline: {
shapeOptions: {
color: '#f357a1',
weight: 10
}
},
// disable toolbar item by setting it to false
polyline: true,
circle: true, // Turns off this drawing tool
polygon: true,
marker: true,
rectangle: true,
},
edit: {
featureGroup: editableLayers, //REQUIRED!!
remove: true
}
};
// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw(options);
map.addControl(drawControl);
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
map.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
if (type === 'polyline') {
layer.bindPopup('A polyline!');
} else if ( type === 'polygon') {
layer.bindPopup('A polygon!');
} else if (type === 'marker')
{layer.bindPopup('marker!');}
else if (type === 'circle')
{layer.bindPopup('A circle!');}
else if (type === 'rectangle')
{layer.bindPopup('A rectangle!');}
editableLayers.addLayer(layer);
});
html, body, #map { margin: 0; height: 100%; width: 100%; }
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css" rel="stylesheet" />
<meta charset="utf-8">
<title>TEST</title>
</head>
<body>
<div id='map'></div>
</body>
</html>
Here is my map of between points based on latitude & longitude.
if you observe the line and rail road carefully you see, the railroad is not straight line but the line i draw between pushpins are straight. But i need my drawing lines should be over the rail road. i am not sure whether it's possible or not. if possible please advice.
And here is my html code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Crossing Map</title>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
var pinLayer = new Microsoft.Maps.EntityCollection();
var infoboxLayer = new Microsoft.Maps.EntityCollection();
function GetMap() {
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{
credentials:"API Key"
});
// Create the info box for the pushpin
pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
infoboxLayer.push(pinInfobox);
//created variables(one variable per location)
var loc1 = new Microsoft.Maps.Location(29.775560, -95.348878);
// Add a pin to the map
var pin1 = new Microsoft.Maps.Pushpin(loc1);
pin1.Title = "Brooks St";
pin1.Description = "First PIn Descriptoin is here.";
pinLayer.push(pin1); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
var loc2 = new Microsoft.Maps.Location(29.776584, -95.348878);
// Add a pin to the map
var pin2 = new Microsoft.Maps.Pushpin(loc2);
pin2.Title = "Harrington St";
pin2.Description = "Second pin description";
pinLayer.push(pin2); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(pin2, 'click', displayInfobox);
var loc3 = new Microsoft.Maps.Location(29.778530, -95.348663);
// Add a pin to the map
var pin3 = new Microsoft.Maps.Pushpin(loc3);
pin3.Title = "Loraine St";
pin3.Description = "Third pin desc";
pinLayer.push(pin3); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(pin3, 'click', displayInfobox);
var loc4 = new Microsoft.Maps.Location(29.783419, -95.348963);
// Add a pin to the map
var pin4 = new Microsoft.Maps.Pushpin(loc4);
pin4.Title = "Quitman St";
pin4.Description = "pin 4 desc";
pinLayer.push(pin4); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(pin4, 'click', displayInfobox);
var loc5 = new Microsoft.Maps.Location(29.802104, -95.342655);
// Add a pin to the map
var pin5 = new Microsoft.Maps.Pushpin(loc5);
pin5.Title = "Calvalcade";
pin5.Description = "5th pin desc";
pinLayer.push(pin5); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(pin5, 'click', displayInfobox);
// Create a polyline
var lineVertices = new Array(loc1,loc2,loc3,loc4,loc5); //var lineVertices = new Array(loc1, loc2, loc3);
var line = new Microsoft.Maps.Polyline(lineVertices);
//map.setView({center:loc2, zoom: 9} );
map.setView({center:loc2, zoom: 15} );
map.entities.push(line);
map.entities.push(pinLayer);
map.entities.push(infoboxLayer);
}
function displayInfobox(e) {
pinInfobox.setOptions({
title: e.target.Title,
description: e.target.Description,
visible:true,
offset: new Microsoft.Maps.Point(0,25)
});
pinInfobox.setLocation(e.target.getLocation());
}
function hideInfobox(e) {
pinInfobox.setOptions({ visible: false });
}
</script>
</head>
<body onload="GetMap();">
<div class="wapper">
<div class="contentareaNoM safetybg">
<div id="core">
<div id='mapDiv' style="positio:relative; margin-left:100px; width:800px; height:800px;"></div>
</div>
</div>
</div>
</body>
</html>
You need to have the polyline (with coordinates) that corresponds to your railroad then you will be able to draw onto those elements. In this way, you will be able to have every point of the railway.
You can take a look at OpenStreetMap that include those element with precise geometry information where the coverage is good.
As i just begin to understand how API v3 work, i have a problem to set different content for my info windows. I'm not a programmer also!! I'd like to put several markers (no problem) with different contents. The problem is i have only one info window working, not the second one. How to attribute a content to a specific marker. Can't find the way in the google maps documentation.
Here the code:
<script type="text/javascript">
google.maps.visualRefresh = true;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.648288,8.173828),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var contentString = '<iframe src="http://www.360- ----- vision.fr/panos/communes_ot_patrimoine/Sanary/" height="300px" width="500px"></iframe>'+
'<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Eglise Sanary</h2>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var image = 'images/marqueur-360.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(43.115145,5.789623),
map: map,
icon: image,
title:"Eglise de Sanary"
});
var contentString1 = '<iframe src="http://www.360- vision.fr/panos/communes_ot_patrimoine/castelsardo/" height="300px" width="500px"> </iframe>'+
'<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Castelsardo</h2>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString1
});
var image = 'images/marqueur-360.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(41.042074,8.739624),
map: map,
icon: image,
title:"Castelsardo"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Here the link to see my map.
map example
Thanks a lot for any suggestion.
Steph. :-)
Each infowindow can be linked to specific marker, name marker and infowindow accordingly .
Eg:
var marker= ....
var infowindow=...
infowindow.open(map,marker);
var marker2= ....
var infowindow2=...
infowindow2.open(map,marker2);