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"));
Related
I have the following code and I want to add different text in each of the icons. Example for the location "Quebec" it should be entered "08h00" for "Beaupre" .. "15h00" etc..
<html>
<head>
<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>
<script type="text/javascript">
window.onload = function() {
L.mapquest.key = '';
// Geocode three locations, then call the createMap callback
L.mapquest.geocoding().geocode(['Quebec,Qc', 'Beaupre,Qc', 'Montmagny,Qc'], createMap);
function createMap(error, response) {
// Initialize the Map
var map = L.mapquest.map('map', {
layers: L.mapquest.tileLayer('map'),
center: [0, 0],
zoom: 12
});
// Generate the feature group containing markers from the geocoded locations
var featureGroup = generateMarkersFeatureGroup(response);
// Add markers to the map and zoom to the features
featureGroup.addTo(map);
map.fitBounds(featureGroup.getBounds());
}
function generateMarkersFeatureGroup(response) {
var group = [];
for (var i = 0; i < response.results.length; i++) {
var location = response.results[i].locations[0];
var locationLatLng = location.latLng;
// Create a marker for each location
var marker = L.marker(locationLatLng, {icon: L.mapquest.icons.flag()})
.bindPopup(location.adminArea5 + ', ' + location.adminArea3);
group.push(marker);
}
return L.featureGroup(group);
}
}
</script>
</head>
<body style="border: 0; margin: 0;">
<div id="map" style="width: 100%; height: 530px;"></div>
</body>
</html>
Could anyone help me please ?
Thanks.
Try setting the symbol for the flag like icon: L.mapquest.icons.flag({symbol:"08h00"})
More details here: https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-icons/
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>
I am using leaflet for the first time as I am using open street map in place for Google.
In google autocomplete we use to get address's Suburb via
var place = autocomplete.getPlace();
Can anyone help me in leafletJs to get address details.
Thanks Much in advance.
For autocomplete address in leaflet JS you can use its plugin. Here Code uses the ESRI geoserach plugin.
you can refer this link for more detail.
DEMO
var map = L.map('map').setView([40.91, -96.63], 4);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var searchControl = L.esri.Geocoding.geosearch().addTo(map);
var results = L.layerGroup().addTo(map);
searchControl.on('results', function(data) {
results.clearLayers();
for (var i = data.results.length - 1; i >= 0; i--) {
results.addLayer(L.marker(data.results[i].latlng));
}
});
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
<!-- Load Leaflet from CDN -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet#2.1.4/dist/esri-leaflet.js" integrity="sha512-m+BZ3OSlzGdYLqUBZt3u6eA0sH+Txdmq7cqA1u8/B2aTXviGMMLOfrKyiIW7181jbzZAY0u+3jWoiL61iLcTKQ==" crossorigin=""></script>
<!-- Load Esri Leaflet Geocoder from CDN -->
<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder#2.2.9/dist/esri-leaflet-geocoder.css" integrity="sha512-v5YmWLm8KqAAmg5808pETiccEohtt8rPVMGQ1jA6jqkWVydV5Cuz3nJ9fQ7ittSxvuqsvI9RSGfVoKPaAJZ/AQ==" crossorigin="">
<script src="https://unpkg.com/esri-leaflet-geocoder#2.2.9/dist/esri-leaflet-geocoder.js" integrity="sha512-QXchymy6PyEfYFQeOUuoz5pH5q9ng0eewZN8Sv0wvxq3ZhujTGF4eS/ySpnl6YfTQRWmA2Nn3Bezi9xuF8yNiw==" crossorigin=""></script>
<div id="map"></div>
Using the geocoding control to search for addresses and center the map.
var map = L.map('map').setView([-28.4792625, 24.6727135], 4);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var searchControl = L.esri.Geocoding.geosearch().addTo(map);
var results = L.layerGroup().addTo(map);
searchControl.on('results', function (data) {
results.clearLayers();
for (var i = data.results.length - 1; i >= 0; i--) {
results.addLayer(L.marker(data.results[i].latlng));
}
});
body { margin:0; padding:0; }
#map { position: absolute; top:0; bottom:0; right:0; left:0; }
<html>
<head>
<meta charset="utf-8" />
<title>Geocoding Control</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<!-- Load Leaflet from CDN -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet#2.4.1/dist/esri-leaflet.js"
integrity="sha512-xY2smLIHKirD03vHKDJ2u4pqeHA7OQZZ27EjtqmuhDguxiUvdsOuXMwkg16PQrm9cgTmXtoxA6kwr8KBy3cdcw=="
crossorigin=""></script>
<!-- Load Esri Leaflet Geocoder from CDN -->
<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder#2.3.3/dist/esri-leaflet-geocoder.css"
integrity="sha512-IM3Hs+feyi40yZhDH6kV8vQMg4Fh20s9OzInIIAc4nx7aMYMfo+IenRUekoYsHZqGkREUgx0VvlEsgm7nCDW9g=="
crossorigin="">
<script src="https://unpkg.com/esri-leaflet-geocoder#2.3.3/dist/esri-leaflet-geocoder.js"
integrity="sha512-HrFUyCEtIpxZloTgEKKMq4RFYhxjJkCiF5sDxuAokklOeZ68U2NPfh4MFtyIVWlsKtVbK5GD2/JzFyAfvT5ejA=="
crossorigin=""></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Source: http://esri.github.io/esri-leaflet/examples/geocoding-control.html
I am having lots of problem accessing any objects from a Yahoo Boss YQL Json Response data. I used this YQL Console for Boss Search Tables.
Here is what I have done:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
var url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20boss.search%20where%20service%20%3D%22images%22%20AND%20count%3D%221%22%20AND%20q%3D%22iphone6%22%20AND%20ck%20%3D%20%22MYCONSUMER_KEY%22%20AND%20secret%3D%22MYCONSUMER_SECRET%22%3B&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
(function showPix()
{
$.getJSON(url, function (data)
{
console.log(data);
var myObj = data.results.bossresponse.images.results.result.clickurl;
$.each(myObj, function ()
{
$('#pix').append(this);
});
});
})();
</script>
</head>
<body>
<div id="pix">
</div>
<button onclick="showPix();">run</button>
</body>
</html>
The console.log(); gives me one object that contains the image, but I cannot manage to show the image on the screen. And it tells me that showPix is undefined. Any help would be greatly appreciated. TIA
I figured this out as follows:
<html>
<head><title>YQL and RSS: Yahoo Top News Stories</title>
<style type='text/css'>
#results{ width: 40%; margin-left: 30%; border: 1px solid gray; padding: 5px; height: 200px; overflow: auto; }
</style>
<script type='text/javascript'>
// Parses returned response and extracts
// the title, links, and text of each news story.
function top_stories(o){
var items = o.query.results.item;
var output = '';
var no_items=items.length;
for(var i=0;i<no_items;i++){
var title = items[i].title;
var link = items[i].link;
var desc = items[i].description;
output += "<h3><a href='" + link + "'>"+title+"</a></h3>" + desc + "<hr/>";
}
// Place news stories in div tag
document.getElementById('results').innerHTML = output;
}
</script>
</head>
<body>
<!-- Div tag for stories results -->
<div id='results'></div>
<!-- The YQL statment will be assigned to src. -->
<script src='https://query.yahooapis.com/v1/public/yql?q=select%20title%20from%20rss%20where%20url%3D%22http%3A%2F%2Frss.news.yahoo.com%2Frss%2Ftopstories%22&format=json&callback=top_stories'></script>
</body>
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);