I've got a project where a number of locations have the exact same latitude and longitude. The problem can be seen at the paris location with 20 points of interest.
The cluster doesn't de-cluster as I have seen it do elsewhere. Why?
http://buddyb.com/map/
<html>
<head>
<meta charset=utf-8 />
<title>Custom marker styles for imported data</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />
<!--Cluster Links-->
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiYnVkZHliIiwiYSI6ImtseXhGOTQifQ.f2aqgCg7-rXrhy5FxYcLSw';
var map = L.mapbox.map('map', 'mapbox.light')
.setView([38, 0], 1);
// Omnivore will AJAX-request this file behind the scenes and parse it:
// note that there are considerations:
// - The CSV file must contain latitude and longitude values, in column
// named roughly latitude and longitude
// - The file must either be on the same domain as the page that requests it,
// or both the server it is requested from and the user's browser must
// support CORS.
var clusterGroup = new L.MarkerClusterGroup();
omnivore.csv('June15thGrid.csv')
.on('ready', function(layer) {
// An example of customizing marker styles based on an attribute.
// In this case, the data, a CSV file, has a column called 'state'
// with values referring to states. Your data might have different
// values, so adjust to fit.
this.eachLayer(function(marker) {
if (marker.toGeoJSON().properties.Status === 'Lead') {
// The argument to L.mapbox.marker.icon is based on the
// simplestyle-spec: see that specification for a full
// description of options.
layer.target.eachLayer(function(layer) {
clusterGroup.addLayer(layer);
});
marker.setIcon(L.mapbox.marker.icon({
'marker-color': '#ff8888',
'marker-size': 'large'
}));
} else {
marker.setIcon(L.mapbox.marker.icon({}));
}
// Bind a popup to each icon based on the same properties
marker.bindPopup(marker.toGeoJSON().properties.RelationshipName + "<br>" + marker.toGeoJSON().properties.MetroArea + "<br>" + marker.toGeoJSON().properties.Website);
});
})
map.addLayer(clusterGroup);
</script>
</body>
</html>
Related
How can I programmatically add textbox controls at run time with Asp.net core using kendo UI?
( I don't want use kendo grid )
Not sure what you really want(your post strongly lacks of information), but I think you might try templates:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<script id="textbox-template" type="text/x-kendo-template">
<input type="text" name="#= data.Name #" value="#= data.Value #">
</script>
<style type="text/css">
#fields-container input {
display: block
}
</style>
</head>
<body>
<div id="fields-container"></div>
<button>Add textbox</button>
<script>
let getValues = function getValues() {
return {
Name: "User[" + $('input').length + "]",
Value: "John Doe"
};
};
$('button').on('click', function() {
let template = kendo.template($('#textbox-template').html()),
dataValue = getValues(),
templateValue = template(dataValue);
$('#fields-container').append(templateValue);
});
</script>
</body>
</html>
Demo
As you said you don't want to use grid, I imagine that you want something like kendo does in grid that is to use templates in background. You can use a template alone without any widget at all. With the snippet above you can request data form server with ajax(in the getValues() function precisely) or grab the data from other sources.
I want to add html table inside a tooltip for each cell without any server request.
Kendo provides this feature with api calling.
$(document).ready(function() {
var tooltip = $("#target").kendoTooltip({
iframe: false,
content: {
url: "*http://demos.telerik.com/kendo-ui/content/web/tooltip/ajax/ajaxContent3.html*"
},
width: 220,
height: 280
}).data("kendoTooltip");
});
Is there any way to add html without making any request?
The content configuration of the tooltip can accept not only a URL, but also a string. This string can contain HTML, like this:
td {
background: red;
width: 10px;
height: 10px;
}
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css" rel="stylesheet" />
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<body>
<span id="target">
Some content
</span>
<script>
$(document).ready(function() {
$("#target").kendoTooltip({
content: "<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>"
});
});
</script>
</body>
The content option can also be set as a function that exposes event data, containing the target element, so you can return a dynamic string (including HTML elements, as previously mentioned), based on the content of the target element, e.g.:
Example
I want to format numeric column value as 55,25,236.30 in grid. I created a JS function and called from column template in grid. My JS function:
function NumberFormater(Price) {
kendo.culture("en-US");
kendo.cultures.current.numberFormat.groupSize = [3,2];
return kendo.toString(Price, "##,#.00");
}
but the value is showing like 5,525,236.30. According to this link the default value for groupSize is [3]. Is it not possible to set multiple values like [3,2] like numberformat in C#?
Make sure that the NumberFormater function receives a numeric argument. Below is a test page that works.
On a side note, I am not sure there is a need to set the culture and groupSize every time you execute the function.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
</head>
<body>
<input class="k-textbox" type="number" value="5525236.3" />
<button id="format" class="k-button">Format numeric value</button>
<script>
$("#format").click(function(){
var formattedValue = NumberFormater(parseFloat($(".k-textbox").val()));
alert(formattedValue);
});
function NumberFormater(Price) {
kendo.culture("en-US");
kendo.cultures.current.numberFormat.groupSize = [3,2];
return kendo.toString(Price, "##,#.00");
}
</script>
</body>
</html>
I'm trying to add a D3.js liquid fill gauge (http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6) in a Leaflet popup without succeeding.
Here is my code:
var map = L.map('map').setView([47.261491,-1.549244], 16);
var dataCenterIcon = L.icon({
iconUrl: 'images/datacenter-icon.png',
iconSize: [20, 20] // size of the icon
});
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
d3.json("data/datacentersSigma.json",function (data){L.geoJson(data,{
pointToLayer: function (feature,latlng){return L.marker(latlng,{icon:dataCenterIcon});},
onEachFeature : function (feature, layer) {
var div = $('<div class="popupGraph" style="width: 200px; height:200px;"><svg id="gauge"/></svg></div>')[0];
var popup = L.popup().setContent(div);
layer.bindPopup(popup);
// var svg = d3.select(div).select("svg").attr("width", 200).attr("height", 200);
// svg.append("rect").attr("width", 150).attr("height", 150).style("fill", "lightBlue");
loadLiquidFillGauge("gauge",55);
}}).addTo(map);});
d3.json("data/trajetsFibreDCSigma.json",function (data){
L.geoJson(data, {
style: function(feature){return {color : feature.properties.stroke};}
}).addTo(map);
});
<!DOCTYPE html>
<html>
<head>
<title>Yepee</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/leaflet.css" />
<script src="js/leaflet.js"></script>
<script src="js/d3.js"></script>
<script src="js/liquidFillGauge.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px"></div>
<!-- <svg id="gauge"/>-->
<script src="js/yepee.js" type="text/javascript"></script>
</body>
</html>
When I'm trying to display my map, I can't even see the markers and I've got this error:
TypeError: d3_window(...) is null
I can also load a liquid fill gauge on a svg element which isn't on my map.
I've tried to add just a simple svg square in the popup by following an example (http://jsfiddle.net/2XfVc/132/) and it worked.
The goal is to put that gauge in the leaflet popup and despite searching for a long time, I can't find what the problem is.
Thank you in advance for your answers.
You're trying to initialize the gauge when the actual SVG element isn't added to the DOM yet. Once the popup opens, the content gets added to the DOM, that's when you should initialize the gauge.
// Have same content for all your popups
var content = '<svg id="gauge" width="100" height="100"></svg>'
// Set markers with popup, include content and set value as option
new L.Marker([0, -45]).bindPopup(content, {'value': 33}).addTo(map)
new L.Marker([0, 45]).bindPopup(content, {'value': 66}).addTo(map)
// Catch popup open event
map.on('popupopen', function (e) {
// Initialize the gauge with current popup option's value
loadLiquidFillGauge('gauge', e.popup.options.value);
})
Demo on Plunker: http://embed.plnkr.co/2hMjBt/preview
I am trying to get the size of my image in IE9. I did it with success (tried on jpg). When I try loading an image whose width is lower than the height, there is no problem at all. But when I try to upload an image with a width higher than the height, I see that the lines that output "vh:", "vw:" return zero.
Why is there a problem when trying to load an image (by my code) with width > height?
Thanks.
Here is my code (Works for IE9 - That's what I want to check out).
<!doctype html>
<html>
<head>
<!-- <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> -->
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<title>Image preview example</title>
<script type="text/javascript">
var loadImageFile = (function () {
var v=new Image();
if (navigator.appName === "Microsoft Internet Explorer") {
return function () {
alert("file." + document.getElementById("id_filepic").value);
$("#id_image").css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)");
//$("#id_image").attr("src", document.getElementById("id_filepic").value);
//v.src = document.getElementById("id_filepic").value;
v.src = $("#id_filepic").val();
alert("vw:" + v.width);
alert("vh:" + v.height);
$("#id_image").width(v.width);
$("#id_image").height(v.height);
document.getElementById("id_image").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("id_filepic").value;
alert("w final:" + $("#id_image").width());
alert("h final:" + $("#id_image").height());
}
}
})();
</script>
<style type="text/css"></style>
</head>
<body>
<form name="uploadForm">
<p><input id="id_filepic" type="file" name="myPhoto" onchange="loadImageFile();" /><br />
</form>
<image id="id_image" src="" onmousedown="return false"></image>
</body>
Consider this issue as closed, since I found solution on: The event after loading image on IE9
Thanks, anyway :)