Leaflet.js circleMarker transition - leaflet

Does anyone know how I can do transitions in leaflet.js with a circleMarker please?
In older versions (0.7 if I am not mistaken) the following css used to do the trick
.leaflet-clickable {
transition: all .3s;
}
but not anymore. I am using version 1.3.1

Set a custom class on your marker and use it to set your transition. For example:
Using this marker
L.circleMarker([0, 0], {
className: 'circle-transition'
}).addTo(map)
You can have a transition on hover with
.circle-transition:hover {
fill: red;
fill-opacity: 1;
transition: all 1s
}
And a demo
var map = L.map('map').setView([0, 0], 4);
L.circleMarker([0, 0], {
radius: 100,
className: 'circle-transition',
fillOpacity: 0.5
}).addTo(map)
html, body {
height: 100%;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
#keyframes fadeIn {
from { fill-opacity:0; }
to { fill-opacity:0.5; }
}
.circle-transition {
animation: 1s ease-out 0s 1 fadeIn;
}
.circle-transition:hover {
fill: red;
fill-opacity: 1;
transition: all 1s
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>
<div id='map'></div>

Related

Optimize simple CSS / WebAnimation, eg scale()

I've tried different solutions to animate a sidenav bar rise from bottom right corner. This is the last solution, maybe the best one ( because i'm animating the transform scale() ) in the previous ( width / height ) but the animation still sluggish on the cut corner... with the cut line acting with strange squared forms during the animation ... so i'm looking to solve!
Here the scale() example on glitch
https://glitch.com/edit/#!/heady-grey-lantern
Even on w3schools site the simple animation of Side Navigation is little shimmy and flicker
https://www.w3schools.com/howto/howto_js_sidenav.asp
Here the core of animation
// css code
.sidenav {
width: 200vw;
height: 200vh;
width: 200dvw;
height: 200dvh;
position: fixed;
bottom: 0;
/* left: 0; */
right: 0;
/* cut corner */
--cutting: max(100vw, 100vh);
--cutting: max(150dvw, 150dvh);
clip-path: polygon(0 var(--cutting), var(--cutting) 0,100% 0,100% 100%,0 100%);
/* z-index: 1; */
background-color: #111;
/* overflow-x: hidden; */
will-change: transform;
transform: scale(0);
transform-origin: bottom right;
}
// Js code
const sidenav = document.getElementById("mySidenav")
const duration = 500
const openSidenav = [
{ transform: 'scaleX(0) scaleY(0)' },
{ transform: 'scaleX(1) scaleY(1)' }
]
const closeSidenav = [
{ transform: 'scaleX(1) scaleY(1)' },
{ transform: 'scaleX(0) scaleY(0)' }
]
const openNav = () => {
console.log('#NAV >> Open')
// document.getElementById("mySidenav").style.width = '175vw'
// document.getElementById("mySidenav").style.height = '175vh'
sidenav.animate(
openSidenav, {
duration,
iterations: 1,
easing: 'ease-in',
fill: 'forwards'
}
)
}
const closeNav = () => {
console.log('#NAV >> Close')
// document.getElementById("mySidenav").style.width = '0'
// document.getElementById("mySidenav").style.height = '0'
sidenav.animate(
closeSidenav, {
duration,
iterations: 1,
easing: 'ease-in',
fill: 'forwards'
}
)
}
Last, better one!
/* css */
#sidenav {
width: 100vw;
height: 100vh;
width: 100dvw;
height: 100dvh;
position: fixed;
/* cut corner */
--cutting: max(100vw, 100vh);
clip-path: polygon(0 var(--cutting), var(--cutting) 0,100% 0,100% 100%,0 100%);
/* set transition as in WebAnimation API */
transition: all 0.5s;
will-change: transform;
transform: scale(0);
transform-origin: bottom right;
z-index: 11;
background-color: var(--surface1);
display: grid;
justify-items: center;
align-items: center;
/* justify-items: end;
align-items: end; */
}
#sidenav[active] {
--cutting: 0;
transition: all 0.5s;
}
/* --------------- Mobile Nav -------------- */
nav {
/* TODO fallback inline-size: 75vw;
block-size: 75vh; */
inline-size: 75dvw;
block-size: 75dvh;
display: block;
flex-direction: column;
background-color: crimson;
}
// javascript animations
const openSidenav = [
{ transform: 'scale(0)' },
{ transform: 'scale(0.25)' },
{ transform: 'scale(0.5)' },
{ transform: 'scale(0.75)' },
{ transform: 'scale(1)' }
]
const closeSidenav = [
{ transform: 'scale(1)' },
{ transform: 'scale(0.75)' },
{ transform: 'scale(0.5)' },
{ transform: 'scale(0.25)' },
{ transform: 'scale(0)' }
]
const slideIn = [
{ transform: 'translateX(100%)' },
{ transform: 'translateX(0)', opacity: 1 }
]
const slideOut = [
{ transform: 'translateX(0)' },
{ transform: 'translateX(100%)', opacity: 0 }
]
// duration animation
const openSidenavDuration = 500
const closeSidenavDuration = 300
// duration animation per a tag
const slideInDuration = 200
const slideOutDuration = 100
// javascript
openNav (e) {
const sidenav =
this.renderRoot.getElementById('sidenav')
this.sidenavIsOpen = true
const openAnimation = sidenav.animate(
openSidenav, {
duration: openSidenavDuration,
iterations: 1,
easing: 'ease-in',
fill: 'forwards'
}
)
openAnimation.addEventListener('finish', (e) => {
// console.log('#EVENT >> ', e.type)
sidenav.setAttribute('active', '')
// sidenav.style.setProperty('--cutting', 0)
})
}
closeNav (e) {
const sidenav =
this.renderRoot.getElementById('sidenav')
this.sidenavIsOpen = false
sidenav.animate(
closeSidenav, {
duration: closeSidenavDuration,
iterations: 1,
easing: 'ease-in',
fill: 'forwards',
delay: slideOutDuration * 3
}
)
sidenav.removeAttribute('active')
}

Need marker land on exact location on Grafana world map panel

I working on a grafana world map project that can receive lat,lon from client and process it on map
everything works fine, until client gave a same lat,lon location where it already spot in a map the new marker land beneath old marker and so on if client still gave the same lat,lon
I need a marker land to exact location that client gave
I think an issue is about zIndex because every marker have the same zIndex (210) so that all of them
can't land on their own lat,lon but I'm so confused about it and I have try to look at markerClusterGroup but I have no idea about it
Marker that land beneath old marker:
t.prototype.createCircle = function(t) {
L.HtmlIcon = L.Icon.extend({
options: {
/*
html: (String) (required)
iconAnchor: (Point)
popupAnchor: (Point)
*/
},
initialize: function (options) {
L.Util.setOptions(this, options);
},
createIcon: function () {
var div = document.createElement('div');
div.innerHTML = this.options.html;
return div;
},
createShadow: function () {
return null;
}
});
const markerLocation = new L.LatLng(t.locationLatitude, t.locationLongitude);
const HTMLIcon = L.HtmlIcon.extend({
options : {
html : "<div class=\"map__marker\"></div>",
}
});
const customHtmlIcon = new HTMLIcon();
const marker = new L.Marker(markerLocation, {icon: customHtmlIcon});
this.map.addLayer(marker);
return this.createPopup(marker, t.locationName, t.valueRounded), marker
}
I already solve it by change relative to fixed on CSS file:
.map__marker {
background: #ffffff;
border-radius: 10px;
height: 10px;
position: fixed; //change from relative
width: 10px;
}
.map__marker::before {
-webkit-animation: blink 1s infinite ease-out;
animation: blink 1s infinite ease-out;
border-radius: 60px;
box-shadow: inset 0 0 0 1px #ffffff;
content: "";
height: 10px;
left: 50%;
opacity: 1;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 10px;
}
#-webkit-keyframes blink {
100% {
height: 50px;
opacity: 0;
width: 50px;
}
}
#keyframes blink {
100% {
height: 50px;
opacity: 0;
width: 50px;
}
}

Ionic 3 - I want a modal screen not full size

I need a modal page with no full size (80% width, <60% height, centered) to select some items, like an alert control.
How to implement the CSS for this case?
Initialize modal with cssClass
let modal = this.modalCtrl.create(CustomSelectPage, {data: data}, {cssClass: 'select-modal' });
Then add CSS to the class in app.scss
.select-modal {
background: rgba(0, 0, 0, 0.5) !important;
padding: 20% 10% !important;
}
Change the numbers according to your design.
put this code only in your component css file
::ng-deep .sc-ion-modal-md-h {
--width: 90%;
--height: 70%;
}
in TS file:
async MyModal() {
const modal = await this.modalController.create({
component: MyModalPage,
backdropDismiss: true,
cssClass: 'my-modal',
});
return await modal.present();
}
in SCSS file:
.my-modal {
--width: 70%;
--height: 35%;
}
Assign a class to modal (ionic-4 & ionic-5)
this.modalCtrl
.create({
component: ReportEventComponent,
cssClass: 'add-contact-modal'
})
.then(modalEl => {
modalEl.present();
return modalEl.onDidDismiss();
});
put your css code into global.css file
ion-modal.add-contact-modal {
--height: 85%;
--width: 90%;
}
I'm on Ionic 6 and it worked here.
Add in global.scss:
.premio-modal{
// background-color: red;
.modal-wrapper{
background: rgba(0, 0, 0, 0.5) !important;
/* padding: 20% 10% !important; */
width: 70%;
height: 75%;
border-radius: 5px;
}
}
In component:
async showModal(){
const modal = await this.modalController.create({
component: YourComponent,
cssClass: 'premio-modal',
backdropDismiss: true,
});
modal.onDidDismiss().then(
(m: any) => {
}
);
return await modal.present();
}

nvd3 Display 2 Chart

at my work I try to print some graph with nvd3.
But I can only display 1 graph on my page, and I don't understand why the previous graph don't appear.
Could you give me some hint ?
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<link href="lib/css/nv.d3.css" rel="stylesheet">
</head>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
/**********
* Legend
*/
.nvd3 .nv-legend .nv-series {
cursor: pointer;
}
.nvd3 .nv-legend .nv-disabled circle {
fill-opacity: 0;
}
text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
#chart, #pid svg {
height: 600px;
width: 600px;
}
</style>
<div id="pid">
<svg></svg>
</div>
<div id="chart">
<svg></svg>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="lib/js/nv.d3.js"></script>
<script>
var divs = ["pid", "chart"];
divs["pid"]= {id:"#pid svg", datam:[
{
values:[
{x:"M",y:1},
{x:"T",y:2},
{x:"W",y:3},
{x:"R",y:3},
{x:"F",y:4},
{x:"S",y:5},
{x:"U",y:6}
],
key:"Apples"
},
{
values:[
{x:"M",y:5},
{x:"T",y:2},
{x:"W",y:6},
{x:"R",y:8},
{x:"F",y:2},
{x:"S",y:4},
{x:"U",y:1}
],
key:"Zebras"
},
{
values:[
{x:"M",y:4},
{x:"T",y:6},
{x:"W",y:5},
{x:"R",y:7},
{x:"F",y:7},
{x:"S",y:2},
{x:"U",y:5}
],
key:"Bananas"
}
], color:['purple', 'black', 'yellow']};
divs["chart"]= {id:"#chart svg", datam:[
{
values:[
{x:"M",y:1},
{x:"T",y:2},
{x:"W",y:3},
{x:"R",y:3},
{x:"F",y:4},
{x:"S",y:5},
{x:"U",y:6}
],
key:"Apples"
},
{
values:[
{x:"M",y:5},
{x:"T",y:2},
{x:"W",y:6},
{x:"R",y:8},
{x:"F",y:2},
{x:"S",y:4},
{x:"U",y:1}
],
key:"Zebras"
}
], color:['red', 'blue', 'green']};
console.log(divs)
var i=0;
var chart = new Array(2);
nv.render = function render(step) {
// number of graphs to generate in each timeout loop
step = step || 1;
nv.render.active = true;
nv.dispatch.render_start();
setTimeout(function() {
var chart, graph;
for (var i = 0; i < step && (graph = nv.render.queue[i]); i++) {
chart = graph.generate();
if (typeof graph.callback == typeof(Function)) graph.callback(chart);
nv.graphs.push(chart);
}
nv.render.queue.splice(0, i);
if (nv.render.queue.length) setTimeout(arguments.callee, 0);
else {
nv.dispatch.render_end();
nv.render.active = false;
}
}, 0);
};
nv.render.active = false;
nv.render.queue = [];
for (var key in divs) {
console.log(i);
nv.addGraph(function(obj) {
if (typeof arguments[0] === typeof(Function)) {
obj = {generate: arguments[0], callback: arguments[1]};
}
nv.render.queue.push(obj);
console.log(nv.render.queue.length);
if (!nv.render.active) {
nv.render();
}
chart[i] = nv.models.multiBarChart().showControls(true).groupSpacing(0.5).color(divs[key]['color']);
chart[i].yAxis
.tickFormat(d3.format(',.1f'));
d3.select(divs[key]['id'])
.datum(divs[key]['datam'])
.transition().duration(500).call(chart[i]);
nv.utils.windowResize(chart[i].update);
return chart[i];
});
i++;
};
// render function is used to queue up chart rendering
// in non-blocking timeout functions
</script>
I hope you colud help me, thanks.

leaflet js: how to create tooltips for L.CircleMarker?

I am wondering if there is a way to set the tooltip for L.CircleMarker?
var geojsonLayerVessel = new L.GeoJSON(null, {
pointToLayer: function (latlng){
return new L.CircleMarker(latlng, {
radius: 5,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8,
title: "test"
});
}
});
tried the above code, but it is not working.
This does not work for CircleMarkers.
But you can create a little DivIcon and style it with rounded corners.
DivIcons do support the 'title' option.
http://jsfiddle.net/63teycsq/1/
The function to provide as pointToLayer:
function (latlng){
return L.marker(latlng,
{ icon : L.divIcon({ className : 'circle',
iconSize : [ 5, 5 ]}),
title: 'test'});
}
And the div's styling:
div.circle {
background-color: #ff7800;
border-color: black;
border-radius: 3px;
border-style: solid;
border-width: 1px;
width:5px;
height:5px;
}
For GeoJSON layers you can listen to the 'featureparse' event to bind popups, as per this example. Something along these lines:
var geoJsonLayer = new L.GeoJSON(null,{
pointToLayer: function (latlng){
return new L.CircleMarker(latlng, {
radius: 5,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8,
});
geoJsonLayer.on('featureparse', function(e){
//Now you can bind popups to features in the layer, and you have access to
//attributes on the GeoJSON object through e.properties:
e.layer.bindPopup('Hello! ' + e.properties.someProperty);
});
//now you add some some data to your layer and add it to the map....
geoJsonLayer.addGeoJSON(someGeoJson);
map.addLayer(geoJsonLayer);
Hope this helps!