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/
Related
I'm trying to select only one layer using a select.
This is my first time with leaflet and I use this great guide: https://maptimeboston.github.io/leaflet-intro/
Now I have on my map the part of "markerclusters" and the last one "heatmap" and I want to choose only one layer or the other or both.. I've been looking for examples but I don't know how to apply them.
(The select right now is ornamental as you can see.)
And here's the image of my map:
Image
here is my code, thanks in advance!
<html>
<head>
<title>MAPA PRUEBA</title>
<link rel="stylesheet" href="leaflet.css"/>
<link rel="stylesheet" href="MarkerCluster.css"/>
<script src="leaflet.js"></script>
<script src="leaflet.markercluster.js"></script>
<script src="leaflet.heat.js"></script>
<script src="jquery-2.1.1.min.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="panel" style = "top-left:10px; background-color:#D3D3D3;">
<label>Tipo de mapa</label>
<select id="estilo" onchange="Bordeaux()">
<option value="points" >PUNTOS</option>
<option value="heat">MAPA DE CALOR</option>
</select>
<div id="map"></div>
<script>
// initialize the map
var map = L.map('map').setView([40.46, -3.74], 4);
// load a tile layer
L.tileLayer('http://192.168.0.103/osm/{z}/{x}/{y}.png',
{
attribution: 'Tiles by MAPC, Data by MassGIS',
maxZoom: 17,
minZoom: 1
}).addTo(map);
// load GeoJSON from an external file
$.getJSON("rodents.geojson",function(data){
var ratIcon = L.icon({
iconUrl: 'images/marker-icon.png'});
var rodents = L.geoJson(data,{
pointToLayer: function(feature,latlng){
var marker = L.marker(latlng,{icon: ratIcon});
marker.bindPopup(feature.properties.Location);
return marker;}
});
var clusters = L.markerClusterGroup();
clusters.addLayer(rodents);
map.addLayer(clusters);
});
// HEAT LAYER
$.getJSON("rodents.geojson",function(data){
var locations = data.features.map(function(rat) {
// the heatmap plugin wants an array of each location
var location = rat.geometry.coordinates.reverse();
location.push(1.9);
return location;
});
var heat = L.heatLayer(locations, { radius: 50 });
map.addLayer(heat);
});
</script>
</body>
</html>
change the clusters and heat variable to global. And add only one of both layers to the map.
var clusters, heat;
$.getJSON("rodents.geojson",function(data){
// ...
clusters = L.markerClusterGroup();
clusters.addLayer(rodents);
map.addLayer(clusters);
});
// HEAT LAYER
$.getJSON("rodents.geojson",function(data){
//...
heat = L.heatLayer(locations, { radius: 50 });
});
Then add / remove the layers in your onchange function from the select:
<select id="estilo" onchange="changeFnc(this)">
<option value="points" >PUNTOS</option>
<option value="heat">MAPA DE CALOR</option>
</select>
function changeFnc(obj){
var value = obj.value;
if(value == "points"){
if(map.hasLayer(clusters)){
map.removeLayer(clusters);
}
map.addLayer(points);
}else{
if(map.hasLayer(points)){
map.removeLayer(points);
}
map.addLayer(clusters);
}
}
PS: This code is not tested but should work
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>
Using Leaflet and plugins like ListMarkers, I display a list of visible markers on the map. After hovering over the appropriate <li> element in the List, I want the marker popup to be displayed. The <li> element contains various information about the product, unfortunately after hovering over them, the popup appears and disappears. How to make it that if I hover entire <li> element popup will show and not go crazy of each element separately ?
var list = new L.Control.ListMarkers({ layer: markers, itemIcon: null });
list.addTo(map);
list.on('item-mouseover', function(e) {
e.layer.setIcon(L.icon({
iconUrl: '/marker2.png'
}));
e.layer.openPopup();
}).on('item-mouseout', function(e) {
e.layer.setIcon(L.icon({
iconUrl: '/marker.png'
}))
e.layer.closePopup();
});
listaHTML = list.getContainer();
document.getElementById("lista").appendChild(listaHTML);
Seems to be a CSS problem.
Workaround
li.list-markers-li>a>span,
li.list-markers-li>a>b {
pointer-events: none;
}
var map = new L.Map('map', {
zoom: 10,
minZoom: 10,
center: L.latLng(43.90974, 10.2419)
});
map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); //base layer
var markersLayer = new L.LayerGroup(); //layer contain searched elements
map.addLayer(markersLayer);
////////////populate map from cities-italy.js
for (var i in cities) {
let marker = L.marker(L.latLng(cities[i].loc), {
title: cities[i].name
}).addTo(markersLayer);
marker.bindPopup(cities[i].name)
}
var list = new L.Control.ListMarkers({
layer: markersLayer,
itemIcon: null
});
list.on('item-mouseover', function(e) {
e.layer.openPopup();
}).on('item-mouseout', function(e) {
e.layer.closePopup();
});
map.addControl(list);
#map {
position: absolute;
top: 35px;
left: 0;
width: 100%;
height: 80%
}
li.list-markers-li>a>span,
li.list-markers-li>a>b {
pointer-events: none;
}
<script src="https://labs.easyblog.it/maps/leaflet-list-markers/examples/cities-italy.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js"></script>
<script src="https://labs.easyblog.it/maps/leaflet-list-markers/src/leaflet-list-markers.js"></script>
<link href="https://labs.easyblog.it/maps/leaflet-list-markers/src/leaflet-list-markers.css" rel="stylesheet" />
<div id="map"></div>
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>
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"));