Is there a simple way to make a marker in Leaflet map blinking ? I mean animated blinking - something like a loop of transition from opacity 1.0 to opacity 0.5 in 1 second and then reverse, end of loop.
When you add a Marker you are able to specify an Icon - the options for which include a className. You can use this className option to animate the marker's icon via CSS.
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors',
maxZoom: 18
}).addTo(map);
L.marker([51.5, -0.09], {
icon: L.icon({
iconUrl: 'https://unpkg.com/leaflet#1.0.3/dist/images/marker-icon.png',
className: 'blinking'
})
}).addTo(map);
#map {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
#keyframes fade {
from { opacity: 0.5; }
}
.blinking {
animation: fade 1s infinite alternate;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<div id="map"></div>
To toggle a marker from blinking to non-blinking, you can use Leaflet's DomUtil to add the blinking class to the marker's img element:
// With the class added, the marker will blink:
L.DomUtil.addClass(marker._icon, "blinking");
// Without the class, it won't:
L.DomUtil.removeClass(marker._icon, "blinking");
Related
I have a problem with render SVG in fabricjs when SVG include text with custom font.
How to make SVG in Fabricjs display correct with custom font?
Here is my code:
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: null,
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
var imageObj = new fabric.Image();
canvas.add(imageObj);
imageObj.setSrc('https://futushigame.firebaseapp.com/group_test.svg', function(imageObject) {
imageObject.set({top: 0, left: 0});
imageObject.set('dirty', true);
canvas.renderAll();
setObjectCoords();
});
function setObjectCoords() {
canvas.forEachObject(function(object) {
object.setCoords();
});
}
#canvasContainer {
width: 100%;
height: 100vh;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<style>
#font-face {
font-family: 'CurlzMT';
src: url("https://futushigame.firebaseapp.com/CurlzMT.ttf") format("ttf");
font-weight: 'normal';
font-style: 'normal';
}
</style>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
Here is my resources:
1. Font file: CurlzMT
2. SVG file: group_test.svg
Thank you!
You need to embed the font in svg file.
The content of the svg must be like this
https://files.fm/f/qhvbe8jj
I am trying to build from scratch a minimalist Pdf.js viewer: I would just need zoom, pan and actual page number/overall pages number.
I am able to set the initial zoom so that the pdf is shown as I want at the beginning, i.e. it fits one of the two dimension of the available screen (for clarity in my code below I directly set the height property supposing the aspect ratio (height / width) of the document is higher than that of the available screen). Here is my code:
<!DOCTYPE html>
<html style="margin: 0; padding: 0; border: 0;
height:100%; width:100%">
<head>
<title>PDF.js Learning</title>
</head>
<body style="background-color:rgba(0, 0, 0, 0.78); margin: 0; padding: 0;
border: 0; height:100%; width:100%">
<div style="position: relative; margin: 0; padding: 0; border: 0;
height:100%; width:100%">
<canvas id="the-canvas" style="position: absolute; margin: 0;
padding: 0; border: 0; top: 50%;
left: 50%;
transform: translate(-50%, -50%);">
</canvas>
</div>
<!-- JQuery libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Pdf.js libraries -->
<script type="text/javascript" src="build\pdf.js"></script>
<script type="text/javascript" src="web\compatibility.js></script>
<script>
var url = "your_PDF_url";
// Asynchronous download PDF
function openPdf () {
PDFJS.getDocument(url).then(function(pdf) {
return pdf.getPage(1);
}).then(function(page) {
/* Get viewport (dimensions) and setting scale depending on
the relative aspect ratio of the pdf and window*/
var desiredHeight = $(window).height(); //or width
var viewport = page.getViewport(1);
var scale = desiredHeight / viewport.height; //or width
viewport = page.getViewport(scale);
// Get canvas#the-canvas
var canvas = document.getElementById('the-canvas');
// Fetch canvas' 2d context
var context = canvas.getContext('2d');
// Set dimensions to Canvas
canvas.height = viewport.height;
canvas.width = viewport.width;
// Prepare object needed by render method
var renderContext = {
canvasContext: context,
viewport: viewport
};
// Render PDF page
page.render(renderContext);
});
}
$(document).ready(function() {
(openPdf());
});
$(window).resize(function() {
(openPdf());
});
</script>
</body>
</html>
I can't find anywhere how I should do if I want to resize the pdf document or if I want to zoom it in and out:
should I reload the document and re-render? Should I only re-render it (as, if I haven't misunderstood, the pdf file once loaded, should be already available) with a new scale? Is there a less computation option than the 2 above?
I tried the first one (calling the PDFJS.getDocument() on resize) but it is really consuming and sometimes I get a bad rendering or no render at all.
Is there a reference for this and for pan somewhere? And how to show scroll bar, in the case of multiple pages documents, to change page? Thank you for your help.
First-time posting a question, and I avow up front that my HTML/CSS/Javascript knowledge is ... shall we say scrappy. I usually manage, but I can't seem to figure this out.
All I want to do is display an image centered. Then create a canvas, position the canvas over the image, and draw on it. Then have the canvas stay with the image as the browser is re-sized. Here's what I have so far (I confess, I got much of the Javascript code from another poster, and I'm trying to use it as a learning example):
<!DOCTYPE html>
<html>
<head>
<script>
function myInit()
{
hdc = set_canvas();
hdc.fillRect(0, 0, 50, 50);
}
function set_canvas()
{
var img = document.getElementById('audubon_image');
var x = img.offsetLeft,
y = img.offsetTop,
w = img.clientWidth,
h = img.clientHeight;
var c = document.getElementById('myCanvas');
img.parentNode.appendChild(c);
c.style.zIndex = 1;
c.style.left = x + 'px';
c.style.top = y + 'px';
c.setAttribute('width', w+'px');
c.setAttribute('height', h+'px');
hdc = c.getContext('2d');
return(hdc);
}
</script>
<style>
#container
{
text-align: center;
}
canvas
{
pointer-events: none;
position: absolute;
border: 1px solid black;
}
</style>
</head>
<body onload='myInit()'>
<div id="container">
<img src="http://www.sturtz.org/john/audubon/wp-content/uploads/2015/04/Audubon.jpg" id="audubon_image" />
<canvas id='myCanvas'></canvas> <!-- gets re-positioned in myInit(); -->
</div>
</body>
</html>
What's supposed to happen: The image gets placed. Then the Javascript code determines the position and size of the image, and sets the canvas to match. Then draws on the canvas (for the moment, a lovely elegant block box in the upper left corner).
So far, so good. But since the image centered, if the browser is re-sized (specifically made wider or narrower), the image's position moves relative to the left and right edges of the browser window.
With 'position: absolute' specified for the canvas, the canvas does not move (unsurprisingly; I suppose that's what absolute means). So the image and canvas do not stay aligned.
If I change the canvas CSS to 'position: relative', then when I re-size the window, the image and canvas remain in the same position relative to one another (which is what I want). But then I can't get the canvas over the top of the image.
My gut feel is that this should be possible (easy, even), and my lack of knowledge is causing me not to see it.
I think I'm on to it.
Put the canvas in a div. Wrap that and the img in a container div. Specify 'position: relative' for the outer div, 'position: absolute' for the inner div. That way, the x and y coordinates of the div containing the canvas may simply be specified as (0,0).
<!DOCTYPE html>
<html>
<head>
<script>
function myInit()
{
hdc = set_canvas();
hdc.fillRect(0, 0, 50, 50);
}
function set_canvas()
{
var c = document.getElementById('map_canvas');
c.style.zIndex = 1;
c.setAttribute('width', '650px');
c.setAttribute('height', '300px');
hdc = c.getContext('2d');
return(hdc);
}
</script>
<style>
#image_container
{
margin-left: auto;
margin-right: auto;
width: 650px;
position: relative;
}
#canvas_container
{
position: absolute;
top: 0px;
left: 0px;
}
#map_canvas
{
}
</style>
</head>
<body onload='myInit()'>
<div id="image_container">
<img src="http://www.sturtz.org/john/audubon/wp-content/uploads/2015/04/Audubon.jpg" id="audubon_image" />
<div id="canvas_container">
<canvas id="map_canvas"></canvas>
</div>
</div>
</body>
</html>
How to position the canvas directly over the img with the container horizontally centered.
Keep the canvas directly over the image
Set both #audubon_image and #myCanvas to position:absolute inside the #container that's set to position:relative.
Center the container div
margin:0 auto; to center #container on the page.
CSS
#container{
margin:0 auto;
position:relative;
border:1px solid blue;
}
#audubon_image,#myCanvas{position:absolute; top:0px; left:0px;}
#audubon_image{border:1px solid green;}
#myCanvas{ border:1px solid red;}
Javascript
Set the #container's CSS size and #canvas's element size to equal the img's size. Be sure to set the canvas element size (not css size) or your canvas drawings will be distorted.
// get a reference to #audubon_image
var img=document.getElementById('audubon_image');
// set #container's size to equal the #audubon_image size
var container=document.getElementById('container');
container.style.width=img.width+'px';
container.style.height=img.height+'px';
// set #myCanvas's size to equal the #audubon_image size
var canvas=document.getElementById('myCanvas');
canvas.width=img.width;
canvas.height=img.height;
Note: Once in a great while, browsers will fire window.onload before the image's width & height are set (shame on you browsers!). So in production, you might "defensively" wrap the javascript inside a setTimeout of 1 second to be sure the image's width & height have been set.
Full code and a Demo:
window.onload = (function() {
// get a reference to #audubon_image
var img = document.getElementById('audubon_image');
// set #container's size to equal the #audubon_image size
var container = document.getElementById('container');
container.style.width = img.width + 'px';
container.style.height = img.height + 'px';
// set #myCanvas's size to equal the #audubon_image size
var canvas = document.getElementById('myCanvas');
canvas.width = img.width;
canvas.height = img.height;
});
body {
background-color: ivory;
}
#container {
margin: 0 auto;
position: relative;
border: 1px solid blue;
}
#audubon_image,
#myCanvas {
position: absolute;
top: 0px;
left: 0px;
}
#audubon_image {
border: 1px solid green;
}
#myCanvas {
border: 1px solid red;
}
<div id="container">
<img id="audubon_image" src='https://dl.dropboxusercontent.com/u/139992952/multple/character3.png' />
<canvas id='myCanvas'></canvas>
</div>
I am using the latest KendoUI, and try to set a gauge like the kendoUI's offical web site AD image shows.
you could find the AD image just at: http://www.telerik.com/kendo-ui
please see the image, it shows an application named "northwind-dash", and there is a green gauge on it, there is a white color text "63%" inside the gauge.
I try the code below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="gauge-container">
<div id="gauge"></div>
<input id="gauge-value" value="65">
</div>
<script>
function createGauge() {
$("#gauge").kendoRadialGauge({
pointer: {
value: $("#gauge-value").val()
},
scale: {
minorUnit: 5,
startAngle: -30,
endAngle: 210,
max: 180
}
});
}
$(document).ready(function() {
createGauge();
function updateValue() {
$("#gauge").data("kendoRadialGauge").value($("#gauge-value").val());
}
if (kendo.ui.Slider) {
$("#gauge-value").kendoSlider({
min: 0,
max: 180,
showButtons: false,
change: updateValue
});
} else {
$("#gauge-value").change(updateValue);
}
$(document).bind("kendo:skinChange", function(e) {
createGauge();
});
});
</script>
<style scoped>
#gauge-container {
background: transparent url("../content/dataviz/gauge/gauge-container-partial.png") no-repeat 50% 50%;
width: 386px;
height: 386px;
text-align: center;
margin: 0 auto 30px auto;
}
#gauge {
width: 350px;
height: 300px;
margin: 0 auto;
}
#gauge-container .k-slider {
margin-top: -11px;
width: 140px;
}
</style>
</div>
</body>
</html>
But, I could only get the normal Radial Gauge.
I look everywhere in the KendoUI's document, but can't find anything about the northwind-dash demo or example.
Who knows how to change the style of the Gauge to make it just like the image shows.
yours,
Ivan
You can find the sources for KendoUI + Northwind application in GitHub and you can see a version running in Telerik ASPNET-MVC demo site
But no, it does not look like the capture that they have, not sure if that's an older version of this project or an internal one.
Nevertheless, there is no option for placing that percentage and you have to do it manually playing with HTML and CSS.
What you might do is define the Chart using a DataSource like this:
$("#value").kendoChart({
// Define Data Source, the first element is the value to represent,
// the second is 100 - first element.
dataSource: {
data: [
{ "value": 63 },
// The remaining part of the Chart is transparent so we actually
// only see the first value
{ "value": 37, color: "transparent" }
]
},
// Define a DataBound event handler used when we change the data and will
// print the value inside the Chart.
dataBound: function () {
// Get current value and compute percentage.
var percentage = (this.dataSource.at(0).value / 100);
// Convert percentage to text and place it in inside the chart
$("#value-label").text(kendo.toString(percentage, "p0"));
},
// No legend
legend: {
visible: false
},
seriesDefaults: {
// Type of series: Donut
type: "donut",
// Size of the hole of the Donut
holeSize: 60,
// Thickness of the Donut
size: 20
},
series: [
// The value of the series is in "value" field while the color is
// a field called color.
{ field: "value", colorField: "color" }
],
// No tooltip
tooltip: { visible: false }
});
Now, the HTML and CSS definition for placing the label on top of the Chart:
<div class="value-container">
<div id="value"></div>
<div id="value-label" class="overlay"></div>
</div>
A container that includes two DIV the first for the Chart and the second for the label. In order to display the label on top of the Chart, we define a CSS class overlay as follow:
.overlay {
font-size: 24px;
width: 100%;
height: 100%;
position: absolute;
top: 220px;
left: 0;
text-align: center;
}
Where we specify the size of the label and its position from top and centered horizontally (here I hardcoded the vertical position (220px) but you can find for methods for centering a text in a DIV.
You can see it in action here: http://jsfiddle.net/OnaBai/egfrohtx/
Which looks like:
im trying to do a css background animation with the Body tag. Here's the code
body
{
animation-name:mymove;
animation-duration:5s;
animation-direction:alternate;
animation-iteration-count:infinite;
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
-webkit-animation-direction:alternate;
-webkit-animation-iteration-count:infinite;
}
#keyframes mymove
{
from {background-image:url('Space.png');}
to {background:blue;}
}
#-webkit-keyframes mymove
{
from {background-image:url('Space.png');}
to {background:blue;}
}
But when i use it the background just fades from white to blue. Is there a reason why the image wont display? And by the way the image directory is correct and works if i just set it as the background image.
Background image isn't a property that can be animated - you can't tween the property. Thus you cant use it with keyframe animations. Instead try this code-
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{background:url('Space.png');}
#frame
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
height: 100%; /* or the height of webpage is px */
width: 100%; /* or the width of webpage is px */
animation-name:mymove;
animation-duration:5s;
animation-direction:alternate;
animation-iteration-count:infinite;
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
-webkit-animation-direction:alternate;
-webkit-animation-iteration-count:infinite;
}
#keyframes mymove
{
from {background:transparent;}
to {background:blue;}
}
#-webkit-keyframes mymove
{
from {background:transparent;}
to {background:blue;}
}
</style>
</head>
<body>
<div id="frame">
<--- Webpage contents --->
</div>
</body>
</html>