Here is my tooltip function
tooltipContent: function(label, value, elem, graph) { // jshint ignore:line
return '<p>' + label + ' - ' + elem.value +'</p>';
},
and tooltip(android 5.1.1 - 40abc) is too far away from the pie.
Related
Good day everybody.
I bought a nice template and leaftlet is used to show maker.
Here is the demo . Actually when you clik on a marker, it open a widnows with a picture and some température value.
I would like to have all of the windows open. Of course, I am going to modify the html, to remove the picture and some information as GPS, and only keep the temperatue value. The goal is to be able to immediately see the temperature boxes below the markers. Optionaly, when I click on the marker it redirect to another page, same you click on the picture.
My first problem, I can not find the jacasvript script which work with the link of marker. The idea would be to cancel the effect of the click, or as I wrote, after we click it open the graph page instead of opening the windows.
My first question: how can I find a do to change the action of the click, on the marker
My second question (may be it be cancel the 1st question :) ), how can I change the behaviour of the bindpopup? Is there way "to tell" to the bindpopup, stay always open?
My thirst question: Or can we add one or two additional nice boxes, which show always the temperature below the marker, and keep the bindPopup, as it is? That would be nice as well
Here is the code of the map line 215
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// OpenStreetMap - Homepage
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function createHomepageOSM(_latitude,_longitude,_nbField){
setMapHeight();
if( document.getElementById('map') != null ){
var map = L.map('map', {
center: [_latitude,_longitude],
zoom: 18,
scrollWheelZoom: false
});
//L.tileLayer('http://openmapsurfer.uni-hd.de/tiles/roadsg/x={x}&y={y}&z={z}', {
L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
//subdomains: '0123',
maxZoom: 20,
attribution: 'OpenStreetMap contributors, CC-BY-SA'
}).addTo(map);
var markers = L.markerClusterGroup({
showCoverageOnHover: false
});
function locateUser() {
$('#map').addClass('fade-map');
map.locate({setView : true})
}
$('.geo-location').on("click", function() {
locateUser();
});
$.ajax({
type: "POST",
url: "sql/get_map.mysql.php",
//data:'node=node1',
//data:{node_id:"firstnode", node2:"secondnode", node3:"thirdnode", from:"from", to:"to"}, // Send parameter to get.php
success: result,
error: error,
dataType: "json"
});
function error(data)
{
$('body').addClass('loaded');
alert("Error getting datas from DB");
console.log("Error getting datas from DB");
console.log(data);
}
function result(data){
console.info("data:",data);
var allMarkers=[];
var nhtml = '<img src="assets/img/property-types/vineyard.png">';
for (var i = 0; i < data.properties.length; i++) {
allMarkers.push(L.latLng(data.properties[i]['la'], data.properties[i]['lo']));
//data.properties[i]['b2'] = 0;
if((data.properties[i]['b1']>=data.properties[i]['se'] && data.properties[i]['b1'] < data.properties[i]['se']+1) ||
(data.properties[i]['b2']>=data.properties[i]['se'] && data.properties[i]['b2'] < data.properties[i]['se']+1) ||
(data.properties[i]['b3']>=data.properties[i]['se'] && data.properties[i]['b3'] < data.properties[i]['se']+1) ||
(data.properties[i]['b4']>=data.properties[i]['se'] && data.properties[i]['b4'] < data.properties[i]['se']+1)
)
{
nhtml = '<img src="assets/img/property-types/vineyard-orange.png">';
}
if(((data.properties[i]['b1'] < data.properties[i]['se']) && data.properties[i]['b1'] != null) ||
((data.properties[i]['b2'] < data.properties[i]['se']) && data.properties[i]['b2'] != null) ||
((data.properties[i]['b3'] < data.properties[i]['se']) && data.properties[i]['b3'] != null) ||
((data.properties[i]['b4'] < data.properties[i]['se']) && data.properties[i]['b4'] != null)
)
{
nhtml = '<img src="assets/img/property-types/vineyard-red.png">';
}
else{
nhtml = '<img src="assets/img/property-types/vineyard.png">';
}
var _icon = L.divIcon({
//html: '<img src="' + locations[i][7] +'">',
html: nhtml,
iconSize: [40, 48],
iconAnchor: [20, 48],
popupAnchor: [0, -48]
});
var title = data.properties[i]['station'];
var marker = L.marker(new L.LatLng(data.properties[i]['la'],data.properties[i]['lo']), {
title: title,
icon: _icon
});
var str ='';
if(data.properties[i]['b1'] != null)
{
str = str.concat('<div class="tag price"> ' + data.properties[i]['b1'] + '°C</div>');
}
if(data.properties[i]['b2'] != null)
{
str = str.concat('<div class="tag price"> ' + data.properties[i]['b2'] + '°C</div>');
}
if(data.properties[i]['b3'] != null)
{
str = str.concat('<div class="tag price"> ' + data.properties[i]['b3'] + '°C</div>');
}
if(data.properties[i]['b4'] != null)
{
str = str.concat('<div class="tag price"> ' + data.properties[i]['b4'] + '°C</div>');
}
marker.bindPopup(
'<div class="property">' +
'<a data-field=' + data.properties[i]['id_field'] +'" data-station=' + data.properties[i]['id_station'] +'" href="charts.php?field='+ data.properties[i]['id_field'] +'">' +
'<div class="property-image">' +
'<img src="img/stations/station-' + data.properties[i]['id_station'] + '.jpg">' +
'</div>' +
'<div class="overlay">' +
'<div class="info">' +
'<h3>' + data.properties[i]['station'] + '</h3>' +
'<figure>' + data.properties[i]['da'] + '</figure>' +
'<figure>' + data.properties[i]['la'] + ' ' + data.properties[i]['lo'] +'</figure>' +
str +
'<div class="tag"> ' + data.properties[i]['se'] + '°C</div>' +
'</div>' +
'</div>' +
'</a>' +
'</div>'
);
markers.addLayer(marker);
}
if(_nbField>1){
bounds = L.latLngBounds(allMarkers);
map.fitBounds(bounds,{ padding: [10, 10] });
}
map.addLayer(markers);
map.on('locationfound', onLocationFound);
function onLocationFound(){
$('#map').removeClass('fade-map');
}
$('body').addClass('loaded');
setTimeout(function() {
$('body').removeClass('has-fullscreen-map');
}, 1000);
$('#map').removeClass('fade-map');
}
}
}
My last question, with firefox, id possible "to track" the javascript action?
Feel free to aks complementary question to better understand and help, if I missed to provide information.
Many thanks
You can add a click event to the marker:
marker.on('click',(e)=>{
console.log(e);
});
Show all Popups:
You need to set the options autoClose and closeOnClick to false:
marker.bindPopup(content,{autoClose: false, closeOnClick: false});
You can use Tooltips:
marker.bindTooltip('5.3°C', {direction: 'bottom', permanent: true});
I don't know exactly what do you mean, but it sounds like debugging. Use the developer console with the Debugger.
Thanks for your reply and help
Unfortunately 2. does not work. There is no differences. I added closeButton:true, and that works, but it's not what I need.
marker.bindPopup(
'<div class="property">' +
'<a data-field=' + data.properties[i]['id_field'] +'" data-station=' + data.properties[i]['id_station'] +'" href="charts.php?field='+ data.properties[i]['id_field'] +'#st-'+ data.properties[i]['id_station'] +'">' +
'<div class="property-image">' +
'<img src="img/stations/station-' + data.properties[i]['id_station'] + '.jpg">' +
'</div>' +
'<div class="overlay">' +
'<div class="info">' +
'<h3>' + data.properties[i]['station'] + '</h3>' +
'<figure>' + data.properties[i]['da'] + '</figure>' +
'<figure>' + data.properties[i]['la'] + ' ' + data.properties[i]['lo'] +'</figure>' +
str +
'<div class="tag"> ' + data.properties[i]['se'] + '°C</div>' +
'</div>' +
'</div>' +
'</a>' +
'</div>',{autoClose: true, closeOnClick: false, closeButton: true}
);
I also tried the interesting option with tooltip. Bellow the above code I added
marker.bindTooltip('5.3°C', {direction: 'bottom', permanent: true});
But that print an error message
marker.bindTooltip is not a function
Is there additionally library I have to add for tooltop, or is inlcuded into leafet.
(bindTootip would be great and enough for my need)
Thanks for helping
Cheers
I am currently trying to give my popups different background based on the layer they are found in (i.e. I have a layer called Indigenous Sites where I would like the background of the popup to be different from the other layers).
I have tried giving the popup a className but I am not sure how to call it properly in the CSS.
Below is a sample of the popup script in my html document (script for 2 different layers popups):
// popup for the Other European Sites layer
map.on('click', 'Other European Sites', function (e) {
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML('<h2>' + 'European Site' + '</h2>' +
'<p>' + e.features[0].properties.placeName + '</p>' +
'<h2>' + 'Story' + '</h2>' +
'<p>' + e.features[0].properties.Story + '</p>' +
'<h2>' + 'Latitude' + '</h2>' +
'<p>' + e.features[0].properties.latitude + '</p>' +
'<h2>' + 'Longitude' + '</h2>' +
'<p>' + e.features[0].properties.longitude + '</p>')
.addTo(map);
});
// popup for the Other Indigenous Sites layer
map.on('click', 'Other Indigenous Sites', function (e) {
new mapboxgl.Popup({className: 'popupCustom'})
.setLngLat(e.lngLat)
.setHTML('<h2>' + 'Indigenous Site' + '</h2>' +
'<p>' + e.features[0].properties.placeName + '</p>' +
'<h2>' + 'Story' + '</h2>' +
'<p>' + e.features[0].properties.Story + '</p>' +
'<h2>' + 'Latitude' + '</h2>' +
'<p>' + e.features[0].properties.latitude + '</p>' +
'<h2>' + 'Longitude' + '</h2>' +
'<p>' + e.features[0].properties.longitude + '</p>')
.addTo(map);
});
Here is my current CSS that gives all of my popups the same background:
.mapboxgl-popup-content {
overflow-y: scroll;
background-color: #000000;
}
How would I go about assigning the popups different classNames and calling them in the CSS so that I can have different backgrounds for each layer?
Thanks so much for any input!
The className is a CSS class name that will be applied to the popup container (which contains the "mapboxgl-popup-content" element). So if you want your "Other Indigenous Sites" layer to have, say, yellow popups, you could do this:
.mapboxgl-popup-content {
overflow-y: scroll;
background-color: #000000;
}
.popupCustom .mapboxgl-popup-content {
background-color: yellow;
}
Note however that this functionality was only very recently added and I don't think it has been released yet. (It's not in the published docs).
I am working with integration of bing maps into the application. When the search button is clicked after entering the zip code information, the div below will display a list of available stores and a map with pushpin on that. Showing an infobox is working when I hover over the pushpin. But my requirement is that, I have to show the particular infobox to the user, when the user hovers over the list in the left of the maps.
For example here, when I hover over the first result on the left, the corresponding infobox should show in the map. I am unable to figure out why it not working. Appreciate your help in advance. Thank you. Please find below what I have tried so far.
for (var i = 0; i < data.length; i++) {
if (storeLoc && (data[i].metadata.LocationTypeSort == "ja")) {
console.log(counter);
console.log(data);
innerTablecontent += "<tr><td><h4 class='h4-mapDetails-storeName'>" + '<div style="display: inline-block; vertical-align: middle"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><circle cx="12.5" cy="12.5" r="12.5"/><text x="50%" y="17" text-anchor="middle" fill="white" font-size="14" font-weight="bold">' + (+counter) + '</text></svg></div>' +
" " + "<b><span style='margin-top:-20px;display:block;margin-left:45px;'>" + data[i].metadata.LocationName + "</span></b>" + "</h4><p class='p-mapDetails'>" + data[i].metadata.AddressLine + "," + data[i].metadata.Locality + "," + data[i].metadata.AdminDistrict + " " + data[i].metadata.PostalCode + "</p>"
+ "<p class='p-mapDetails'>" + data[i].metadata.Phone + "<span><span class='index hidden'>" + i + "</span> | " + '<a style=" font-family:Helvetica Neue LT Pro Roman,sans-serif;color:#00A7CE" href="">View details</a>' + "</span></p>"+ "<span class='miles-mapDetails'>" +(data[i].metadata.__Distance* 0.6214).toFixed(2)+"mi</span></td></tr>"
locations.push(data[i].getLocation());
var pin1 = createCirclePushpin(data[i].getLocation(), 12.5, 'rgb(0, 0, 0)', 'black', 1, counter);
pin1.metadata = {
//title: counter + "." + " " + data[i].metadata.LocationName,
title: " ",
description: '<div style="display: inline-block; vertical-align: middle; margin-right:10px;"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><circle cx="12.5" cy="12.5" r="12.5"/><text font-weight="bold" x="50%" y="17" text-anchor="middle" fill="white" font-size="14">' + (+counter) + '</text></svg></div>' + "<span class='h4-mapDetails-storeName'>" + data[i].metadata.LocationName + "</span><p style='margin-bottom:-3px;font-family:Helvetica Neue LT Pro Roman,Helvetica,sans-serif;font-style:normal !important;color:#000;font-size:14px;'>" + data[i].metadata.AddressLine + ", " + data[i].metadata.Locality + "," + data[i].metadata.AdminDistrict + " " +
data[i].metadata.PostalCode + "<br>" + data[i].metadata.Phone + "</p>" + "<a>" + '<a style="font-size:14px;font-family:Helvetica Neue LT Pro Roman,Helvetica,sans-serif;color:#00A7CE" href="">View details</a>' + "</a>"
};
Microsoft.Maps.Events.addHandler(pin1, 'mouseover', pushpinClicked);
map.entities.push(pin1);
counter++;
}
Function to call when the list is hovered:
$("#mapDetails").on("mouseover", "table td", function() {
sideTabHoverEvent(hoverdata[$(this)[0].getElementsByClassName('index')[0].innerText]);
})
function sideTabHoverEvent(e) {
if (e) {
//Set the infobox options with the metadata of the pushpin.
infobox.setOptions({
location: e.getLocation(),
//title: e.metadata.title,
description: e.metadata.description,
visible: true
});
}
}
In you sideTabHoverEnt function you are assuming e is the pushpin the user interacted with, but that's not what you are passing in. You are passing in a string (index as a string). Try doing the following:
function sideTabHoverEvent(e) {
if (e) {
//Turn the index string value into a number.
var idx = parseInt(e);
var shape = map.entities.get(idx);
//Set the infobox options with the metadata of the pushpin.
infobox.setOptions({
location: shape.getLocation(),
//title: shape.metadata.title,
description: shape.metadata.description,
visible: true
});
}
}
I have a GEOJSON that I am loading up and displaying on a map using Leaflet it is, colour coding them depending on the abundance of the animal in an area and able to display a popup with more information.
What I have been trying to do is turn this into a vectorTile using geojson-vt and display this. This polygon geojson is one of the smaller and takes a long time to load and some others crash the browser.
I have tired to work through the example here http://bl.ocks.org/Sumbera/c67e5551b21c68dc8299 but I cannot understand what is happening.
I am definitely open to other ideas on how to display this data, I am very much a newbie.
If you wish to see what I have so far please look at http://huntingspots.co.nz/gareth/leaflet_layering.html.
Thank you very much for your time.
//Pig Layer
var pigLayer = new L.LayerGroup();
$.getJSON("feralpig.geojson",function(hoodData){
L.geoJson( hoodData, {
style: function(feature){
var fillColour,
abundance = feature.properties.Abundance;
if (abundance == "H") fillColour = "#194866";
else if ( abundance == "M" ) fillColour = "#2c7eb2";
else if ( abundance == "L" ) fillColour = "#40b5ff";
else fillColour = "#f7f7f7"; // no data
return { color: "#999", weight: 1, fillColor: fillColour, fillOpacity: .4 };
},
onEachFeature: function( feature, layer ){
layer.bindPopup( "<strong>" + "Species: " + "</strong>" + feature.properties.Scientific
+ "<br/>" + "<strong>" + "Common Name: " + "</strong>" + feature.properties.CommonName
+ "<br/>" + "<strong>" + "Abundance: " + "</strong>" + feature.properties.Abundance
+ "<br/>" + "<strong>" + "Data collection method: " + "</strong>" + feature.properties.AbundRelia
+ "<br/>" + "<strong>" + "Notes: " + "</strong>" + feature.properties.AbundNotes);
}
}).addTo(pigLayer);
});
I 'm working on an app in ionic framework in which I want to get location of device.
It works fine for getCurrentPosition
But when I try to use watchPosition, so that I can get new position whenever there is a change in location of device. it does nothing.
I 'm not sure what I 'm missing
my controllers.js code
.controller('LocCtrl', function($scope,$cordovaGeolocation) {
var posOptions = {timeout: 10000, enableHighAccuracy: false};
$cordovaGeolocation
.getCurrentPosition(posOptions)
.then(function (position) {
alert('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n' +
'Altitude: ' + position.coords.altitude + '\n' +
'Accuracy: ' + position.coords.accuracy + '\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
'Heading: ' + position.coords.heading + '\n' +
'Speed: ' + position.coords.speed + '\n' +
'Timestamp: ' + position.timestamp + '\n');
}, function(err) {
alert(err);
});
var watchOptions = {
timeout : 3000,
enableHighAccuracy: false // may cause errors if true
};
var watch = $cordovaGeolocation.watchPosition(watchOptions);
watch.promise.then(
null,
function(err) {
alert("error:"+err);
},
function(position) {
var lat = position.coords.latitude
var long = position.coords.longitude
alert("Lat in Watch:"+lat);
});
$cordovaGeolocation.clearWatch(watch.watchId);
})
I used some alert messages to see whats happening,
In current setuation, it gives two alert messages giving getCurrentPosition, but noting happens on changing device Location.