function addCircles(location,radius,name) {
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: location,
radius: radius
});
circles.push(cityCircle);
i am createing circle like this in gmaps is there simiar kindof option in bing maps???
There are several tools for creating circles in Bing Maps. The most common is to use the getRegularPolygon function in the spatial math module to generate the locations for a circle and then you can create either a polyline or a polygon from it. Here are a bunch of related code samples:
http://bingmapsv8samples.azurewebsites.net/#SpatialMath_Circles
http://bingmapsv8samples.azurewebsites.net/#SpatialMath_DrawCircle
http://bingmapsv8samples.azurewebsites.net/#DrawingTools_CustomToolbar
http://bingmapsv8samples.azurewebsites.net/#SpatialMath_AccuracyCircle
Note that there is a source code button in the top right corner of all the samples.
Related
In leaflet, I can visualize the geojson layers using following script;
L.geoJSON('district.json', {
style: myStyle,
onEachFeature: function(feature, layer) {
layer.bindPopup(feature.properties.name);
}
}).addTo(map);
The above code shows the features on the map and also show the name properties when clicked on map. But what I want is different. I want to hide the feature of the district.json on map, but It should be appear the popup content when I clicked on the feature position. I tried following style;
var myStyle = {
fillColor: rgb(0,0,0,0),
opacity: 0,
strokeOpacity: 0,
}
This will hide the layers, but when I clicked on the map, nothing will popup. Is there any possible styles for this conditions?
You can simply change the value of opacity to 0.01 so that the layer will disappear from the map but there still remaining the popup content.
For this change your myStyle variable in following way;
var myStyle = {
fillColor: rgb(0,0,0,0.01),
opacity: 0.01,
strokeOpacity: 0.01,
}
You could use circle markers as following:
L.geoJSON('district.json', {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {color: 'transparent', fillColor: 'transparent', radius: 20});
},
onEachFeature: function(feature, layer) {
layer.bindPopup(feature.properties.name);
}
}).addTo(map);
This way, you add a transparent, non-visible circle marker for each feature. You can also try different radius values that will lead to larger or smaller clickable areas.
My app needs to show a map within a box defined by
const corner1 = L.latLng(5.21244812011719, -96.5979537963867);
const corner2 = L.latLng(34.086555480957, -55.4220504760742);
const map = L.map(el,
{
crs: L.CRS.EPSG4326,
center: [19.6875, -76.201171875],
zoom: 3.5,
maxBounds: new L.latLngBounds(corner1, corner2),
});
L.tileLayer.wms("http://localhost:8080/wms?", {
layers: 'xxx',
tileSize: 700,
transparent: true,
maxBounds: new L.latLngBounds(corner1, corner2),
bounds: new L.latLngBounds(corner1, corner2)
}).addTo(map)
The thing is that the layer is requesting the tiles starting outside the borders defined (for example, this request was made http://localhost:8080/wms?&service=WMS&request=GetMap&layers=Mano%3AT22&styles=&format=image%2Fjpeg&transparent=true&version=1.1.1&maxBounds=%5Bobject%20Object%5D&time=2018-05-02T00%3A00%3A00.000Z&width=700&height=700&srs=EPSG%3A4326&bbox=-87.71484375,28.4765625,-56.953125,59.23828125 the bbox was -87.71484375, 28.4765625, -56.953125, 59.23828125, this contains the corners defined by me but is not optimal as it is requesting a map area that is not going to be seen on my app)
I need that leaflet request tiles that do not exceed the corners defined. How can I archieve that? Thanks in advance
I am working with the application which uses leaflet api.
Introduction
I needed to draw different types of fences, using decorators i can somewhat apply good visuals to the polylines but not much.
Problem
I was willing to show twisted wires instead of dashes, dots or plain lines and I know the twisted wire line will be an image but can't find help about applying custom css to polylines.
Script Example
var fence2Icon = L.icon({
iconUrl: 'xxxx.png',
iconSize: [5, 20]
iconAnchor: [5, 18]
});
// Add coordinate to the polyline
var polylineFence2 = new L.Polyline([], { color: 'red' });
function fencePlace2(e) {
// New marker on coordinate, add it to the map
new L.Marker(e.latlng, { icon: fence2Icon, draggable: false }).addTo(curr);
// Add coordinate to the polyline
polylineFence2.addLatLng(e.latlng).addTo(curr);
var decorator = L.polylineDecorator(polylineFence2, {
patterns:[{offset:5,repeat:'20px',symbol:new L.Symbol.Dash({pixelSize:5})
}]
}).addTo(curr);
}
L.easyButton('fa-flash', function () {
$('.leaflet-container').css('cursor', 'crosshair');
map.on('click', fencePlace2);
polylineFence2 = new L.Polyline([], { color: 'red' });
}).addTo(map);
If someone know anything about polyline or another way please do help.
Thanks for your time:-)
You can add a class in the options of your polyline ...
var polyline = L.polyline(latlngs, { className: 'my_polyline' }).addTo(map);
and add your own settings in the CSS ...
.my_polyline {
stroke: green;
fill: none;
stroke-dasharray: 10,10;
stroke-width: 5;
}
Here is an example: http://jsfiddle.net/FranceImage/9dggfhnc/
You can also access some options directly ...
var polyline = L.polyline(latlngs, { dashArray: '10,10' }).addTo(map);
See Path Options
If you create a polyline you're in fact adding an element to the SVG element which Leaflet uses to draw it's overlays. Styling SVG path elements is different from styling regular HTML elements. There's no such thing as border and background-color etc. It has different properties, if you're interested here's a nice read on the matter:
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
You can style Leaflet's path elements when you instanciate them via options or via CSS using the properties (related to styling) described in the documentation here:
http://leafletjs.com/reference.html#path
Via options:
new L.Polyline([...], {
weight: 3,
color: 'red',
opacity: 0.5
}).addTo(map);
Via CSS:
new L.Polyline([...], {
className: 'polyline'
}).addTo(map);
.polyline {
weight: 3,
color: red,
opacity: 0.5
}
However, what you want, using an image simply isn't possible. You can use images as fill for SVG paths, but it would be impossible for your usecase. You'de need to add a pattern definition to the SVG Leaflet is using and then you could use that id as the fill property as outlined in this answer:
https://stackoverflow.com/a/3798797/2019281 but will always fill/tile the image horizontally which won't work if your polyline is vertical.
I am trying to set style for related layers in a featureGroup using Leaflet API, here is my code:
var highlightStyle = {
color: '#9b1d41',
weight: 3,
opacity: 0.6,
fillOpacity: 0.65,
fillColor: '#9b1d41'
};
$wnd.mapareas.eachLayer(function(layerOnMap) {
layerOnMap.setStyle(highlightStyle);
console.log(layerOnMap);
});
I could see in the log that layer has new set style , but its not visible on map, like color is not changed.
For GeoJSON layers (which are FeatureGroups) you could do like this
new L.GeoJSON(mp, {
style: highlightStyle
});
For standard FeatureGroup
new L.FeatureGroup([mp1, mp2]).setStyle(highlightStyle);
I am working with Open Street Maps and using leaflet library.
I have a layer group like this:
var testLayer = new L.LayerGroup(); --> declared in a different file
I want to add markers to a marker group, add a circle around each marker, and add the marker group to the map:
var realMarker = L.marker([52.6432, -6.53412 ],{icon: Icon,title:data[choice][key]["name"]
}).bindPopup("Dublin").addTo(testLayer);
var circle = L.circle([52.6432, -6.53412 ],400, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(testLayer);
map.addLayer(testLayer);
However, when I delete a particular marker from the marker group by using removeLayer(), the marker is removed from the map but the circle is left behind. How can I delete the circle along with the marker?
I'd store a reference to the circle in the marker:
var realMarker = L.marker([52.6432, -6.53412 ],
{icon: Icon,title:data[choice][key]["name"]}
).bindPopup("Dublin").addTo(testLayer);
var circle = L.circle([52.6432, -6.53412 ],400, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(testLayer);
realMarker.circle=circle;
map.addLayer(testLayer);
Then, when removing the marker, also remove its circle
testLayer.removeLayer(markerToRemove);
testLayer.removeLayer(markerToRemove.circle);