Creating a geojson-vt and displaying in Leaflet 0.7 - leaflet

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);
});

Related

How can I change the behaviour of bindPopup

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

How to replace deprecated jQuery functions?

I am trying to display a map in my UI5 app using a formatter.js where I need to put the address with the map URL together.
In the old world the code should look like the following:
formatMapUrl: function(sStreet, sZIP, sCity, sCountry) {
return "https://maps.googleapis.com/maps/api/staticmap?zoom=13&size=640x640&markers="
+ jQuery.sap.encodeURL(sStreet + ", " + sZIP + " " + sCity + ", " + sCountry);
},
How should I replace the deprecated function? Where should I add the new code?
If you look at the API documentation for jQuery.sap.encodeURL, you see it states to use the module sap/base/security/encodeURL now.
Usage example from documentation:
sap.ui.require(["sap/base/security/encodeURL"], function(encodeURL) {
var sEncoded = encodeURL("a/b?c=d&e");
console.log(sEncoded); // a%2fb%3fc%3dd%26e
});
Usage in the formatter.js:
sap.ui.define([
"sap/base/security/encodeURL"
], function (encodeURL) {
"use strict";
return {
formatMapUrl: function(sStreet, sZIP, sCity, sCountry) {
var sBaseUrl = "https://maps.googleapis.com/maps/api/staticmap?zoom=13&size=640x640&markers=";
var sEncodedString = encodeURL(sStreet + ", " + sZIP + " " + sCity + ", " + sCountry);
return sBaseUrl + sEncodedString;
}
};
});

Present Time Range in Grafana's Text Panel

Is there a way to show timeRange.from and timeRange.to in Grafana's Text panel or may be in an another panel?
I tried text-panels with markdown mode:
# Time From: $__interval
with different variables but no one did work. Neither did it if I defined a variable in Settings. The interval or timestamp is not showing.
I'm currently working on an HTML solution, but wondering if there is a simplier/proper way to present the time ranges?
My HTML-solution, in case somebody faces the same issue
(got the main part from maxreb's solution from: https://github.com/grafana/grafana/issues/1909) :
<script type="text/javascript">
refreshTimeFrom();
refreshTimeTo();
angular.element('grafana-app').injector().get('timeSrv').$rootScope.$on('refresh', function(event, data) { refreshTimeFrom(); });
function refreshTimeFrom( )
{
var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var ts = new Date(angular.element('grafana-app').injector().get('timeSrv').timeRange().from);
document.getElementById("timeFrom").innerHTML = days[ts.getUTCDay() ] + " "
+ ts.getUTCDate() + "." + (ts.getUTCMonth()+1) + "."
+ ts.getUTCFullYear() + " " + ts.getUTCHours() + ":"
+ ts.getUTCMinutes() + ":" + ts.getUTCSeconds();
}
function refreshTimeTo( )
{
var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var ts = new Date(angular.element('grafana-app').injector().get('timeSrv').timeRange().to);
document.getElementById("timeTo").innerHTML = days[ts.getUTCDay() ] + " "
+ ts.getUTCDate() + "." + (ts.getUTCMonth()+1) + "."
+ ts.getUTCFullYear() + " " + ts.getUTCHours() + ":"
+ ts.getUTCMinutes() + ":" + ts.getUTCSeconds();
}
</script>
<font size = "3"><b> From:</b> <span id="timeFrom" /></br></font>
<font size = "3"><b> To: </b> <span id="timeTo" /> </font>

Bing map infobox on hover over a li not displaying

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
});
}
}

Getting null value while displaying contacts in iphone phonegap application

I am working on Phonegap application and trying to get the contacts of the device.
What I have done from this reference is as follows :
function onDeviceReady() {
var options = new ContactFindOptions();
options.filter=""; // empty search string returns all contacts
options.multiple=true; // return multiple results
filter = ["displayName"];
navigator.contacts.find(filter, onSuccess, onError, options);
}
// contacts Methods
function onSuccess(contacts) {
for (var i=0; i<contacts.length; i++) {
for (var j=0; j<contacts[i].addresses.length; j++) {
alert("Pref: " + contacts[i].addresses[j].pref + "\n" +
"Type: " + contacts[i].addresses[j].type + "\n" +
"Formatted: " + contacts[i].addresses[j].formatted + "\n" +
"Street Address: " + contacts[i].addresses[j].streetAddress + "\n" +
"Locality: " + contacts[i].addresses[j].locality + "\n" +
"Region: " + contacts[i].addresses[j].region + "\n" +
"Postal Code: " + contacts[i].addresses[j].postalCode + "\n" +
"Country: " + contacts[i].addresses[j].country);
}
}
};
// onError: Failed to get the contacts
function onError(contactError){
alert('onError!');
}
In console while printing the contacts I am getting this error-
[INFO] Error in success callback: Contacts1 = TypeError: 'null' is not an object
There are contacts in my simulator and contact information is not null still I am getting null. Not sure about the reason.
Please help me.
EDIT : same thing is happening when I am playing audio files ..
Any one have idea why this is happening ??