Goal:
Update the visual position in bing map.
Problem:
If I add new latitude and logitude coordinate in the textbox, the bing should be displayed but it doesn't work.
Info:
*You need to use your own api key code.
*---http://jsbin.com/zegimofege/edit?html,console,output
Thank you!
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<!-- Reference to the Bing Maps SDK -->
<script type='text/javascript'
src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[your kep]'
async defer></script>
<script type='text/javascript'>
function GetMap()
{
var map = new Microsoft.Maps.Map('#myMap', {
credentials: 'Your Bing Maps Key',
mapTypeId: Microsoft.Maps.MapTypeId.road,
center: new Microsoft.Maps.Location(parseInt(document.getElementById("log")), parseInt(document.getElementById("lat"))),
zoom: 10
});
}
</script>
</head>
<body onload="GetMap();">
<div id="myMap" style="position:relative;width:600px;height:400px;"></div>
Log: <input type="text" id="log" value="51.50632"><br>
Lat: <input type="text" id="lat" value="-0.12714"><br>
</body>
</html>
You've added no code to do anything when the text box values are updated. Add events to them. Which event you use is up to you, some to consider, keyup, unfocus, or add an update button. In the event handler, get these values and convert to floats using parseFloat, then set the map view like this map.setView({ center: new Microsoft.Maps.Location(lat, lon) })
Related
I am trying to delete all the markers on my map, but code below only the last added marker will be deleted.
Is there a way to get a new a instance of map i mean on click of a button is there a way to reinitialize the map in leaflet?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://npmcdn.com/leaflet#1.0.0-rc.3/dist/leaflet.css" />
</head>
<body>
<script src="https://npmcdn.com/leaflet#1.0.0-rc.3/dist/leaflet.js"></script>
<script src="../leaflet/lib/AnimatedMarker.js"></script>
<style>
#mapid { height: 500px; }
</style>
<div id="mapid"></div>
<script>
var mymap = L.map('mapid').setView([40.68510, -73.94136], 13);
L.tileLayer('http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
attribution: '© Openstreetmap France | © OpenStreetMap'
}).addTo(mymap);
var marker = L.marker([40.68510, -73.94136]).addTo(mymap);
var marker = L.marker([40.68576, -73.94149]).addTo(mymap);
var marker = L.marker([40.68649, -73.94165]).addTo(mymap);
mymap.removeLayer(marker);
</script>
</body>
</html>
Instead of adding markers to the map, add your markers to a layerGroup and add the layerGroup to the map.
You can remove the markers using clearLayers() method.
var markers = L.layerGroup([marker1, marker2]).addTo(map);
markers.clearLayers();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Drawing Tools Sample</title>
<!-- Bing Map Control references -->
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
function GetMap() {
map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
credentials: "",
zoom: 17,
center: new Microsoft.Maps.Location(47.592, -122.332)
});
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(map.getCenter(), infoboxOptions);
map.entities.push(defaultInfobox);
defaultInfobox.setHtmlContent('<div>MY TEXT <input type="text"></div>');
}
</script>
</head>
<body onload="GetMap()">
<div style="position:relative;width:250px;height:150px;float:left;">
<div id="myMap" style="position:relative; width:600px;height:200px;"></div>
</div>
</body>
</html>
I am looking add custom Html elements such as textbox, textarea to bing map pushpin therefore it can be editable when it placed.
problem is can be place push pin with textbox or textarea but it cannot be editable.
This is a limitation of the default infobox class. You can work around this by using the custom infobox module found here: https://bingmapsv7modules.codeplex.com/wikipage?title=Custom%20Infobox%20Control
From Mapbox site I tested this code and success:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.cs
<style>
body { margin:0; padding:0; }
.map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map' class='map'> </div>
<script>
var map = new L.Map('map', {
center: new L.LatLng(51.505, -0.09),
zoom: 8,
layers: new L.TileLayer('https://a.tiles.mapbox.com/v3/mapbox.world-bright/{z}
});
</script>
</body>
</html>
How can I access my own map with markers and features? I suppose the "mapbox.world-bright" would be replaced by my own map.id, but how can I set the accessToken?
For some reasons I need to stick with Leaflet, and don't want to switch to mapbox.js.
It's just a matter of using the right url in L.TileLayer. You'll need to add your mapId and token and use the correct attribution. It's also much better if you load the tiles from multiple subdomains because your browser can handle up to four connection as once. Code example:
L.tileLayer('https://{s}.tiles.mapbox.com/v4/{mapId}/{z}/{x}/{y}.png?access_token={token}', {
attribution: '© Mapbox © OpenStreetMap',
subdomains: ['a','b','c','d'],
mapId: 'myMapId',
token: 'myUserToken'
});
To add the features of your map you'll need to query those in a separate request. Here's an example using jQuery. You'll need to swap the MAPID and TOKEN for your mapid and token ofcourse:
$.getJSON('http://a.tiles.mapbox.com/v4/MAPID/features.json?access_token=TOKEN', function (data) {
// Assuming the variable map contains your mapinstance
var geojson = L.geoJson(data).addTo(map);
map.fitBounds(geojson.getBounds());
});
Here's a working example on Plunker: http://plnkr.co/edit/h8F3kC?p=preview
I am using Bing Maps v7 and created a draggable pushpin. i have taken code from here.
http://www.garzilla.net/vemaps/Draggable-Push-Pins-with-Bing-Maps-7.aspx
I need to restrict the drag outside of visible map area.
I have a defined map area with zoom pan disabled and with draggable pin where user can put there pin.
issue: pushpin is draggable outside of map then no option to get that back.
On the Pushpin class, you have several events to manage the action that are done on drag start, drag and drag end, see on MSDN: http://msdn.microsoft.com/en-us/library/gg427615.aspx
So, to be simple, all you have to do is to handle the event of your choice (in your case, I would recommend to use drag on the pushpin) and cancel the event or just modify by yourself the location of the pushpin.
See a live example where the pushpin is restricted to a minimal latitude value (you can update the drag event to be able to restrict to a specific area based on your current map view):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bing Maps AJAX V7 - Restricted draggable pushpin</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<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 minLatitude = 49;
function getMap()
{
map = new Microsoft.Maps.Map(document.getElementById('myMap'),
{
credentials: 'YOURKEY',
center: new Microsoft.Maps.Location(50, 3),
zoom: 6
});
}
function addDraggablePushpin()
{
var pushpinOptions = {draggable: true};
var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions);
map.entities.push(pushpin);
Microsoft.Maps.Events.addHandler(pushpin, 'drag', function() {
var loc = pushpin.getLocation();
// Verify if it's in a certain area if not, cancel event
if(loc.latitude < minLatitude) {
pushpin.setLocation(new Microsoft.Maps.Location(minLatitude, loc.longitude));
}
});
}
</script>
</head>
<body onload="getMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
<div>
<input type="button" value="AddDraggablePushpin" onclick="addDraggablePushpin();" />
</div>
</body>
</html>
If you press "Upload your file" in the test code below, the button text should change to "Uploading...", although in Safari it doesn't. Selecting a sufficiently large file should just give you time to observe the button. Comment out map div and it all works fine.
Here's the isolated test code, it took half a day to find that the map could be the cause, but I need to dig deeper. Interestingly, when copying the same code to JSfiddle it will not reproduce the bug, so you'll need to create your own html file.
<!DOCTYPE html>
<html>
<head>
<title>Google Map interfering with button event in Safari</title>
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var map;
function init() {
var options = {
zoom: 8,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<form action="http://localhost" method="POST" enctype="multipart/form-data">
<!--comment map to see correct button behaviour in Safari-->
<div id="map" style="width:300px;height:300px"></div>
<p><small>Very large file please:</small> <input type="file" name="big"></p>
<button onclick="this.innerHTML='Uploading...'">Upload your file</button>
</form>
</body>
</html>
There were similar questions on SO before, but no solutions.