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!
Related
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;
}
}
I have a question about leaflet/folium. I have multiple circles on a map.
All these circles does have some overlap with each other.
Wat I want to do is to draw a line/Polygon in a different color, where all circles meet (intersection).
This is an example of what I want to achieve. The blue line is the intersection and need a different color. Is this possible in folium or in pure leaflet? If so, how do I do that?
You can use the turfjs library and the turf.intersect method for this
/* eslint-disable no-undef */
/**
* intersection with turfjs
*/
// config map
let config = {
minZoom: 7,
maxZomm: 18,
};
// magnification with which the map will start
const zoom = 18;
// co-ordinates
const lat = 52.22977;
const lng = 21.01178;
// calling map
const map = L.map('map', config).setView([lat, lng], zoom);
// Used to load and display tile layers on the map
// Most tile servers require attribution, which you can set under `Layer`
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
}).addTo(map);
// three coordinate
const centers = [{
lat: 52.22990558765487,
lng: 21.01168513298035
},
{
lat: 52.22962958994604,
lng: 21.011593937873844
},
{
lat: 52.2297445891999,
lng: 21.012012362480167
}
]
// turf.circle option
const options = {
steps: 64,
units: 'meters',
options: {}
}
// circle radius
const radius = 30;
// array polygons
let polygons = [];
// set marker, add
centers.map(({
lat,
lng
}) => {
const polygon = turf.circle([lng, lat], radius, options);
// add cirkle polygon to map
L.geoJSON(polygon, {
color: "red",
weight: 2
}).addTo(map);
// add object to array
polygons.push(polygon);
})
// get intersection
const intersection = turf.intersect(...polygons);
// style intersection
const intersectionColor = {
color: "yellow",
weight: 2,
opacity: 1,
fillColor: "yellow",
fillOpacity: 0.7
};
// adding an intersection to the map
// and styling to this element
L.geoJSON(intersection, {
style: intersectionColor
}).addTo(map);
*,
:after,
:before {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body,
html,
#map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#turf/turf#5/turf.min.js"></script>
<div id="map"></div>
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>
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();
}
I implemented somethink like on this picture:
if you click on a link popup will appear and you can follow the link.
jQuery(function($){
/**
* add the follow link popup to all TinyMCE instances
*/
if (!window.tinymce) return;
tinymce.on('AddEditor', function( event ) {
tinymce.editors.forEach(function(editor) {
if (!editor.isFollowLinkAdded) {
editor.isFollowLinkAdded = true;
editor.on('blur', function(e) {
jQuery(e.target.contentDocument.body).find('#followLink').remove();
});
editor.on('click', function(e) {
var link = jQuery(e.target).closest('a');
jQuery(e.view.document.body).find('#followLink').remove();
if (link.length) {
e.preventDefault();
var POPUP_WIDTH = 215,
isRightSide = (jQuery(e.view.document).width()-e.pageX) >= POPUP_WIDTH,
boxCss = {
top: e.pageY,
padding: '6px 10px',
position: 'absolute',
backgroundColor: '#ffffff',
border: '1px solid #a8a8a8',
borderRadius: '2px',
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.2)',
color: '#666666',
cursor: 'pointer',
whiteSpace: 'nowrap',
zIndex: 502
};
boxCss[(isRightSide) ? 'left' : 'right'] = (isRightSide) ? e.pageX : jQuery(e.view.document).width()-e.pageX;
jQuery('<a/>', {
href: link.attr('href'),
text: link.attr('href'),
target: '_blank'
}).css({
cursor: 'pointer',
display: 'inline-block',
maxWidth: '100px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}).wrap(
jQuery('<p/>', {
text: 'Click to follow: ',
id: 'followLink',
}).on('click', function(){
var win = window.open(link.attr('href'), '_blank');
win.focus();
}).css(boxCss)
).parent().appendTo(e.view.document.body);
}
});
}
});
}, true );
});
The most recent version of TinyMCE 4 (4.5.3) includes the option to open a link in the right click menu of the editor - no need to write your own custom code.