Leaflet - Custom Control Layer Button - javascript

I am kinda stumped on this. The code below works correctly to create a set of gridlines. I would like to set it up so that I can turn them on and off under the overlay/control layers box. How would I go about turning this code on and off using a check box in the control box?
Thank you!
//Grid lines
var hold = 0
for (let i = 0; i <17; i++) {
var pointA = map.unproject([hold, 0], map.getMaxZoom());
var pointB = map.unproject([hold, 8192], map.getMaxZoom());
var pointList = [pointA, pointB];
var firstpolyline = new L.Polyline(pointList, {
color: 'grey',
weight: 4,
opacity: 0.8,
smoothFactor: 1
});
firstpolyline.addTo(map);
var pointA = map.unproject([0, hold], map.getMaxZoom());
var pointB = map.unproject([8192, hold], map.getMaxZoom());
var pointList = [pointA, pointB];
var firstpolyline = new L.Polyline(pointList, {
color: 'grey',
weight: 4,
opacity: 0.8,
smoothFactor: 1
});
firstpolyline.addTo(map);
hold = hold + 512
}```

You can create a FeatureGroup and add to them the layers and then you can add the FeatureGroup to the LayersControl.
var fg = L.featureGroup().addTo(map); // If you want to hide it initial remove .addTo(map)
yourLayerControlVariable.addOverlay(fg);
...
firstpolyline.addTo(fg);

Related

OpenLayers 2 - Set fill and opacity to Polygon Style

My goal is to use for different shapes (Triangle, Circle, Square, Hexagon etc.) different fill colors and opacity values for each shape.
With the below code I can draw the shapes, set different titles and stroke colors. But I'm not able to set the fill color and the opacity values.
I checked the documentation and its looks like I could achieve this with "fillColor" and "fillOpacity" but it doesn't works.
function GetLonLatObj(lat, lon){
var lonLat = new OpenLayers.LonLat( lon ,lat )
.transform(
new OpenLayers.Projection("EPSG:4326"), // Transformation aus dem Koordinatensystem WGS 1984
map.getProjectionObject() // in das Koordinatensystem 'Spherical Mercator Projection'
);
return lonLat
}
var points = []
var fontColor = "blue";
var title = "Test";
var map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
var zoom=16;
latLonPoint = GetLonLatObj("46.76", "7.606944444444444");
latLonPoint2 = GetLonLatObj("46.735", "7.543055555555555");
latLonPoint3 = GetLonLatObj("46.7169444", "7.569166666666667");
latLonPoint4 = GetLonLatObj("46.76", "7.606944444444444");
latPoint = latLonPoint.lat
lonPoint = latLonPoint.lon
latPoint2 = latLonPoint2.lat
lonPoint2 = latLonPoint2.lon
latPoint3 = latLonPoint3.lat
lonPoint3 = latLonPoint3.lon
latPoint4 = latLonPoint4.lat
lonPoint4 = latLonPoint4.lon
//var point = new OpenLayers.Geometry.Point(828260.4259880, 5933577.75538379);
point = new OpenLayers.Geometry.Point(lonPoint, latPoint);
point2 = new OpenLayers.Geometry.Point(lonPoint2, latPoint2);
point3 = new OpenLayers.Geometry.Point(lonPoint3, latPoint3);
point4 = new OpenLayers.Geometry.Point(lonPoint4, latPoint4);
points.push(point);
points.push(point2);
points.push(point3);
points.push(point4);
var selected_polygon_style = {
strokeWidth: "3",
strokeColor: fontColor,
fontColor: "red",
fontSize: "16px",
fontWeight: "bold",
fontColor: "black",
label: title
};
vectorLayer = new OpenLayers.Layer.Vector();
vectorLayer.style = selected_polygon_style;
//map.addLayers([vector]);
vectorLayer.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(points))]);
map.addLayers([vectorLayer]);
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(latLonPoint));
map.setCenter (latLonPoint, zoom);
<script src="https://buhli.dyndns.org:444/openlayers.js"></script>
<html>
<body>
<div id="mapdiv"></div>
</body>
</html>
Can someone help me here?
Thank you very much and best regards
The problem was the LineString in the follow command.
vectorLayer.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(points))]);
I could fix it with it as I replaced with LinearRing.
A LinearRing is a special LineString which is closed. A LineString can but must not be closed.

Openlayer 2 set label to middle of vector line

Guys I used Openlayer 2 for creating a layer on Google map.
I draw a Vector Line using Openlayer 2 and I want to set label middle of that line.
below is my code.
var ol = new OpenLayers.Layer.OSM();
var vector = new OpenLayers.Layer.Vector( "Lines" );
for (var i = 0; i < fromtoLatlngObject.data.length; i++) {
var start_point = new OpenLayers.Geometry.Point(fromtoLatlngObject.data[i].from.lng,fromtoLatlngObject.data[i].from.lat);
var end_point = new OpenLayers.Geometry.Point(fromtoLatlngObject.data[i].to.lng,fromtoLatlngObject.data[i].to.lat);
var firstLine = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([start_point, end_point]).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")));
vector.addFeatures([
firstLine
]);
}
var selected_polygon_style = {
strokeWidth: 2,
strokeColor: 'blue',
fontColor: "red",
fontSize: "16px",
fontFamily: "arial, monospace",
fontWeight: "bold",
fontColor: "green",
label: "To: test",
labelAlign: "cm"
};
vector.style = selected_polygon_style;
map.addLayers([ol,vector]);
var markers = new OpenLayers.Layer.Markers( "Marker" );
map.addLayer(markers);
for (var i = 0; i < latlngObj.data.length; i++) {
addMarker(latlngObj,map,markers,i);
}
}
as per Openlayer 2 Document we can set the labelAlign like.
labelAlign: "cm",
I set the labelAlign but not working also you can check in document.
http://dev.openlayers.org/apidocs/files/OpenLayers/Feature/Vector-js.html
or you can also see in the demo given by the Openlayer 2.
http://dev.openlayers.org/examples/vector-features-with-text.html
Thanks

OpenLayers.source is undefined - Open layers,Open Street map

I was planning to draw polygon from lat long values referring this code.
open layers 3 how to draw a polygon programmically?
var polyCoordinates =[[1.300910900488229, 44.28372648003116],[1.3373031124022878, 44.13311552125895],[1.6648330196289067, 44.12030076099872]];
var polygon = new OpenLayers.Geometry.Polygon([polyCoordinates]);
// Create feature with polygon.
var feature = new OpenLayers.Feature(polygon);
// Create vector source and the feature to it.
var vectorSource = new OpenLayers.source.Vector();
// Create the vectorial layer
var vectorLayer = new OpenLayers.Layer.Vector('Vector Layer', {
source: vectorSource
styleMap: new OpenLayers.StyleMap({
'default': OpenLayers.Util.applyDefaults({
strokeWidth: 3,
graphicName: 'triangle',
pointRadius: '${radius}',
rotation: '${angle}'
}, OpenLayers.Feature.Vector.style['default']
),
'select': OpenLayers.Util.applyDefaults({
pointRadius: '${radius}'
}, OpenLayers.Feature.Vector.style['select']
)
})
});
OpenLayers.source is undefined is showing as error. Any help would be appreciated.
var sitePoints = [];
var coordinates =[{"long":1.300910900488229,"lat":44.28372648003116},
{"long":1.3373031124022878,"lat":44.13311552125895},
{"long":1.6648330196289067,"lat":44.12030076099872}];
var siteStyle = {
label:'ring',
title: 'press to close as a ring',
cursor: "pointer",
fontSize: '8px',
fontColor: '#222',
pointRadius: 10,
fillColor: '#cccccc',
strokeColor: '#444444'
};
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
for (var i in coordinates) {
var coord = coordinates[i];
var point = new OpenLayers.Geometry.Point(coord.long, coord.lat);
// transform from WGS 1984 to Spherical Mercator
point.transform(epsg4326, map.getProjectionObject());
sitePoints.push(point);
}
console.log(sitePoints);
var linearRing = new OpenLayers.Geometry.LinearRing(sitePoints);
var geometry = new OpenLayers.Geometry.Polygon([linearRing]);
var polygonFeature = new OpenLayers.Feature.Vector(geometry, null, siteStyle);
vectorLayer.addFeatures([polygonFeature]);
map.addLayer(vectorLayer);
Here is a proper way to do this in OpenLayers 3, which has a different API than previous versions.
var polyCoordinates =[
[1.300910900488229, 44.28372648003116],
[1.3373031124022878, 44.13311552125895],
[1.6648330196289067, 44.12030076099872]];
var polygon = new ol.geom.Polygon([polyCoordinates]);
polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857'));
// Create feature with polygon.
var feature = new ol.Feature({
geometry: polygon
});
// Create vector source and the feature to it.
var vectorSource = new ol.source.Vector({
features: [feature]
});
// Create the vectorial layer
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#eedd00',
width: 3
})
})
});
Edit: If you stick with OpenLayers 2, you need to create the polygon via linear ring. The setup is a little bit different. There is no OpenLayers source to deal with.
var polyCoordinates =[
[1.300910900488229, 44.28372648003116],
[1.3373031124022878, 44.13311552125895],
[1.6648330196289067, 44.12030076099872]];
// Create the polygon via linear ring
var points = [];
for (var i = 0; i < polyCoordinates.length; i++) {
coord = polyCoordinates[i];
points.push(new OpenLayers.Geometry.Point(coord[0], coord[1]));
}
var linearRing = new OpenLayers.Geometry.LinearRing(points);
var polygon = new OpenLayers.Geometry.Polygon([linearRing]);
var srcProj = new OpenLayers.Projection("EPSG:4326");
var targetProj = new OpenLayers.Projection("EPSG:3857");
polygon.transform(srcProj, targetProj);
// Create feature with polygon.
var feature = new OpenLayers.Feature.Vector(polygon);
// Create the vectorial layer
var vectorLayer = new OpenLayers.Layer.Vector('Vector Layer',
OpenLayers.Feature.Vector.style['default']
);
vectorLayer.addFeatures([feature]);

leafletjs: polyline list into geojson

i have list of polylines. i want to make it more organized. how can i make my polyline list into the GeoJSON?
var point1 = new coordsToLatLngArray(0, 100);
var point2 = new coordsToLatLngArray(200, 150);
var point3 = new coordsToLatLngArray(400, 70);
var point4 = new coordsToLatLngArray(10, 70);
var point5 = new coordsToLatLngArray(90, 50);
var pointList = [point1, point2, point3, point4, point5];
var firstpolyline = new L.polyline(pointList, {
color: 'red',
weight: 3,
opacity: 0.5,
smoothFactor: 1
});
firstpolyline.addTo(map);
i have trying to work with: http://leafletjs.com/examples/geojson.html
but it didn't work. my line were outside the map:
var geojsonFeature = [{
"type": "LineString",
"coordinates":
[
[0,0],
[-100,100]
]
}];
var myStyle = {
"color": "#ff7800",
"weight": 5,
"opacity": 0.65
};
var myLayer = L.geoJson(coordsToLatLngArray(), {style: myStyle }).addTo(l);
myLayer.addData(geojsonFeature);
Demo of the problem:
http://jsfiddle.net/n4k1psuh/
There will only be passed a single argument to coordsToLatLngArray, an array:
[longitude,latitude]
The function must look like this:
var coordsToLatLngArray = function(c) {
var e = fixLat(c[1]),
t = c[0],
n = e / latScale + latScaleVal / 2 / latScale,
r = t / longScale + longScaleVal / 2 / longScale;
return [-n, r]
};
Note: in geoJSON a coordinate has a reversed order, [longitude,latitude], so the coordinates must be:
[
[100, 0],
[150, 200],
[70,400],
[70,10],
[50,90]
]
to draw the feature call:
var myLayer = L.geoJson(geojsonFeature, {
style: myStyle,
coordsToLatLng:coordsToLatLngArray
}).addTo(l);
Demo: http://jsfiddle.net/Ltaw5teo/

Drawing animated openlayers linestring path

I have seen an impressive mapping example on http://jerusalem.com/map#!/tour/the_way_of_the_cross/location/abu_jaafar, Does anybody how a similar animation on the drawn path of the points can done using openlayers?
The following fiddle shows the linestrings http://jsfiddle.net/pwuVz/58/ but I need is to be able to animate the line string itself so that the string is not directly drawn.
var map = new OpenLayers.Map( 'map', {theme:null,
controls:[new OpenLayers.Control.Navigation()]} );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'} );
map.addLayer(layer);
map.setCenter([3, 49], 5);
var startPt=new OpenLayers.Geometry.Point( 2, 45);
var endPt=new OpenLayers.Geometry.Point(7,55);
//make the line:
var line=new OpenLayers.Geometry.LineString([startPt, endPt]);
//style
var style={strokeColor:"#0500bd", strokeWidth:15, strokeOpacity: 0.5, strokeColor: '#0000ff'};
//make vector
var fea=new OpenLayers.Feature.Vector(line, {}, style);
//make vectorLayer
var vec= new OpenLayers.Layer.Vector();
//add the feature
vec.addFeatures([fea]);
//add to map
map.addLayer(vec);
setTimeout(function() {
var startPt=new OpenLayers.Geometry.Point( 7, 55);
var endPt=new OpenLayers.Geometry.Point(13,52);
//make the line:
var line=new OpenLayers.Geometry.LineString([startPt, endPt]);
//style
var style={strokeColor:"#0500bd", strokeWidth:15, strokeOpacity: 0.5, strokeColor: '#0000ff'};
//make vector
var fea=new OpenLayers.Feature.Vector(line, {}, style);
//make vectorLayer
var vec= new OpenLayers.Layer.Vector();
//add the feature
vec.addFeatures([fea]);
//add to map
map.addLayer(vec);
}, 2000);
You can animate it by drawing only one part of the line at a time. Here is one way you could do it:
function drawAnimatedLine(startPt, endPt, style, steps, time, fn) {
var directionX = (endPt.x - startPt.x) / steps;
var directionY = (endPt.y - startPt.y) / steps;
var i = 0;
var prevLayer;
var ivlDraw = setInterval(function () {
if (i > steps) {
clearInterval(ivlDraw);
if (fn) fn();
return;
}
var newEndPt = new OpenLayers.Geometry.Point(startPt.x + i * directionX, startPt.y + i * directionY);
var line = new OpenLayers.Geometry.LineString([startPt, newEndPt]);
var fea = new OpenLayers.Feature.Vector(line, {}, style);
var vec = new OpenLayers.Layer.Vector();
vec.addFeatures([fea]);
map.addLayer(vec);
if(prevLayer) map.removeLayer(prevLayer);
prevLayer = vec;
i++;
}, time / steps);
}
The time argument specifies how long you want the animation to last (in milliseconds), and the steps specifies how many steps you want to divide the animation into. fn is a callback that will be executed when the animation is complete.
Here is a jsFiddle demo that demonstrates this.

Categories

Resources