Is it possible to create pushpins from addresses instead of lat/long data?
I guess the pushpin constructor accepts only locations which are a lat/long representation of the location.
new Microsoft.Maps.Pushpin(value)
Is there any solution for creating pushpins from addresses.
Here is a sample code showing you how to find a location by address:
<!DOCTYPE html>
<html>
<head>
<title>searchbyaddressHTML</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<style type='text/css'>body{margin:0;padding:0;overflow:hidden;font-family:'Segoe UI',Helvetica,Arial,Sans-Serif}</style>
</head>
<body>
<div id='printoutPanel'></div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
/* No need to set credentials if already passed in URL */
center: new Microsoft.Maps.Location(47.624527, -122.355255),
zoom: 8 });
Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
var searchManager = new Microsoft.Maps.Search.SearchManager(map);
var requestOptions = {
bounds: map.getBounds(),
where: 'Washington, DC',
callback: function (answer, userData) {
map.setView({ bounds: answer.results[0].bestView });
map.entities.push(new Microsoft.Maps.Pushpin(answer.results[0].location));
}
};
searchManager.geocode(requestOptions);
});
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=YourBingMapsKey&callback=loadMapScenario' async defer></script>
</body>
</html>
Related
What am I doing wrong? The intent is to have a few (say 6) leafletjs panes, each containing many markers and polylines, so the panes can be hidden independently. Here is a simplified program showing just two lines and markers in jsfiddle. The problem is, the polylines all get grouped in the same SVG and all get hidden together. Each pane in the example should show one polyline and one marker.
I don't want to remove the polylines from the map to hide them, then recreating them would not perform well.
If needed, the polylines could be drawn using D3 on top of the leaflet map but I was hoping it could all be done in leaflet.
Thanks!
JS:
'use strict';
document.addEventListener("DOMContentLoaded", function(event) {
var map = L.map('map').setView([30.5, -0.09], 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var pane1 = map.createPane('pane1');
var pane2 = map.createPane('pane2');
function hide(pane) {
pane.style.display = 'none';
}
function show(pane) {
pane.style.display = '';
}
let icon = new L.Icon.Default();
function dr(pane, latlng){
L.polyline([[45.421, -75.697], latlng], {
weight: 2,
pane: pane
}).addTo(map);
L.marker(latlng, {
icon: icon,
pane: pane
}).addTo(map);
}
// define two locations with lines from Ottawa
dr(pane1, [ 42.3732216, -72.5198537 ]);
dr(pane2, [ 35.9606384, -83.9207392 ]);
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function loop(){
for( var i = 0; i<100; i++){
hide(pane1);
show(pane2);
await sleep(1000);
hide(pane2);
show(pane1);
await sleep(1000);
}
}
loop();});
HTML:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet-src.js" integrity="sha256-wc8X54qvAHZGQY6nFv24TKlc3wtO0bgAfqj8AutTIu0=" crossorigin="anonymous"></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
width: 900px;
height: 500px;
}
</style>
</head>
<body>
<div id='map'></div>
</body>
</html>
<script src="c.js"></script>
Kindly check my output here Can anybody here help me out with some good tutorial or ways to integrate openweathermap api with leaflet mapquest api. I read on owm website that both are compatible and can work together. Any help will be appreciated.
Thanks !
<html>
<head>
<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.0.0/mapquest.js"></script>
<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.0.0/mapquest.css"/>
<script type="text/javascript">
window.onload = function() {
L.mapquest.key = 'mapquestkeyhere';
var map = L.mapquest.map('map', {
center: [40.7128, -74.0059],
layers: L.mapquest.tileLayer('map'),
zoom: 11,
});
var latlong = [
[40.783060, -73.971249],
[40.7128, -74.0059],
[40.678178, -73.944158]
];
var infowindow = ["Manhattan","NY","Brooklyn"];
for(var i = 0; i < latlong.length ; i++){
var marker = L.marker(latlong[i]).addTo(map);
marker.bindPopup(infowindow[i]).openPopup();
}
var polyline = L.polyline(latlong,{color:'red'}).addTo(map);
<!-- map.addLayer(L.mapquest.trafficLayer());
<!-- map.addLayer(L.mapquest.incidentsLayer());
map.addLayer(new L.TileLayer("http://tile.openweathermap.org/map/precipitation_new/{z}/{x}/{y}.png?appid=owmkeyhere"));
}
</script>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
</body>
</html>
I added the following line to the basic MapQuest.js sample in the MapQuest Developer Network.
map.addLayer(new L.TileLayer("http://tile.openweathermap.org/map/precipitation_new/{z}/{x}/{y}.png?appid=YOUR_KEY"));
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();
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 built a heatmap on Leaflet.
My first goal is to see the heatmap when you open the map. The second goal is not to view the heatmap if the zoom level is greater than 9.
I tried this :
if (map.getZoom() >9 {
map.removeLayer (heatmapLayer);
};
But it did not work.
Would you have any suggestions ?
Thanks !
Here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Application - version 1.0</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.3/leaflet.css" />
<link rel="stylesheet" href="style_p.css" />
<style type="text/css">
html, body, #map {
margin: 0;
margin-top: 0%;
width: 100%;
height: 100%;
};
</style>
</head>
<!-- Favicon -->
<link rel="icon" href="california.ico" />
<body>
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.6.3/leaflet-src.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script src="jquery.js"></script>
<script type="text/javascript" src="heatmap.js"></script>
<script type="text/javascript" src="heatmap-leaflet.js"></script>
<script type="text/javascript" src="sloopjohnb.js"></script>
<script src="google.js"></script>
<script src="leaflet_search.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var base = new L.TileLayer('http://129.206.74.245:8001/tms_r.ashx?x={x}&y={y}&z={z}');
var ggl2 = new L.Google('SATELLITE');
var heatmapLayer;
heatmapLayer = L.TileLayer.heatMap({
radius: 10,
opacity: 0.8,
gradient: {
0.45: "rgb(0,0,255)",
0.55: "rgb(0,255,255)",
0.65: "rgb(0,255,0)",
0.95: "yellow",
1.0: "rgb(255,0,0)"
}
});
var Data1={
max: 1,
data: sloopjohnb
};
heatmapLayer.addData(Data1.data);
var baseMaps = {
"Fond OSM": osm,
"Fond de carte de base": base,
"Photo. aérienne Google" : ggl2
};
var overlayMaps = {
'Heatmap': heatmapLayer
};
map = new L.Map('map', {
minZoom : 1,
maxZoom : 11,
boxZoom : true,
layers: [base, heatmapLayer]
});
var controls = L.control.layers(baseMaps, overlayMaps, {position: 'bottomright'});
controls.addTo(map);
map.addControl(L.control.search());
L.control.scale().addTo(map);
map.attributionControl.addAttribution('Heatmap.js');
map.setView(new L.LatLng(39.291,-5.9765),2);
// Disparition de la heatmap en fct du zoom
map.on('zoomend', function () {
if (map.getZoom() > 9) {
map.removeLayer(heatmapLayer);
}
});
});
</script>
</body>
</html>
Are you sure you are creating the listener correctly?
For example, this seems like it should be called when the user zooms. So something like:
Edited
map.on('zoomend', function () {
if (map.getZoom() > 9 && map.hasLayer(heatmapLayer)) {
map.removeLayer(heatmapLayer);
}
if (map.getZoom() < 9 && map.hasLayer(heatmapLayer) == false)
{
map.addLayer(heatmapLayer);
}
});
If you ONLY want the layer added/removed based on zoom, don't add it to your layer control here:
var controls = L.control.layers(baseMaps, overlayMaps, {position: 'bottomright'});
controls.addTo(map);
You will just have to make sure you are doing your adding/removing when it is necessary. Try messing with this set up a little and see where you get. Also, the Documentation is well written regarding the use of L.tileLayer
You can use the leaflet-zoom-show-hide library to do it. This will automatically show/hide your layers as you zoom.
zsh = new ZoomShowHide(map);
var marker1 = L.marker([50.096, 14.425]);
// minzoom, maxzoom
zsh.addLayer(marker1, 10, 13);
var marker2 = L.marker([50.076, 14.425]);
zsh.addLayer(marker2, 8, null);