Dears,
I created a semi circle in leaflet and I have three semi circles on the same latitude and longitue each one with different angel.
I just want to add a min circle or icon or marker or whatever inside each semi circle (in the center of semi circle).
does anyone have any idea how to do that please ?
var $html = $(L.HTMLUtils.buildTable(record));
var circle = L.semiCircle(latLng, L.extend({
radius: 70,
renderer: canvas,
weight: 1
}, options)).bindTooltip(metaData).bindPopup($html.wrap('<div/>').parent().html(), {
minWidth: 400,
maxWidth: 400
});
circle.addTo(mymap);
debugger;
var circleBounds = circle.getBounds();
var center = circleBounds.getCenter(),
neCoord = circleBounds.getNorthEast(),
northCenterCoord = new L.LatLng(center.lat, neCoord.lng, true);
//debugger;
var icon = L.divIcon({
html: '<div class="txt">' + 'tessst' + '</div>',
className: 'circle-with-txt',
iconSize: [40, 40]
});
//var circle = L.circleMarker(latLng, options);
var marker = L.marker(northCenterCoord, {
icon: icon
});
var group = L.layerGroup([circle, marker]);
group.addTo(mymap);
Regards,
You can get the center of the semi circle with circle.getLatLng()
To add a small circlemarker call L.circleMarker(circle.getLatLng(), {radius: 10}).addTo(map)
Related
I'm trying to move a client side method on the backend:
The client side method is using TurfJS and Leaflet to perform some operations. The only problem is that server side (nodejs) window is not available, hence I cannot use Leaflet.
I'm looking for a way to transform this piece of code in the vanilla Turf equivalent:
const pointA = turf.point([originCoords.lng, originCoords.lat]);
const pointB = turf.destination.default(pointA, 50, 45, { units: 'kilometers' });
// here I'm using leaflet to get a BBox
const latLngBounds = L.latLngBounds(
L.latLng(pointA.geometry.coordinates[1],
pointA.geometry.coordinates[0]),
L.latLng(pointB.geometry.coordinates[1], pointB.geometry.coordinates[0]),
);
// using that BBox I then create the rectangle, again with leaflet
tile = L.rectangle(latLngBounds);
I'm still newbie with this whole GeoJSON thing, and maybe I'm missing something, can someone help me?
Here is the code that uses Turf.JS only.
var turf = require('#turf/turf');
var pointA = turf.point([-75.343, 39.984]);
var pointB = turf.destination(pointA, 50, 45, { units: 'kilometers' });
//create a bbox that extends to include all the features
var bbx = turf.bbox(turf.featureCollection([pointA, pointB]));
var pgn = turf.bboxPolygon(bbx); //convert it to Polygon feature
console.log(JSON.stringify(pgn)); //output to console
The output:
{"type":"Feature","properties":{},
"geometry":{
"type":"Polygon",
"coordinates":[[
[-75.343,39.984],
[-74.92609,39.984],
[-74.92609,40.3012],
[-75.343,40.3012],
[-75.343,39.984]]]
}
}
Edit 1
Add ability to run the code:
//var turf = require('#turf/turf');
var pointA = turf.point([-75.343, 39.984]);
var pointB = turf.destination(pointA, 50, 45, { units: 'kilometers' });
//create a bbox that extends to include all the features
var bbx = turf.bbox(turf.featureCollection([pointA, pointB]));
var pgn = turf.bboxPolygon(bbx); //convert it to Polygon feature
console.log(JSON.stringify(pgn)); //output to console
<script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/5.1.5/turf.min.js"></script>
I need to draw x & y intercepts for all data points in a scratter chart. I went through major and minor grid lines. But it could not be my perfect solution.
Like the image below:
The sample image with x and y intercepts only on data points
You can use the render function of the chart to draw the horizontal and vertical lines on the chart surface. In the following demo, I name the x and y axes so that in the render function I can use the getAxis() method along with slot and range. See DOCS.
DEMO
var data = [[0.67, 5.4], [2.2, 2], [3.1, 3]];
$("#chart").kendoChart({
series: [{
type: "scatter",
data: data,
markers: {size: 16},
}],
yAxis: { name: "value", majorGridLines: {visible: false } },
xAxis: { name: "category", majorGridLines: {visible: false } },
render: function(e){
var chart = e.sender;
var yAxis = chart.getAxis("value");
var xAxis = chart.getAxis("category");
//iterate each point on the chart
for (var i=0; i<data.length; i++){
//vertical line
var valRange = yAxis.range();
var valSlot = yAxis.slot(valRange.min, valRange.max);
var point = data[i];
var catSlot = xAxis.slot(point[0]);
var path = new kendo.drawing.Path({
stroke: {color: "#B3BDBD", width: 1}
}).moveTo(catSlot.origin.x + catSlot.size.width/2, valSlot.origin.y)
.lineTo(catSlot.origin.x + catSlot.size.width/2, valSlot.bottomRight().y);
chart.surface.draw(path);
//horizontal line
var ySlot = yAxis.slot(point[1]);
var xRange = xAxis.range();
var xSlot = xAxis.slot(xRange.min, xRange.max);
var pathH = new kendo.drawing.Path({
stroke: {color: "#B3BDBD", width: 1}
}).moveTo(xSlot.origin.x, ySlot.origin.y + ySlot.size.width/2)
.lineTo(xSlot.bottomRight().x, ySlot.origin.y + ySlot.size.width/2);
chart.surface.draw(pathH);
}
}
});
I currently have an openlayers map that I am putting a draw overlay on top of. The problem is that when I scale the div container holding the map it doesn't actually scale the drawing layer correctly, so the pointer does not align with the mouse location. If I don't do any scaling it lines up correctly. I have also tried setting the html and body to 100% width in addition to the div tag, but that has not worked either.
mouse aligned
mouse not aligned
here is my map typesscript code:
// create the bing maps layer
var raster = new ol.layer.Tile({
source: new ol.source.BingMaps({
key: 'AioGchlm6KiMF-8ws9hq9PEJKSZzGXj8aZ1OrDt-MlN_NY907-YdiaraNT9sCodZ',
imagerySet: 'AerialWithLabels',
maxZoom: 19
})
});
// generate the actual map
var map = new ol.Map({
layers: [raster],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 10
})
});
// holds each of the drawings
var features = new ol.Collection();
// allows the user to draw a polygon on the map
var draw = new ol.interaction.Draw({
features: features,
type: 'Polygon'
});
map.addInteraction(draw);
// adds the polygon to the features collection when the drawing is complete
var featureOverlay = new ol.layer.Vector({
source: new ol.source.Vector({features: features}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 4,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
featureOverlay.setMap(map);
// allows the user to modify the drawings
var modify = new ol.interaction.Modify({
features: features,
/*
deleteCondition: function(event) {
return ol.events.condition.shiftKeyOnly(event) &&
ol.events.condition.singleClick(event);
}
*/
});
map.addInteraction(modify);
and the html code:
<div #map id="map"></div>
and the css:
#map {
height: 100%;
}
it is also probably worth noting that I am doing this inside an ionic 3 project.
I am a novice to OpenLayers, so sorry for an obvious (and perhaps dumb) question, for which I found different approaches for solutions, but none working. Tried this and that, a dozen different suggestions (here, here, here, here, here) but in vain.
Basically, I want to pass the coordinates of a drawn rectangle to another webservice. So, after having drawn the rectangle, it should spit me out the four corners of the bounding box.
What I have so far is the basic OL layers example for drawing a rectangle:
var source = new ol.source.Vector({wrapX: false});
vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0, 255, 0, 0.5)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vector
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
var draw; // global so we can remove it later
function addInteraction()
{
var value = 'Box';
if (value !== 'None')
{
var geometryFunction, maxPoints;
if (value === 'Square')
{
value = 'Circle';
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
}
else if (value === 'Box')
{
value = 'LineString';
maxPoints = 2;
geometryFunction = function(coordinates, geometry)
{
if (!geometry)
{
geometry = new ol.geom.Polygon(null);
}
var start = coordinates[0];
var end = coordinates[1];
geometry.setCoordinates([
[start, [start[0], end[1]], end, [end[0], start[1]], start]
]);
return geometry;
};
}
draw = new ol.interaction.Draw({
source: source,
type: /** #type {ol.geom.GeometryType} */ (value),
geometryFunction: geometryFunction,
maxPoints: maxPoints
});
map.addInteraction(draw);
}
}
addInteraction();
Now, what comes next? What is a good way of extracting the bounding box?
Thanks for any hints!
You need to asign a listener to the draw interaction. Like so:
draw.on('drawend',function(e){
alert(e.feature.getGeometry().getExtent());
});
Here is a fiddle
I am using mapbox/leaflet to display a picture of a human body rather than a regular map.
I am using leaflet draw and I need to be able to create a circle and move it around while maintaining its radius. However, when I move it towards the bottom of the map/screen, the size increases exponentialy. I want it to stay the same size.
I assume it's something to do with projection or CRS but I'm not sure what to do to stop it.
My code is :
var mapMinZoom = 0;
var mapMaxZoom = 4;
var map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
crs: L.CRS.Simple,
noWrap: true,
continuousWorld: true
}).setView([0, 0], mapMaxZoom);
var mapBounds = new L.LatLngBounds(
map.unproject([0, 3840], mapMaxZoom),
map.unproject([4096, 0], mapMaxZoom));
map.fitBounds(mapBounds);
L.tileLayer('/tiles/{z}/{x}/{y}.png', {
minZoom: mapMinZoom, maxZoom: mapMaxZoom,
bounds: mapBounds,
attribution: 'Rendered with MapTiler',
noWrap: true,
continuousWorld: true
}).addTo(map);
var touches;
var featureGroup = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: featureGroup
}
}).addTo(map);
map.on('draw:created', function (e) {
featureGroup.addLayer(e.layer);
});
Any ideas? I don't need to use leaflet draw, just the L.circle would do, but it has the same issue.
Gif of issue here :
Turns out there are a load of todos in the leaflet 0.7 code... including this little gem :
// TODO Earth hardcoded, move into projection code!
_getLatRadius: function () {
return (this._mRadius / 40075017) * 360;
},
_getLngRadius: function () {
return this._getLatRadius() / Math.cos(L.LatLng.DEG_TO_RAD * this._latlng.lat);
},
Updated to 0.8Dev and it has all been fixed!